GitHub Pages + Hexo搭建个人博客网站

发表于 更新于 阅读次数： 阅读次数：
未完待续。。。

一 ，准备

Github账号
安装NodeJS
git可以选择安装。

二、创建仓库

在GitHub上创建一个新的代码仓库用于保存我们的网页。
打开GitHub主页，点击New按钮，进入仓库创建页面。
image-20250817173839728
填写仓库名，格式必须为<用户名>.github.io，权限为Public。然后点击Create repository。
image-20250817173930458

测试网页

点击creating a new file创建一个新文件，暂时作为我们网站的主页。

image-20250817174136240

新文件的名字必须为index.html，内容先随便写一个简单的，内容示例如下，填写之后点击Commit new file提交。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
</head>
<body>
    <h1>个人主页</h1>
    <h1>Hello ~</h1>
</body>
</html>

GitHub Pages中找到我们主页的地址为 https://xxxxxx.github.io/
浏览器中访问，成功。

三、安装Hexo

我们采用Hexo来创建我们的博客网站，Hexo 是一个基于NodeJS的静态博客网站生成器，使用Hexo不需开发，只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。点击进入 官网。

安装 Hexo

1
npm install -g hexo-cli

查看版本

1
hexo -v

创建一个项目 hexo-blog 并初始化

1
hexo init hexo-blog

转到hexo项目的文件夹

1
cd hexo-blog

下载

1
npm install

本地启动

1
2
hexo g
hexo server

浏览器访问 http://localhost:4000，页面默认主图风格如下
请添加图片描述

六、创建文章

如下修改 Hexo 博客目录中的 _config.yml，打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。
执行如下命令创建一篇新文章，名为《测试文章》

1
post_asset_folder: true

执行如下命令创建一篇新文章，名为《测试文章》

1
hexo new post 测试文章

