+ 如何配置一个静态博客的工作流 +
+ + + + +关于博客,不妨如此理解。人总想留下某种痕迹,证明自己活过,然而事实上,99.999% 的普通人就这么被历史遗忘了——曾经是这样。我们处在信息时代的早期,同样也处在人类文明的早期。从今往后,被数字化的东西只会越来越多。而最有可能留存的,就是GitHub ,它也许是在百年尺度上存储信息并让其能被访问的唯一途径。
++
++记录的过程并不是学习本身,而是思考。通过记录这种形式,把自己的理解写下来促进思考,才能产生最大的价值.
+
yukang–我的知识管理工具和经验
+出于此,我从Typecho再次切换回Hexo,不再用Buttterfly,采用自改的Vexo,特记录一下在网络中少数人输出的完整思路。
加速访问博客
+静态博客基于Github Pages,很多人(包括刚开始的我)都认为是因为服务器的原因导致的,静态网页的响应速度受js与css影响居多,在yukang老师的指导下,我从本来的配置cdn转向重指向js,css,即将相关文件存入自己服务器,或定向至jsDelivr进行解析。
+
+yukang老师提供的测试网址
+关于资源的不统一或许具有一定的问题,后期我会将渲染文件统一存放。
模板中修改评论
+由于vexo主题本身提供的Gitment以及其余评论的配置我并没有很好的理解,所以我选用utterances进行博客的评论功能,具体的配置可以查阅相关教程。
+修改为utterances
+在模板文件中修改如下信息
+
1 | <!-- UY START --> |
我比较懒,没有改注释,只要能定位到位置就行。
+repo
为name/repo名
,请参照官方文档进行修改。
调试中正常显示,hexo d后无评论出现
+报错如下
+1 | Uncaught DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document. |
问题在于为了方便调试,我开启了此网页不保存cookie,只需关闭即可解决此问题。
+Github Action自动化
+将hexo源文件上传至一个新的私有仓库
+1 | git remote add origin git@github.com:A5yncX/hexo.git |
参考GITHUB ACTION + HEXO 实现在线写作
+注意添加私钥!
结合Obsidian实现工作流
+我的工作流本来是基于Mac的自动化实现的,但是问题出在上传和具有yaml属性的markdown文件的创建,参照yukang老师Obsidian-ObsidianGit-Source仓库-Github Actions-静态页面
的自动化工作流方案,我采用了如下的办法:
+++
+- 将部分下载的source仓库存放在我的Ob主库中
+- 使用Obsidian-Git插件自动上传
+- Github Actions读取到我的push
+- 推送至静态页面
+
为什么要这样记录呢,我本来的想法是:
+-
+
- 新开一个Obsidian库,分类管理。结果:发现mac的库切换,插件的配置很费事 +
- 将源文件放入主Obsidian库,同时管理。结果:各种文件出现在关系图谱中 +
- 新建blog仓库,通过库-actions-库-actions-库的方式管理。结果:不会写actions
+工作流不应该以复杂为前提,最后我还是老老实实用git。
+配置如下:
+
1 | git init |
开启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 主仓库代码自动升级.