Skip to content

serverless个人博客搭建

为什么选择serverless?

  • 可行性:个人博客不需要太复杂的逻辑处理,静态页面就可以搞定
  • 降本:相比于前后端架构,静态页面的成本非常低
  • 增效:相比于服务器,不需要复杂的运维工作就可以保证可用性

技术选型

1、serverless部署选择:

技术 国内访问速度 成本 推荐程度 说明
云函数 快/较快 ⭐⭐ 不需要复杂处理,用在这里有点多余
GitHub Pages 1、国内访问速度拉跨,用户看个博客还要搭梯子
2、可以配置额外的CDN加速解决访问速度慢的痛点
Vercel/Netlify 小体量免费 ⭐⭐⭐ 1、国内访问速度这一块褒贬不一,个人体验下来不错,但比较担心国内有些地方访问可能不太行
2、开发体验好,有配套的CI/CD
3、可以配置额外的CDN加速解决可能存在的访问速度慢的痛点(他们本身是有全球CDN的,这也是本身访问速度能达到“中”的原因,但是中国大陆访问的时候走的是香港节点,有时候会比较卡,配置国内厂商的CDN实质上为了避免备案,大概率也是选择境外节点,但国内厂商对国内一般有专线加速,还是比原本的节点能快一些,但快的这部分与CDN本身无关)
对象存储 快/较快 ⭐⭐⭐⭐ 1、国内站点不能直接访问html,而是会下载,需要配置自定义域名
2、配置自定义域名访问国内站点需要备案,但对象存储本身不属于可以备案的资源,所以得买服务器
3、可以使用香港或者境外节点解决无法直接访问以及自定义域名备案问题
4、如果选择了境外站点,可以通过配置额外的CDN加速解决访问速度慢的痛点

如果不考虑CDN的情况下,显然对象存储是比较好的选择,但如果加了CDN,推荐程度就发生了变化,如下:

技术 国内访问速度 成本 推荐程度
云函数 较低 ⭐⭐
GitHub Pages + CDN ⭐⭐⭐⭐⭐
Vercel/Netlify + CDN ⭐⭐⭐⭐⭐
对象存储 + CDN 较低 ⭐⭐⭐⭐

总结一下:

  • 如果使用CDN:GitHub Pages、Vercel、Netlify任选一个即可(仅针对本项目,三者没有差别,成本在CDN、自定义域名)。
  • 如果不使用CDN:如果能够忍受少量延迟,推荐使用Vercel/Netlify;如果不能忍受延迟,可以使用对象存储

2、网站页面

技术类型 是否选择 说明
前端技术 我不会前端(
pelican 生成的页面不太喜欢,而且感觉比较复杂,我已经设置了中文,但是页面还是英文的
/practice/blog_img/blog_pelican_page.png
mkdocs 操作简单,自由度高,能生成符合我审美的页面,还能在本地调试

这里展示的pelican和mkdocs均为python包,根据自己使用的语言搜相关的包也是可以的,不拘泥与技术栈,主要看怎么能快速把服务搭起来,怎么样效果好

搭建操作

1、生成网站页面文件

  • 安装mkdocs包

    pip install mkdocs

  • 编写首页文档,编写相关配置
  • 调试效果

    mkdocs serve

  • 生成网页文件

    mkdocs build

  • 推送到github

2、配置部署

  • 我这里选择了Vercel,进入到创建新项目页面,选择git仓库
    /practice/blog_img/img.png
  • 填写部署信息
    /practice/blog_img/img_1.png

注:Root Directory是根目录,可以认为是工作目录,下面的操作都是在这个目录执行;Build Command是安装命令,可以利用这个命令安装依赖包;Output Directory是输出目录。我是这么填的,仅供参考
/practice/blog_img/img_2.png

  • 部署完成
    /practice/blog_img/img_3.png

3、配置CDN

  • 购买域名
    找个云厂商,控制台搜“域名服务”,挑一个自己喜欢的即可。这里需要注意,不同域名价格不同,注册和续费价格也不同,有些域名第一年可能就几块钱,但续费得几百,大家别踩坑。
    /practice/blog_img/img_4.png
  • 购买CDN服务
    找到一个云厂商,找到他们的CDN服务(不知道产品叫啥可以问AI),购买之后进行配置
    这里有两个需要注意的点:1、安全起见,建议回源协议采用HTTPS;2、回源HOST头使用源站域名(就是你搭建好Vercel后的默认域名)
    /practice/blog_img/img_5.png
  • 配置域名CNAME
    在你注册域名的云厂商中,进入“域名解析”服务,配置CNAME。CDN服务会提供一个域名,填写到记录值上
    /practice/blog_img/img_6.png

验证效果

/practice/blog_img/img_7.png