3、从零到一免费线上博客搭建

前言

技术：基于 hexo 搭建博客
计划：使用免费提供的 Pages 的平台作为博客网址，白嫖~
预期：使用 github 作为第一源码，推送后通过 github actions 再次将代码推送到其他平台，实现多个平台的自动同步与部署

已部署成功的本人线上博客地址

Gitee Pages：https://huangzq94.gitee.io/
Github Pages：https://mrhzq.github.io/
Cloundflare Pages：https://huangzq.pages.dev/
Vercel：https://huangzq.vercel.app/

Hexo 搭建博客流程

完全按照官方文档来的：安装文档

初始化安装

1. 全局安装工具

npm i hexo-cli -g

2. 看是否安装成功

hexo

3. 初始化：建站

hexo init huangzq-blog // 会帮我新建一个目录

创建成功后，文件内容如下：

hexo init // 已有目录，目录内运行，亲测会失败

4. 安装依赖，以下任选一个

npm i
// yarn
// pnpm i   // 我用的这个

安装成功

5. 启动项目

pnpm run server

浏览器打开：http://localhost:4000/，看到初始的页面

设置主题（可选）

6. 更改主题：点这里找一个你喜欢的主题

更改主题操作说明：只要在 themes 文件夹内，新增一个任意名称的文件夹，并修改 _config.yml 内的 theme 设定，即可切换主题

7. 更改主题：去到源码，一般为 github 仓库，然后安装该主题库的使用文档操作
8. 博客目录下创建 _config.fluid.yml 文件，将主题的 _config.yml全部配置复制过去。
9. 更改主题：下载主题（我选的这个主题源码在这，并且支持 npm 安装）

pnpm add hexo-theme-fluid

10. 更改主题：修改 Hexo 博客目录中的 _config.yml，改以下这两处（来自主题使用文档）

theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

11. 创建【关于我】页面（来自主题使用文档）

hexo new page about

12. 编辑目录下 /source/about/index.md，添加如下内容

---
title: about
layout: about
date: 2024-03-18 20:13:20
---

这里写关于页的正文，支持 Markdown, HTML

13. 重启项目：pnpm run server，以下是首页和关于页面的展示

本地开发简述（可选）

hexo 项目最终是需要先打包，生成public文件夹，最终部署的是public夹内的东西。
就跟我们vue一样，开发环境启动dev，build执行打包生成dist然后部署它，
所以 hexo 也是有开发环境、生产环境的概念的

1、开发环境模式

类似于 vue 的 dev 命令，只是没有热更新，最新内容需要手动刷新可看

开发环境操作：直接运行命令pnpm run server，就会启动本地服务，网站会在 http://localhost:4000/ 下启动，官网说：会监视文件变动并自动更新，无须重启服务器，每次刷新下页面就能看到最新的
但如果是配置更新的话，就需要重启服务器再刷新才能生效，并且有时候还是需要刷新才能看到效果

全局配置（_config.yml）

主要更改博客网站的一些配置：官方文档
更改文件为_config.yml，我的更改项：

主题配置（_config.fluid.yml）

由于我们使用了主题，然后也创建了主题配置文件，这样大多数的配置就需要在这里面改
官方文档：Hexo Fluid 用户手册

页脚设置 footer

配置关键搜索词：footer:

默认为这个
我更改为：

content: '
   <a href="/" rel="nofollow noopener"><span>黄智强</span></a>
   <i class="iconfont icon-love"></i>
   <a href="/2024/03/19/%E6%88%91%E6%98%AF%E8%B0%81%E5%9C%A8%E5%B9%B2%E5%95%A5/%E5%B9%B4%E6%80%BB%E7%BB%93/2023%20%E5%B9%B4%E6%80%BB%E7%BB%93%EF%BC%8C%E5%B9%B3%E4%BB%84%E5%8F%82%E5%8D%8A/2023%20%E5%B9%B4%E6%80%BB%E7%BB%93%EF%BC%8C%E5%B9%B3%E4%BB%84%E5%8F%82%E5%8D%8A/" rel="nofollow noopener"><span>2024</span></a>'

