github pages/hexo搭建精致博客

12/20/2017 hexo

由于hexo是基于node的框架,所以关于web前端的知识我不会讲太细,如果你是python工程师、ruby工程师,都有其对应的框架,简化搭建博客的难度,不用在hexo上过分用心. 因为直到现在我才明白,我花费了很多心思搞服务器、弄域名、学后台语言,为的是自己搞一个网站,然而却忽略了最为重要的是内容

# 安装node环境

请移步 nodeJS中文网 (opens new window)

# 安装git

请移步 起步 - 安装 Git (opens new window)

# 全局安装hexo并初始化一个工程

过程与安装大部分脚手架工具一样类似,工具可以使用命令行工具或git bash

  1. 全局安装hexo
    $ npm install hexo-cli -g
    
  2. 进入一个文件夹(你想把工程放到哪个文件夹就进入哪个文件夹,我的是 D:/files/hexo ),初始化一个工程
    $ hexo init yourProjectName
    
  3. 进入你的工程,安装需要的资源
    $ cd blog
    $ npm install
    
  4. 启动你的工程,默认监听4000端口,打开 localhost:4000 便可以访问到
    $ hexo server
    
  5. 常用的命令就四个
    • hexo clean 清空缓存
    • hexo generate 简写hexo g,生成静态文件
    • hexo serve 简写hexo s,启动一个服务,将本地静态文件可视化
    • hexo deploy 简写hexo d,发布

这时候一个最原始的hexo博客就搭建好了。

# 安装主题

可以去官方主题库区找,也可以去百度一下信誉比较好的主题,这个根据自己的喜好选择就行。

  1. 安装。主题一般都是托管在GitHub,可以直接将主题直接clone到你的工程下的themes文件夹下,也可以下载压缩包解压到themes文件夹下。
  2. 配置。打开_config.yml(主题文件夹内还有一个_config.yml,不要弄混)文件进行设置,比如你安装好的主题的文件夹叫themeABC,那就将theme设置为themeABC

# 发布到自己的GitHub pages

pages分两种,一种是对应自己的GitHub账号,一种对应GitHub上的一个工程,现在我们讲的是对应自己GitHub账号的那种。

  1. 创建。创建一个工程,格式为 nickname.github.io ,我的GitHub昵称叫做recoluan,所以我的pages名字叫做 recoluan.github.io
  2. 配置。打开_config.yml,配置自己的工程。
    deploy:
      type: git
      repo: git@github.com:recoluan/recoluan.github.io.git
      branch: master
    
  3. 在你的本体工程下使用命令行工具发布到 GitHub 工程,并使用 nickname.github.io 访问。
    $ hexo g
    $ hexo d
    

# 绑定域名

  1. 解析域名。在你的域名服务平台的控制台进行解析,设置两条记录,记录的类型都选择 CNAME,记录值都选择 nickname.github.io ,主机记录一条为空,另一条填写 www。
  2. 设置pages。在github上打开你的工程,点击 Settings ,然后找到 GitHub Pages 下的 Custom domain ,填写你的 www 域名,点击 save 保存,这时域名就可以访问到你的网站了。
  3. 修复本地工程。GitHub工程里会出现一个CNAME文件里面写着你域名,见这个文件放到你的本地工程的所用主题下的source文件夹下,不然下次发布时会清空这个文件。

# 使用gitment添加评论功能

  1. 注册 OAuth Apps。代开你的 GitHub 的设置,然后在左边菜单栏最下方找到 Developer settings 选项,点击进去找到 OAuth Apps,添加新的账号,其中“Application name”对应的你的Pages地址,我的是 recoluan.github.io ,“Homepage URL”和“Authorization callback URL”对应的是域名,我的是 http://www.recoluan.com ,这样会生成client_id和client_secret。
  2. 配置_config.yml。
    gitment:
      enable: true
      owner: recoluan
      repo: recoluan.github.io
      client_id: your client_id
      client_secret: your client_secret
      perPage: 10
    
  3. 将前端代码放到文章页或者专门的评论页
    <% if(theme.gitment.enable && is_post()) { %>
        <script type="text/javascript" src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
        <script>
        var gitment = new Gitment({
            id: window.location.pathname,
            owner:"<%= theme.gitment.owner%>",
            repo:"<%= theme.gitment.repo%>",
            oauth: {
              client_id:"<%= theme.gitment.client_id%>",
              client_secret:"<%= theme.gitment.client_secret%>"
            },
            perPage:"<%= theme.gitment.perPage%>",
        });
        gitment.render('comments');
        </script>
    <% } else { %>
       <p>评论系统未开启,无法评论!</p>
    <%}%>
    

# jsonContent配置

  1. 首先安装hexo-generator-json-content
    hexo-generator-json-content 
    
  2. 然后在当前主题中的 _config.yml 中配置
    ## 搜索
    jsonContent:
      searchLocal: true
      searchGoogle: false
      meta: false
      pages: false
      posts:
        title: true
        date: true
        path: true
        text: true
        raw: false
        content: false
        slug: false
        updated: false
        comments: false
        link: false
        permalink: false
        excerpt: false
        categories: false
        tags: true
    

# 设置banner图

banner:
    img: /img/banner.jpg

这里注意,/代表的是根目录,项目会去根目录去寻找,否则会自动在当前目录为基础寻找。

# 持续更新中。。。

个人博客:午后南杂 (opens new window)

Last Updated: 5/30/2020, 12:30:10 AM