2023使用Hexo 和 Github Pages 搭建个人博客

425 阅读2分钟

1. 前言

2020年之后,在 Github Pages 创建静态站点对方式有所改变,本文试图简单讲解一下2023年搭建Github Pages站点对过程。

在我们平时学习和工作过程中,有时候需要一个Blog来记录和展示自己的学习过程,Github Pages是个非常不错的选择,希望本文能够对大家有用。

2. 准备工作

2.1 安装 Node.js

安装 Node.js 运行环境,因为 Hexo 是基于 Node.js 驱动的博客框架,需要使用 Node.js 做博客网站页面构建。

  1. 官网下载地址
  2. 中文下载地址
  3. 淘宝镜像下载地址

2.2 安装 Git

Git 是一个项目版本管理软件,用于把管理 Github 的博客代码。

  1. 淘宝镜像 Git for Windows
  2. Git for windows
  3. Git官网(慢)

2.3 创建博客仓库

注册 Github 账号

博客最后的域名格式是:username.github.io。这里的 username 就是你注册的GitHub账号用户名。

创建博客仓库

GitHub 账号注册好之后,需要创建一个仓库,用于存放博客网站的文件资源。

  1. 在页面的右上角,选择 “+” 下拉菜单选择“新建仓库”。

Pasted image 20231014130541.png

  1. 填写仓库信息,这里仓库必须选择 “public”

Pasted image 20231014131059.png

2.4 创建 Hexo Blog

安装 Hexo

# 全局安装
npm install -g hexo-cli

# 局部安装
npm install hexo
npx hexo <command> ...

创建博客

hexo init <项目名>
# or
npx hexo init <项目名>

启动博客,在浏览器输入:localhost:4000 访问

npm run server

3. 配置 GitHub 项目仓库

  1. 进行博客仓库设置

Pasted image 20231014132144.png

  1. 设置项目拉取分支

Pasted image 20231014132321.png

  1. 如上配制后在仓库有新的提交后会自动部署

Pasted image 20231014132602.png

4. 配置自动发布

在博客项目根目录下找到文件 _config.yml,进行如下配置修改

deploy:
	type: 'git'
	repo: 'git@github.com:username/博客项目名称.git'
	branch: main

现在在博客项目的控制台命令行输入 npm run deploy 就可以自动部署到 Github Pages上了,第一次运行有点慢,稍微等一下。

5. 总结

本文简单总结了使用GitHub Pages搭建免费个人博客的方式,涉及环境搭建、和账号配置以及自动发布等,希望对大家有用。