一些常见的托管平台 PaaS Platform as a Service 平台及服务 ，旨在使用户专注于应用代码开发 的免费情况如下；

其实对于这些小型的静态网页的项目部署，大多都是免费的，整体部署的流程也是相对简单，选择一个顺眼，便于国内访问用即可，但是无论是哪个方案，都建议绑定一下自己的域名，一来是更便于记，二来也能便于国内访问。

Todo

了解一下 Coolify，是否是类似一个公网转发平台的方案，将特定端口的服务使用 Coolify 转发到公网上，然后可以绑定自己的域名，这样的话也不失为一个好东西，我之前的服务也就都能部署出去了；

最终选择的时候可以考虑以下都是谁在访问自己的博客，然后测一下对应地区平台访问的速度来做决定，国内的话 vercel 好像是被 DNS 污染了，如果要部署在 Vercel 上的的话，考虑在域名解析的地方更换为CF 的解析服务 原因：【多图预警】vercel部署及国内访问 | VuePress Theme Gungnir 具体方案：一招解决Vercel站点在国内无法访问的问题 | 程序猿DD | 如何在国内访问vercel部署应用？我个人觉得vercel是做前端的大家都应该去了解并且掌握的一个非常方便的部署工具，能 - 掘金 ；

直接使用 Public 文件夹进行部署

作为静态网页生成器，hugo 通过部署模式生成的 public 文件夹可以很轻松的在包括 Github pages 和 Vercel 等第三方平台上的各个托管平台进行部署，部署起来相当简单，只需要将 Publish 文件夹推到github 上，后面的都比较简单了

• Github Page 直接在Setting-Pages 中设置选择源 Branch 即可，不需手动去写Github Action；
• Vercel, Netfily 也是直接绑定对应的Github 仓库的指定分支即可，framework 选择Other；

且均能根据 Publish 的变更对网页重新构建，这里就不再赘述。

基于源码直接部署

基于源码部署主要是考虑到同时将博文本身推送上去，一是使用 git 做版本管理，二是可以不再额外管理一个仓库；因此也可以采用此种方式；

但实际上如果要和本地的 Editor 如 Obsidian 做无缝集成的话，还是会需要一些额外的脚本去做处理，包括写完后自动更新 repo 和推送这些，后续如果笔者记得的话可能也会更新一下相应的脚本；

部署到 Github Page

参考 hugo官方教程 使用 Github Action 进行在线构建和实现 Github Page 的发布，修改其中自己需要进行构建的分支名称和部署命令等，然后直接 push 上去即可。

这里我对部署命令的修改部分如下：

run: |
  hugo \
    --gc \
    --minify \
    --environment papermod \
    --baseURL "${{ steps.pages.outputs.base_url }}/"    

使用非 Master 分支进行构建可能会遇到以下的问题（build 成功，deploy 部分显示如下错误）

Error

Branch “x” is not allowed to deploy to github-pages due to environment protection rules.

解决方案：Github community · Discussion #39054 ，Repo 的 Setting 中找到 Environments 中的 github-pages 项中的 Deployment branches and tags 新增自己想要部署的分支即可；

Error

Static 中的资源加载出现 404，导致界面表现不合预期的情况

此外，如果个人之前已经对其他的 GithubPage 绑定了域名（例如 http://aikenh.cn/ ），这样可能会导致由于网页部署在域名的子目录下( http://aikenh.cn/hugoblog/ )，导致一些资源的 url 绑定到域名上（资源被绑定到 http://aikenh.cn/ 中导致 404 ），无法获取到，这里的解决方式是，通过绑定子域名/二级域名 或者新的域名。

这里简单讲一下子域名的添加 Github Docs ，首先在 Github-Repo-Setting-Pages 中设置 Custom domain 如下

添加后去自己的域名控制台添加对应的 cname 子域名记录，然后稍后即可

添加子域名解析后可能会发现反而 CSS 等样式表加载不出来的问题（上一步的时候没问题），这时候就要考虑是不是 BaseURL 忘记更新了；记得修改项目配置（非 GithubAction 配置）中自己的 baseURL 再推上去使其重新构建，避免存在部分解析问题即可；

部署到其他 PaaS

Error

由于我们本地开发使用的 Git Submodule 中的地址通常是 git@github ,可能会导致第三方平台在拉取 Submodule 的时候出现一些权限错误导致拉取失败

因此当我们部署 Netlify 之前可以按照下面的方式更新 Submodule 为 http 链接，首先更改 .gitmodules 中子模块的URL

[submodule "themes/PaperMod"]
  path = themes/PaperMod
  url = https://github.com/AikenH/papermod-sidebar.git

然后执行下列命令来更新子模块的URL

git submodule sync
git submodule update --init --recursive

更新完以后将其推送到部署分支，例如 netlify

git checkout -b netlify
git add . 
git commit -m "[Conf] update submodule for third-party deploy"
git push origin netlify:netlify

部署到 Netlify

做完上述 Submodule 的准备之后，在 Netlify 的dashboard 上导入Repo 进行发布：

• 导入仓库，选择好发布的分支

可以参考下列命令来设置自己的发布参数以及环境变量（hugo 版本）

环境变量的Key-Value 分别为：HUGO_VERSION 还有你本地的 hugo 版本，可以通过下列命令获取

hugo version

域名绑定：主要是参考官方指引，将需要的域名填入后，按照如下指引，在购买域名处添加CName 即可；

随后记得更新网站的 BaseURL 以便网站正常工作;

部署到 Vercel

做完上述 Submodule 的准备之后，同样在 Vercel 处的设置也是比较简单的，导入指定的仓库后，将模版指定为Hugo，并修改部署配置如下：

