在决定再次使用Jekyll作为个人blog的平台之后( Hello world again ),我偶然找到了 orderedlist 开发的 modernist 这个主题,非常简洁美观。

而且,Heroic Yang 还做了重新设计。只是,两者文档有些语焉不详,按照 折腾了个新主题 一文安装完成后,没有能够正确设置好theme。

不过,线索是 hexo ,一位台湾大学生tommy351基于Node.js的静态博客程序。hexo生成的静态网页可以直接存放到GitHub Pages, BAE, SAE等平台。详细的搭建和使用方法参考hexo你的博客(非常详细的解说)。

安装node.js 和 Git

我是Mac OS X平台,在 Node.js 官网下载最新版本安装即可。

安装Git for Mac - 如果安装了Xcode comand tools则已经具备了git工具

安装hexo

以下命令安装hexo

npm install -g hexo

我在mac上使用root安装,提示

gyp WARN EACCES user "root" does not have permission to access the dev dir "/var/root/.node-gyp/0.10.32"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/hexo/node_modules/chokidar/node_modules/fsevents/.node-gyp"

所以先执行了 chmod 777 /var/root 安装完成后再执行 chmod 750 /var/root 恢复原来的目录权限设置

启动和初始化blog - 使用普通用户身份

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

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

grep -rl "ajax.googleapis.com" .
grep -rl "fonts.googleapis.com" .

可以看到引用了google 字体和公共库的文件如下

./themes/landscape/layout/_partial/after-footer.ejs
./themes/landscape/layout/_partial/head.ejs

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

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

启动服务器

hexo server

创建新的post

hexo new "Hello world again"

创建静态文件

hexo generate

命令必须在init目录下执行,否则不成功,但是也不报错。
当你修改文章Tag或内容,不能正确重新生成内容,可以删除hexo\db.json后重试,还不行就到public目录删除对应的文件,重新生成。

访问 http://localhost:4000 可以看到效果

主题设置

青菜萝卜各有所爱,hexo的主题列表Hexo Themes 我同样选择了 modernist

安装主题是通过git命令实现

git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

同样,需要修改 themes/modernist/layout/_partial/after-footer.ejsthemes/modernist/source/css/_base/variable.styl 两个文件

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

安装完成后,修改 _config.yml 将主题修改成 modernist

theme: modernist

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

menu: #配置页头显示哪些菜单
#  Home: /
  Archives: /archives
  Reading: /reading
  About: /about
#  Guestbook: /about

excerpt_link: Read More #摘要链接文字
archive_yearly: false #按年存档

widgets: #配置页脚显示哪些小挂件
  - category
#  - tag
  - tagcloud
  - recent_posts
#  - blogroll

blogrolls: #友情链接
  - bruce sha's duapp wordpress: http://ibruce.duapp.com
  - bruce sha's javaeye: http://buru.iteye.com
  - bruce sha's oschina blog: http://my.oschina.net/buru
  - bruce sha's baidu space: http://hi.baidu.com/iburu

fancybox: true #是否开启fancybox效果

duoshuo_shortname: buru #多说账号

google_analytics:
rss:

blogrolls 的友情链接功能没有测试成功

评论框

hexo默认使用 disqus ,使用方法如下

  • 先登录 disqus 注册一个帐号
  • 在disqus网站add site功能,将自己的网站域名写上,例如 blog.huatai.me 默认就会生成一个 shortname 是 ‘bloghuataime’
  • 修改 _config.yml

    # Disqus
    disqus_shortname: bloghuataime
    

注意,修改 _config.yml 之后要重启 hexo 服务才能刷新

自定义页面

执行 new page 命令

hexo new page "about"

安装插件

  • 安装RSS

    npm install hexo-generator-feed --save
    

然后修改 themes/modernist/_config.yml 添加

rss: /atom.xml
  • _config.xml 设置github部署

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

我这里犯了一个错误,把 repo 写成了 repostory (实际应该是 repository),导致提交失败

  • fancyBox 提供了片头图片缩放功能以及图片浏览功能

准备提交GitHub

  • 清理掉 themes/modernist/.git 目录,避免整体提交时候冲突

    rm -rf themes/modernist/.git
    

这个目录存在会导致无法提交,因为目录里面有原先git仓库配置目录

检查 githubsetting 页面会看到如下错误提示:

Your page is having problems building: The submodule themes/modernist was not properly initialized with a .gitmodules file. For more information, see https://help.github.com/articles/page-build-failed-missing-submodule.

GitHub

  • 注册一个『GitHub』帐号
  • 建立与你用户名对应的仓库,仓库名必须为『your_user_name.github.com』
  • 添加SSH公钥到『Account settings -> SSH Keys -> Add SSH Key』

  • 设置你的用户名密码(yourname替换成实际邮件地址名):

    git config –global user.email “yourname@example.com”
    git config –global user.name “yourname”

  • 创建密钥:

    ssh-keygen -t rsa -C “yourname@example.com”

  • 将生成的 id_rsa.pub 公钥 Add SSH Key 到你的GitHub

  • 最后验证

    ssh -T git@github.com

推送github.io

  • 使用 hexo 工具来提交:

    hexo deploy
    

注意,不要直接在最上级目录下使用常规的 git init 等操作,因为 hexo 不是直接将整个源代码目录提交到 git 仓库。

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

    hexo g
    hexo d
    

g 表示 generate

d 表示 deploy