迁移 Octopress 到 Hexo

发表于 | 分类于 | | 阅读次数:

不折腾会死

前几天更新了 Python Mixin 学习笔记 这篇文章，文章中有一张图要显示，于是想添加 fancybox 插件来预览图片， 原本以为是非常简单的一件事，结果上 google 果然没有找到，同时发现博客的分页有 bug，再看看 Octopress 的 最后更新时间，想到 Octopress 这些茫茫多的问题于是便有了迁移 Octopress 到 Hexo 的念头。

迁移前的调研

google 找了一些迁移的文章，发现迁移没有想象中难，于是开始准备。

我的需求：

  1. 可以继续使用 Emacs 上的 org-octopress 插件写博客。
  2. 可以兼容我之前写的文章，代码高亮必须漂亮。
  3. 一定要有 fancybox。
  4. 没有分页等乱七八糟的明显 bug。

迁移后的优点

  1. generate 速度大幅提高。
  2. Hexo 更新快，插件多，没有很明显的 bug。
  3. 完美兼容我的写作习惯。

迁移过程

  1. 安装配置 Hexo。
  2. 迁移 source/_posts 里的博客源文件。
  3. 重新配置 org-octopress。
  4. 选择一个兼容 Octopress 文章的主题。
  5. 调整 Hexo 和主题的配置。
  6. 博客代码管理。

安装配置 Hexo

安装过程可以参考 官方文档，值得注意的地方是：

  1. 推荐使用 nvm 安装 node。
  2. Error with DTrace 使用 npm install hexo --no-optional 解决，参考 hexo troubleshooting。

迁移 source/_posts 里的博客源文件

Hexo 有 迁移文档，我的迁移过程： 

# 创建文件夹
mkdir blog
cd blog

# 初始化
hexo init

# 安装依赖
npm install

# 解决 Error with DTrace 问题
npm install hexo --no-optional

# 查看目录
tree -L 1

.
├── _config.yml
├── db.json
├── node_modules
├── org
├── package.json
├── public
├── scaffolds
├── source
└── themes

# 复制 Octopress source/_posts 的文件到当前的 source/_posts
cp /your_octopress_path/source_posts/* source/_posts

首次配置 blog/_config.yml 

title: Runforever
subtitle: K.I.S.S
description: 我只是在写一个故事
author: runforever

...

permalink: :year-:month-:day/:title/  # 要和 Octopress 的 permalink 保持一致

生成博客 

hexo generate
hexo server --watch

# 可以简写
hexo g
hexo s --watch

这些步骤没有什么难度，很快就搞定了。

重新配置 org-octopress

我的配置如下： 

(require 'org-octopress)
(setq org-octopress-directory-top       "/your-blog-path/source")
(setq org-octopress-directory-posts     "/your-blog-path/source/_posts")
(setq org-octopress-directory-org-top   "/your-blog-path/source")
(setq org-octopress-directory-org-posts "/your-blog-path/org/source")
(setq org-octopress-setup-file          "/your-blog-path/org/setupfile.org")

在 blog 文件夹下新建了 org 目录，里面有 org 的配置文件 setupfile.org 和放博客源文件的 source 目录， 需要将原来 octopress 的 org 博客源文件 copy 到 org/source 。

配置好后，重启 Emacs，修改了 Ansible 使用入门 文章来测试效果，没有问题。

选择一个兼容 Octopress 文章的主题

这个过程是整个迁移过程中最耗时的，Hexo Theme 这里满屏幕的主题，经过测试 hexo-theme-next 是对 迁移的兼容性最好的，别的主题要么样式错乱，要么代码高亮有问题，整个测试过程让我崩溃的想要放弃。

next 主题 安装文档，过程： 

git clone https://github.com/iissnan/hexo-theme-next.git theme/next

修改 blog/_config.yml 中 theme 配置 

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

测试 

hexo g
hexo s

当我看到显示效果后，我决定就是它了，接下来就是配置的微调了。

调整 Hexo 和主题的配置

blog/_config.yml 的调整 

title: Runforever
subtitle: K.I.S.S
description: 我只是在写一个故事
author: runforever
language: zh-Hans   # 语言
timezone: Asia/Shanghai  # 地区
avatar: http://cdn.defcoding.com/0227c20b4bab4ef28f08f9ae3c6aa875.jpg   # 头像配置

permalink: :year-:month-:day/:title/  # 博客链接

theme/next/_config.yml 的调整 

keywords: "我只是在写故事"

# 设置代码背景
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night

# 侧边栏菜单展示
menu:
  home: /
  categories: /categories
  archives: /archives

# 我选用的主题
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

# 展示的链接
social:
  GitHub: https://github.com/runforever
  Bitbucket: https://bitbucket.com/runforever
  提 Issue: https://github.com/runforever/runforever.github.com/issues/new

sidebar:
  position: left
  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggler.
  # 设置侧边栏总是显示
  display: always

经过测试，代码高亮主题为 night 的时候兼容效果最好，预览后，终于看到曙光了， 不过侧边栏分类页面无法显示，查看 主题配置 文档找到了解决方案。

F089DF58-F049-431A-88DD-C3744954318C.png

93E66597-DCA7-4F7D-AA13-FA70CE6ACB2C.png

现在只剩下如何去管理博客代码这个问题了。

博客代码管理

我依然使用 GitHub Pages 来发布博客，根据 官方部署文档 来做就行。 

# hexo-deployer-git
npm install hexo-deployer-git --save

修改 blog/_config.yml 

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

测试发布 

hexo g
hexo deploy

发布没有问题，博客代码的版本控制我延续 Octopress 的策略使用 master 和 source 两个分支， master 用于博客发布，source 用于源代码管理。

提交博客源代码

将 theme/ 文件夹添加的 blog/.gitignore 

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
themes/

提交代码 

git add .
git commit -a -m "init hexo blog"

# 修改 master 分支重命名为 source
git branch -m source

# 强制 push
git push -f

提交博客主题

首先，GitHub 上 fork 一份 hexo-theme-next 到自己的仓库。 然后，开始提交代码。 

cd theme/next
git remote set-url origin https://your-fork-repo.git
git commit -a -m 'change config'
git push

打完收工，整个迁移过程已经完成，博客效果正如你现在看到的。

感谢

  1. Hexo 提供静态博客框架。
  2. next 提供的博客主题。