基于 Serverless 搭建的个人博客 | 🏆 技术专题第七期征文

tinafang
859 阅读5分钟

前言

之前用 Serverless 的 website 组件 部署了一个 hexo 博客，由于种种原因，最近终于下定决心把博客重新部署下。整理了下现有博客的一些问题：

  1. 手动构建和发布，比较繁琐，容易误操作
  2. 依赖本地设备，换电脑的时候没法写博客了
  3. 当时使用的部署工具是 serverless component v1，官方已经不再维护
  4. 域名解析有点问题，每次都重定向到 cos 桶地址，这种域名在微信里会被封禁，打不开，分享机制很不友好。

基于上述问题，终于决定迁移自己的博客了，当前的计划和进展如下：

  • 启用新的域名 blog.tinafang.com，解决问题 4
  • 升级为 component v2，解决问题 3
  • 增加一些友情站点，例如 yuga, only 的
  • 兼容之前的博客地址，包括 cos 和 自定义域名
  • 传到 Github Repo 中，解决问题 2
  • 搭建自己的图床，对图片的大小，尺寸进行优化。
  • 接入 Github Actions 的自动化 CI 流程，解决问题 1

迁移步骤

1. 将本地代码提交到 github 远端上

  1. 在gitHub 上 创建新库 https://github.com/tinafangkunding/tina-blog
  2. 终端cd工程文件所在文件目录，
  3. git init
  4. git add -A (进入文件 添加文件,-A表示添加全部文件)
  5. git commit -m “提交说明”
  6. git remote add origin url (该url是你库的url)
  7. git push -u origin master （将本地的仓库提交到github账号里）

刷新后，即可看到代码 github.com/tinafangkun…

2. 升级为 component v2 的部署方式

  1. 在本地环境把旧的 serverless.yml 改名，重建一个新的 serverless.yml
  2. 并且将配置修改为 v2 规范：website component 的 v2 版本配置参考，也可以参考下文的配置。
  3. 为新的域名 blog.tinafang.com 申请证书，我是在腾讯云申请的免费的 1 年 DV 证书。半小时之后申请和验证都完成了。
  4. 在 serverless.yml 中配置新域名和证书 id，指定原有的 cos-bucket（覆盖部署），并且手动部署成功。
  5. 在 dns 中加一个 cname 记录。等待 1-2 分钟即可生效

此时，再次执行下列命令，更新到 github 仓库

git add -A
git commit -m "v2"
git push

为了方便参考，这里贴一下 serverless.yml 的配置，并对其中的一些注意事项进行说明。

# serverless.yml
component: website # (必填) 引用 component 的名称，当前用到的是 tencent-website 组件
name: tinablog # (必填) 该 website 组件创建的实例名称
app: tinablogApp # (可选) 该 website 应用名称
stage: prod # (可选) 用于区分环境信息，默认值是 dev

inputs:
  src:
    #src: ./public
    index: index.html
    error: index.html
    dist: ./public   #这里 dist 和 hook 要一起用
    hook: npm run build
  region: ap-guangzhou
  bucketName: my-hexo-bucket
  protocol: https
  #cdn
  hosts:
    - host: blog.tinafang.com
      async: false # false 时自动刷新擦，true 的时候不会
      area: mainland
      autoRefresh: true
      onlyRefresh: true #true 时，cdn 只做刷新操作
      https:
        switch: on
        http2: on
        certInfo:
          certId: 'haMhGlIc'
  • 问题：部署了几次发现，每次更新文章，对应的 cos 域名内容很快更新，但自定义域名 blog.tinafang.com 中的内容刷新十分缓慢，后来发现是 CDN 有缓存的问题。
  • 解决：async 参数配置为 false，auteRefresh 配置为 true， onlyRefresh 参数在首次部署后也配置为 true。再次编辑内容并部署，可以看到内容快速生效了！
  1. async 参数：是否同步等待 CDN 配置。配置为 false 时，参数 autoRefresh 自动刷新才会生效，如果关联多域名时，为防止超时建议配置为 true。
  2. autoRefresh 参数：配置开启自动 CDN 刷新，用于快速更新和同步加速域名中展示的站点内容。（该能力在 CDN 控制台也可以手动刷新，但是 website 组件贴心的集成了这个功能，赞）
  3. onlyRefresh 参数：建议首次部署后，再将此参数配置为 true，即可以忽略其他 CDN 配置，只进行刷新操作

3. Github Actions 配置（未完待续）

原本计划配置 github actions，每次 git push 的时候自动 build 和 deploy。但是当前发现我使用的 next 的主题，在 Github 仓库中的样式为空，因此每次跑 CICD 流程的时候会失败。

该问题未完待续，正在持续解决中，知乎和其他论坛也有一些讨论可以参考。

Hexo + Git CICD 的参考文档（这里都是用 hexo cli 来做的，和我的需求不太一致） www.jianshu.com/p/21dbc53a4… zhuanlan.zhihu.com/p/133764310 sanonz.github.io/2020/deploy…

Github Actions + Serverless 的参考文档 cloud.tencent.com/document/pr… blog.tinafang.com/2020/09/30/…

注：
1、远端创建了 workflow 的 main.yml 文件后，要记得本地 git pull 拉取一下最新的代码。之后再次更新对应的博客文件，然后 git push
2、github actions 需要 sudo 安装 serverless framework，否则会报权限不足的错误

小结和展望

博客搬家之前和之后，在部署流程，和访问者体验上有了提升。

  • 部署流程：之前需要 hexo g 之后 sls --debug，现在配置了 hook，只需要一步 sls deploy。但因为 CICD 没有打通，依然需要手动同步到 Github Repo
  • 访问体验：主要通过 https 的自定义域名解决了微信封禁的问题
  • 图片存储：利用自己搭建的图床（也是基于 serverless 的呢）来存储图片，利于 seo，而且更加稳定可控。
  • 配置更新：新增了一些友情链接，分类等模块在博客中。

后续有空的时候会继续完善 Github Actions 的配置，并且搭建好图床。后面可以考虑针对当前网站里所有的图片进行优化和适配。另外当前自定义域名会有 cdn 缓存的问题，后面可以研究一下。

项目地址：github.com/tinafangkun…

博客新地址：blog.tinafang.com/

blog

用 Serverless 搭建博客只是初级玩法，关于 Serverless 的更多有趣应用，可以参考 Serverless 的 100 种玩法 这个项目，欢迎贡献！

🏆 技术专题第七期 |万物皆可 Serverless

avatar
文章
阅读
粉丝