王若风的技术博客

世界尽头の冷酷仙境

0%

从Octopress迁移博客到hexo

发表于 更新于 分类于
本文字数： 3.3k 阅读时长 ≈ 3 分钟

hexo

简介

最近准备更新博客（以前的基于Octopress），去写的时候突然发现以前的博客跑不起来了。。。倒腾了一下，在执行博客更新时rake generate，一直报错，错误出现在高亮解析模块 Pygments，尝试升级jekyll但是和它相关的依赖模块还是有问题。

1
2
3
4
5
6
7
➜  Octopress git:(source) ✗ rake generate
## Generating Site with Jekyll
Configuration file: /Users/wangruofeng/Documents/Git Repositories/Octopress/_config.yml
            Source: source
       Destination: public
      Generating... 
jekyll 2.5.3 | Error:  Pygments can't parse unknown language: objective-c.

后面去Octopress官网查了了，发现上次更新还是2015.01.15的事了，后续也没有更新，于是觉得这个不太靠谱，准备换一个，调研了一下，发现使用hexo的挺多，于是开始捣腾起来。。。

准备环境

准备 node 和 git 环境， 首先，安装 NodeJS，因为 Hexo 是基于 Node.js 驱动的一款博客框架。

在命令行中输入相应命令验证是否成功，如果成功会有相应的版本号。

1
2
3
4
5
6
➜  myBlog git:(master) ✗ git version
git version 2.24.0
➜  myBlog git:(master) ✗ node -v
v12.13.0
➜  myBlog git:(master) ✗ npm -v
6.12.0

安装Hexo

如果以上环境准备好了就可以使用 npm 开始安装 Hexo 了。也可查看 Hexo 的详细文档。 在命令行输入执行以下命令：

1
npm install -g hexo-cli

没有权限的话可能会出现下面的错误信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /Users/wangruofeng/.npm/_cacache/content-v2/sha512/0b/8a
npm ERR! errno -13
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 501:20 "/Users/wangruofeng/.npm"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wangruofeng/.npm/_logs/2019-11-10T07_21_42_135Z-debug.log

报错的话加上 sudo重试一次或者执行sudo chown -R 501:20 “/Users/wangruofeng/.npm”

1
2
3
4
➜  Git Repositories sudo npm install -g hexo-cli
/usr/local/Cellar/node/5.7.0/bin/hexo -> /usr/local/Cellar/node/5.7.0/lib/node_modules/hexo-cli/bin/hexo
+ hexo-cli@3.1.0
added 67 packages from 317 contributors in 27.347s

安装 Hexo 完成后，再执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
hexo init myBlog
cd myBlog
npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。 
├── package.json
├── scaffolds # 模版文件夹
├── source  # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件 
└── themes  # 主题文件夹

好了，如果上面的命令都没报错的话，就恭喜了，运行 hexo s 命令，其中 s 是 server 的缩写，在浏览器中输入 http://localhost:4000 回车就可以预览效果了。

1
hexo s

至此，你本地的博客就已经搭建成功，接下来就是部署到 Github Page 了。

部署到GitHub

此时，本地和Github的工作做得差不了，是时候把它们两个连接起来了。你也可以查看官网的部署教程。 先不着急，部署之前还需要修改配置和安装部署插件。 第一：打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置（也可同时部署到多个仓库，后面再说）：

1
2
3
4
5
6
7
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    github: https://github.com/wangruofeng/wangruofeng.github.io.git
  branch: master

第二：要安装一个部署插件 hexo-deployer-git。

1
npm install hexo-deployer-git --save

最后执行以下命令就可以部署上传啦，以下 g 是 generate 缩写，d 是 deploy 缩写

1
hexo g -d

稍等一会，在浏览器访问网址： https://你的用户名.github.io 就会看到你的博客啦！！

开始写作

博客搭好了，就开始写文章了，这里简单介绍一下，详细的文档可以看 hexo 官网。 新建文章，输入以下命令即可

1
hexo new '文章标题'

执行完成后可以在 /source/_posts 下看到一个“文章标题.md”的文章文件啦。.md 就是 Markdown 格式的文件，具体用法可以在网上找一下，语法还是比较简单的。

在 Markdown 文章里面输入你的文章内容

再执行一下以下命令

1
2
hexo g # 生成相关文件
hexo s # 部署到本地

最后，只要部署到你的 Github 上就可以了！

1
2
hexo clean
hexo g -d

部署前最好能先执行一下 hexo clean 命令，清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

另外，如果你的文章暂时不发布可以先保存在草稿里面。生成草稿的方法和文章差不多 hexo new draft “文章标题”，生成后会在 /source/_drafts 里看到你的草稿文章。当你想发布时只要执行 publish 命令即可发布到博客。

1
hexo publish [layout] <filename>

遇到的坑

1. Hexo: TypeError: Cannot set property ‘lastIndex’ of undefined

解决方案是 将你工程下的 _config.yml (这个不是主题的_config.yml) 文件里面的 auto_detect 设置为 false。

1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

2.修改完 hexo 目录下的 _config.yml 文件 重新 generate 文件不生效

使用 hexo 的命令 hexo clean,清除一下。

参考链接