一年以后的今天,以一场马拉松开始的自己的生日纪念,再次恢复blog撰写。

依然采用精简的hexo来实现个人blog,折腾了两天,考虑到自己blog以技术为主,就不折腾太多花哨的theme了,一切以内容为主。

恢复blog多少还是折腾了一下,所以随手记个笔记,每一个微小的改进都是不断的积累。

安装hexo

安装步骤和以前略有不同。

环境:Mac OS X 10.11

  • 安装git

由于系统已经安装了X Code,所以包含了git工具,不需要再单独安装。否则可以通过HomebrewMacPortsinstaller安装。

  • 安装Node.js

Node.js有Mac版本的installer可以非常方便地安装(需要root权限)。

目前(2015年11月)应该安装 node.js v4.22 长期支持版本,我测试下来,如果使用最新的v5.0.0版本,在使用hexo的插件hexo-generator-feed会导致异常,报错如下

TypeError: ejs:7
    5|   <link href="<%- encodeURI(feed_url) %>" rel="self"/>
    6|   <link href="<%- encodeURI(url) %>"/>
 >> 7|   <updated><%= posts.first().updated.toISOString() %></updated>
    8|   <id><%- url %></id>
    9|   <% if (config.author){ %>
    10|   <author>

Cannot read property 'updated' of undefined
    at eval (eval at <anonymous> (/Users/huatai/Documents/blog/huataihuang.github.io/node_modules/ejs/lib/ejs.js:242:14), <anonymous>:30:539)
  • 安装Hexo

上述环境就绪以后,可以通过命令行安装hexo,不过,要切换到root身份

chmod 777 /var/root
sudo npm install -g hexo-cli
chmod 750 /var/root

这里在安装hexo之前执行chmod 777 /var/root是因为不这样操作,安装过程会提示警告

gyp WARN EACCES user "root" does not have permission to access the dev dir "/var/root/.node-gyp/5.0.0"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/hexo/node_modules/nunjucks/node_modules/fsevents/.node-gyp"
  • 初始化blog环境

这里创建的目录是huataihuang.github.io,对应的是自己的github个人网站

hexo init huataihuang.github.io
cd huataihuang.github.io
npm install

theme

使用比较简洁的modernist

折腾了几个theme,还是觉得modernist比较适合技术类型的blog

git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist
  • 替换google公共库和字体库

由于GFW屏蔽了Google的服务,所以要将 google 的 公共库和字体库替换成 360提供的国内CDN完站,否则会发现页面加载非常缓慢

公共库

grep -rl "ajax.googleapis.com" .

输出显示

./node_modules/hexo/node_modules/hexo-cli/assets/themes/landscape/layout/_partial/after-footer.ejs
./node_modules/sprintf-js/demo/angular.html
./node_modules/titlecase/test/index.html
./themes/landscape/layout/_partial/after-footer.ejs
./themes/modernist/layout/_partial/after-footer.ejs

字体库

grep -rl "fonts.googleapis.com" .

输出显示

./node_modules/hexo/node_modules/hexo-cli/assets/themes/landscape/layout/_partial/head.ejs
./themes/landscape/layout/_partial/head.ejs
./themes/modernist/source/css/_base/variable.styl

请分别替换这两个文件中的内容如下:

ajax.googleapis.com 替换成 ajax.useso.com
fonts.googleapis.com 替换成 fonts.useso.com

注意:fonts.useso.com提供的https证书不正确,所以需要将网站https修改成http

但是,意外发现在Mac平台Safari环境中,使用modernist theme时候,没有加载fonts.useso.com字体(当时https证书错误)反而中文显示比较优美(应该是Mac默认”苹方”字体),但是正确使用 http://fonts.useso.com 的字体后显示的是仿宋体,不如苹果的字体。

另外,当前.ejs还包含了有关google-analytics.com相关的代码,不配置启用(估计在墙内使用会比较麻烦)

修改主题配置文件 themes/modernist/_config.yml

theme: modernist

# Header
menu:
  Home: /
  Archives: /archives
rss: /atom.xml

# Content
archive_date_format: MMM DD
fancybox: true

# Comment Plugin
duoshuo_shortname:

# Miscellaneous
google_analytics:
favicon: /favicon.ico

上述配置启用了rss,需要安装插件hexo-generator-feed

添加生成RSS和sitemap的插件

npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save

目录下的_config.yml文件添加以下内容

feed:
  type: atom
  path: atom.xml
  limit: 20

sitemap:
    path: sitemap.xml

这样就可以以普通用户身份(我是huatai)执行以下命令启动服务

hexo server

在本机可以使用如下网址访问自己的blog http://127.0.0.1:4000

使用hexo

github 上创建自己的账号,并以自己的账号名字+github.io作为仓库名(参考github pages说明)。例如,我的github账号是huataihuang,则创建的仓库名字是huataihuang.github.io

发布需要设置自己账号的公钥,即将管理密钥设置为ssh公钥

_config.yml 中添加如下配置,表示使用github进行部署

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/huataihuang/huataihuang.github.io.git
  branch: master

早期hexo 2.x部署github使用配置类型是type: github,升级到hexo 3.x后,修改成 type: git (参考 升级到hexo 3.0后deploy type: github选项无效

安装git插件

npm install hexo-deployer-git --save

创建一个新的post,使用如下命令(默认的layout是位于source/_posts

hexo new "18 Til I Die"

此时提示 INFO Created: ~/Documents/blog/huataihuang.github.io/source/_posts/18-Til-I-Die.md ,则编辑此文件来撰写blog。

撰写新的post之后,使用命令

hexo g
hexo d

g 表示 generate

d 表示 deploy,即部署到github的页面,然后就可以通过访问 http://huataihuang.github.io 看到自己的页面

设置域名

我的blog的域名是 blog.huatai.me ,在反复折腾了几次VPS之后,还是决定专注blog撰写,将维护工作交给github处理。也就是将blog.huatai.me域名指向huataihuang.github.io

参考Setting up a custom domain with GitHub Pages

  • 在hexo的source目录下存放一个CNAME文件,内容就是你希望托管的域名。这里我将blog.huatai.me域名托管,所以这个CNAME文件内容就是blog.huatai.me (参考Using own domain with github and hexo
  • 在域名服务商(我使用狗爹)的域名管理中添加一个CNAME记录

    blog  CNANME  huataihuang.github.io.
    

域名生效后,访问 http://blog.huatai.me 就会访问 http://huataihuang.github.io 并且看到完全一致的页面

报错处理

  • 执行 hexo generate 报错

    TypeError: Cannot read property 'offset' of null
    

这是因为需要在 _config.xml中配置 timezone: 字段,并且设置为 Asia/Shanghai

  • 执行 hexo generate 报错

    Moment Timezone has no data for zh_CN. See http://momentjs.com/timezone/docs/#/data-loading/.
    

这是因为以前老版本的timezone:字段可以设置成zh_CN,但现在必须标准化类似Asia/Shanghai