从Jekyll到Hexo

记录一下个人博客从Jekyll转到Hexo的过程

Jekyll？

一开始选择Jekyll是因为只是想要选择一个独立的空间，但是又需要有可定制的展示主题以及良好的访问性，而且又想摆脱掉个人域名，服务器等等的配置，只想简单的负责内容的创建，让他人来负责博客的管理，自己仅仅保留控制权。

最终机缘巧合之下看到了GitHub Pages（面向用户、组织和项目开放的公共静态页面搭建托管服 务），并且在GitHub Pages的官方文档中看到了对于Jekyll的推荐，于是就照着文档一步一步搭建了我的第一个静态博客网站，使用GitHub上的Jekyll主题，并且配置了GitHub Actions自动部署每一次的commit。

尽管过程比较坎坷，包括寻找主题，在本地安装Ruby和Jekyll Bundler，并且凭借了自己仅有的一点前端知识修改了fork的主题的一些字体兼容性，以及图床网站的防盗链问题。摸索了三四天后，网站终于上线了。

Why Hexo？

使用了一段时间Jekyll后，我总想能够让我的博客变得更好看，这是最关键的我从Jekyll转到Hexo的原因。

由于官网的Jekyll主题并不太符合我的需求，我需要从个人开发者的开源主题中挑选自己喜欢的主题，并且由于很多主题常年没有更新，所以可供选择的符合我胃口的Jekyll博客是很少的。

另外，由于Jekyll使用的是Kramdown语法，而我本地使用的markdown编辑软件是语雀（免费图床不香吗），再加上语雀本身的导出问题，每次发布到博客之前，总是需要在用Typora+VsCode重新调整格式，这与我创建→发布的想法是有冲突的，久而久之，也懒得更新博客了。

而且Jekyll的英文官网看得我实在是恼火，中文官网又难以保持最新，在一些小问题上总是难以找到我需要的答案。

Steps

官方文档

删除原有项目

  • 在本地博客文件夹（如果叫Blog）中，除了.git文件夹都使用rm删除，注意备份以前的_post文件夹中的md文件（当然你也可以选择删除GitHub上的项目，但是辛苦攒的GitHub绿点就消失了）

安装必要环境

  • 安装Node.js，官网
  • 在terminal中打开本地博客文件夹（Blog），安装Hexo
1
npm install -g hexo-cli
  • 之后，在当前文件夹（Blog）下，进行hexo项目的初始化，后面也可以跟想要初始化的文件夹的地址
1
hexo init
  • 检测网站雏形，按顺序输入下面三条命令，分别指的是新建名为blog的文章，生成，启动本地预览，然后按照terminal给出的地址查看博客的属性
1
2
3
hexo new blog
hexo g
hexo s
  • 没问题后使用以下命令，清除缓存文件
1
hexo clean
  • 此时项目结构应该为如下
1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy_git
├── .gitignore
├── _config.landscape.yml
├── _config.yml // 这个叫做站点配置文件
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── source
└── themes
  • 打开站点配置文件_config.yml，将Hexo与GitHub关联起来，翻到最后，添加如下文字，保存
1
2
3
4
5
deploy:
  type: git
  # 下面填写当前GitHub项目的地址，注意加上.git，可以进入.git文件夹中的config文件查看
  repo:
  branch: master
  • 最后在terminal中输入以下命令
1
npm install hexo-deployer-git --save

选择Hexo主题

每个主题的配置可能有出入

  • 在网络上找到任何一款你喜欢的Hexo主题
  • 按照其使用教程，将主题文件夹放入theme文件夹中，并且在站点的_config.yml中，修改主题为主题文件夹的名字（我使用的chic如下）
1
2
3
4
5
6
# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/
theme: Chic
  • 在主题的_congig.yml中，根据自己需要进行合适的配置

迁移

  • 把 _posts 文件夹内的所有文件复制到 source/_posts 文件夹，并在 站点_config.yml 中修改 new_post_name 参数。
1
new_post_name: :year-:month-:day-:title.md #也就是Jekyll的post的文件名格式

发布

1
2
3
hexo clean
hexo g
hexo d
  • 如果git显示无法推送，应该是deploy的repo地址有误
  • 发布后进入GitHub Page对应的站点，就可以看到页面了

More

添加readme文件

  • 将 README.md 置于 blog/source 目录下
  • 修改 blog/_config.yml，找到 skip_render 字段，更改为如下
1
skip_render: README.md

网站的icon

  • 制作 ico 图标，建议尺寸 48*48，命名为 favicon.icon
  • 将图标置于 blog/source 目录下，修改 blog/_config.yml

Abstract

  • 在摘要和正文间添加： <!-- more --> 

自定义deploy的commit信息

1
hexo d --message "your message"

大小写问题

当在本地改变 md 文件的大小写时，部署到 GitHub 上后，改变了文件名的博客不能被访问。

  • 修改根目录下 .deploy_git/.git/config 文件，将 ignorecase 的值由 true 改为 false
  • 删除 .deploy_git 目录下除 .git 目录外的其他文件
  • cd 到 .deploy_git 目录下，手动做一次推送
1
2
3
git add .
git commit -m "your message"
git push
  • 重新生成并部署

TODO