Hexo搭建

本文详细介绍了如何使用Hexo框架搭建一个个人博客，并将其部署到GitHub Pages和Cloudflare Pages上。主要内容包括：

  • 环境准备：安装Node.js和Git
  • 配置Git和GitHub：设置SSH密钥，创建GitHub仓库
  • 初始化Hexo项目：安装Hexo，创建新博客
  • 部署到GitHub Pages：配置部署设置，推送静态文件
  • 部署到Cloudflare Pages：连接GitHub仓库，自动部署
  • 基本使用方法：创建新文章，本地预览，发布更新

这个教程适合那些想要快速搭建个人博客，但又不想花费太多成本的人。通过使用Hexo、GitHub和Cloudflare的免费服务，您可以轻松创建一个高效、简洁的博客网站。

1.事前准备

  1. 域名（非必须，你也可以使用免费域名，或者GitHub.io或Pages.dev分配的域名也可以）
  2. GitHub（必须，你需要注册一个GitHub帐号）
  3. Cloudflare（非必须，你需要注册一个Cloudflare帐号，这样你就可以将博客部署在CF的CDN里加速，但是你也可以直接使用GitHub.io分配的域名）

2.软件支持

  1. Node（必须）
  2. Git（必须）
  3. VSCode（非必须，这是一款轻量型的代码编辑器，可以帮助你养成一个很好的编程习惯）

2.1.安装 Node

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

2.2.安装 Git

  1. 进入官网下载适合你当前系统的 Git：https://git-scm.com/downloads
    2.2.1.安装 Git
  2. 下载后傻瓜式安装Git即可，安装的目录最好使用默认目录C:/Program Files/Git
  3. 点击电脑左下角开始即可看见Git CMD、Git Bash、Git GUI。
    • Git CMD 是windows 命令行的指令风格
    • Git Bash 是linux系统的指令风格（建议使用）
    • Git GUI是图形化界面（新手学习不建议使用）

3.配置 Git 密钥并连接至 Github

常用 Git 命令

git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

enter description here

3.1. 配置用户名和邮箱

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

通过git config -l 检查是否配置成功。
enter description here

3.2. 配置公钥连接Github

  1. 执行以下命令生成ssh公钥，此公钥用于你的计算机连接Github
ssh-keygen -t rsa -C "你的邮箱"

之后打开C盘下用户文件夹下的.ssh的文件夹，会看到以下文件

  • id_rsa私钥
  • id_rsa.pub公钥
    enter description here
    用记事本打开上述图片中的公钥id_rsa.pub，复制里面的内容，然后开始在github中配置ssh密钥。
    enter description here
  1. 将 SSH KEY 配置到 GitHub
    进入github，点击右上角头像 选择settings，进入设置页后选择 SSH and GPG keys，名字随便起，公钥填到Key那一栏。
    enter description here
    enter description here
  2. 测试连接，输入以下命令
ssh -T git@github.com

第一次连接会提示Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入yes即可
enter description here
出现连接到账户的信息，说明已经大功告成，至此完成了环境准备工作。
enter description here

3.3. 创建GitHub.io仓库

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

4.初始化 Hexo 博客

  1. 创建一个文件夹来保存博客源码（我这里选的路径为D:/Hexo-Blog），在文件夹内右键鼠标，选择Open Git Bash here
    enter description here
  2. 在Git BASH输入如下命令安装 Hexo
npm install -g hexo-cli && hexo -v


3. 安装完后输入hexo -v验证是否安装成功。
enter description here
4. 初始化 Hexo 项目安装相关依赖。

hexo init blog-demo
cd blog-demo
npm i

enter description here
5. 初始化项目后，blog-demo有如下结构：
enter description here

  • node_modules：依赖包
  • scaffolds：生成文章的一些模板
  • source：用来存放你的文章
  • themes：主题
  • .npmignore：发布时忽略的文件（可忽略）
  • _config.landscape.yml：主题的配置文件
  • config.yml：博客的配置文件
  • package.json：项目名称、描述、版本、运行和开发等信
  1. 输入hexo cl && hexo s启动项目
    enter description here
  2. 打开浏览器，输入地址：http://localhost:4000/ ，看到下面的效果，说明你的博客已经构建成功了。
    enter description here

5.将静态博客挂载到 GitHub Pages

  1. 安装 hexo-deployer-git
npm install hexo-deployer-git --save
  1. 修改 _config.yml 文件
    在blog-demo目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
    修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）。
deploy:
  type: git
  repository: git@github.com:cmliussss2024/cmliussss2024.github.io.git
  branch: main
  1. 修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo三连）。
// Git BASH终端
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缩写
    enter description here
    注意：deploy时可能要你输入 username 和 password。
    如果出现Deploy done，则说明部署成功了。
    enter description here
    稍等两分钟，打开浏览器访问：https://cmliussss2024.github.io ，这时候我们就可以看到博客内容了。
    enter description here

6、Github Actions自动化部署 Hexo博客

简单说，就是把hexo博客编译前的源代码上传到github代码仓库，Action在代码发生变动的时候，自动通过安装一系列nodejs环境和相关依赖，编译生成html页面到github pages仓库。

再简单点说，就是把本地生成博客的工作，全部交给Action执行。

好处就是随时随地都能修改或增加博文

6.1. 先建一个私有仓库（自动化仓库）

先建一个私有仓库（myhexo），这个仓库存放的是编译前的文件，也就是你电脑本地的文件，这个仓库是拿来做自动化的

