博客实践

February 8, 2017

2019-12-21 更新到 Hugo，抛弃复杂的 hexo，hexo 依赖 node 和各种 node_module，比如集成 CNAME 这一简单的功能都是靠模块来实现。而 hugo 得益于 Go，直接 go get 生成 hugo 执行文件即可，日常操作和 hexo 基本一样： hugo server、hugo 两个命令，常用参数 -D 表示集成草稿。如果要自动部署到 github，写一个 sh 脚本即可。另外静态文件方面在根目录下有 static，直接放在里面即可：

-rw-r--r--  1 ada  staff     14 12 21 16:08 CNAME
-rw-r--r--@ 1 ada  staff  10497 12 21 16:09 avatar.jpg
-rw-r--r--  1 ada  staff     10 12 21 16:08 baidu_verify_MOITAeX9md.html
-rw-r--r--@ 1 ada  staff   1150 12 21 16:09 favicon.ico
-rw-r--r--  1 ada  staff     53 12 21 16:08 googleba39dd1bfa288749.html

最佳实践是，hugo 工作目录和发布目录分库，而不是分支，分库后利用 .gitmodules：

[submodule "themes/pure"]
  path = themes/pure
  url = git@github.com:xiaoheiAh/hugo-theme-pure.git
[submodule "public"]
  path = public
  url = git@github.com:wpxun/wpxun.github.io.git
  branch = master

下面两个链接已经讲得非常详细了：
1. Quick Start
2. Host on GitHub

下面是历史 Hexo 的部署方式，食之无味，弃之可惜。

Hexo 是一个很不错的静态博客管理工具的，快速发布，Markdown 支持，插件支持。官网现在列出了100来个主题都很好看，第一篇文章就来写 Hexo 的部署工作吧。我个人比较喜欢用 Centos，所以我是基于 Centos7 环境来写 Hexo 博客的，Win10 用户可以用 Linux 子系统来部署，这样可以在 Linux 上部署，在 Win10 上写文章；网上也有很多类似的文章，我自己喜欢折腾，大家没事可以粗略看一看。

Hexo 环境

git 和 ssh
nodejs

1、Centos7 下 yum 安装的 git 都是1.8^，如果想安装 2.11^ 得用源码安装，可以在这里看关于Git源码安装的文章。ssh避免了每次输入密码，如果是只有一个ssh密钥，也就没有必要用ssh-agent管理工具了，直接放在 ~/.ssh/ 下，使用ssh时默认就会去查找 ~/.ssh/id_rsa（可以先用ssh -T git@github.com测试一下连接）。

2、node.js 在 Hexo 文档中有介绍，但是我试了安装不了，还是直接到 nvm源里查看安装方法吧。

Hexo 使用

这部分主要参考官方文档。注意命令可以缩写，比如hexo cl、hexo d，和ip address 缩写成ip a或者ip add一样的道理。
文档中命令的参数并没有完全写出来，比如hexo server 还有其它的参数，hexo server -i 192.168.2.15 中的参数 -i 可加 ip 地址，用hexo help server 查看完整的命令参数。

常用命令

hexo init 当前文件夹列出的hexo所有命令跟是否已经在该文件夹init有关系，这点做得挺好的；
hexo new 新建文件，会去scaffolds复制模板，如果使用 hexo new drafts “article title”，就需要用 hexo publish drafts “article title” 发布；
hexo generate 生成静态网站；
hexo deploy 根据_config.yml文件的deplay type类型部署静态网站文件到服务器；
hexo clean 清除 public，缩写 hexo cl，不能缩写成 hexo c；
hexo server 可以在本地浏览器预览，可见即可得，无需 generate，方便样式调试；hexo s –drafts 可以把草稿变成文章；

分类和标签

tags: [Sports,Baseball]，也可以用 - 数组形式
categories:
1. 多级分类，文章会放在 Sports/Baseball 目录下
```
categories:
```
- Sports
- Baseball

categories: [Sports,Baseball]

 2. 多个子分类，会分别放在 Sports 和 Baseball 两个目录下

categories:

[Sports]
[Baseball]

GitHub Pages

