起因

大约10年前，我开始了自己的博客，从Godaddy购买了虚拟主机和域名，搭建了LAMP环境，安装了WordPress，并开始摆弄它。百度统计、谷歌广告、jiathis等都整理好了。当时，我在网上认识了一群志同道合的网友，谈论了自己建网站的经历，并在网站PR值增加到2时兴奋地告诉对方。

之后，由于种种原因，博客被废弃、消失了……

直到今年国庆节，我才开始寻找一个平台来创建一个与PS2相关的开源项目，并分享一些我在网上整理的文档。我的要求很简单，只要能完全支持markdown就可以了。这是因为我写的所有文章都是以MD格式保存的。

起初，知乎是我的首选，我也写过专栏。我在知乎文本编辑器中看到了“Markdown语法已识别”的提示，这让我怀疑它是否支持markdown。但现实却令人震惊。这完全是欺诈行为。知乎不支持markdown。语雀、飞书、钉钉的个人版看起来都不错，但他们的在线模式和私人格式让我无法接受。

考虑到这一点，我决定重新开始个人博客.

选型

现在创建博客的门槛比10 年前低得多。您甚至不需要购买虚拟主机或云服务。它是完全免费的。其中，各种Pages——Github Pages、Cloudflare Pages、Gitee Pages非常适合我的需求。该平台提供免费的静态网站服务和免费的SSL证书。 SSL 证书也由平台自动应用和更新。不像10年前那么方便了。

我的使用场景是：

首先，创建一个git 存储库，以便您有地方可以永久存储文件并在多个设备上同步它们。使用Markdown 格式创建文章和文档，根据您喜欢的目录结构保存它们，并将它们提交到git 存储库。使用静态网站生成器将markdown文件转换为html、css等静态资源。发布到页面服务。我选择了Github Pages + Hugo 来生成我的博客。没有什么特别的原因，但如果下次必须选择的话，我想我会选择不同的东西。

建站

使用Hugo生成网站

网上教程很多，这里就不详细说了。雨果不是你唯一的选择。只需选择您最喜欢的静态网站生成器。

Hugo生成的目录模板为：

my-site/ 原型/ luxdefault.md 资产/ 内容/已知数据/ i18n/ 布局/ 静态/ 主题/lux hugo.toml——所有通过站点设置创建的文章都位于content目录中。只需在编译过程中运行一条命令，静态网站的所有资源就会生成。

使用Github Pages运行网站

首先需要在github上创建一个Github Pages仓库。具体操作我们就不详细解释了。将上一步生成的静态资源上传到此仓库，并触发预先配置的工作流程来自动部署您的网站。

如果您选择Hugo，请注意以下设置：

在“构建和部署设置”中，选择“将静态内容部署到页面”工作流程，让Hugo 在本地编译静态资源。这显着加快了Github Pages 部署速度。

我们来谈谈收回域名的两种方法。

第一种方法是使用github为你的博客分配的域名，例如xxx.github.io。优点是您不必花钱购买域名。缺点是日本github.io的访问速度极不稳定。这种玩法适合初学者以及对博客要求不是很高的朋友。

第二种方法是自己购买域名并绑定到Github Pages。这一步需要配置。请参考官方文档。配置完成后，Github 将自动申请SSL 证书并允许您使用https 连接到您的网站。当然，拥有自己的域名有很多好处。请参阅下一节。

使用Cloudflare优化网络

中文github的访问速度很不稳定，不舒服。如果您有自己的域名，可以注册一个Cloudflare 帐户并进行一些配置以优化访问速度。

第一步是使用Cloudflare 的DNS 解析。如果您的域名不是从Cloudflare 购买的，您必须首先将DNS 解析服务器从域名注册商更改为Cloudflare 的DNS 解析服务器，例如腾讯。

第二步，使用dig命令查看Github Pages分配的域名的实际IP地址。

第三步，在Cloudflare 控制台中为您的域名创建一条指向上述IP 地址的DNS 解析A 记录。

如果觉得第二步和第三步繁琐，可以直接使用CNAME记录指定github.io域名，效果是一样的。

你也可以自己考虑其他配置，比如全站SSL和JS、CSS自动收缩等。设置完成后，您可以使用多个速度测试网站来测试您的网站的访问速度。至少应该比以前顺利很多。