效果如下：

主页设置

先改首页，下面是首页要改的

大标题更改：官方文档
中间标题更改：官方文档
背景图更改：官方文档
我从 Fluid 演示博客 里面拿了几张图，图片效果做的跟演示博客一样了

具体图片链接看这：
首页 banner_img: https://fluid.s3.bitiful.net/bg/vdysjx.png?w=1920&fmt=webp
文章 banner_img: https://fluid.s3.bitiful.net/bg/vdysjx.png?w=1920&fmt=webp
归档: banner_img: https://fluid.s3.bitiful.net/bg/1cm6iu.png?w=1920&fmt=webp
分类: banner_img: https://fluid.s3.bitiful.net/bg/sdqryn.png?w=1920&fmt=webp
关于: banner_img: https://fluid.s3.bitiful.net/bg/4xvpqo.png?w=1920&fmt=webp
标签: banner_img: https://fluid.s3.bitiful.net/bg/n7a9bv.png?w=1920&fmt=webp

我最终的博客内容展示会对标 Fluid 演示博客，然后可以照着Fluid 演示博客的源码去修改

开启友情链接

官方文档：友情链接页，默认是不开启的
然后我开启了，并且更改为“更多”，里面存放我其他平台的主页，效果如下：

配置更改看：feat: 友情链接页面更改

写文章的插件（可选）

我是使用 VScode 来写 md 的，所以推荐一些好用的插件与包

VSCode 插件

Markdown All in One - Visual Studio Marketplace：功能强大，我用它来做默认的格式化
markdownlint - Visual Studio Marketplace：写 md 时提醒语法错误

npm 包

Lint Markdown：可一键批量修复 md 语法问题，我用来批量处理其他平台导出的 md 语法问题

创建文章

hexo 的文章大多是 Markdown 的，它会自动读取展示出来
所有的文章放在source下面，除_posts文件夹之外，开头命名为 _ (下划线)的文件/文件夹将会被忽略

├── source
|   ├── _drafts
|   └── _posts

hexo 官方提供的文章类型有三种，分别存放在不同文件夹内

post source/_posts // 会展示出来，作为“文章”展示，默认是 post
page source // 会展示出来，作为“页面”展示
draft source/_drafts // 不会展示出来，作为草稿使用

分别演示下 post、page 的展示效果
以下是 post 展示效果

以下是 page 展示效果

1、创建新的文章

1. 输入命令hexo new 文章标题，就会自动在_posts内创建一个文章标题.md文件
2. 里面有一些自动填充的内容，填充模板是scaffolds/post.md，所以你可以自行更改
3. 我将scaffolds/post.md改为了

---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
categories: 职业
tags:
  - 技术
excerpt: 这是摘要，你要手动改一下
---

## 这是标题

这是正文，你要手动改一下

4. 所以生成的文章默认为

---
title: 文章标题
categories: 职业
tags:
  - 技术
excerpt: 这是摘要，你要手动改一下
date: 2024-03-19 11:35:15
updated: 2024-03-19 11:35:15
---

## 这是标题

这是正文，你要手动改一下

5. 然后刷新下页面，该文章就会自动展示出来

2、塞入已有文章

1. 拷贝你的 md 文件过来，放到_posts内，然后自己创建一些文件夹进行分类（可选）
2. 重启服务pnpm run server，就直接能看到效果了，很简单与“丑陋”

3. 更改该 md 文件，顶部加上这一段：

---
title: 个人简历(求职中) - 7 年前端
date: 2023-11-09
category: 职业
tags:
  - 简历
  - 前端
excerpt: 这是我的求职简历，我的优势：熟练掌握 HTML、JavaScript(ES6+)、CSS、TypeScript 等常用前端技术，熟练使用 Vue 和 React 框架，了解其原理并具有多年开发经验，具有大型 ToB SaaS 前端开发经验，具有复杂前端技术方案落地经验，具备全栈开发经验，具备 Devops 之研发流程实践经验，具有 Nodejs、低代码、微前端的实践与经验，具备项目管理与团队管理经验，做过 B 端 SCRM 产品，涉及 PC/H5/小程序端
---

