前言
前些天在服务器上部署了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并学习博客的框架,争取能够之后能自定义并编写适合自己的样式,当然这还有很长很长的路要走。