skip to content
AsyncX's Blog

如何配置一个静态博客的工作流

/ 13 min read

我们处在信息时代的早期,同样也处在人类文明的早期。从今往后,被数字化的东西只会越来越多。而最有可能留存的就是GitHub ,它也许是在百年尺度上存储信息并让其能被访问的唯一途径。


记录的过程并不是学习本身,而是思考。通过记录这种形式,把自己的理解写下来促进思考,才能产生最大的价值.

yukang—我的知识管理工具和经验 从Typecho再次切换回Hexo,不再用Buttterfly,采用自改的Vexo,特记录一下在网络中少数人输出的完整思路。

加速访问博客

静态博客基于Github Pages,很多人(包括刚开始的我)都认为是因为服务器的原因导致的,静态网页的响应速度受js与css影响居多,在yukang老师的指导下,我从本来的配置cdn转向重指向js,css,即将相关文件存入自己服务器,或定向至jsDelivr进行解析。 image-20220514170839653 yukang老师提供的测试网址 关于资源的不统一或许具有一定的问题,后期我会将渲染文件统一存放。

模板中修改评论

由于vexo主题本身提供的Gitment以及其余评论的配置我并没有很好的理解,所以我选用utterances进行博客的评论功能,具体的配置可以查阅相关教程。

修改为utterances

在模板文件中修改如下信息 image-20220514153924400

<!-- UY START -->
<div id="utterances_frame"></div>
<script src="https://utteranc.es/client.js"
repo="A5yncX/A5yncX.github.io"
issue-term="pathname"
theme = "github-light"
crossorigin="anonymous"
async>
</script>
<!-- UY END -->

我比较懒,没有改注释,只要能定位到位置就行。 reponame/repo名,请参照官方文档进行修改。

调试中正常显示,hexo d后无评论出现

报错如下

Uncaught DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.

问题在于为了方便调试,我开启了此网页不保存cookie,只需关闭即可解决此问题。

Github Action自动化

将hexo源文件上传至一个新的私有仓库

git remote add origin git@github.com:A5yncX/hexo.git
git pull --rebase origin master
git add .
git commit -m "init repo"
git push -u origin master

参考GITHUB ACTION + HEXO 实现在线写作 注意添加私钥!

结合Obsidian实现工作流

我的工作流本来是基于Mac的自动化实现的,但是问题出在上传和具有yaml属性的markdown文件的创建,参照yukang老师Obsidian-ObsidianGit-Source仓库-Github Actions-静态页面的自动化工作流方案,我采用了如下的办法:

  1. 将部分下载的source仓库存放在我的Ob主库中
  2. 使用Obsidian-Git插件自动上传
  3. Github Actions读取到我的push
  4. 推送至静态页面

为什么要这样记录呢,我本来的想法是:

  • 新开一个Obsidian库,分类管理。结果:发现mac的库切换,插件的配置很费事
  • 将源文件放入主Obsidian库,同时管理。结果:各种文件出现在关系图谱中
  • 新建blog仓库,通过库-actions-库-actions-库的方式管理。结果:不会写actions 工作流不应该以复杂为前提,最后我还是老老实实用git。 配置如下:
git init
git remote add origin git@github.com:A5yncX/hexo.git
git config core.sparsecheckout true
echo '/source/_posts' >> .git/info/sparse-checkout
git pull origin master

开启checkout,限制返回文件的目录'/source/_posts',拉取同步,好处是依旧可以进行版本控制。

修改about界面

vexo的about页面相对于主题不是很合适,在我看来甚至有一丝花里胡哨。修改模板文件 将页面代码替换为pages.ejs的markdown语法展示内容。

修改后,通过编辑文件 即可自由书写你的个人介绍。

基于umami的访客统计

使用Vercel搭建umami 改动模板的config.yml添加独立页面即可


防止失效的复制粘贴,侵删。


作为一款开源解决方案,umami.is 并不提供官方的托管服务,而是需要自行部署。提到部署,你可能想到需要使用自己的服务器或租用云主机。不用担心,接下来我将会介绍利用互联网上现成的无服务器解决方案,零成本、零门槛部署可靠的 umami.is 服务。

前期准备

Serverless 无服务器计算架构近年来逐渐火热,这里的无服务器并不意味着无需服务器参与计算,而是指开发者不必过多关心底层服务器的状态、性能、资源等。因为这一切由云服务商提供,并动态管理机器资源的分配。所以为了达到零成本部署的目标,我们需要选择一些免费可靠的 Serverless 服务。

根据 umami.is 官方文档 的说明,其服务需要运行在 Node.js 环境中,且需要对接到 MySQL 或者 PostgreSQL 数据库。所以,接下来我们会使用到免费可靠的 Vercel 静态站点托管服务,以及同样免费可靠的 PostgreSQL 数据库服务商 Supabase。

