聊聊搭建静态博客网站的基础架构和技术栈

聊聊搭建静态博客网站的基础架构和技术栈

通常介绍静态博客搭建的教程专注于博客系统选择与网页文件托管,初学者难免一头雾水,难以实操。本文介绍了静态博客网站从撰写、上线到运维所使用的全套技术栈与基础设置,以此为索引,可以领略静态博客创作全貌。

文章撰写

Markdown 是一种轻量级标记语言,它以纯文本的形式编写,通过一些简单的符号和约定来实现文本的格式化和排版,比如标题、列表、链接、图片等。Markdown语法简洁易懂,便于阅读和书写,而且可以很方便地转换为html,或是植入html。在Markdown中编写公式也是非常方便的,可以看作轻量级的Latex,这点对技术博客而言是刚需。总之,任何人都能在十分钟之内熟悉markdown语法并提升写作效率,推荐使用。

vscode + git 文本编辑器方面,推荐微软免费开源的vscode搭配markdown插件,支持实时预览、编辑公式、插入图片和输出到文件,与静态博客框架无缝结合。版本管理工具(可选)使用git,记录修改日志,有问题随时回滚。

vscode+markdown

多媒体处理 博客中通常会使用图片和视频,为了加速加载和节约网络流量,对它们进行剪裁或压缩是很有必要的。这方面的工具推荐在《工具封神榜》中介绍的squoosh和ffmpeg。

静态网站生成器 用于将文本文件(通常是Markdown、HTML、CSS、JavaScript等)转换为静态HTML文件,从而创建一个完全由HTML、CSS和JavaScript组成的静态网站。它们的工作原理是将模板和内容文件组合起来,然后应用一系列规则和模板引擎,最终生成静态网页。如今流行的hexo、hugo等博客程序都属此类,由于被广泛使用,它们的美化主题、插件支持(可以实现动态功能)、文档教程资源都是非常丰富的,功能强大且易于使用。

域名、存储与分发

在本地完成博客撰写和网页生成后,下一步就是发布到互联网。早些年,尚需要自己购买服务器或是“虚拟主机”完成,但如今有更低成本和便捷的方式,就是从云服务商购买域名+对象存储+CDN。静态博客网站只是一系列静态文件,不需要服务器端处理。这也意味着它们可以轻松地托管在CDN(内容分发网络)上,从而实现全球范围的快速访问。

COS+CDN

域名 首先为了方便访问,通常需要一个域名指向提供内容的服务器地址。访客的客户端会先从DNS服务器获取到域名所对应的真实ip地址,再对真实地址进行访问。虽然可以使用直接使用ip地址进行访问,但这就如同没有姓名,直接使用身份证号一样,而且不便实现负载均衡。

域名可以从域名服务商购买,值得注意的是,如果要使用国内服务器,必须购买限定后缀的域名并完成备案。在域名选择上,最常见的顶级域有.com/.cn/.net等,不过如今新顶级域(New gTLD) 也蓬勃发展,未被注册的空间更大。如视频网站Youtu.be,外卖送餐平台饿了么使用的ele.me,锤子手机使用的t.tt等创意域名让人耳目一新。这种将主体名称与域名后缀融为一体的做法又被称为Domain Hacking,如本站域名heth.ink是he+think组合而成。

另外,如果只是想新手尝鲜或是囊中羞涩,也有一些免费域名可选。Freenom免费提供顶级域名,但使用体验一言难尽。免费二级域名选择面就比较广了,如1996年开始由私人运营免费提供的eu.org后缀,申请地址,据小道消息部分大公司已将它视作是顶级域名。

获得一个域名后,下一步是添加域名解析。免费的dns服务商有许多,国内推荐dnspod(已被腾讯收购)。拥有域名之后,可以添加本域名和次级域名解析,如heth.ink是主域名,pan.heth.ink作为次级域名可以指向个人网盘。

对象存储 云对象存储系统可以将海量数据分布在多个物理设备上,允许用户从单个虚拟存储库有效地访问内容,是一种基础云服务。内容分发方面,直接将静态博客整个同步到对象存储,理论上就已经完成了。这一步可以编写简单脚本完成,以腾讯云COS为例,利用官方提供的上传工具进行同步:

1
2
3
4
5
#!/bin/bash

COS_CFG=.cos.conf
#上传至对象存储
coscmd -c $COS_CFG upload -rs --delete public/ / -y

CDN 即内容分发网络(Content Delivery Network),是一种通过位于全球不同地理位置的服务器网络,将内容(如文本、图像、视频等)高效地分发给用户的系统。 CDN通过在全球范围内分布的服务器,将网站内容缓存到离用户更近的位置,从而减少数据传输的距离。这样做不仅能提高网站访问速度,更为重要的是降低流量成本💰,与直接从对象存储读取文件相比,腾讯云CDN流量价格总是更低,缓存命中率较高时,通常可以降低一半以上。

通过CDN访问

由于对象存储和CDN都可以按量付费,且不消耗什么计算资源,在网站规模较小、访问较少的情况下,一个静态博客产生的费用几乎可以忽略不计。如果不想手动配置云服务,也有公司提供静态博客托管,更加方便,如GitHub Pages,Cloudflare Pages等。

运行维护

可用性监控 网站可用性可以使用DnsPod监控,在网站意外下线时,会触发短信报警提醒管理员。

性能分析 推荐在《工具封神榜》中介绍的PageSpeed Insight分析网页加载中可能的优化点。当然,在本地用Chrome浏览器分析加载工程中的网络流量,也是极为有效的。

数据分析 网站上线之后,有了浏览量,使用网站统计进行数据分析,可以形成正反馈,更好地促进创作。这方面可以选择全托管的百度统计/谷歌统计,不过更推荐自托管的开源统计项目如Matomo,把数据掌握在自己手中,而且能够获得更为详尽的分析。搜索引擎是个人博客的一大流量来源,因此分析搜索引擎侧的索引、展现、点击数据也是大有裨益的,如Google的站长管理平台

Matomo

总结

自2020年他思笔记序以来,笔者运营博客已近四年,几经兴废,技术更迭变迁,所幸如今依旧存续,流量平稳。衷心希望这篇技术总结能够帮助建站路上的读者,对静态博客技术全貌有所了解,少走弯路,为自己获取一立锥之地,也为互联网世界贡献更多知识。🎉

聊聊搭建静态博客网站的基础架构和技术栈

https://heth.ink/BlogInfra/

作者

YK

发布于

2024-01-29

更新于

2024-01-29

许可协议