利用Github和Hexo自建博客教程

随笔

之前有朋友问我个人博客怎么搞, 这里简单记录一下利用Github和Hexo自建博客的教程。

1 准备工作

1.1 安装Node.js

安装Node.js的原因是Hexo是基于Node.js的博客框架, 因此需要先安装Node.js。而Node.js是运行在V8引擎上的JavaScript运行时。

安装方式:

  • 官网下载: https://nodejs.org/en/download/
  • mac: brew install node
  • windows:
    • 官网下载安装包, 一路安装即可
    • 或者使用包管理器安装:
      • choco install nodejs
      • scoop install nodejs

这里非常推荐使用scoop安装, 因为scoop是Windows下的通用包管理器, 不仅仅可以安装Node.js, 还可以安装各类软件, 可以参考我的这篇文章: Scoop–windows下的软件包管理工具

1.2 安装Hexo

Hexo是一个基于Node.js的博客框架, 可以用来生成静态博客。官网: https://hexo.io/zh-cn/

安装方式:

  • npm install -g hexo-cli

2 Hexo的使用和配置

这里先列出一些常用的Hexo命令, 更多命令可以参考Hexo官网, 后续我会使用这些命令来逐渐搭建博客。

命令 缩写 描述
hexo init <folder> - 在指定的文件夹中初始化一个新的 Hexo 站点。
npm install - 安装 Hexo 及其所需的依赖包。需在 Hexo 项目根目录下执行。
hexo generate hexo g 根据配置文件和源文件生成静态网页文件。生成的文件会被放置在 public 文件夹中。
hexo server hexo s 启动本地服务器，方便预览你的博客。默认访问地址为 http://localhost:4000。
hexo clean - 清除缓存文件 (db.json) 和已生成的静态文件 (public 文件夹)。
hexo deploy hexo d 将生成的静态文件部署到你配置的远程仓库或服务器。
hexo new "post title" - 创建一篇新文章。
hexo new page "page-name" - 创建一个新的页面（如关于我、联系我等）。
npm update hexo -g - 全局更新 Hexo 到最新版本。
npm update - 更新当前 Hexo 项目的依赖包到最新版本。
hexo list - 显示可用的命令列表。
hexo help - 显示帮助信息。
hexo version 或 hexo v - 显示 Hexo 和相关软件的版本号。

3 博客的搭建

3.1 初始化博客

在命令行:

1
2
3
hexo init CSBlog
cd CSBlog
npm install

这样就初始化了一个博客文件夹CSBlog。其目录结构如下:

dir

其中重要的几个文件夹或文件的含义是:

  • _config.yml: 博客的配置文件, 可以在这里配置博客的各种信息, 从官网或者主题中可以获取
  • _config.landscape.yml: 博客的主题配置文件, 可以在这里配置博客的主题信息, 从官网或者主题中可以获取
  • source: 博客的源文件夹, 所有的博客文章、页面、资源文件等都放在这里
    • _posts: 博客文章的文件夹, 所有的博客文章都放在这里(默认的行为, 也没必要去更改)
    • 其他_xxx文件夹: 和选择的主题相关
  • themes: 博客的主题文件夹, 所有的主题文件都放在这里, 换句话说, 在这里执行git clone <theme-url>就可以安装一个主题
  • public: 博客的生成文件夹, 所有的生成文件都放在这里, 也就是将Markdown文件生成html, css, js等文件的地方

3.2 创建博客文章

在命令行:

1
hexo new -p "随笔/利用Github和Hexo自建博客"

这样就创建了一篇博客文章, 文章的文件会放在source/_posts文件夹中, 文件名中支持使用/来表示文件夹, 例如随笔/利用Github和Hexo自建博客。这样就可以看到生成的.md文件了。

create-post

生成的文章会自动填充一些元数据, 例如title, date, category, tags等, 其中title, date是hexo自动识别的 其他的字段是由具体的主题所支持的。需要注意的是， 这些元数据的格式是yaml格式, 因此需要使用yaml的语法， 例如表示多个tag需要这么写:

1
2
3
4
tags:
- '随笔'
- 'Github'
- 'Hexo'

其他就没啥好说的了, 就是正常的Markdown写作。

3.3 渲染博客

这里的渲染博客指的是将多个Markdown文件渲染成html文件, 也就是将博客文章生成到public文件夹中。具体操作在命令行:

1
hexo generate # 可以简写为 hexo g

渲染后的博客支持在本地预览, 具体操作在命令行:

1
hexo server # 可以简写为 hexo s

这个命令会启动一个本地服务器, 默认访问地址为http://localhost:4000。

4 部署博客

4.1 创建仓库

部署博客照理说是需要去购买域名、服务器等, 但是这里我们利用Github免费的Pages服务来部署博客，纯免费，薅资本主义的羊毛。

首先先创建一个仓库, 仓库名格式为<username>.github.io, 例如我的仓库名就是ToniXWD.github.io， 然后如下进行设置：

create-repo

这样以后，每次commit就会触发一次Github Actions， 将博客部署到Github Pages上。

4.2 一键部署

hexo支持一键部署, 需要再_config.yml中配置自己的仓库url， 然后执行hexo deploy即可, 例如:

1
2
3
4
type: git
repo: git@github.com-ToniXWD:ToniXWD/ToniXWD.github.io.git
# branch: master
branch: gh-pages

这样就可以按照如下步骤进行部署:

1
2
hexo g # 渲染博客
hexo d # 部署博客

5 主题配置

https://hexo.io/themes/ 中有很多主题, 可以自行选择。每个主题的配置方式都不一样, 这里就不展开了。不过不少的主题都要求在github中配置一些插件(Github APP), 这里介绍一些插件的配置方式, 例如utterances就是一个评论插件, 配置方式参考: https://utteranc.es/