Hexo 和 GitHub 是代码和代码库的关系，Hexo 和 GitHub Pages 是代码和服务器的关系。 GitHub 创建一个库，名字一样要是{yourname}.github.io,这样才能正常用{yourname}.github.io域名访问。在代码库里设置 setting 里的 Options/GitHub Pages 栏配置域名和分支，我这里是用master分支。如果有配置域名，相当于分支下 Create a CNAME file，为了不影响每次 deploy 后被 CNAME 文件删除，安装插件npm install --save hexo-generator-cname3。域名做 cname 记录到{yourname}.github.io。然后配置 Hexo 根目录下的 _config.yml 的 deploy 属性，type 如果是用 git，相应的就需要安装npm install hexo-deployer-git --save；branch 和 setting 的 master 分支保持一致，有域名的话要加上一行 cname: [YOUR.DOMAIN]。

deploy:
  type: git
  repo: git@github.com:wpxun/wpxun.github.io.git
  branch: master
  message: '站点更新:{{now("YYYY-MM-DD HH/mm/ss")}}'

cname: jemper.cn

引入 Disqus 评论模块

到 Disqus 网站注册并添加站点，获得 disqus_shortname，在根目录 /_config.yml 中添加行disqus_shortname: yourDisqusShortname，至于怎么在 Disqus 新建站点，网上教程好多。

引入目录模块

Hexo 已经有辅助函数，形式: <%- toc(page.content) %>，根据以下的配置，默认就会开启目录，如需关闭，只需要在文章 item（判断了 item.toc）处设置 toc: false。

在 /themes/light/layout/_partial/article.ejs 修改 entry 部分为：

    <div class="entry">
      <% if (item.excerpt && index){ %>
        <%- item.excerpt %>
      <% } else { %>
        <% if (item.toc !== false){ %>
            <div id="toc" class="toc-article">
                <%- toc(item.content, {list_number: false}) %>
            </div>
        <% } %>
        <%- item.content %>
      <% } %>
    </div>

在 themes/light/source/css/_partial/article.styl 添加：

.toc-article
  margin 0.5em
  border-left 10px solid color-border
  padding 0.5em
  strong
.toc-article li
  list-style none

随处写文章解决方案

上面已经有一个 master 主分支，用来放博客静态文件；还需要一个 source 分支，用来放博客的源文件。原理是先拉代码下来，创建空的 source 分支，把博客源文件放进入提交到 source 分支，推到 Github。需要注意的一点是主题不要用git clone https://github.com/ahonn/hexo-theme-even themes/even，而是在其它地方git拉取，再复制到theme目录下，git嵌套不了。操作如下

$ cd hexo
$ hexo clean && hexo deploy //这是单纯的hexo，deploy到github的wpxun.github.io分支了
$ cd ..
$ git clone git@github.com:wpxun/wpxun.github.io.git //在新的目录下拉取下来，之后就在这个分支书写了，上面的 hexo 目录就可以删除了
$ cd wpxun.github.io
$ git co --orphan source //创建新分支
$ git rm -rf .
$ cp -r ../hexo wpxun.github.io
$ hexo clean
$ touch .gitignore //里面写上[.deploy_git、public、db.json]这三行
$ git add .
$ git ci -am"add source branch" && git push -u origin source

至此，以后在新的机器上写文章的操作如下：

拉取代码切换到 source 分支下；
因为 node_modules 跟 node 版本或者操作系统版本有关（这也是.gitignore要排除掉它的原因），所以不同操作系统或不同版本的 node，node_modules 文件夹并不能共用。所以需要在该系统中其它文件夹 hexo init，并安装相应的依赖（npm install --save hexo-generator-cname3，npm install hexo-deployer-git --save）再把 node_modules 文件夹再复制过来
```
$ git clone git@github.com:wpxun/wpxun.github.io.git
$ cd wpxun.github.io
$ git co source //这步操作后需要进行第2点的复制文件操作，否则hexo不能正常执行，相关操作以上已经说明，就不赘述了
$ hexo new "add-post"
$ hexo cl && hexo d
$ hexo cl
$ git add .
$ git ci -am"add post" && git push
```

SEO 搜索

验证所有权：一般采用文件验证，把文件直接放在 themes/light/source

生成 Sitemap：安装 Baidu/Google Sitemap 插件

npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-sitemap --save

修改站点配置文件_config.yml，添加以下内容：

# 自动生成 sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml