Hexo 折腾笔记

发表于 | 更新于 | 分类于 ， ， | 阅读次数
| 字数统计 1,746 | 阅读时长 7

因为工作生活学习等种种方面的问题，差不多快两年没有折腾博客了，之前的 wordpress 上放了几篇随手的笔记，但是后来由于种种原因，没有精力进行维护和更新，但是也舍不得关停，每个月续续费而已。在这段时间里面也接触了 markdown 和 hexo，轻量级的页面，轻量级的部署，给我留下了不少印象，于是选用了 hexo 从头开始。花了一个晚上给部署了起来，这里做一简单记录。

快速上手和常见问题

下载安装及基本使用

这里参考官方文档即可。

切换主题

选择使用 Next 主题替换默认的 landscape 主题，具体可以参考 Next 官方文档。后续的操作均在 Next 主题中进行操作。

部署至 github 并绑定自己的域名

部署可以参考这篇文档进行部署，没什么难度。唯一要注意的是对于多账号多博客而言，需要配置一下私钥的使用范围。具体可以参考多个 SSH KEY 的管理

第一个账号的 ssh key 增加方式直接参考 github 官方文档进行操作即可:

  1. 生成公私钥对 ssh-keygen -t rsa -b 4096 -C "[email protected]",然后添加私钥至 ssh 管理器 ssh-add ~/.ssh/id_rsa，然后增加至 github 上即可 sudo apt-get install xclip，xclip -sel clip < ~/.ssh/id_rsa.pub。在博客目录下配置时也一切正常，user.name 和 user.email 都设置为局部参数。

  2. 第二个账号在生成公私钥对时需额外指定名称，否则会出现名称重复的问题。

    1
    2
    3
    4
    ssh-keygen -t rsa -b 4096 -C "[email protected]" -f ~/.ssh/second
    ssh-add ~/.ssh/second                   # 新增私钥
    ssh-add -l                              # 确认是否添加成功，此时应有两个私钥
    xclip -sel clip < ~/.ssh/second_rsa.pub # 复制公钥，打开 github 设置并输入复制的公钥

    然后在 ~/.ssh/ 目录下新建 config 文件，用于配置各个公私钥对应的主机

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Default github user([email protected])  默认配置，一般可以省略
    Host github.com
    Hostname github.com
    User git
    Identityfile ~/.ssh/github
    # second user([email protected])  给一个新的Host称呼
    Host second.github.com  // 主机名字，不能重名
    HostName github.com   // 主机所在域名或IP
    User git  // 用户名称
    IdentityFile C:/Users/username/.ssh/id_rsa_second  // 私钥路径

    配置完成后测试连接情况 ssh -T [email protected]，若能正常连接，则在使用第二个账号时使用方式类似 git clone [email protected]:username/repo.git，亦即将本应当为 github.com 的部分设置为与我们的 config 文件中的 Host 一致的 second.github.com。

另外一个问题，由于需要绑定自定义域名，需要明确转发规则。在正确设置了绑定的自定义域名，并在域名管理器中修改 DNS 解析后，即可正常访问。但是，会发现每次使用 hexo d 命令进行部署后，都需要在 github repo 的 setting 中重新设置一次自定义域名绑定，这个可以通过在 source 目录下新增 CNAME 文件，在其中写上需要的自定义域名如 abc.com，以后重新部署时就不会有这个问题了。

最后，由于 github 不支持自定义域名的 https 协议，可以使用 cloudflare 进行加速并启用对 https 的支持。这个也有很多教程，注册 cloudflare 后，添加站点即可完成。在过程中需要按照 cloudflare 的指示，在域名服务商处修改默认的 dns 服务器。

增加 UV、PV 统计功能

使用的 Next 主题早已帮我们提供了内置的选项，在 themes/next/_config.yml 文件中进行配置即可。配置 enable 使用不蒜子统计站点的 UV 值，注册 leancloud 账号获取 app_id 和 app_key 来统计页面的 PV 值。注意这里由于 leancloud 的 app_id 和 app_key 都会出现在前端，因此需要配置好对应 leancloud 应用的安全权限，具体可以参考此处。