同样添加环境变量：

但是 Vercel 中指定分支的方式相对较麻烦一些，在部署后，进入project 的dashboard 中，选择Setting

其中的 Git -> Production 跳转到指定页面去设置分支，设置完记得选择保存，同时下面有个环境变量也可以在设置一次。

到此为止的话其他分支上的提交也会导致触发build，为此我们还需要进一步设置，在刚刚 Git 页面的最底下，选择 only build production 即可，这里参考 oragekk ：

后面再触发一次 Deploy 任务以后就可以看到分支切换到指定的分支即可

添加域名：待补充；

TroubleShooting 问题解决

部署时 CSS 样式不显示问题

hugo 部署时遇到像 CSS 和 JS 或者图像等不显示的问题，可能有以下的两种原因：

一、假如图像, JS, CSS 都不显示，可以通过浏览器的开发者模式中的网络选项等去检查资源的对应地址是否是正确的，然后检查 hugo.yaml 中的 base_url 是否设置正确；

二、假如仅 CSS 不显示，只显示图像和文字，可以打开开发者模式中的控制台，看是否有如下报错：

Error

Failed to find a valid digest in the ‘integrity’ attribute for resource

如果是如下报错的话，可能是由于 minify 生成静态网页时，去掉了 html,js,css 等文件的部分空格和格式，来缩小文件的体积，但是修改后会导致文件校验失败，从而阻止加载，因此就会有两种解决方式：

hugo 设置中关闭校验 bj-Space : 在 hugo.yaml 中添加，（使用toml 配置的情自行修改对应选项）

params:
	assets:
		disableFingerprinting: true

关闭 minify 选项 3rd’s blog

还有一些其他的可能问题：http 和 https 混用

FI

本文介绍如何配置自己的 Github 的个人资料界面，同时会介绍相关美化个人资料的一些资源网站和项目，并简单介绍其用法。最终结果如下（还有许多优化的空间）：

创建同名仓库

Github 中创建用户名的同名仓库，该仓库的 README.md 将会在个人的资料页进行展示。(附上官方的说明如下)

AikenH/AikenH is a special repository. Its README.md will appear on your public profile.

创建该仓库之后，我们对 Readme 的改动将会实时的同步到我们的个人界面，后续我们就只需要专注于编写和修改该 Readme 即可。

相关资源推荐

由于大家的审美和风格不同，这里不做设计上的推荐，仅推荐一些用于美化个人界面的资源和部分项目的用法（以本人的 blog 为例）。

名字部分，简单文字转图片随便找一个工具箱 或者网站生成即可，不在赘述；

这里是一个工具和推荐仓库的大全集：abhisheknaiidu/awesome-github-profile-readme

这里是一些优秀的 readme profile

动态字幕

介绍使用的动态字幕效果实现：DenverCoder1/readme-typing-svg ，进入其 Demo Site ，设定想要的样式和文字即可生成对应的 markdown 和 html 代码。

<p align="center">
	<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&color=CC7DF7&width=435&lines=The+five+boxing+wizards+jump+quickly" alt="Typing SVG" /></a>
</p>

并通过 Html 样式指定居中对齐，将其放入 readme 中即可，效果如下：

统计卡片

笔者更喜欢统计卡片 anuraghazra/github-readme-stats 的风格和 ui，也可以展示特定的仓库等，统计指标更为完善。

使用时只需要指定 Username 即可，并根据自己的需求，添加和调整对应的参数，如添加 &count_private=true。

该项目也能展示如：热门语言卡片、pin 其他的 repo 等等功能的卡片。

徽章定制

徽章定制主要是 Shields ，输入自己的信息和颜色定制特定徽章，结合 Html 使用 href 超链接为佳，同时可以使用下面其他的样式来改变自己的徽标。

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

原始默认的样式如下：

可以改变写法，引入样式进行改变：

https://img.shields.io/static/v1?label=github&message=aikenh&color=blue&style=for-the-badge&logo=appveyor

变成如下的形式等等，其他的参考网站。

使用 DenverCoder1/custom-icon-badges 基于获取的 shields 的徽标进行进一步的自定义，得到更多样式，可以自己上传标志，或者打上更多标签。

• 修改 shields 的 url
• 选择其中的各种 slug 和 log 去进一步自定义该徽标

例如下面这个徽标，可以基于其 example usage 修改其中的文本和 icon 部分即可得到类似的效果。同样结合 html 的样式和 href 使用更佳。

<a href="https://aikenh.cn"><img alt="github" title="AikenD" src="https://custom-icon-badges.demolab.com/badge/-aiken%20blog-palegreen?style=for-the-badge&logo=package&logoColor=black"></a>

统计奖杯

统计奖杯 ryo-ma/github-profile-trophy 可以根据 Github 账号的 Commit 等信息来统计 Github 的活跃程度，并通过奖杯的方式呈现出来（账户较为活跃的就可以使用这个来展示）。

[![trophy](https://github-profile-trophy.vercel.app/?username=AikenH)](https://github.com/ryo-ma/github-profile-trophy)

使用方法较为简单，只要修改提供链接的 username 改为自己的即可，当然也有一些包括设定 rank 或者显示特定奖杯之类的，可以在 readme 界面看看介绍，并进行自定义即可。

其他

1. 简单的 readme 生成工具：rahuldkjain/github-profile-readme-generator 可以借助这个生成工具得到部分产品图标。
2. Icons of bands，产品图标 svg 大全：simple icons ，获取不同的产品图标，可以在定制 widget 什么的时候使用。