前言
前些天在服务器上部署了wordpress，满足了一部分的虚荣心，但是使用体验并不是很好，因为服务器晚间丢包率很高，而且wordpress加载速度也不够，所以整体上导致网站华而不实。
所以，这些天在研究hugo，据说是最快的博客系统，经过一天的踩坑经历，发现快确实快，但是真的蛮折腾的，部署到vercel上有很多的注意点，但是直到现在我还没完全弄明白。
目前正在使用的NotionNext我认为是很契合我个人的使用体验的，作为一个完整博客该具有的要素基本上都能完美实现，通过cdn加速之后，已经接近完美了。但是我还想想要一个平台专注内容的创作和管理，极简，并且快速，这个时候，我打算采用hugo作为NotionNext的辅助，所以目前还在尝试当中。
正文
这部分归档一些思考。
静态博客还是动态博客
选择静态博客还是动态博客取决于您的需求和偏好。以下是一些考虑因素：
静态博客：
安全性：静态博客通常比动态博客更安全，因为它们没有后台数据库或服务器端代码，减少了潜在的安全漏洞。
性能：静态博客加载速度快，因为它们只是简单的HTML、CSS和JavaScript文件，无需进行数据库查询或服务器端处理。
管理简单：静态博客不需要服务器端的配置和维护，您可以使用静态网页托管服务（如GitHub Pages、Netlify等）来托管和管理您的博客。
适用于简单内容：如果您的博客主要是文字、图像和简单的交互元素，而不需要复杂的用户交互或动态内容，静态博客是一个简单且高效的选择。
动态博客：
交互性：动态博客可以实现更复杂的用户交互和功能，如评论系统、用户登录、搜索功能等。
数据库支持：如果您的博客需要存储大量数据或需要复杂的数据查询和处理，动态博客使用数据库可以更好地支持这些需求。
灵活性：动态博客可以使用服务器端脚本语言（如PHP、Python、Ruby等）来编写更复杂的逻辑和功能，您可以根据需要进行自定义开发。
扩展性：如果您计划将博客扩展为更复杂的网站或应用程序，动态博客提供了更大的灵活性和扩展性。
综上所述，如果您希望简单、高效、安全的博客，并且不需要复杂的用户交互或动态内容，静态博客是一个不错的选择。如果您需要更多的交互功能、数据库支持以及更大的灵活性和扩展性，动态博客可能更适合您的需求。
静态托管对比VPS
静态网页托管服务和VPS（虚拟专用服务器）是两种不同的托管方式，它们在速度方面有一些区别。
静态网页托管服务是一种将静态网页文件（如HTML、CSS、JavaScript、图像等）托管在云端服务器上的服务。这些服务通常由大型云服务提供商（如Amazon Web Services、Microsoft Azure、Google Cloud等）提供。静态网页托管服务具有以下特点：
- 高速缓存：静态网页托管服务通常会使用全球分布的内容分发网络（CDN），将网页内容缓存在多个服务器节点上。这样可以使用户从离他们最近的服务器节点获取内容，从而提高加载速度。
- 管理方便：使用静态网页托管服务，您无需担心服务器的管理和维护。云服务提供商会负责服务器的配置、安全性和可用性，您只需要上传网页文件并设置域名解析即可。
- 适用于简单网站：静态网页托管服务适用于简单的静态网站，不需要动态内容或数据库支持。如果您的网站主要是展示性的，没有复杂的交互功能，那么静态网页托管服务是一个快速、简便和经济的选择。
VPS是一种虚拟化技术，它将一台物理服务器划分为多个虚拟服务器。每个VPS都具有独立的操作系统、磁盘空间和资源。VPS具有以下特点：
- 灵活性和自定义性：使用VPS，您可以完全控制服务器的配置和设置。您可以安装和运行自己的软件、应用程序和数据库，以满足特定的需求。这使得VPS适用于需要定制化和灵活性的网站和应用程序。
- 资源独享：VPS提供独立的资源，您不需要与其他用户共享带宽、内存和处理能力。这意味着在资源方面，VPS可能会比共享托管服务更快。
- 适用于复杂应用：VPS适用于需要动态内容、数据库支持和更高级功能的网站和应用程序。如果您的网站需要处理用户交互、用户登录、电子商务等复杂功能，VPS可能是更好的选择。
在速度方面，静态网页托管服务通常具有较快的加载速度，因为它们使用CDN和高速缓存来提供内容。而VPS的速度则取决于服务器的配置、网络连接和负载情况。如果VPS配置得当，并且没有过多的负载，它通常可以提供相对较快的响应时间。
总的来说，如果您的网站是简单的静态网页，没有复杂的交互功能，静态网页托管服务可能是更好的选择，因为它们提供简便、高速和经济的解决方案。但如果您需要更高的灵活性和自定义性，以及处理复杂的网站或应用程序，VPS可能更适合您的需求，尽管它可能需要更多的管理和维护工作。
学习网页样式
.home {
text-align: center;
.poetry {
font-size: 1em;
width: auto;
max-width: 26em;
margin: 0 auto;
padding: 5em 1em 10em;
text-indent: 2em;
<!--首行缩进 -->
}
.links {
position: absolute;
bottom: 10%;
left: 5%;
right: 5%;
font-size: 1.5em;
}
.links-item {
padding: $homeLinksPadding;
display: inline-block;
<!--
这段代码是用来定义一个网页中的样式。下面是对每个部分的解释：
1. `.home`：这是一个类选择器，表示应用于具有`class="home"`的HTML元素。在这个例子中，它是一个包含首页内容的容器。
2. `text-align: center;`：将容器中的文本内容水平居中对齐。
3. `.poetry`：这是一个类选择器，表示应用于具有`class="poetry"`的HTML元素。在这个例子中，它是一个包含诗歌内容的容器。
4. `font-size: 1em;`：设置诗歌容器中的字体大小为1em。`em`是相对于父元素字体大小的单位。
5. `width: auto;`：使诗歌容器的宽度自动适应其内容。
6. `max-width: 26em;`：设置诗歌容器的最大宽度为26em。如果诗歌内容超过这个宽度，容器将自动调整大小以适应。
7. `margin: 0 auto;`：设置诗歌容器的上下边距为0，左右边距为自动，从而使其在水平方向上居中对齐。
8. `padding: 5em 1em 10em;`：设置诗歌容器的内边距。上内边距为5em，左右内边距为1em，下内边距为10em。
9. `.links`：这是一个类选择器，表示应用于具有`class="links"`的HTML元素。在这个例子中，它是一个包含链接的容器。
10. `position: absolute;`：将链接容器的定位方式设置为绝对定位，使其相对于其最近的已定位祖先元素定位。
11. `bottom: 10%;`：将链接容器的底部与其包含块的底部距离设为10%。
12. `left: 5%;`：将链接容器的左侧与其包含块的左侧距离设为5%。
13. `right: 5%;`：将链接容器的右侧与其包含块的右侧距离设为5%。
14. `font-size: 1.5em;`：设置链接容器中的字体大小为1.5em。
15. `.links-item`：这是一个类选择器，表示应用于具有`class="links-item"`的HTML元素。在这个例子中，它是链接容器中的每个链接项。
16. `padding: $homeLinksPadding;`：设置链接项的内边距。这里的`$homeLinksPadding`是一个变量，可能在代码中的其他地方定义了其具体值。
17. `display: inline-block;`：将链接项显示为内联块元素，使其在同一行上水平排列，并允许设置宽度和高度。
-->
总结
尝试使用hugo并学习博客的框架，争取能够之后能自定义并编写适合自己的样式，当然这还有很长很长的路要走。