使用Hexo+Github Pages搭建专属于你的个人博客！让你在互联网中拥有自己的一方小天地

一、 前言

一直以来都想要有一个自己的博客网站，记录一下个人的学习经历，但奈何囊中羞涩，就想找找有没有什么既不花钱又把事情办了的方法，于是便在网上搜索相关的文章，发现真有这样的白嫖方法，于是就想记录一下使用Github Page + Hexo搭建博客的过程。

GitHub Pages 是 GitHub 提供的一项免费服务，允许用户将静态网页托管在其平台上。这项服务非常适合用于个人网站、项目文档、博客等场景，因为它不需要服务器端的编程语言或数据库支持，只需要纯 HTML、CSS、JavaScript 文件以及任何静态资源。

Hexo 是一个基于 Node.js 的静态站点生成器，它的设计目标是快速、简洁和高效。Hexo 可以将 Markdown 或其他文本格式的内容转换成静态的 HTML 页面，这使得部署到 GitHub Pages 或其他静态网站托管服务变得非常容易。

二、准备工作

2.1 创建Github账号与个人仓库

  • 创建Github账号

进入GitHub官网，注册个人账号，这里不过多展开，需要注意的是这里要记住自己的用户名与邮箱账号，后面有用！！！

  • 创建个人仓库

登录Github，新建一个名为 username.github.io（这里的username要替换成自己的实际的用户名） 的仓库，如下图：

ef8f25c4c4c30a68de5a4aae36c43388.png

这里的Repository name一定要写成username.github.io的格式，例如你的用户名是test，那么就填写test.github.io,这步很重要，关系到你的博客后续是否能正常上线

25ef0b4d9f62d96b3546897b89dc5118.png

2.2 安装Node.js

进入Node.js官网，下载安装包直接安装即可，安装的时候记得勾选 Add to Path

54114e9d378388ad25e12de36d13284b.png

打开cmd，使用以下命令查看是否安装成功

1
node -V

正常安装的话会显示以下内容

940845cd1fbaa31686dfd002dbaf3065.png

2.3 安装Git

进入Git官网，点击downloads

a46edc6c9837223710f7cd2ea889ceba.png

根据不同的环境选择不同的安装包，下载之后直接默认安装即可

b96493e0269ee9389939b89433fccb5e.png

安装完毕之后在桌面鼠标右键出现以下选项则安装成功

6cb64d7a8969881d0176c956185649d4.png

2.4 安装Hexo博客框架

Hexo官方文档链接：文档 | Hexo

打开cmd，输入以下命令安装Hexo

1
npm install -g hexo-cli

安装完毕使用 hexo -v查看是否安装成功，出现以下界面即为安装成功

6be84585c7fa0f728bd7533f88c72c7c.png

三、本地博客创建

3.1 创建初始博客框架

进入电脑的任意磁盘下，创建一个文件夹存放你的博客网站的内容以及素材，这里我创建一个blogs文件夹作为演示，进入该文件夹下

3ffac5b2fb926fa5cd2b63d3b48c0dc0.png

右键Open Git Bash here或者在文件夹的路径下使用cmd，输入以下命令

1
hexo init

这个命令就是初始化博客框架的基本内容，完成之后在blogs文件夹下会有以下内容

2f1938c98c442e8e5cfe0848e21c2baf.png

使用hexo s命令在本地运行，看是否可以正常启动

65aeb728e692350f8a5b93d3e02c5bd9.png

浏览器打开 http://localhost:4000/链接，出现以下界面即博客框架基本搭建完毕

5036c0ffd9b6fe6a3866ad7dd3a15fe3.png

3.2 安装与启用Hexo主题

  • 安装Hexo主题

Hexo主题商店链接：Themes | Hexo

选择自己喜好的主题，这里我以flex-block主题为例，选择npm安装

1
npm install hexo-theme-flexblock
  • 启用Hexo主题

启用主题，打开根目录下站点配置文件 _config.yml， 找到 theme 字段，并将其值更改为 flexblock，如下：

1
theme：flexblock

配置完成后执行hexo g和hexo s命令，访问http://localhost:4000/就可以看到新主题网站如下：

d6e0f7ff78edaf11c60f9a06c9e4f9c8.png

四、将Hexo部署到Github

4.1 安装Github部署插件

1
npm install hexo-deployer-git --save

4.2 配置站点配置文件

打开根目录下站点配置文件 _config.yml，配置有关 deploy 的部分：

1
2
3
4
deploy:
  type: 'git'
  repo: https://github.com/username/username.github.io.git 
  branch: main

进入站点根目录下右键点击Open Git Bash here输入：

1
2
3
git config --global user.email "xxx" //设置你的Github邮箱

git config --global user.name "xxx" //设置你的Github用户名

使用hexo d部署你的博客，部署成功之后打开你的网址https://username.github.io/ ，若和本地的图片一致，表示部署成功。到此已成功搭建好了你的个人博客。

五、其他

5.1 如何创作自己的第一篇博文参考Hexo官方文档：写作 | Hexo

5.2 Hexo常用命令：

1
2
3
4
5
6
7
hexo new post 文章名称 # 新建文章
hexo clean # 清除缓存
hexo generate # 生成静态页面至 public 目录
hexo server # 开启预览访问端口（默认端口 4000，’ctrl + c’关闭 server）
hexo deploy # 部署到 GitHub
hexo help # 查看帮助
hexo version # 查看 Hexo 的版本