如何采用 github Pages 搭建个人博客

· · 科技·工程

前言

可能大家都看过一些其他搭建 Blog 的教程了，比如这个，但是不难发现不少教程都要依赖于一台服务器，而我们很难保持服务器时常在线，而服务器一旦下线就会导致博客崩掉，所以就有了这篇文章。

现在文章广场有关的文章基本都采用 Hexo 搭建博客，但是我就是要反其道而行之，这种方式有很明显的弊端，上面也已经说过了。

在 github 上有许多优质的 Blog 模板，如果无法打开 github 请跳过这篇文章，我采用的是 imsyy 的 VitePress 主题，仓库地址在这。

但是你看了 readme.md 就会发现，这不是还是要本地部署吗？等等，经过我的研究，最终找到了 yutian81 大佬的这篇博客，里面详细讲述了如何利用 Github Pages 搭建博客，本文就是在这篇文章的基础上加以个人折腾的经验写出来的。

部署步骤

这里参考上面的博客。

我们先打开这个仓库（此处为了方便不用原作者的仓库），点击右上角的 Fork 按钮，将仓库改名为你的 github 用户名+github.io，这一点非常重要，当时我因为这个调了大概 6h（真的）。

然后打开 fork 的仓库，打开 .github/workflows/deploy-pages.yml，修改以下部分：

env:  
   REPO_URL: "yutian81/yutian81.github.io"  # 改为你自己的仓库  
   BUILD_PATH: ".vitepress/dist"  # 构建输出路径，不要改  
   CUSTOM_DOMAIN: "blog.24811213.xyz"  # 改为你自己的自定义域名

如果你没有自己的域名的话填仓库名（即***.github.io）。

手动运行 Deploy to GitHub Pages 工作流。

运行完成后，会自动在仓库内生成一个 pages 分支，这就是我们部署后的 静态页面 文件。生成了这个分支就证明部署成功了。访问 https://用户名.github.io 即可访问博客首页。

注：因为我搭建时没有参考 Blog，全是自己摸索的，所以实际情况与文章不太一样，所以以下借用别人的图。

进入仓库的 设置 页，点击左侧 pages，下图序号 3 这里选择 pages 分支，点击保存。

对于部署更细节的内容可以参考这个博客。

个性化设置

以下都是我个人摸索的经验，如有问题还请指出。

配置文件路径如下：

一定要注意备份！！！！！！

自定义字体

打开 public/fonts/ 目录，上传 ttf 文件，再打开 .vitepress/theme/style/font.scss 文件，在最前面添加如下代码：

@font-face {
  font-family: "Yahei";//自定义名字
  font-display: swap;//不要动
  src: url("/fonts/YaHei.Consolas.1.11b.ttf");//ttf文件路径
}

记得删掉注释。

再打开 .vitepress/theme/store/index.js 文件，找到 fontFamily 项，将后面修改成你需要的字体，填的是你上面定义的名字，如 Yahei。

图片背景

这个博客前端支持自定义设置，包括自定义图片背景，在下面图片左下角红框处设置。

如果你不喜欢原来自带的图片，可以在 .vitepress/theme/store/index.js 文件处修改 backgroundUrl，注意填入的是 Url。

新建文章

在 posts/2024/ 下新建 md 文件，是的，要用 markdown 格式并且支持 Latex。

新建后别急着复制，在开头添加以下内容：

---
title: 标题
tags: [标签]
categories: [分类]
date: 时间
description: 描述
articleGPT: 总结，在文章界面会有个假的 AI 输出
---

后面直接复制博文内容即可。

新建界面

在 pages/ 下新建 md 文件，这里直接写就行，比如我新建了一个 algorithm.md：

## 这里是 tsh 写的一些算法学习笔记，也包括部分转载内容，仅供学习使用，有问题还请各位指出

> 注：没标转载的全是原创

- [SOS DP(转载)](/posts/2024/1018)
- [分块](/posts/2024/1021)
- [基础莫队](/posts/2024/1022)
- [DFS序](/posts/2024/1025)
- [树的直径](/posts/2024/1027)
- [平衡树(pd_ds)](/posts/2024/1028)
- [平衡树(fhq treap)](/posts/2024/1029)
- [平衡树(Splay)](/posts/2024/1033)

新建后在 .vitepress/theme/assets/themeConfig.mjs 处添加快捷链接，放到哪里随你便。

修改关于本站页面

打开 .vitepress/theme/views/About.vue 自行修改即可，不做过多叙述。

修改跳转界面

因为这个界面是后来建立的，不受配置文件影响，所以需要手改，打开这个文件 public/redirect.html，然后按注释修改就好了。

修改页脚

在这里（懒得写了）：.vitepress/theme/components/FooterLink.vue

后记

本文只对一些最基础的修改做了叙述，对于其他功能请参考官方文档或上文提到的博客，如有疑问也可以私信询问我 awa。

AD

宣传一下自己的博客：https://tsh1203.github.io/