// 以下是 md 原内容，不用动

展示效果如下：

4. 字段简单说明下：

---
title: 个人简历(求职中) - 7 年前端 // 用于展示的文章标题
date: 2023-11-23 19:00:00 // 用于展示的文章时间，可任意更改
index_img: https:xxx // 用于展示的文章封面，可以是本地或线上的（可选）
category: 职业 // 文章的分类
tags: // 文章的标签，可以多个
  - 简历
  - 前端
excerpt: 这是我的求职简历，我的优势 // 文章的摘要
---

5. 其中的category文章的分类，写了后就能在分类页面下看到
6. 其中的tags文章的标签，写了后就能在标签页面下看到

至此我们的博客的基本内容、配置已 ok 了，接下来就要发到线上去了

静态网站托管对比

平台	优点	缺点	部署博客
Github	1、部署流程简单；2、无任何限制	1、国内访问慢；2、可能被墙	肯定要部署一个的，已部署成功
Gitee	1、国内访问快	1、严格的内容审核，部署博客的话会经常遇到部署失败的情况;2、仓库的最大容量和单个文件大小有限制，对仓库内容非常敏感，需要实名认证，自定义域名和自动部署都需要收费。	尝试一下
Coding	1、国内访问快	1、腾讯收购，需 COS 付费使用	不考虑
CodeChina	1、国内访问快	1、需要认证组织才能使用 Page’s 功能	无法搞
Cloudflare Pages	1、不限站点数、请求数和带宽，全球都拥有 CDN 节点，支持自定义域名和自动部署。	1、国内访问速度和稳定性一般，经常超时，每月构建次数、文件数量和大小都有限制。	可以搞一下，已部署成功
Vercel	1、国内访问速度比 Github Pages 和 Cloudflare Pages 要快，支持自定义域名和自动部署。	1、构建次数和构建时长有限制，每月宽限制 100G;2、可能被墙	可以搞一下，已部署成功
Netlify	1、国内访问速度比 Github Pages 和 Cloudflare Pages 要快，支持自定义域名和自动部署。	1、构建次数和构建时长有限制，每月带宽限制 100G;2、可能被墙;3、要验证身份证	不考虑

GitHub 流程（已成功）

我们是借用 Github Pages 来部署我们的博客，但 Github 根据仓库名会提供了两种 Pages
1、普通仓库名：比如我之前的 random-number-system，创建后再自己弄下 Github Pages 后，访问网址为：https://mrhzq.github.io/random-number-system/
2、特殊仓库名：github 用户名.github.io，比如我创建了 MrHzq.github.io 仓库，然后就能自动通过 https://mrhzq.github.io/ 来访问，这样访问网址更简短

3、再补充一个特殊仓库：github 用户名，比如我创建了 MrHzq 仓库，它就可以作为 github 的主页展示

1. 创建两个仓库：一个普通仓库作为源代码管理（私有的），一个特殊仓库作为博客主页用

普通仓库：我的命名为 huangzq-blog（私有的）

特殊仓库：我的命名为 MrHzq.github.io

2. 关联第一步创建的文件，命令行进入第一步创建的文件夹（我的是huangzq-blog）内：

git init

3. 暂存代码并提交代码

git add . && git commit -m "Initial commit"

4. 关联远程仓库（普通仓库哦）

git remote add origin git@github.com:你的用户名/仓库名.git  # 对于SSH
// 或者
git remote add origin https://github.com/你的用户名/仓库名.git  # 对于HTTPS

我用的命令为：git remote add origin https://github.com/MrHzq/huangzq-blog.git

5. 推送代码到远程仓库

git push -u origin master  # 如果是默认分支master
// 或者
git push -u origin main    # 如果GitHub默认分支是main

我用的命令为：git push -u origin main

6. 我运行后报错：

