博客实践

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 环境

  1. git 和 ssh
  2. 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]  
  1. 多个子分类,会分别放在 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

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

  1. 拉取代码切换到 source 分支下;

  2. 因为 node_modules 跟 node 版本或者操作系统版本有关(这也是.gitignore要排除掉它的原因),所以不同操作系统或不同版本的 node,node_modules 文件夹并不能共用。所以需要在该系统中其它文件夹 hexo init,并安装相应的依赖(npm install --save hexo-generator-cname3npm 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 搜索

  1. 验证所有权:一般采用文件验证,把文件直接放在 themes/light/source

  2. 生成 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