我之前的图片CDN服务使用的是jsdelivr，但是改用Cloudflare后，为什么服务不稳定，不好用？

添加百度统计和Google Analytics

可以统计网站访问量、PV、UV等数据。这是十多年前添加到我的网站上的，我不确定还有什么更好的。如果您想添加一个，只需注册一个帐户并将Javascript 代码粘贴到您的网页中即可。

向搜索引擎提交你的网站

新网站上线。如果您想快速注册主要搜索引擎，主动提交您的唯一URL 也是一个好主意。以下是一些主要搜索引擎的收录和提交URL。

https://search.google.com/search-consolehttps://www.bing.com/webmasters/https://ziyuan.baidu.com/dailysubmit/如果您的域名没有注册，百度收录您的域名会比较困难。

个性化

主题

我选择了简约风格的PaperMod作为我的主题。只需按照说明进行设置即可。

代码高亮

如果您不喜欢Papermod的默认代码高亮样式，您需要禁用highlight.js并启用Chroma。请注意以下步骤，以免陷入陷阱。

将params:assets:disableHLJS:true 添加到hugo.yml。添加到cunstom.css:root { --hljs-bg: unset ! important;}.dark { --hljs-bg: unset ! important;} 到hugo.yml 并在Chroma 样式库中选择您选择的样式将其设置为markup: height: codeFences: trueguessSyntax: true lineNos: true # noClasses: false style: monokailight 您可以刷新页面查看效果，如果看起来不错，就不再麻烦了。如果你想追求更高级的功能，比如根据深色模式自动切换高亮模块，则需要使用自定义CSS。

修改Hugo.ymlmarkup:highlight: codeFences: trueguessSyntax: true lineNos: true noClasses: false 生成CSS文件Hugo gen chromastyles --style=monokailight syntax.css 现在，CSS就完成了。尝试使用CSS，例如在深色模式下更改背景颜色。

.highlight.chroma {background: var(--bg-c)! 重要；}:root { --bg-c: #fafafa;}.dark { --bg-c: rgba(175, 184, 193, 0.2);} :010 -1010 有多种选项可用于向静态网站添加评论模块。我选择了Waline | 如何安装请参阅官方文档。部署到Vercel。连接的数据库是LeanCloud（免费）。

Waline 支持深色模式代码。

/* # Waline 深色模式*/body.dark { /* 下面是官网默认的深色模式配色方案*//* 普通颜色*/--waline-white: #000; --waline -dark; -grey: #999; --waline-bgcolor: #1e1e1e; -color: #333; --waline-disable-bgcolor: #444; --waline-disable-color: #272727; --waline-bq-color: #272727; -info-bgcolor: # 272727; --waline-info-color: #666; --waline-border: 1px Solid #888;} 我喜欢waline 默认主题的绿色如果不是，你可以把它改成蓝色。

body.dark { --waline-theme-color: #318dec !important; --waline-active-color: #318dec !important;}:root { --waline-theme-color: #60a7f1 !important; #60a7f1 !important;} :010 -1010 如果你想直接在markdown中绘制图表，请安装Mermaid。安装说明可在图表| 中找到。效果是：

顺便说一下，由于jsdelivr不稳定，所以我选择了cloudflare的CDN：https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.1/mermaid.esm.min.mjs

评论模块

目录是侧边栏等文章的概述。如果您不喜欢主题附带的目录样式，您可以定义自己的目录样式。网上教程有很多，我就不赘述了。例如下图：

支持mermaid语法

基本上可以满足我目前的需求。最后介绍一下我写文章时经常拍的照片。

我平时用VSCode写文章，能够实时预览Markdown格式，非常方便。为了让图片在VSCode和网页中正常显示，我在项目根目录下创建了一个名为imgs的软链接，指向static/imgs。这是因为Hugo在编译时会自动将static目录中的文件复制到网站的根目录中，因此您可以使用绝对路径/imgs/来查找不同预览模式下的文件。

我还创建了一个名为public 的软链接，它指向Github Pages 存储库。当我写完一篇文章并用Hugo 编译它时，输出文件会自动复制到公共目录（我的Github Pages 存储库）。最后，使用git命令将更改推送到远程存储库并完成网站发布。

最后，请大家访问我的新网站“路边阿布”。

版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。