原因是：我的远程仓库里面的是有文件的，而第一步创建的博客目录里面也有文件，所以正确：是要先拉取远程代码到本地，解决冲突，然后再暂存代码并提交代码，最后重新推送代码到远程仓库。但是我知道远程仓库的文件我不需要了，所以可以选择强制推送到远程

7. 报错处理：强制推送到远程

git push -u origin main -f

命令运行成功了，远程仓库文件也有了

8. 还记得我们刚刚创建了一个特殊仓库吗？我们需要将博客打包后的内容推送上去，推送后就能访问了
9. 我们是通过在huangzq-blog里面直接推送到MrHzq.github.io上，所以要先在huangzq-blog内安装依赖：pnpm add hexo-deployer-git
10. 更改根目录的_config.yml内容，仅修改deploy配置：

11. 更改根目录的package.json内容：

12. 本地运行pnpm run deploy，它会执行打包，并将public里面的内容推送到MrHzq.github.io上

13. 然后打开我们的 github 提供的主页：https://mrhzq.github.io/，就能看到有东西了

至此 github 的流程就手动走通了，每次写文章就在huangzq-blog内写，写完后运行下pnpm run deploy就能更新我们的博客了

但能不能更自动化一点呢？比如我在huangzq-blog内提交代码后(一篇文章)，然后自动帮我部署到MrHzq.github.io内，实现自动更新呢？

那当然是可以的，我们借助huangzq-blogGithub Actions 来实现

什么是 Github Actions 呢？可以看我之前实践的这篇文章：Github Actions + Github Pages 自动发布 Vue3 + Vite 项目 - 掘金

Github Actions

本次的目标是：在私有仓库huangzq-blog内写文章，提交代码后，自动将最新内容部署到公有仓库MrHzq.github.io内，最终达到线上博客主页的自动更新

1. 进入本地的huangzq-blog内，创建对应文件

mkdir .github/workflows && touch .github/workflows/deployBlog.yml

2. 去 github 创建 PAT（Personal access tokens），因为我们是在 Actions 内推送代码，所以 github 需要验证你是否有推送权限，因此我们需要创建 PAT，然后 Actions 时告知给 github 我有权限

PS：权限一定要正确，否则无法推送的

3. 然后去私有仓库huangzq-blog创建对应的 secrets

4. 进入.github/workflows/deployBlog.yml内，填入下代码（不用改，直接可用）：

# Simple workflow for deploying static content to GitHub Pages
name: Deploy blog

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: "pnpm"

      - name: Install dependencies
        run: pnpm install

      - name: Deploy
        env:
          DEPLOYBLOG: ${{ secrets.DEPLOYBLOG }}
        run: |
          git config --global init.defaultBranch main
          pnpm run deploy

5. 进入_config.yml，将deploy改为如下代码：

deploy:
  type: git
  repo:
    url: https://github.com/MrHzq/MrHzq.github.io.git // 改为你的 userName.github.io 完整地址
    branch: main
    token: $DEPLOYBLOG
  name: githubUserName // 改为你的 github 用户名，我的是 MrHzq
  email: githubUserEmail // 改为你的 github 注册邮箱

6. 然后提交代码，就会在huangzq-blog仓库内，自动跑 GitHub Actions 了，失败了会有邮件通知，但成功了没有，如果需要成功的通知可以这样开启：Settings -> Notifications内

7. 之后每次更改后，提交代码就会自动部署到博客仓库，并且实现自动更新

Gitee 流程

官网：https://gitee.com/

存在的缺点：严格的内容审核，部署博客的话会经常遇到部署失败的情况

由于我们之前已经在 github 上面创建了私有仓库huangzq-blog，所以我们在gitee只创建公版仓库，作用跟MrHzq.github.io仓库一样，存放打包后的博客代码

1. 登录注册不多说
2. 创建个人空间地址，记住这个名称，后面会https://huangzq94.gitee.io访问

3. 创建同名仓库，官方文档，PS：要勾选【设置模板-Readme 文件】

