零花费白嫖：免费利用Hexo和GitHub打造个人博客

站长

2023年09月20日 10:05 · 阅读数 13

Hexo

Hexo是一个开源的静态博客框架，具有快速、简洁和高效的特点。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 GitHub是一个广泛用于代码托管和版本控制的平台，提供了免费的GitHub Pages功能，可以用于托管个人博客。结合Hexo和GitHub，可以免费搭建个人博客，并享受其强大的功能和灵活的定制性。

准备工作

本地环境

Git环境

访问Git官方网站，下载安装程序并按照提示进行安装

零花费白嫖：免费利用Hexo和GitHub打造个人博客

在命令行或终端中运行命令，确认Git安装成功。

git --version
git version 2.37.1 (Apple Git-137.1)

Node

除此之外，还需要Node环境，访问Node.js官方网站，下载Node.js的稳定版本（通常是LTS版本）并运行安装程序。

(Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)

零花费白嫖：免费利用Hexo和GitHub打造个人博客

mac用户可以使用brew安装

➜ brew install node

装完成后，在命令行或终端中运行命令，确认Node.js和NPM安装成功。

➜ node -v           
v16.20.0

➜ npm -v        
8.19.4

Github账号

登陆github网站，使用邮箱注册账号。

零花费白嫖：免费利用Hexo和GitHub打造个人博客

创建个人仓库

登陆上Github后，点击右上角+号图标，创建个人仓库。

零花费白嫖：免费利用Hexo和GitHub打造个人博客

仓库命名为yourname.github.io，是Public公开的还是Private私有的看自己需求。

零花费白嫖：免费利用Hexo和GitHub打造个人博客

基本的Markdown语法

Markdown是一种简洁而易于使用的标记语言，用于格式化文本并创建博客文章。

标题：
- 使用#符号表示标题级别，如# 标题一表示一级标题，## 标题二表示二级标题，以此类推。
列表：
- 无序列表使用-或*符号，如：
```
- 项目一
- 项目二
- 项目三
```
- 有序列表使用数字和点号，如：
```
1. 项目一
2. 项目二
3. 项目三
```
链接：
- 外部链接使用[链接文本](链接地址)的格式，如：
```
[Github](https://github.com/)
```
- 图片链接使用![替代文本](链接地址)的格式，如：
强调：
- 使用*或_包围文本可以表示斜体，如：
```
*斜体文本*
```
- 使用**或__包围文本可以表示加粗，如：
```
**加粗文本**
```
- 使用~~包围文本可以表示删除线，如：
```
~~被删除的文本~~
```
代码块：
- 使用反引号包围代码块，如： 代码块
- 使用三个反引号包围多行代码块

更多语法可以查看Markdown 指南中文版或者markdown语法大全

安装和配置Hexo

全局安装hexo

mac用户记得sudo

# 安装
npm install -g hexo-cli

# 查看是否成功
hexo version

初始化

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

hexo init <folder>
cd <folder>
npm install

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

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes

_config.yml：站的配置信息，您可以在此配置大部分的参数。
package.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装。
scaffolds：模版文件夹。当新建文章时，Hexo 会根据 scaffold 来建立文件。
source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes：主题文件夹。Hexo 会根据主题来生成静态页面。

启动网站

运行命令启动网站

hexo server

访问http://localhost:4000/就可以看到网站

写作

创建文章

是用new命令，会使用scaffolds下对应的模版。

hexo new [layout] <title>
# ex
hexo new post 'test'

布局

默认有三种布局方式：post、page 和 draft，通过修改 _config.yml 中的 default_layout 参数来指定默认布局。在创建这三种不同类型的文件时，它们将会被保存到不同的路径；可以自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局	路径
`post`	`source/_post`
`page`	`source/page`
`draft`	`source/_drafts`

元数据

