博客搭建日志

鼓捣了两天多的时间，终于把博客初步搭建好了，功能基本上都OK了，如果还想要别的（比如google analytics），就以后再加啦。

关于使用jekyll还是hexo

jekyll和hexo是两个比较常用的静态网页框架，但是二者的体验是完全不一样的。这两天半的时间我主要是花在了jekyll上，使用的主题说明文档虽然很详细，但是涉及到的网页前端的底部知识太多了，依赖环境ruby也老是出问题，搞了老半天，搞了个半成品，地址在失败作品，只有简单的功能，因为复杂的功能都没加成功T_T

hexo就不一样了，它的开发文档很详细，而且操作很简单高效，加上用户群体多，社区体验很好，很多问题都能找到解决方案，因此使用hexo还是很好的。

搭建步骤

jekyll的搭建步骤就不详述了，太麻烦，而且我也没完全成功，这里主要记录一下使用hexo搭建博客的过程吧。

具体步骤是参考了基于Ubuntu搭建Hexo个人博客，这里加上了一些自己遇到的问题。

一、环境准备

1. 安装Git

sudo apt install git-core -y

2. 安装Node.js

因为我在之前捣鼓jekyll的时候已经把这俩装好了，所以前面参考的博客里面的那三句话能不能用我也不晓得，就不记录了。

二、 安装Hexo并初始化模板

1. 安装npm

Hexo的相关依赖和包使用npm来安装的，因此要先安装npm，使用淘宝的源：

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安装Hexo

创建一个自己的网页文件夹，例如我的是ZhenChengUSTC.github.io文件夹，cd到改文件夹下，执行下述命令安装Hexo：

npm install -g hexo-cli

注意使用上述两个npm命令时，最好加上sudo权限，否则会出现权限不足的问题

3. 初始化Hexo文件夹

在该文件夹下初始化Hexo的模板：

hexo init

此时如果hexo安装所需的依赖没有安装，它会自动安装，只需要耐心等待。

4. 预览Hexo网页

init结束之后，文件夹底下就已经有一个名为landscape的模板了，比较丑，但是我们可以预览一下确认Hexo安装是否正确：

hexo server

hexo server默认端口是4000,如果端口被占用，可以更改端口或者解除占用，参考Ubuntu下用hexo搭建github博客，这里不再赘述。

三、更改主题

初始的主体不太好看，我选择了yelee主题，这个主体比较符合我的审美而且有完整的中文说明文档，很方便，具体步骤：

1. git clone主题文件

git clone git@github.com:MOxFIVE/hexo-theme-yelee.git themes/yelee

2. 更改主题文件

更改hexo/_config.yml中的theme: landscape为theme: yelee，再用hexo server就可以预览新主题。

四、部署到github

首先自己的github上要已经申请好了repo，repo的名称为username.github.io

1. 安装部署插件

npm install hexo-deployer-git --save

2. 配置git

deploy:
  type: git
  repo: https://github.com/username/username.github.io
  branch: master

3. 生成和部署

hexo g # or hexo generate，用于生成静态网页
hexo d # or hexo deploy，用于部署到github

4. 修改和添加内容之后

修改和添加内容之后，需要更新网页，进行再部署，首先要清空public/下的文件，然后重新生成部署：

hexo clean
hexo g
hexo d

通过上述命令即可完成部署了，在username.github.io上就可以看到自己的网页啦，bravo！

功能添加和改动

其他的简单功能在yelee的官方文档中已经有了详细的说明和指导，这里不再细述，主要讲一下自己添加的一些功能。

一、评论

评论功能是我放弃网易云笔记创建博客的初衷，希望能够促进技术交流。但是之前在使用jekyll的时候评论功能始终无法部署成功，因此选择了更简易的hexo，yelee默认支持的几个评论平台是Disqus、多说以及友言评论，Disqus需要翻墙，加载很慢，遂放弃，后两者好像已经停止服务了，因此默认支持的都不太行，所以我改成了使用gitalk，体验还可以。记录一下主要步骤和问题（参考链接为yelee使用gitalk）：

1. 注册github OAuth application

因为gitalk是使用github的API实现评论的，评论内容实际上是保存在issue里面的，在链接OAuth application申请申请一个API，记下clientID和clientSecret，后面有用。

2. 修改主题配置文件

在theme/yelee文件夹底下的_config.yml中添加下面的语句：

gitalk:
  on: true
  clientID: 'your client ID'
  clientSecret: 'your clientSecret'
  repo: 'username.github.io' # 仓库地址
  owner: 'username' # 拥有者
  admin: ['username'] # admin 用户

3. 创建页面描述文件

在theme/yelee/layout/_partial/comments下创建gitalk.ejs，文件内容如下：

<section id='comments' style='margin: 2em; padding: 2em; background: rgba(255, 255, 255, 0.5)'>
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script>
  <div id="gitalk-container"></div>
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '<%= theme.gitalk.clientID %>',
      clientSecret: '<%= theme.gitalk.clientSecret %>',
      repo: '<%= theme.gitalk.repo %>',
      owner: '<%= theme.gitalk.owner %>',
      admin: ['<%= theme.gitalk.owner %>'],
      id: window.location.pathname
    })
    gitalk.render('gitalk-container')
  </script>
</section>

4. 修改_partial/article.ejs

打开theme/yelee/layout/_partial/article.ejs，将gitalk组件加入文章的comment组件中去：

<% if (!index && post.comments){ %>
    <% if (theme.duoshuo.on) { %>
      <%- partial('comments/duoshuo', {
          key: post.path,
          title: post.title,
          url: config.url+url_for(post.path),
          }) %>
    <% } else if (theme.youyan.on) { %>
        <%- partial('comments/youyan') %>
    <% } else if (theme.disqus.on) { %>
        <%- partial('comments/disqus', {
            shortname: theme.disqus.shortname
          }) %>
    <% } else if (config.disqus_shortname) { %>
        <%- partial('comments/disqus', {
            shortname: config.disqus_shortname
          }) %>
+    <% } else if (theme.gitalk.on) { %>
+        <%- partial('comments/gitalk') %>
    <% } %>
<% } %>

5. 链接github issue以及修改长度

在这些文件修改完毕之后，就可以看到本地的网页上有gitalk显示了，但是本地部署的时候会提示没有关联到相关的github issue，这是因为本地部署的问题，这时候需要部署到github网页上，点击下方的登录github并关联，关联一下之后就可以了。

但是这样还会有一个小问题，那就是会在评论栏报一个错，导致无法评论，错误为

Error: Validation Failed

这是因为issue的标签label有长度限制，而我们前面在1-4步时加入的label太长了，因此，将步骤3中的id: window.location.pathname改为id: ‘<%= page.date %>’，部署到网站之后，即可完成评论功能的添加。

二、其他功能

其他功能还未添加，例如google analytics以及其他花里胡哨的功能，暂时不需要这样的功能，因此等有闲余时间想折腾了再来搞吧。