github pages/hexo搭建精致博客

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

安装node环境

请移步 nodeJS中文网open in new window

安装git

请移步 起步 - 安装 Gitopen in 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

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

持续更新中。。。

个人博客：午后南杂open in new window