img

也就是一共两个仓库

  • 一个公有仓库存编译好的hexo（pages仓库，用户名例如是1422756921.github.io）
  • 一个私有仓库存本地电脑编译前的文件（自动化仓库，用户名是myhexo）

6.2. 上传编译前的代码

创建完私有仓库后，在本地博客文件中复制几个文件到另外一个文件夹，其中包括.github，scaffolds，source，themes，_config.yml，package.json，package-lock.json

img

还有一个很重要的一步：打开themes/bamboo主题模板文件，主题源码.git文件删除，Hexo博客根目录修改配置文件使用bamboo主题

img

然后回到myhexo根目录右键打开git bash

img

git init  #把这个目录变成Git可以管理的仓库
git add .   #添加当前目录文件到缓存区（别漏命令后面的点）
git commit -m "first commit"  #提交缓存区内容到本地库，并备注first commit

#下面两条命令二选一，就行了
git remote add origin https://github.com/用户名/自动化仓库名.git   #利用https关联远程仓库
git remote add origin git@github.com:用户名/自动化仓库名.git   #利用ssh关联远程仓库

git push -u origin master  #把本地库的所有内容推送到远程库上

同样SSH和HTTPS均可。SSH在绑定过ssh key的设备上无需再输入密码，HTTPS则需要输入密码，但是SSH偶尔会遇到端口占用的情况。

6.3. 获取 Github token

打开https://github.com/settings/tokens
点击 Generate new token 新建个 token

img

note随便填，Expiration选择No expiration，勾选repo和workflow，其他没什么了，然后点生成就好了

img

把token复制下来

img

打开自动化仓库myhexo的Settings-> Secrets and variables -> Actions -> New repository secret

img

一共有三个变量名GITHUBTOKEN，GITHUBUSERNAME，GITHUBEMAIL，逐一添加

img

变量名 常量释义
GITHUBMAIL Github 用户邮箱地址
GITHUBTOKEN Github token
GITHUBUSERNAME Github 用户名

6.4. 添加workflows

接下来点击Actions-> set up a workflow yourself

img

复制以下代码到里面

name: 自动部署

on:
  push:
    branches:
      - main

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 检查分支
      uses: actions/checkout@v4
      with:
        ref: main

    - name: 安装 Node
      uses: actions/setup-node@v4
      with:
        node-version: "20.16.0"

    - name: 安装 Hexo
      run: |
        export TZ='Asia/Shanghai'
        npm install hexo-cli -g

    - name: 缓存 Hexo
      uses: actions/cache@v4
      id: cache
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: 安装依赖
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install --save

    - name: 生成静态文件
      run: |
        hexo clean
        hexo generate

    - name: 部署 #此处master:master 指从本地的master分支提交到远程仓库的master分支(不是博客的分支写master即可)，若远程仓库没有对应分支则新建一个。如有其他需要，可以根据自己的需求更改。
      run: |
        cd ./public
        git init
        git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
        git config --global user.email '${{ secrets.GITHUBEMAIL }}'
        git add .
        git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated By Github Actions"
        git branch -m main
        git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" main:master  # GitHub配置

粘贴上去后点击Commit changes…

img

就大功告成了，可以点击Actions查看运行进程了

img

7. 上传方式配置（可选）

提供两种 Push 方式，二选一，分别是 git 和 Github Desktop。上面5、6部分都是Git方式。

Github Desktop 使用和配置更加方便，推荐使用。

7.1. Github Desktop

前往 Github 官网下载  并安装。

安装好并且登录你的 Github 账号，会出现如下界面

Screenshot

点击左上角，点击 Add 新增项目，选择 Clone 仓库 ，选中你之前创建的 Hexo 仓库，然后点击 Clone 把仓库克隆下来。

Screenshot

接下来你就能在 Local Path 中显示的文件地址找到你项目的文件夹了。

7.2. 本地使用教程

现在既然clone好了，那么该如何使用呢？

每次当你改完hexo文件，可以使用以下命令让 hexo 在本地运行起来

hexo clean&&hexo s

hexo clean 是清除之前的缓存

hexo s是指运行 hexo server

当你看见这条信息的时候，就可以打开 http://127.0.0.1:4000  查看你所做的更改的效果了

Hexo本地运行成功

如果要结束运行，可以执行：Ctrl+C

如果本地测试好没问题，就可以 push 到 Github 了

7.3. 上传文件

首先点击 Fetch Origin 查找文件改动

Screenshot

然后在左下角的输入框中写本次文件改动 (Commit) 总结，然后点击 Commit to main

Screenshot

最后，点击右上角的 Push origin ，这样文件就上传到 Github 了

Screenshot

8.将静态博客挂载到 Cloudflare Pages

  1. 在 Workers 和 Pages 中选择 Pages 的 连接到 Git
    6.1.1
    6.1.2
  2. 然后登录你Blog仓库对应的GitHub帐号
    6.2.1
    6.2.2
  3. 点击保存并部署后等待部署完成即可。
    6.3
  4. 提示成功！您的项目已部署到以下区域：全球后，浏览器访问：https://cmliussss2024-github-io.pages.dev ，这时候我们就可以看到博客内容了。
    6.4
    这时你也就可以将你的<用户名>.github.io的仓库设置为Private私库了
  5. 如果你有自己的域名，你可以在这里绑定你自己的自定义域，即可
    6.5