Hexo 折腾笔记

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

快速上手和常见问题

下载安装及基本使用

这里参考官方文档即可。

切换主题

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

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

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

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

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

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

    1
    2
    3
    4
    ssh-keygen -t rsa -b 4096 -C "your_email@example.com" -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(first@mail.com)  默认配置,一般可以省略
    Host github.com
    Hostname github.com
    User git
    Identityfile ~/.ssh/github
    # second user(second@mail.com) 给一个新的Host称呼
    Host second.github.com // 主机名字,不能重名
    HostName github.com // 主机所在域名或IP
    User git // 用户名称
    IdentityFile C:/Users/username/.ssh/id_rsa_second // 私钥路径

    配置完成后测试连接情况 ssh -T git@second.github.com,若能正常连接,则在使用第二个账号时使用方式类似 git clone git@second.github.com: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 文件夹下。

来源:https://secretwiki.org/2017/06/15/Notes-on-Hexo/

来了,老弟
-------------    本文结束  感谢您的阅读    -------------
0%