那么正式开始之前,你需要做的第一件事是 注册一个 GitHub 帐号。为什么注册 GitHub 呢?因为我们后续要克隆 umami.is 主仓库代码,同时通过 GitHub 帐号直接登录 Vercel 和 Supabase,从而不需要额外再注册相关平台了。

注册好 GitHub 帐号之后,你需要完成 3 个步骤:

Fork 代码仓库并登录到 Vercel 和 Supabase 访问 umami.is 代码仓库,点击右上方 Fork 到自己的帐号。访问 Vercel 注册页面,点击使用 GitHub 登录到 Vercel。访问 Supabase 注册页面,点击使用 GitHub 登录到 Supabase。

至此,准备工作大功告成,是不是非常简单。

创建数据库

我们需要先在 Supabase 的主界面中找到 New Project 按钮创建一个新的数据库。名字可以使用 umami,然后设置一个自己记得住的数据库密码。下方的 Region 区域选择 Northeast Asia(Tokyo)东京区域。Supabase 本身使用了 AWS 云服务,东京区域在大陆地区的访问速度还是比较理想的。

创建自己的 umami 数据库

创建好之后,等待数据库初始化完成。接下来,我们需要向数据库中写入 umami.is 所需的基础数据结构。打开 umami.is 代码仓库,找到其预先提供的 PostgreSQL 初始化 SQL 语句 schema.postgresql.sql。

初始化 SQL 语句

接下来,我们回到初始化完成的 Supabase 数据库的设置页面,找到左侧的 SQL 选项,选中默认的 Query-1 查询面板。然后,完整复制上方 schema.postgresql.sql 文件中的 SQL 语句粘贴到查询对话框中,点击 RUN 执行。

创建默认的数据库表结构

几秒后,Supabase 会返回 Success. No rows returned 的提示,此时回到 Supabase 的 Tables 面板中,你可以看到多出了 5 张数据表,这也就是 umami.is 所需的初始化数据结构。

确认成功部署 umami.is

接下来,我们可以正式开始部署 umami.is 了。打开 Vercel 主面板,点击右上角 New Project 创建一个新的项目。创建项目的页面中,会自动加载你 GitHub 帐号下方的代码仓库。还记得准备步骤 Fork 的 umami.is 仓库吗?选中即可。

Vercel 部署 umami 项目

所有的设置都可以使用默认值。唯一需要自定义的是环境变量,我们需要传入相关的数据库连接参数。找到 Environment Variables 一项并展开,首先添加数据库连接的环境变量。

DATABASE_URL:postgresql://username:mypassword@localhost:5432/mydb

值得注意的是,上方数据库链接中的参数需要使用实际值,你需要到 Supabase 的设置页面中查看。如下图所示,如果我一开始设置的数据库密码是 123456,那么 DATABASE_URL 实际应该为:

DATABASE_URL:postgresql://postgres:123456@db.vihtqhmdpnvautwcvkmh.supabase.co:5432/postgres

设置项中的 PostgreSQL 配置

请注意,数据库链接中的密码以你在准备步骤设置的实际密码为准,其他参数以你的 Supabase 设置页面提供的为准。然后,我们还需要添加第二组环境变量 HASH_SALT,它的值可以是任意随机英文字符串,比如我使用了我的用户名 HUHUHANG,你也可以自定义其他随机字符串。

HASH_SALT:任意随机英文字符串。

添加好的 DATABASE_URL 和 HASH_SALT 环境变量

两组环境变量添加完成之后的结果如上图所示。设置完成之后,点击 Deploy 部署项目。

测试和设置

至此,主要步骤已经顺利完成,你需要做的只是耐心等待项目部署完毕。完成之后,Vercel 会自动跳转到项目主页,并随机分配一个域名。点击 Visit 访问项目,umami 默认的后台登录的用户名是 admin,密码是 umami。登录之后,即可看到下方右图的界面。

测试并登录到部署完成的 umami 后台

一切大功告成,我们已经顺利部署了 umami.is 服务。接下来,我们还可以做几件事情个性化你的 umami.is 服务。


Q:umami 后续如何升级?

A:Vercel 的部署是自动触发和完成的,也就是说当 GitHub 代码仓库更新时,Vercel 会帮你自动部署上线最新版本的 umami。你可以不定期访问你 Fork 后的代码仓库,选中 Fetch upstream 从 umami 官方仓库同步最新的代码后即可自动升级。当然,你还可以从一开始直接部署官方仓库的代码,完全跟随官方版本迭代升级。

拉取 umami 主仓库代码自动升级.