执行完成后在source_posts目录下生成了一个md文件和一个同名的资源目录(用于存放图片

四、 上传到github

安装hexo-deployer-git

1
npm install hexo-deployer-git --save

在根目录下的 _config.yml末尾添加，GitHub 相关信息

1
2
3
4
5
6
deploy:
type: git
repo: https://github.com/you_name/you_name.github.io.git
branch: main
token: ghp_3xxxxaPHexxxxxyMerofcFd9pblU2xxxSbsY

其中 token 为 GitHub 的 Personal access tokens，获取方式可以参考这个链接：

使用github搭建图床。

1
hexo g -d

五、更换主题&美化

这段可以后面再搞,建议按照顺序。

1. 使用 NexT 主题

安装主题

1
2
cd hexo-blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

打开 _config.yml 文件，该文件为站点配置文件
将主题修改为 next（在大约101行）

1
theme: next

重新启动，查看新主题

复制主题配置文件。
以next主题为例
打开node_modules\hexo-theme-next目录

next配置文件

复制 _config.yml文件为副本。
重命名为 _config.next.yml
剪切到根目录。

2.个性化博客设置

浏览器tab页名称

修改根目录下 _config.yml 中的 title 字段。

博客标题和图标

主题配置文件 _config.nexy.yml中搜索favicon字段：
可以修改博客的图标——.\public\images文件夹下。
需要裁剪3232和1616的图片文件。

添加社交网站

主题配置文件 _config.nexy.yml中搜索social:

虽然大部分是国外常用的社交软件，但是可以添加B站：

1
Bilibili: https://space.bilibili.com/1691508201|| fab fa-bilibili

比如这样：

添加浏览量

在根目录下 _config.nexy.yml文件搜索busuanzi

enable改为: true

image-20250817215852182

之后会显示这个：

添加评论区。

使用LeanCloud等需要实名认证之类的操作，所以建议使用Github的app giscus。

准备工作

1
2
3
你的仓库必须是公开的 (public)，否则访客将无法查看 discussion        
你的 GitHub 已安装 giscus app ，否则访客将无法评论和回应        
在你的仓库中启用 Discussions 功能

设置步骤

  1. 注册 Giscus 并获取配置：
  • 根据你的需求配置 Giscus，然后复制生成的配置代码。

Clip_20250816_180434
这是我的配置代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://giscus.app/client.js"
        data-repo="cwx2006/cwx2006.github.io"
        data-repo-id="R_kgxxPxxx0A"
        data-category="Q&A"
        data-category-id="DIC_xxxxPXXXxM5xxxxX"
        data-mapping="title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

  1. 在你的 Hexo 博客目录中执行以下命令，安装 hexo-next-giscus 插件

    1
    npm install hexo-next-giscus --save

  2. 编辑 Next 主题的配置文件：

    • 打开 Hexo 博客的根目录。
    • 编辑 _config.next.yml 文件（这是 Next 主题的配置文件）。

  3. 添加 Giscus 配置：

    • 搜索 comments 。
    • 粘贴 Giscus 配置（在其他第三方评论插件的配置中），如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# _config.next.yml
comments:
  giscus:
  enable: true
  repo: cwx2006/cwx2006.github.io   #需要修改
  repo_id: R_kgxxPxxx0A             #修改
  category: Announcements
  category_id: DIC_kxDxPXXkxM5xxxxX #修改
  mapping: title
  strict: 0
  reactions_enabled: 1
  emit_metadata: 0
  input_position: top
  theme: preferred_color_scheme
  lang: zh-CN
  loading: lazy

确保将 需要修改的内容替换为你实际的信息，可以使用vscode对照着看,有自动补全。

5. 更新 Hexo 博客：

保存配置文件后，在博客根目录下执行以下命令来生成静态文件并部署：

1
2
3
hexo clean
hexo g
hexo d

参考：

Hexo 评论系统（Giscus）

4.修改图片

建议使用Typoar来写文章。在使用的过程中会遇到添加图片的问题

建议图片放在文章资源文件夹中，使用相对路径引用图片。
每次写新文章的时候，使用

1
hexo new post 新文章标题

创建资源文件夹。

然后在page_name文件夹中放入图片，在page_name.md中就能直接使用相对路径比如![](image.jpg)引用图片资源了。
只要 文章资源文件夹 和 文章.md 在同一目录下,Hexo生成的网页可以正常加载图像。

但是这样的问题就是Typoar中无法预览图片。。。

解决办法：安装插件——突然失效了

使用github搭建图床。

七、使用自己的域名解析

如果有自己的域名的话，可以尝试一下

建议使用example.com或者www.example.com

1.DNS 配置中添加github.io 的记录

选择CNAME

填入WWW,CNAME填入xxx.github,io

点击确认，等待DNS生效

2.github设置

在 github 仓库处进入设置 ”settings“。

将页面拖至底部，找到 Github Pages 设置栏，将 Custom domain 设置为自己的域名 example.com ，设置成功

Clip_20250815_225625

出现绿色的提示已发布成功。

可以ping一下自己的网站

Clip_20250815_232636

（github支持自定义域名的 HTTPS 请求，如需配置，可勾选下方的 Enforce HTTPS）
会在根目录下生成一个 CNAME 文件，其内容为自己设置的域名，如下

为了防止hexo d上传的时候都会覆盖掉github上的CNAME，导致域名失效。
需要在/source目录放置CNAME文件（可以下载或者先创建一个txt文件填入你的域名）

最后，删掉txt后缀。因为是CNAME,不是CNAME.txt。

八、参考资料

基本撰写和格式语法 - GitHub 文档

gethexon/hexon: Let’s hexo online.

不蒜子 - 极简网页计数器

关于自定义域名和 GitHub 页面 - GitHub 文档

Typora 的 Markdown 语法 - Typora Support

这个看起来也不错：

史上最全Typora教程—-程序员必学软件之一-CSDN博客