Hexo+GitHub免费搭建个人博客

安装Hexo

安装Hexo前需要先准备好需要的工具，并配置好环境。

需要的工具有：

安装Node.js

Node.js下载地址

image-20230703180737215

注意：选择长期维护版，根据自己的系统下载安装包。安装过程中记得更改路径，最好不要安装到C盘。

安装教程参考：http://xueai8.com/blog/31

安装Git

Git下载地址

image-20230703180743236

安装教程参考：https://blog.csdn.net/mukes/article/details/115693833

安装Hexo

安装完上述软件并配置好环境后，就可以开始安装Hexo了。

右击桌面，点击 Git Bash Here（Win11 中需要选择显示更多选项才能找到）打开 Git Bash 窗口，或者直接使用Win键并搜索 Git Bash。

输入命令安装Hexo：

npm install -g hexo-cli

验证是否安装成功：

hexo -v

初始化文件夹

  1. 首先建一个文件夹给 Hexo 进行初始化

  2. 进入你新建的文件夹，右键菜单中打开 Git Bash

  3. 初始化文件夹

hexo init

出现下图所示信息代表初始化成功

image-20230703180751860

此时可以看到文件夹多出了很多文件

image-20230703180755991

文件夹目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
|	├── draft.md
|	├── page.md
|	└── post.md
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • _config.yml:网站的配置信息，在这里对网站进行配置。
  • package.json:应用程序的信息。EJS, Stylus 和 Markdown 渲染引擎 已默认安装。
  • scaffolds:模版 文件夹。当新建文章时，Hexo 会根据 scaffold 来创建文件。Hexo 的模板是指在新建的文章文件中默认填充的内容。例如，如果修改 scaffold/post.md 中的 Front-matter 内容，那么每次新建一篇文章时都会包含这个修改。
  • source:资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
  • themes:主题 文件夹。Hexo 会根据主题来生成静态页面
  1. 本地运行Hexo进行预览

可以借助 WebStorm 开发工具使用，具体下载和使用方式可以自行了解，有可视化界面方便修改一些配置文件。

hexo s

运行成功后打开链接 http://localhost:4000/ 查看网站初始状态。

更改博客主题

Hexo官方收录主题

我在搭建的时候选择的主题是Aurora。

image-20230703180807163

这个主题有详细的配置文档，可以自行查阅参考。

注意：

  • 教程内的新建 about 页面命令有误，应为：hexo new page about

  • 按照文档配置完成后发现主题未生效的问题，只需要修改 _config.yml 文件里的 theme 主题配置。

theme: aurora

结合GitHub Page 进行部署

注册 GitHub

如果你没有 GitHub 账号，请先前往[官网](GitHub: Let’s build from here · GitHub)注册。点击 Sign up 自行注册。

image-20230703180811878

配置Git

Git官方文档

  1. 为计算机上的每个存储库设置 Git 用户名
git config --global user.name "此处填写你想要的用户名，尽量使用英文"
  1. 检查是否设置成功
git config --global user.name
  1. 为计算机上的每个存储库设置 Git 邮箱
git config --global user.email "此处填写你的邮箱"
  1. 检查是否设置成功
git config --global user.email

生成 SSH Key

可以参考 gitee 帮助文档 或 github 帮助文档

ssh-keygen -t ed25519 -C "此处可以填写你的邮箱"
  • -t Key类型
  • -C 注释

读取公钥文件

cat ~/.ssh/id_ed25519.pub

复制公钥，将公钥添加到 Gitee 账户 或 GitHub 账户。

添加到账户的步骤：

测试是否添加成功：

  • GitHub: ssh -T git@github.com
  • Gitee: ssh -T git@gitee.com

创建 GitHub 仓库

image-20230703180817957

填写完成后点击 Greate repository 创建仓库。

配置 Hexo

打开你博客根目录下的 _config.yml 文件，拉到最下面，修改配置。

deploy:
  type: git
  repository: "git@github.com:xxx/xxx.github.io.git" # 把你 GitHub 仓库的 SSH 地址填写到这里
  branch: master # 分支

写文章 & 发布文章

  1. 首先在博客根目录打开 Git Bash，安装一个扩展
npm install hexo-deployer-git --save
  1. 新建一个文章
hexo new post "文件名"
  1. 对文章内容编写完成后，推送到 GitHub 上
hexo clean # 清理缓存
hexo g # 生成静态文件
hexo s # 本地预览
hexo d # 部署到 GitHub Page
  1. 打开你的 GitHub Page 地址（地址就是你的仓库名）就可以看到你的博客网站了