利用 Hexo + Coding 搭建博客

先来个“菜单”,以供读者能够各取所需:

  1. 安装 Hexo
  2. 安装 NexT 主题
  3. 将博客托管到 Coding 提升国内访问速度
  4. 集成评论系统 Gitment
  5. 个性化配置

以下所有的操作都是在 Mac 上完成的,Linux 用户操作与 Mac 类似,Windows 系统上可能有些差异

安装 Hexo

预装软件

Hexo 是一个由 Node.js 强力驱动的轻量极速而又不失强大功能的博客系统。(GitHub:https://github.com/hexojs/hexo)

安装 Hexo 需要预装一些软件:

  • 安装 Git:Mac 用户用户可以略去这一步,因为系统已经内置了

  • 安装 Node.js:建议通过 Homebrew 来安装 Node.js,方便管理版本

    • Homebrew 是 macOS上一个功能强大的缺失的软件包管理器,关于 Homebrew 的安装和使用,可以前往极客学院的这篇文章观摩一下。

    • Homebrew 安装完成之后,在 Terminal(终端) 中输入 $ brew install node,等待安装成功

    • Node.js 安装成功之后可以通过在 Terminal 中输入 $ node -v 来验证安装是否成功:

      1
      2
      $ node -v
      v10.5.0

      👆上面就显示我本地的 Node.js 版本是 10.5.0

Hexo 安装和简单使用
  1. 安装 Hexo

    1
    $ npm install hexo-cli -g
  2. 初始化

    1
    2
    $ hexo init Blog
    $ cd Blog
  3. 本地运行

    到这里 Hexo 基本上是安装成功了,所以这里可以检验下自己的劳动成果,执行如下命令 $ hexo server

    1
    2
    3
    $ hexo server
    INFO Start processing
    INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

    这个时候就可以通过在浏览器中访问 http://localhost:4000/ 来查看自搭建的博客了,打开一看……

    坑爹啊,活脱脱的买家秀!▄█▀█●

    不急,可以换主题的!

安装 NexT 主题

Next 主题的下载地址有两个版本:

5.x 地址:https://github.com/theme-next/hexo-theme-next,推荐使用

6.x 地址:https://github.com/theme-next/hexo-theme-next,暂时不推荐使用,我感觉 bug 还有点多

安装
  1. 切换到 Hexo 的根目录,里面应该有 node_modulessourcethemes 和其他的目录:

    1
    2
    3
    $ cd Blog
    $ ls
    _config.yml node_modules package-lock.json package.json scaffolds source themes
  2. Github 上下载你想要安装的版本,这里直接选择最新的 Release 版本

    1
    2
    $ mkdir themes/next
    $ curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

    如果上一步操作成功了,那么你在 themes/next/ 目录中应该能看到一些文件和目录。

  3. 修改 Hexo 使 Next 主题生效:修改根目录下的 _config.yml 文件里面的 theme 字段的值为 Next。(如果是初次安装,那么该字段默认的就是 landscape

    1
    2
    3
    4
    5
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    # theme: landscape #此处是将原来的配置给注释掉了
    theme: next
查看效果

执行如下命令:

1
2
3
$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在浏览器中访问:http://localhost:4000/,你会发现页面会漂亮很多

博客托管到 Coding

为什么要托管到 Coding 呢?大家不都是托管到 Github 的吗?

Github 服务器毕竟是在国外,国内访问的速度不尽人意。Coding 是国内的一个面向开发者的云端开发平台,这意味着能够大大提升国内的访问速度(你非要跟我说要提升国外的访问速度,那我也没办法🙄)。

很多小伙伴应该已经知道了 Coding 新政策:不再免费提供自定义域名的 Pages 服务。没事儿,我还是会告诉你如何在 Coding 上申请免费使用自定义域名 Pages 服务,我们先将博客托管到 Coding。

创建仓库
  1. 使用 Coding 创建仓库之前肯定是要在他们的官网注册账号的

  2. 注册完账号之后,请前个人账户的设置页面选择 SSH 公钥将本地生成的 公钥 添加进去

    添加本地的公钥这一步必须要做,方便后面将本地生成的静态博客页面推送到 Coding 上的仓库

    不会添加公钥的可以参考 Coding 这一篇官方帮助文档-配置 SSH 公钥访问代码仓库

  3. 创建一个托管静态页面的仓库

    • 项目名称任意,但是最好是自己在 Coding 上设置的账户名
    • 项目描述随意填写
    • 公开源代码:建议不勾选,这样仓库就只能自己查看
    • 启用 README.md添加 Licensice 文件添加 .gitignore 文件均可以不用理会,使用默认的就好
提交到远程博客仓库

这里分为两步:

  1. 将本地的 Hexo 项目推送到 Coding 上刚刚创建仓库 master 分支,这样就能随时随地的将 Hexo 项目 Clone 到本地,然后开始写博客了

  2. 将本地生成的静态博客页面也推送到这个仓库的 coding-pages 分支

    注意:Coding 的 Pages 服务部署来源仅支持 coding-pages 分支、master 分支和 master 分支 / docs 目录!

master 分支提交 Hexo 项目

进入 Hexo 的根目录

  1. 初始化一个本地 Git 仓库

    1
    2
    $ git init
    Initialized empty Git repository in /Users/lattecat/Documents/Blog/.git/
  2. 提交本地的修改

    1
    2
    $ git add .
    $ git commit -m "Initialize"
  3. 添加 Coding 上刚刚创建的远程仓库

    如何查看远程仓库的地址:在 Coding 上打开自己刚刚创建的仓库,点击左侧的代码,选择代码浏览,然后在屏幕正中间就能看到仓库的地址。但是默认展示的是 HTTPS,这里需要切换到 SSH,切换成功之后将后面的 Git 地址复制,地址类似 `git@git.coding.net:YOUR_NAME/BLOG_REPO_NAME.git`。

    使用如下命令将上面复制的 Git 地址(请不要直接使用上面的示例地址,一定要是你自己的 Git 地址)设置为 oring 远程仓库。

    1
    $ git remote add origin git@git.coding.net:YOUR_NAME/BLOG_REPO_NAME.git

    可用通过如下命令来查看添加远程仓库是否成功

    1
    2
    3
    $ git remote -v
    origin git@git.coding.net:YOUR_NAME/BLOG_REPO_NAME.git (fetch)
    origin git@git.coding.net:YOUR_NAME/BLOG_REPO_NAME.git (push)
  4. 将 Hexo 项目推送到 master 分支

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $ git push origin master
    Counting objects: 516, done.
    Delta compression using up to 8 threads.
    Compressing objects: 100% (479/479), done.
    Writing objects: 100% (516/516), 1.73 MiB | 9.87 MiB/s, done.
    Total 516 (delta 35), reused 0 (delta 0)
    remote: Resolving deltas: 100% (35/35), done.
    To git.coding.net:LatteCat/MyBlog.git
    * [new branch] master -> master

    前往 Coding 的博客仓库,打开代码 -> 代码浏览就能看到自己推送的 Hexo 项目了

coding-pages 分支提交静态页面

本地使用 hexo generate 生成的静态页面全部在项目根目录下的 public 目录下,我们所需要做的就是将 public 目录推送到 Coding 上博客仓库的 coding-pages 分支。

  1. 使用如下命令生成博客静态页面

    1
    $ hexo generate
  2. 设置发布方式,即指定推送到 Coding 的仓库和分支

    • 执行如下命令,等待其安装成功

      1
      $ npm install hexo-deployer-git --save
    • 打开 Hexo 项目根目录下的 _config.yml,搜索到 deploy,修改为

      1
      2
      3
      4
      deploy:
      type: git
      repo:
      coding: git@git.coding.net:YOUR_NAME/BLOG_REPO_NAME.git,coding-pages

      解释下:

      • coding 表示你指定的仓库名字,这个随意
      • `git@git.coding.net:YOUR_NAME/BLOG_REPO_NAME.git` 为你在 Coding 上创建的 Blog 仓库地址
      • coding-pages 表示上面仓库的分支,这里只能填写 coding-pagesmaster(不明白为什么的请查阅到本章节的第一部分说明,而且 master 分支已经用于存储 Hexo 项目了,所以这里只能用 coding-pages 分支)。
  3. 将静态博客页面推送到 Coding,执行如下命令:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    $ hexo deploy
    INFO Deploying: git
    INFO Setting up Git deployment...
    Initialized empty Git repository in /Users/lattecat/Documents/Blog/.deploy_git/.git/
    [master (root-commit) a5ad022] First commit
    1 file changed, 0 insertions(+), 0 deletions(-)
    create mode 100644 placeholder
    INFO Clearing .deploy_git folder...
    INFO Copying files from public folder...
    INFO Copying files from extend dirs...
    [master 517d6be] Site updated: 2018-07-02 03:27:58
    115 files changed, 28302 insertions(+)
    create mode 100644 2018/07/02/hello-world/index.html
    create mode 100644 archives/2018/07/index.html
    create mode 100644 archives/2018/index.html
    ....
    To git.coding.net:LatteCat/MyBlog.git
    * [new branch] HEAD -> coding-pages
    Branch 'master' set up to track remote branch 'coding-pages' from 'git@git.coding.net:LatteCat/MyBlog.git'.
    INFO Deploy done: git

    出现 INFO Deploy done: git 表明推送成功

    这时前往 Coding 上的博客仓库,选择左侧的代码->代码浏览,默认会显示 master 分支,切换到 coding-pages 分支(如果前面的那一步操作成功了,那么就应该会出现 coding-pages 分支),可以看到该分支下已经存在了一些文件和目录

开启 Pages 服务

开启 Pages 服务的前提是 coding-pages 分支提交静态页面 中的操作是成功的

在 Coding 上的博客仓库,选择代码 -> Pages 服务

选择来源的下拉列表中选择 coding-pages 分支

选择保存之后会重新生成一个页面,然后博客的地址就出来了,例如 lattecat.coding.me/lattecat

尝试在浏览器中访问这个地址,至此你的个人博客已经托管到了 Coding 上!

使用自定义域名

Coding 使用自定义域名有限制:银牌以上会员可以绑定自定义域名,更多详情查看 会员等级和权益介绍

虽然是银牌会员,但是只要绑定腾讯云账号就可以免费升级到银牌会员

使用自定义域名的前提是你自己得有一个域名,域名可以向域名服务商购买,这个就不做扩展,百度下就知道怎么弄了。

本来呢 Pages 服务已经开启了,Coding 也为你提供了一个访问 Pages 的 url 地址,按理说应该满足了。但是,我们可能想使用自己的域名,例如 blog.dearlattecat.com

关于自定义域名在域名服务商的后台该如何操作,可以参考 Coding 的这篇文章:绑定自定义域名

在自己的域名管理后台设置了自定的 Pages 域名之后,回到 Coding 的 Pages 设置页面,在自定义域名里面填入刚刚设置的自定义域名,点击绑定。

去除『Hosted by CODING Pages』页面

当来访者访问绑定自定义域名的 Pages 网页时,如果该自定义域名所有者为 CODING 银牌会员,会看到『Hosted by CODING Pages』页面,可直接点击跳过该页面或五秒后自动跳转到目标页面。

所以来说一说如何移除这个“烦人”的跳转页面,有两种方式:

  1. 选择升级到 CODING 金牌或钻石会员 ,系统会自动去除该中间页,查看 会员升级
  2. 放置『Hosted by CODING Pages』的链接获取免广告权益,银牌会员在可选择在网站首页任意位置放置『Hosted by CODING Pages』链接,链接目标地址为 CODING Pages 宣传页(https://coding.net/pages

土豪请使用第一种方法,这里重点说一下第二种方式:Coding 也提供了文字版和图片版来放置他们的商标,免费用着他们的托管服务,在首页上放置他们的商标我觉得挺合理。

以文字版为例,通过路径 themes/next/layout/_partials/footer.swig 定位到文件 footer.swig ,找到下面这一个判断语句:

1
2
3
4
5
{% if theme.footer.powered %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

它的作用是要跳转到 Hexo 官网,对应在博客上就是如下的位置:

刚好我们可以将这里改为跳转到 Coding 官网,Coding 给出的文字版跳转连接代码为:

1
<p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p>

我们按照它的要求替换 footer.swig 中的代码,最终将上上个代码块中的代码修改为:

1
2
3
4
{% if theme.footer.powered %}
<div class="powered-by">{#
#}{{ __('<p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p>') }}{#
#}</div>

本地使用命令预览一下:

1
$ hexo server

在浏览器中查看下效果:

如果本地预览没有问题就可以将本地的修改推送到 Coding 的 Pages 服务里面去了,命令:

1
$ hexo deploy

剩下最后一步需要完成,前往 Coding 上自己的博客的 Pages 服务设置页面,勾选 已放置 Hosted by Coding Pages,Coding 在两个工作日内处理你的审核。

如果审核通过了的话,访问 Pages 服务设置页面会显示如下的样子:

好了,至此就可以愉快的通过自定的域名来访问自己的博客了,比如当前我自己的博客就是一个自定义域名🤪:https://blog.dearlattecat.com/

集成评论系统 Gitment

Gitment 是作者实现的一款基于 GitHub Issues 的评论系统。支持在前端直接引入,不需要任何后端代码。可以在页面进行登录、查看、评论、点赞等操作,同时有完整的 Markdown / GFM 和代码高亮支持。尤为适合各种基于 GitHub Pages 的静态博客或项目页面。” ——引自作者原文

GitHub授权接入

Gitment 使用的是 Github Issue 系统作为评论系统,在接入 Gitment 之前需要获取到 Github 的授权,得到客户端的 ID 和私钥,具体步骤如下图:

OAuth application注册接入

Homepage URL:这个就写你的博客首页地址

Authorization callback URL:这个必须要写对,写博客的首页地址就行,我这里写的是自定义域名,如果没有自定义域名就,没有自定义域名就用 Github 或者 Coding 的 Page 服务地址。

点击 Register application,注册成功之后的页面记录一下 Client IDClient Secret(也可以在 Setting -> Developer settings -> OAuth Apps 中找到自己注册的信息)

NexT 主题集成 Gitment

打开 NexT 主题的配置文件,搜索 gitment,需要修改几个值:

enable 默认的值为 false,将其改为 true,true 的含义就是打开 Gitment 评论

github_user 修改为 Github 上你的名字

github_repo 为你最终使评论关联到创建 Issue 的仓库>名字(记住是名字,而不是地址!)

client_idclient_secret 就按照上面注册 Application 之后生成的填写

lazy 可以填写 true 或 fasle,lazy的含义,是否懒加载相应评论框;如果为 true,文章底部评论是收起状态,提示显示 Gitment 评论按钮,单击展开评论框。

最终的显示效果:

需要注意的地方:

  • 每次新建文章之后,拖动到最底部会显示 Initialize Comments,这时候就需要用你创建托管评论 Issue 的 Github 账号登录,然后点击这个按钮,这样才能在对应的仓库下蒋健 Issue。

    同时在 Github 对应的仓库的 Issue 能看到已经初始化过评论的文章:

  • Error: Not Found 问题,github_repo 库填写错误,记住是名字,而不是仓库地址,详见 gitment issues 18

  • 其他问题,参见作者项目的 Issue

参考链接:

~~EOF~~
显示 Gitment 评论