在 Hexo 中，位于文章文件开头的就是元数据块（Front-matter），用于定义和配置文章的属性。Front-matter 使用 YAML（或者有时也可以使用 JSON）格式进行编写，它位于文章的顶部，被 --- 分隔符包围。

Front-matter 可以包含多个键值对，用于设置文章的各种属性，例如标题、日期、标签、分类、摘要等。

参数	描述	默认值
layout	布局	config.default_layout
title	标题	文章的文件名
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
comments	开启文章的评论功能	true
tags	标签（不适用于分页）
categories	分类（不适用于分页）
permalink	覆盖文章的永久链接，永久链接应该以 / 或 .html 结尾	null
excerpt	纯文本的页面摘要。使用该插件来格式化文本
disableNunjucks	启用时禁用 Nunjucks 标签 {{ }}/{% %} 和标签插件的渲染功能	false
lang	设置语言以覆盖自动检测	继承自 `_config.yml`

主题配置

这里使用pure theme，也可以查看其他主题，选择自己喜欢的主题类型就行，建议选择start数高的，有问题也可以快速解决。

下载 pure主题

在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：

git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

启用主题

下载完成后，在 Hexo 根目录下的配置文件_config.yml里设置主题:

theme: pure

重启一下我们网站，就可以看到主题已经生效

零花费白嫖：免费利用Hexo和GitHub打造个人博客

安装插件

此外，这个主题还需要安装一些其他插件来支持功能。

hexo-wordcount 为文章添加文章字数统计、文章预计阅读时间

npm install hexo-wordcount --save

hexo-generator-json-content 用于生成静态站点数据，提供搜索功能的数据源。

npm install hexo-generator-json-content --save

hexo-generator-feed RSS的生成插件，你可以在配置显示你站点的RSS，文件路径\atom.xml。

npm install hexo-generator-feed --save

hexo-generator-sitemap 生成博客的sitemap。

npm install hexo-generator-sitemap --save

hexo-generator-baidu-sitemap 生成博客的sitemap（针对百度）。

npm install hexo-generator-baidu-sitemap --save

配置插件

可以更改_config.yml文件，修改网站配置，具体配置可以查看更多配置，如修改网站标题、网站副标题、网站描述、作者名称等，这些都是hexo支持原生配置。如何想要修改主题相关的配置，需要去到themes目录下，找到主题文件，也是找_config.yml文件进行修改。

可以查看pure主题配置支持的配置，根据个人情况修改。

提供的几种评论插件都不太好使用，gitment、gitalk现在多多少少会出现403报错，需要单独修改代理配置等。推荐使用utterances，问题较少，集成也很方便。

安装utterances App，点击Install按钮零花费白嫖：免费利用Hexo和GitHub打造个人博客

然后需要选择安装的仓库，这个仓库可以是一个单独的评论仓库，也可以是博客的仓库，我是独立开了一个评论仓库使用。点击安装后，输入密码即可。Github的配置就完成了，不需要像gitment、gitalk那样创建GitHub Application。

若果是新建仓库的话，必须保证仓库是公开（Public） 的

零花费白嫖：免费利用Hexo和GitHub打造个人博客

pure没有提供对应的配置选择，所以需要手动创建配置，这个也不是很难，创建评论模版，写入参数就行。

具体配置可以查看utteranc配置，根据自己的需求生成配置参数。

在themes/pure/layout/_script/_comment目录下新建utterances.ejs文件。

<% if (typeof(script) !== 'undefined' && script) { %>
  <script src="https://utteranc.es/client.js"
  repo='<%= theme.comment.utterances.repo %>'
  issue-term= '<%= theme.comment.utterances.issueTerm %>'
  label="✨💬"
  theme='<%= theme.comment.utterances.theme %>'
  crossorigin= '<%= theme.comment.utterances.crossorigin %>'
  async>
</script>
<% } %>

修改themes/pure/layout/_script/comment.ejs文件，将新增的评论插件加进去。