由于我创建时，啥都没选，所以没找到 Gitee Pages，后来发现必须要有文件才能开启……，后来我手动创建了 README 文件

4. 仓库创建完成后，这里找到并开启 Gitee Pages

5. 完成个人实名认证，审核要 3~4 天，这就不多说了……

6. 完成后，重新找到并开启 Gitee Pages
   
   
   

7. 点击生成的连接，进去看看，发现已经部署成功了，访问地址为 https://huangzq94.gitee.io/
   

Gitee Actions（放弃）

我们已经成功部署到 Gitee Pages 了，但是每次更改后，我们都需要手动去仓库内点击Settings -> Pages，然后重新部署一次，所以我们可以基于 Github 的 Actions 实现自动部署，这样每次在 github 更改后，我们只需要提交代码，就会自动将打包后的 public 代码同步到 Gitee 仓库上，并且再自动刷新 Gitee Pages

1. 放弃了，因为我处理了后，发现在同步到 Gitee的步骤一直报错，又看不到日志，我起先以为是私钥、公钥配置的问题，结果我本地手动将 public 同步到 gitee 仓库，发现仓库体积这么大，但本地的 public 只有 150MB 左右

Total 3718 (delta 934), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (934/934), done.
remote: Powered by GITEE.COM [1.1.0]
remote: Set trace flag af4037aa
remote: Repo size: 1142.469MB, exceeds quota 1024MB
remote: You only have 3 push opportunities

2. 所以我怀疑同步的时候，就是因为体积太大的原因导致的，所以就放弃了 Gitee 的自动同步与刷新 pages 的功能
3. 所以就需要本地进行手动同步，然后去 Gitee 仓库内，点击更新
   

但我还是写一下核心用的东西，万一你们成功了呢

使用的开源 Actions 为：

1. 同步到 Gitee：wearerequired/git-mirror-action@master
2. 更新 Gitee Pages：yanglbme/gitee-pages-action@main

具体的使用方法，去对应的 github 项目里面找，这里就不贴了

Coding 流程（放弃）

官网：https://coding.net/

1. 登录注册不多说，注册后会默认创建一个团队，团队名称为随机的，我的是G-OPNC0413
2. 完成团队的实名认证，很快，这就不多说了……
3. 放弃，它的静态网站需要配合腾讯云 COS 使用，COS 是需要按量付费的，所以无法白嫖，放弃了
4. 并且弄一个仓库太复杂了，它有团队、项目、仓库、应用等概念，不适合个人

CodeChina（放弃）

官网：https://gitcode.net/
需要认证组织才能使用 Page’s 功能

Cloudflare Pages（已成功）

官网：https://pages.cloudflare.com/

1. 登录注册不多说
2. 导入 github 的仓库开启 Pages，我选择的是 github 上那个公开的博客仓库MrHzq.github.io

3. 导入后进行下一步

4. 设置域名

5. 开始构建

这是我的访问地址：https://huangzq.pages.dev/，博客内容访问到了

Vercel 流程

官网：https://pages.cloudflare.com/

1. 可以使用 github 一键登录，因为我们本来就要用到 github 的博客仓库，所以直接一键登录

2. 添加博客仓库

3. 部署

4. 找到访问网址

5. 我的访问地址为：https://huangzq.vercel.app/，博客内容一切正常可以看

Netlify 流程（放弃）

官网：https://www.netlify.com/

1. 跟 Vercel，可以使用 github 一键登录

会跳转到这个页面，先不用管，因为它会发一个验证邮件，需要点邮箱里面的去验证

2. 验证手机信息，选择 CN，输入手机号、姓拼音、名拼音

3. 验证身份证信息，需要上传身份证，放弃了

最后

上面我们部署了几个平台，但我们发布文章的流程还是很简单的：github 私人仓库提交代码，自动推送打包好的代码到 github 公共仓库、gitee 公共仓库，然后其他基于 github 登录的平台(Cloudfare/Vercel)则会自动更新；而 gitee 则需要手动去刷新下