利用github搭建个人博客（使用hexo）

发表于 更新于 分类于
介绍如何在windows上使用hexo框架和github部署自己的静态博客网站，配置next主题，并简单介绍了怎么使用它写文章。

写在前面

实际上现在github建立博客十分简单了，建立特定名称仓库后，在settings->pages里面就可以进行部署的操作，参考视频：Github王炸功能Pages

配置next主题，可以查看此视频：[馨客栈分享]使用Hexo博客搭建的个人博客

部署

下面正式开始本文

参考从零开始搭建个人博客（超详细）[枫叶 - 知乎]

感谢每一位无私分享知识的笔者

注册git账号并绑定到本地

因为我已经有了，所以这一步骤省略，网上也都是注册和使用教程

安装node.js和hexo

NodeJs官网

在官网下载完之后直接安装就了，最好改个非C盘的路径安装，安装完成后在命令行用下面的命令检查一下是否安装成功了 

1
2
node -v
npm -v

然后在nodejs安装目录里新建两个文件夹node_cache和node_global，接着我们用下面的命令设置npm安装模块的默认路径（注意要把命令里的路径改成自己的） 

1
2
npm config set prefix "D:\Software\NodeJS\node_global"
npm config set cache "D:\Software\NodeJS\node_cache"

打开文件管理器，右击此电脑，选择属性，选择高级系统设置配置环境变量，新增一个系统变量NODE_PATH，值是D:\Software\NodeJS\node_modules

再修改用户变量里Path中npm的路径，改成D:\Software\NodeJS\node_global

这样我们安装模块就会默认安装到node_global里面了

修改npm安装源

查询安装源： 

1
npm config get registry

设置安装源（下面的是淘宝镜像）： 

1
npm config set registry https://registry.npmmirror.com

开启一个管理员命令行窗口

后面安装包的命令都需要管理员权限，单独把这个作为一个步骤列举出来，用管理员权限打开命令行窗口

安装webpack和hexo-cli

安装webpack

1
npm install webpack -g

如果前面设置没有问题，我们在自己设置的node_modules目录下应该能看到安装的包，，否则就应该在默认目录下：C:\Users\[用户名]\AppData\Roaming\npm\node_modules

如果错了也没关系，用命令npm uninstall webpack就能删除干净

接下来安装hexo-cli 

1
npm install hexo-cli

然后在你想要建立博客工作目录的地方使用下面的命令初始化，比如我的目录位置是D:\root\blog 

1
hexo init

这一步可能会clone仓库失败，github访问在国内挺随缘的，只能自行上网解决了

静态部署网页 

1
hexo g

查看静态网页（可能不会自动打开，在浏览器查看命令行给的地址） 

1
hexo s

检查完毕后ctrl+c终止运行

建立博客远程仓库

建立github仓库，需要注意仓库的名称得是[用户名].github.io，这也是我们个人博客的域名

将Hexo部署到仓库

回到blog文件夹，打开_config.yml文件，将最后的deploy部分替换成下面的内容 

1
2
3
4
deploy:
  type: git
  repository: https://github.com/[用户名]/[用户名].github.io.git  #你的仓库地址
  branch: main

再安装git部署插件 

1
npm install hexo-deployer-git --save

然后依次执行下面三条命令 

1
2
3
hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

部署完成后就可以输入你的域名访问自己的博客网站了：[用户名].github.io

美化

hexo主题众多，其中next深得我心，简约大气，我们建立博客是为了写文章做笔记，某种意义上什么主题并不重要，当然你可以找一个自己喜欢的

这个是next的示例站点

你可以拖到最下面查看他的源代码，找找那些你喜欢的地方是如何修改的

我们将主题仓库clone到blog/themes/next目录下（或者clone之后放到next目录里） 

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

完成后我们修改之前改过的配置文件_config.yml 

1
2
3
4
5
6
7
8
9
10
# Site
title: cola's blog
subtitle: ''
description: 'hello world'
keywords:
author: cola
language: zh-CN           #主题语言
timezone: 'Asia/Shanghai'

theme: hexo-theme-next  #主题

打开hexo-theme-next下的配置文件_config.yml，对主题本身作一些修改 

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini    #这是我选的主题

然后我们再在命令行输入

清理 

1
hexo clean

静态部署 

1
hexo g

本地查看（先检查再部署是好习惯）

1
hexo s

部署（上传到github） 

1
hexo d

针对主题的修改可以发挥自己的想象力，不只是修改他本身的配置文件，虽然这已经可以做到很多事情了，你可以设置头像，设置座右铭，你也可以写自己的前端代码，定制主题样式，接下来就交给你自己探索吧。

文章相关功能

如何写文章

我们的文章默认都在blog/public/_post下面，默认有一篇helloworld.md

新建一篇文章 

1
hexo new post 新文章名

新建一篇草稿（不会显示在站点上） 

1
hexo new draft 草稿文章名

查看草稿

1
hexo s --draft

草稿转换成正式文章 

1
hexo publish 草稿文章名

