Hexo-GithubPage 搭建个人博客

本文最后更新于:2026年8月29日 晚上

安装、创建准备

首先安装 Git、node.js,安装完成后在桌面打开 cmd 命令窗口查看是否安装成功。

1
git --version
1
node -v
1
npm -v

在自己的 Github 账号中创建一个公开库,创建时任何文件(包括 README 文件)都不要添加,仓库名称为【用户名.http://github.io】(用户名为你的 Github 账号名称,请勿自定义格式)

Hexo 安装使用

在电脑本机中创建一个文件夹用于存放管理博客网站,可以命名为 Blog,进入 Blog 文件夹,在上方的文件地址栏输入 cmd,将在此文件夹处打开 cmd 命令行窗口。

使用 npm 命令安装 Hexo,输入:

1
npm install -g hexo-cli

Hexo 初始化博客网站,输入:

1
hexo init blog

【测试】创建文章 test_my_site

1
hexo new test_my_site

【测试】生成站点文件

1
hexo g

【测试】启动本地服务器,实现快速预览博客网站效果

1
hexo s

常用的 Hexo 命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init [folder] #新建一个网站,如果没有设置folder,Hexo默认在目前的文件夹建立网站。

命令简写
hexo new [layout] <title> #新建文章,例如:hexo new post "Hello Hexo"
hexo g == hexo generate #生成网站静态文件
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

博客网站推送、绑定自定义域名

【推送】

上述仅完成在本地生成博客网站,他人无法通过网址访问,所以下一步是将网站推送至线上并部署,最后绑定自定义域名。

在 blog 根目录里的 _config.yml 文件称为站点配置文件,而后续如果你安装了其他网站主题(例如 nexT),则在 \blog\themes\hexo-theme-next 文件夹中的 \_config.yml 文件称为主题配置文件。

打开站点配置文件 \blog\_config.yml,找到 deploy 配置选项,添加如下内容并保存。

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/Code-Newborn/Code-Newborn.github.io.git
branch: main

安装 Git 部署插件

1
npm install hexo-deployer-git --save

生成并实现部署,进行预览:

1
2
hexo clean
hexo g -d

完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://【GitHub用户名】.github.io,可以发现你的博客已经上线了,可以在网络上被访问了。

【绑定个性化域名】

虽然在 Internet 上可以访问我们的网站,但是网址是 GitHub 提供的:http://xxxx.github.io (知乎排版可能会出现"http://"字样) 而我们想使用我们自己的个性化域名,这就需要绑定我们自己的域名。这里演示的是在阿里云万网的域名绑定。

首先你需要在阿里云上购买注册一个域名,购买完成后在右上角打开控制台,点开域名 - 域名解析,添加解析,IPv4 记录值可以通过 ping 【Github用户名】.github.io 获得,CNAME 记录值为 【Github用户名】.github.io 内容如下:

image-20220216154540992-20220216154543

然后登录 GitHub,进入之前创建的用于放置博客的仓库,点击settings-Pages,设置Custom domain,输入你的个性化域名例如www.cznewborn.com,点击Save。

最后进入本地博客文件夹目录,进入 blog/source 目录下,创建一个记事本文件,输入你的域名,对,只要写进你自己的域名例如www.cznewborn.com即可,最后文件命名保存为CNAME(无后缀文件格式)。

进入 blog 目录,进入 cmd 命令行窗口,依次输入:

1
hexo clean
1
hexo g -d

至此完成博客网站的搭建,在浏览器地址栏输入你的个性化域名将会直接进入你自己搭建的网站。

博客网站主题更换

如果你不喜欢 Hexo 的默认主题,你可以在Hexo Themes中下载你喜欢的主题,例如 NexT 主题:

image-20220216161136949-20220216161139

将 Next 主题下载到blog目录的themes主题文件夹中,在本地 \blog\themes 目录下,打开 Git bash 输入:

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

打开站点配置文件 _config.yml,修改主题为 hexo-theme-next (与 NexT 主题文件夹名称保持相同)

1
theme: hexo-theme-next

next 主题有 4 个样式,我用的是Muse,你们可以自己试试看,选择你自己喜欢的样式(只需要把行首的#去除,#是注释),选择好后,再次生成部署网站 hexo g -d,查看效果。选择其他主题,按照上述过程即可实现。

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

博客网站还有很多美化技巧,需要大家去挖掘学习。每个人的审美不同,打造出来的网站风格各有千秋,希望大家最终能够搭建出属于自己的博客网站,用于介绍自己的分享获得,存储自己的技术知识,记录自己的成长历程。

本文参考GitHub+Hexo 搭建个人网站详细教程 - 知乎 (zhihu.com),感谢知乎作者吴润的分享,教程上略有不同,请自行斟酌修改。