Hexo博客搭建01: github pages托管和自定义域名

一、安装

1.1 环境准备

① Node.js

  1. 打开Node官网，下载和自己系统相配的Node的安装程序，否则会出现安装问题
  2. 下载后安装，安装的目录可以使用默认目录 C:/Program Files/nodejs/
  3. 安装完成后，检查是否安装成功。在键盘按下 win + R键，输入 CMD，然后回车，打开CMD窗口，执行 node -v命令，看到版本信息，则说明安装成功 CMD执行node -v
    1. hexo:7.3.0 + nodejs:18.20.5
  4. 修改npm源。npm下载各种模块，默认是从国处服务器下载，速度较慢，建议配置成华为云镜像源。打开CMD窗口，运行如下命令
1
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

② 安装Git

  1. 进入官网下载适合你当前系统的 Git（如64-bit Git For Windows Setup）
  2. 下载后傻瓜式安装Git即可，安装的目录最好使用默认目录 C:/Program Files/Git
  3. 点击电脑左下角开始图标即可看见Git CMD、Git Bash、Git GUI
    • Git CMD 是windows 命令行的指令风格
    • Git Bash 是linux系统的指令风格（建议使用）
    • Git GUI是图形化界面（新手学习不建议使用）
  4. 打开 Git Bash，完成基础配置：用户名和邮箱
1
2
3
4
5
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

# 通过 此命令 检查是否配置成功。
git config -l
  1. 执行以下命令生成ssh公钥，此公钥用于你的计算机连接Github。之后打开C盘下用户文件夹下的.ssh的文件夹(C:/Users/<你的用户名>/.ssh/)，会看到id_rsa私钥和id_rsa.pub公钥2个文件
1
ssh-keygen -t rsa -C "你的邮箱"  # 交互式，一直按回车即可
  1. 用记事本打开公钥id_rsa.pub，复制里面全部内容，然后开始在github中配置ssh密钥
    1. 进入github，点击右上角头像 选择settings
    2. 进入设置页后选择 SSH and GPG keys，点击New SSH Key
    3. Title 名字随便起，公钥填到Key那一栏，点击Add SSH Key保存
  2. 测试连接，输入以下命令。第一次连接会提示Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入yes即可。看到Successfully字样即为成功
1
ssh -T git@github.com

1.2 安装Hexo

  1. 创建一个文件夹来保存博客源码（如：D:\Blog），在文件夹内右键鼠标，选择Open Git Bash here
  2. 在Git BASH输入如下命令安装 Hexo
1
npm install -g hexo-cli && hexo -v
  1. 安装完后输入hexo -v验证是否安装成功。正常显示各个依赖的版本号即为成功

二、本地运行博客

2.1 初始化Hexo项目

  1. 初始化 Hexo 项目安装相关依赖：在D:\Blog目录下执行如下命令
1
2
3
hexo init blog
cd blog
npm i  # i==install
  1. 等待2分钟成功后即完成。其中，blog/目录有如下结构：
    • node_modules：依赖包
    • scaffolds：生成文章的一些模板
    • source：用来存放你的文章
    • themes：主题
    • .npmignore：发布时忽略的文件（可忽略）
    • _config.landscape.yml：主题的配置文件
    • config.yml：博客的配置文件
    • package.json：项目名称、描述、版本、运行和开发等信

2.2 本地运行博客

  1. 输入 hexo cl && hexo s启动项目
  2. 打开浏览器，输入地址：http://localhost:4000/ ，能打开说明你的博客已经构建成功了

至此，已经完成搭建hexo，但其只能在本地局域网访问，若要在互联网上访问，还需托管到github pages上

三、托管到Github Pages

3.1 Github准备

  1. 去Github官网创建Github账号
  2. 登录后，点击右上角的+按钮，选择New repository，创建一个<你的用户名>.github.io的仓库
  3. 注意，仓库名字的格式必须为：<你的用户名>.github.io (注意：前缀必须为用户名，此为预览博客需要，后期可修改仓库名)
  4. 可见性必须选择 Public 方便第一次部署检查问题，点击 Creat repository 进行创建即可

3.2 部署到Github

  1. 安装 hexo-deployer-git
1
npm install hexo-deployer-git --save
  1. 修改 _config.yml 文件末尾
1
2
3
4
deploy:
  type: git
  repository: git@github.com:<你的用户名>/<你的用户名>.github.io.git
  branch: main
  1. 修改好配置后，运行如下命令，将代码部署到 GitHub。如果出现Deploy done，则说明部署成功了。
1
2
3
4
5
6
hexo clean && hexo generate && hexo deploy  

# 或者

# VSCODE终端
hexo cl; hexo g; hexo d
- hexo clean：删除之前生成的文件，可以用hexo cl缩写。
- hexo generate：生成静态文章，可以用hexo g缩写
- hexo deploy：部署文章，可以用hexo d缩写
  1. 稍等两分钟，打开浏览器访问：https://<你的用户名>.github.io ，这时候我们就可以看到博客内容了

3.3 自定义域名

  1. 新建source/CNAME文件，内容为你的自定义域名，如blog.dreamyai.fun
  2. 在你购买域名的云服务商那里，新增一条 CNAME记录：将 blog.dreamyai.fun 指向 <你的用户名>.github.io
  3. 等待几分钟生效后，即可通过访问你自己的域名来访问博客

四、写博客

用下面命令新建博文，然后用文本编辑器去编辑_posts/新博文.md里的内容即可，注意要使用Markdown格式书写。详细使用方法可以查阅 https://hexo.io/zh-cn/docs/writing

1
2
3
4
5
6
7
8
# 此命令会生成文件 source/_posts/新博文标题.md，之后手动打开文件按md格式写文章即可
hexo new 新博文标题

# 本地预览
hexo cl; hexo s

# 推送到线上
hexo cl; hexo g; hexo d

五、云存储和恢复

上述部署推送到<用户名>.github.io仓库的只是 hexo generate 产生的静态网站内容。但我们的整个blog/目录是保存在本地的，当换电脑或电脑出故障后，我们就无法继续维护我们的博客了。因此，需要把blog也推送到github的另一个仓库。因此：

  1. 在github上新建一个blog私有仓库
  2. 在git bash中，cd到本地blog/目录里面，执行如下命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
echo ".DS_Store" >> .gitignore
echo "Thumbs.db" >> .gitignore
echo "db.json" >> .gitignore
echo "*.log" >> .gitignore
echo "node_modules/" >> .gitignore
echo "public/" >> .gitignore
echo ".deploy*/" >> .gitignore
echo "_multiconfig.yml" >> .gitignore

git init
git add *
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:/<你的github名称>/<仓库名>.git
git push -u origin main
  1. 每次更新了博客后，都可以同步到github
1
2
3
git add *
git commit -m "本次更新了什么"
git push
  1. 如果更换电脑，从github上重新恢复工作
1
2
git clone --recursive git@github.com:/<你的github名称>/<仓库名>.git
npm i

参考资料