迁移上云，4202年个人部署（二）

继续迁移

前篇说到逐步全☁化迁移，迁移了各类服务后就该web网站了。现时运行的有本博客与图表站。博客多年前部署于VPS，图表站随手一画既不工程也不好更新，是时候换用现代工具。

Astro

博客相对复杂，先看图表站。图表站源于17-18年水学研究期间的词频统计、生命周期。当时只是展现博客附图，随手用 google chart 原生js写法。社畜以来写 react 技术栈都好几变，这原生js过于简陋，考察最新框架发现 astro 较为新潮。

Astro 是最适合构建像博客、营销网站、电子商务网站这样的以内容驱动的网站的 Web 框架。Astro 以开创了一种新的前端架构而闻名，与其他框架相比它减少了 JavaScript 的开销和复杂性。如果你需要一个加载速度快、具有良好 SEO 的网站，那么 Astro 就是你的选择。

根据官网说法运用群岛架构减小js依赖提升性能，还可混合框架（react、vue）。对于纯粹展示用的图表站十分合适。

重构

发现 google chart 也有 react 版了，使用 astro 默认模板创建项目，加装 astro react 组件后即可新建 tsx 开始写 react。按文档组装好数据后在 pages 文件夹下创建 astro 文件引用 react 组件，注意此时需要使用 client:load 激活 js。

---
import {LifecycleChart} from '../components/Lifecycle.tsx';
import Layout from '../layouts/Layout.astro';
---

<Layout title='Lifecycle'>
    <LifecycleChart client:load/>
</Layout>

从源码可见 astro 混合了 react。根据 astro 基于文件的路由，无需配置如 react router 即可路径跳转。在首页轻松配置进入两页链接。

部署

4202年部署当然要自动，比起厂里运用CI/CD要写流程，vercel 预制一些模板帮你自动构建部署。只需在 vercel 连接 github 项目，自动识别到 astro 项目，无需特殊配置即可。日后 github push 到 master 分支即可触发构建。

博客系统 hexo 虽说老旧，先进 astro 博客系统生态却又不够完善，暂且留用。vercel 也支援 hexo，将本地 hexo 项目传至 github 去除以前的 git deploy 配置，链接 vercel 即可部署。整体还算方便。

结语

两回迁移后，大体网络服务迁移完毕，终于追上时代。博客还是想继续更新，但社畜以来精力有限，多有🕊️，由手动转自动节省心力维护。感谢各云服务商提供基础免费套餐、自动化服务，极大地降低了个人运行、维护网络服务的成本，简化了流程。