增加评论功能

虽然之前不用 hexo，但是多说关闭事件也略有耳闻，为了保证可靠性，决定使用基于 github issues 的 gitcoment 来提供评论服务。具体参考了为 hexo NexT 添加 Gitment 评论插件，摘录如下：

  1. 配置样式文件

    在 next/source/css/_common/components 目录中新建一个 gitment.styl 的 css 样式文件, 复制以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    .gitment_title:hover {
        color: #fff;
        background: #0a9caf;
        background-image: initial;
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat-x: initial;
        background-repeat-y: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: rgb(10, 156, 175);
    }
    .gitment_title {
        border: 1px solid #0a9caf;
        border-top-color: rgb(10, 156, 175);
        border-top-style: solid;
        border-top-width: 1px;
        border-right-color: rgb(10, 156, 175);
        border-right-style: solid;
        border-right-width: 1px;
        border-bottom-color: rgb(10, 156, 175);
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-left-color: rgb(10, 156, 175);
        border-left-style: solid;
        border-left-width: 1px;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        border-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .gitment_title {
        display: inline-block;
        padding: 0 15px;
        padding-top: 0px;
        padding-right: 15px;
        padding-bottom: 0px;
        padding-left: 15px;
        color: #0a9caf;
        cursor: pointer;
        font-size: 14px;
    }

  2. 添加 gitment 插件。

    打开 /next/layout/_partials/comments.swig 文件, 在最后一个 elseif 代码块下面添加 Gitment 的内容。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    ... // 上面内容省略了..
    {% elseif theme.changyan.appid and theme.changyan.appkey %}
      <div id="SOHUCS"></div>
    {% elseif theme.gitment.enable %}
      <div onclick="showGitment()" id="gitment_title" class="gitment_title">显示 Gitment 评论</div>
      <div id="container" style="display:none"></div>
      <link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
      <script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
      <script>
      const myTheme = {
        render(state, instance) {
          const container = document.createElement('div');
          container.lang = "en-US";
          container.className = 'gitment-container gitment-root-container';
          container.appendChild(instance.renderHeader(state, instance));
          container.appendChild(instance.renderEditor(state, instance));
          container.appendChild(instance.renderComments(state, instance));
          container.appendChild(instance.renderFooter(state, instance));
          return container;
        }
      }
      function showGitment() {
        $("#gitment_title").attr("style", "display:none");
        $("#container").attr("style", "").addClass("gitment_container");
        var gitment = new Gitment({
          id: window.location.pathname,
          theme: myTheme,
          owner: '{{ theme.gitment.owner }}',
          repo: '{{ theme.gitment.repo }}',
          oauth: {
            client_id: '{{ theme.gitment.client_id }}',
            client_secret: '{{ theme.gitment.client_secret }}'
          }
        });
        gitment.render('container');
      }
      </script>
    {% endif %}

  3. 修改主题配置文件 _config.yml，在评论区添加下列代码，并根据 gitment 文档来添加相应的值。

    1
    2
    3
    4
    5
    6
    7
    # Gitment comments
    gitment:
      enable: true
      owner: xxxx
      repo: xxxx
      client_id: xxxx
      client_secret: xxxx

更新后本地生效但远端未生效

尝试使用 hexo clean 然后再 hexo d -g 进行部署，浏览器使用 ctrl+F5 强制刷新缓存，再测试应该就正常了。

文章加密

可以使用 hexo-blog-encrypt 对文章进行加密。

细节配置

基本功能都正常后，剩下的就是敲敲打打对博客进行完善了，这时候很有必要把博客的整个体系，以及其配置文件拿出来一个个分析一下，毕竟在过程中已经发现像 next 之类的主题有着强大的第三方插件功能了。下面一个个来分析。

先看站点配置。

站点图标 favicon

支持 16×16,32×32,48×48,64×64 的 ico 文件，将 favicon.ico 放至站点的 sources 文件夹下。

##

显示 Gitment 评论
0%