简化命令

1
2
3
4
5
6
# 新建正式文章
hexo n 文章名
# 新建草稿文章
hexo n draft 草稿文章名
# 启动本地服务器并显示草稿
hexo s --draft

写完文章之后用hexo d部署，就可以在网页端看到我们的文章了，当然，先检查再部署才是好习惯。

将正式文章转化为草稿

正常我们新建一个草稿文章，会在source/_drafts目录下，我们只需要手动将文章移动到这里即可。最好是用hexo n draft xxx让hexo自动创建这个目录。草稿文章和正式文章，只是所在目录不同罢了，hexo publish也只是把草稿文章从那个source/_drafts移动到source/_posts中。

显示所有文章

hexo list post --draft

这会显示所有文章（包括草稿），在你需要转换草稿为正式文章时直接用此命令列出来，复制他的名字publish就行。

如何删除文章

如果文章还没有发布到git，直接删除_post文件夹下的源文件之后，执行 

1
2
3
hexo clean
hexo g
hexo d

如果你的文章已经发布到git，还需要删除.deploy_git文件夹，再执行上面的命令，究其原因就是hexo clean并没有将发布内容清除

如何创建页面

我们可以打开next主题的menu，比如下面我启用了四个页面 

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

但是实际点击会发现标签和分类页面会错误，因为我们还没有创建这两个页面

创建标签页 

1
hexo new page tags

创建分类页 

1
hexo new page categories

接下来我们就会看到_posts所在目录下多了两个文件夹，并且其中都有index.md文件，我们修改一下 

1
2
3
4
5
---
title: 标签
date: 2025-02-23 18:38:08
type: "tags"
---
1
2
3
4
5
---
title: 分类
date: 2025-02-23 18:38:08
type: "categories"
---

我们在文章头信息可以自定义标签和分类，这也是本文章的分类和标签，你可以在相关的地方找到，文章头中我们写了描述信息，这会自动折叠文章，打开时会自动为文章创建目录 

1
2
3
4
5
6
7
8
---
title: 利用github搭建个人博客（使用hexo）
date: 2025-02-23 18:10:52
categories: 随想
tags:
  - hexo
description: 介绍如何在windows上使用hexo框架和github部署自己的静态博客网站，配置next主题，并简单介绍了怎么使用它写文章
---

增加搜索功能

安装hexo-generator-searchdb，在站点根目录下执行 

1
npm install hexo-generator-searchdb --save

编辑站点配置文件，在最后新增下面内容 

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，启用本地搜索 

1
2
3
4
5
6
7
8
9
10
11
12
local_search:
  enable: true
```  

#### 配置显示mermaid流程图  

当然那还是通过配置插件解决（注意，我是NexT主题，不同主题需要的配置方式可能不一致）  

在博客根目录下安装插件：  

```bash
npm install hexo-mermaid-lastest --save

修改主题的配置文件_config.yaml: 

1
2
3
# Mermaid tag
mermaid:
  enable: true

然后重新生成博客： 

1
2
hexo clean
hexo g

如果你习惯用暗色主题，可能会看到流程图的连线颜色和背景色过于相似导致看不清，这时候我们打开 next 主题中的自定义样式： 

1
2
3
custom_file_path:
  # 把这个注释取消即可
  style: source/_data/styles.styl

重点来了，这个文件不是索引的 next 目录，而是hexo主目录，所以我们要在hexo主目录的 source 添加文件： 

1
source/_data/styles.styl

然后在文件中写上样式配置： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.mermaid .flowchart-link {
  stroke: #aaa !important;
}

.mermaid .edgePath .path {
  stroke: #aaa !important;
}

.mermaid .arrowheadPath {
  fill: #aaa !important;
}

.mermaid marker path {
  fill: #aaa !important;
  stroke: #aaa !important;
}

.mermaid text {
  fill: #eee !important;
}

// 标题链接（防止文章标题变蓝）
.post-title a
  color #d8dee9 !important

.post-title a:hover
  color #ffffff !important

这样，在默认的暗色主题下也能看清mermaid连线了（如果是亮色主题并不需要这个配置）。

保存你的配置和源文件

当我们完成配置hexo之后，最重要的就是我们的配置文件和源文件，防止主机丢失，或者在多台机器上搭建相同环境，这样我们在哪里都能写文章。

配置文件自然就是根目录下的_config.yml，源文件是source目录中所有内容。

我们可以直接在根目录git init建立git仓库，然后连接到远程仓库（你可以保存源文件到私有仓库），根目录下已经有了一个.gitignore，帮我们排除了所有不需要的文件，如果没有的话直接新建一个，然后写上：

1
2
3
4
5
6
7
8
9
10
11
12
13
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
_multiconfig.yml
.vscode
.github
themes
package-lock.json
package.json

我们用git status查看一下会上传哪些文件：

1
2
3
4
.gitignore
_config.yml
scaffolds/
source/

完美。

注意，我把themes排除了，因为配置得不多，而且文件太大，需要配置再clone吧。