注：本文是我写的，主动摘录到bilibili。 如果布局有任何问题，我会用截图代替。 如果您想获得更好的用户体验，请前往网站阅读。
我想读完这篇博客你就会知道这个网站是如何诞生的，以及我在写博客文章时是如何操作的。
从头开始，快速构建博客以拥有一个空存储库
关于创建 GitHub 帐户和创建新存储库的教程有无数，因此我不想赘述。
如果您确实不知道如何操作，只需单击此链接并找到 GitHub Pages 选项。
找到合适的模板
决不？ 有没有人在建立博客之前就已经可以编写并编写一个完整的静态网站框架了？
事实上，大多数人都没有自己的一套网站模板。 如果有，请跳过寻找模板并直接上传。 这里只是一些模板网站。 找到您喜欢的一款，然后下载它或访问其主页查看是否有使用说明。
本网站使用此模板。 这个模板的优点是说明都是中文的，非常友好。 您只需查看自述文件和里面的链接就可以基本上配置所有内容。 （如果你不知道怎么发issue，可以来找我，我教你）
上传、配置
git克隆你新创建的空仓库，解压下载的zip，更改一点内容，git推送，以及git设置。 我不会教你任何关于它的事情。 如果有需要请私信发。
（上面也可以直接克隆模板库有网站模板上传到哪里，想怎么做就怎么做）
打开GitHub页面的方法比较简单，查看settings-pages-即可
配置到这一步后，就可以打开看到模板网站了~~~~
添加或删除内容，更改基本框架
谁不想什么都不做，然后开箱立即使用~~
更改_config.yml文件
这是搭建网站时必须修改的配置文件。 该文件包含了很多与网页正常运行相关的配置。 通过查看代码您将了解它是如何工作的。 但现在，我们只需要知道这个文件需要修改。 我们在文件的注释中写了详细的更改说明。
首先要更改的是网站的名称和描述。 对此没有太多可说的。 主要是如首页所示。
接下来是存储库的名称。 只需按照说明操作并将其更改为您的仓库名称即可。
至此，_config.yml已经基本修改完毕。 至少你的网站在刷新后看起来应该是正常的（与模板一模一样）。
如果您希望自定义的 404 页面正常工作，请记住将 404.md 顶部的内容更改为如下所示
---永久链接：/404.htmllayout：pagetitle：404 - 页面未找到---
至此，基本配置就结束了。 你还可以在这个配置文件中更改你的页脚注释等，并根据你的个人喜好来使用。
看到这里，你自然会担心如果配置时出错会发生什么：别担心，如果配置时出现严重的语法错误（比如该加空格的时候却忘了加空格），GitHub 的 Jekyll tool 会报错，然后会发邮件给你，提示你的repo对应的网页构建失败。 这时候你可以简单看一下是否有误删除的空格，填写完后重新提交即可。
添加博客文章并编辑内容
其实readme中指向的链接已经说得很清楚了，如果你还是不明白，我来给你解释一下。
您的目录至少应该与此类似。 如果你想开始写博文，只需要打开_posts文件夹，在里面新建一个文件，后缀为md。 文件名应类似于日期名称。 这里我没有尝试中文名是否可用。 无论如何，我使用了英文名称，因为这个名称需要包含在 URL 中。
然后按照说明操作并将以下标头插入新文件中：
其中layout:post不用改，toc:true表示打开目录显示（桌面浏览器有效），剩下的大家自己猜吧。主要是我懒得一一找了一个并将它们发送出去。
图片床
你会发现，当你使用md文件写博客时，不能像写word文档时那样直接粘贴图片。 如果直接在Typora等编辑器中粘贴，会出现文件名+本地文件地址。 这样别人就永远看不到你了。 如果要显示图片，一个合适的解决方案是将图片上传到图床并使用图床地址。 现在网络上有很多图床。 我个人对于要求图片大小小于0.5M的主流图床不感兴趣。 相反，我选择了freejishu搭建的图床。 他自己使用 AiGene 构建了一个图床系统。 ，虽然不知道能用多久，但是用了之后每天都感觉很好哈哈哈（（（（（（（（谁说他的图床没有使用限制））哈哈哈，当然我不会上传任何不符合主流价值观的图片。
先进的
如果您对开箱即用的内容不满意，可以对模板进行某些修改。
添加谷歌分析
这个网站的模板自带了Google Analytics的支持，但是由于某种原因，无论我如何配置它都不起作用，所以我被迫自己更改它。
首先，你需要一个**账户，然后……算了，快进，直到你得到G代码
然后下面有代码添加指令，按照指令添加到头部即可。
什么？ 不知道怎么添加吗？ 啊，那是因为我没有说这个网页的布局不是一个html就是一个页面，而是一层套着一层，一层层嵌套。 具体来说，我不是专业从业者，也无法理解为什么，但是只要你在代码中看到以下内容，就说明这个页面引用了另一个页面中的所有代码。
我这里所说的是使用head.html中的所有代码。
现在你知道了，你只需要在head.html中找到相应的地方，添加Google给你的分析代码即可。
找到/_include/analytics.html，删除原来的部分，然后添加Google给你的那段代码，然后到head.html适当推进插入的代码语句。 比如我的改成这样
然后就可以看Google的实时分析数据啦~提交后记得等一两分钟刷新一下网页。
添加玩家
使用说明在这里，稍后将讨论如何添加到网站。 本质就是添加js
一篇合格的博客文章怎能不被BGM加持呢？ 关于添加BGM，其实很早就有高手提出了解决方案。 Aplayer用作音乐播放器，mettingjs用作在线音乐ID解析器。 两者结合可以实现输入音乐ID并输出音乐的功能，如下图：
将如此出色的播放器添加到您的网页只需三个步骤：
添加一个词
一个字
作为一个完整的网页，怎么能不装饰得漂亮呢？ 总之，可以说是很多网站用来增加网站美观度的小工具。 这并不是很复杂。 仅仅从网上挑选的一句话，可能很调皮，也可能令人惊讶，也可能令人感动。 简而言之，你每次都会期待刷新它。 呈现的新鲜句子会让你感觉永远不会重复，总是充满新鲜感和惊喜。
虽然一言API提供了选择范围的接口，但是我偷懒但觉得没必要过滤。 日常生活中没见过的句子我可以随意刷新。 这难道不是一件值得庆祝的事情吗？
具体的构造方法也很简单，把这段代码放在头部即可
然后将此代码插入到适当的位置（例如页脚）
在实际实践中发现有网站模板上传到哪里，如果网页动态调整布局，使用ap标签可能会导致采集时始终显示一种显示模式。 解决办法是在不同的布局方法中添加p标签并更改id，然后将head文件更改为这样：