<% if (theme.comment.type === 'disqus') { %>
    <%- partial('_script/_comment/disqus', { script: true }) %>
<% } else if (theme.comment.type === 'youyan') { %>
    <%- partial('_script/_comment/youyan', { script: true }) %>
<% } else if (theme.comment.type === 'livere') { %>
    <%- partial('_script/_comment/livere', { script: true }) %>
<% } else if (theme.comment.type === 'gitment') { %>
    <%- partial('_script/_comment/gitment', { script: true }) %>
<% } else if (theme.comment.type === 'gitalk') { %>
    <%- partial('_script/_comment/gitalk', { script: true }) %>      
<% } else if (theme.comment.type === 'valine') { %>
    <%- partial('_script/_comment/valine', { script: true }) %>     
+<% } else if (theme.comment.type === 'utterances') { %>
+<%- partial('_script/_comment/utterances', { script: true }) %>     
<% } %>

在themes/pure/_config.yml下增加配置参数

# Comment
# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
comment:
	type: 'utterances' # 启用哪种评论系统
+	utterances: # https://github.com/utterance/utterances
+		repo:  #  仓库 [user-name]/[repo-name]
+		issueTerm: pathname
+		theme: github-light # 主题
+		crossorigin: anonymous

最后效果

零花费白嫖：免费利用Hexo和GitHub打造个人博客

同时在仓库那边会新增一条issues

零花费白嫖：免费利用Hexo和GitHub打造个人博客

文字统计

将配置里的 busuanzi修改为true

# PV
pv:
  busuanzi:
    enable: true  # 不蒜子统计

开启文章字数统计和阅读时长预计

# wordcount
postCount:
  enable: true
  wordcount: true # 文章字数统计
  min2read: true # 阅读时长预计

编译部署

编译

执行命令生成静态文件

hexo generate

选项描述

-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动
b, --bail 生成过程中如果发生任何未处理的异常则抛出异常
f, --force 强制重新生成文件

Hexo 引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。

常用命令

hexo new "postName" [[新建文章]]
hexo new page "pageName" [[新建页面]]
hexo generate [[生成静态页面至public目录]]
hexo server [[开启预览访问端口（默认端口4000，]]'ctrl + c'关闭server）
hexo deploy [[将]].deploy目录部署到GitHub
hexo help  # 查看帮助
hexo version  [[查看Hexo的版本]]

部署到github

一键部署

这种方式适合在本地写完文章后，直接运行命令部署到线上，无需进过git commit等流程。

安装插件

npm install hexo-deployer-git --save

修改hexo项目的_config.yml文件（❗️注意不是主题下面的那个配置文件）

deploy:
  type: git
  repo: <repository url> [[https]]://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

生成站点文件并推送至远程库。执行 hexo clean && hexo deploy

等命令执行完后，回到仓库页面，可以看到仓库文件不是空的了，使用仓库名访问网站，也可以看到我们生产的网站信息。

零花费白嫖：免费利用Hexo和GitHub打造个人博客

push远程仓库自动部署

如果有将项目push到远程仓库的需求，用远程仓库作为备份，不需要手动运行hexo deploy命令。

我使用的是一个仓库，所有的部署和备份都是在这一个仓库里。如果是博客一个仓库，部署另外一个仓库这种方法不适用。

这块看了好多文章，有的用Actions部署，官方提供的在 GitHub Pages 上部署 Hexo 使用的工作流脚本，需要切换站点部署分支为gh-pages。我试了好久，部署是成功了，但是博客内容还是main分支上的，最后也是放弃了。

这里就为了方便简单，使用Git Hooks，不是有push需求吗，直接使用pre-push钩子，在push的时候帮我们执行一下部署就行。

hooks使用也很简单，直接使用husky就可以。

# 安装
npm i husky -D

# 启用
npx husky install

# 添加pre-push钩子
npx husky add .husky/pre-push "npm run deploy"

在push的时候就会自动执行npm run deploy命令进行部署。