前言：基础准备和规划构想

前言

该系列文章并非零基础入门，所以在我们一起开始之前，需要您补充一些技术知识的储备。当然，我也会为想要入门的同学降低一些门槛。所以本文旨在介绍和对照一下，需要哪些前置的技术储备。

基础准备

一台能够流畅访问网络的电脑

能够访问 Github 开源项目。我的 Github 主页是： https://github.com/willin/

国内的话，后续会同步在码云上： https://gitee.com/willin （但由于手动同步，可能会遗忘。）

部分的演示示例会根据项目的大小，分别放在 Codepen、CodeSandbox 或者 StackBlitz 上。

一定的英语阅读能力

因为很大一部分的文档是由英文编写的，并且国际化翻译的过程会比较滞后。

当然，折中一下，有一个很好的翻译软件也是有一定帮助的。但语言是一种工具，能够方便的表达和传递思想，即便是编程语言也是这样，所以建议千万不要把语言能力的基础落下。

一些前端的基础

比如能够安装和使用 Node.js、Typescript。以及对 React 或者 Vue 有一定的基础入门。也能够跨越障碍去安装一些依赖包。

比如说使用镜像安装：

npm install --save v0 --registry=https://registry.npmmirror.com
# 或者使用 yarn
yarn add v0 --registry=https://registry.npmmirror.com

国内镜像使用可以参考： https://npmmirror.com/

后续的文章中，不会过多阐述语法基础、环境依赖之类的问题。

当然，如果有后端的一些知识储备，那就更好了。比如关系型数据库（MySQL）、缓存（Redis）等。

规划构想

从 02 年开始，前前后后搭建过了好多个个人网站。从 Z-Blog、Wordpress、Emlog、Typecho、Jekyll、Hexo 等。

也可以看到，我现在的个人网站 https://willin.wang 是完全静态化的（基于 Nuxt.js / Vue 2）。

早期的时候，我都是用服务器搭建动态网站。那时候服务器成本并不高（也主要是因为我的配置需求并不高）。动态网站更灵活，但服务器、数据库都是要收费的。虽然也有便宜的服务器，但是配置低，超卖现象严重，访问体验挺差的。如果经济条件允许，还是可以整一台服务器折腾折腾试试的，对于学习成长还是很有帮助的（自己在本地搭建服务器环境也是一样的学习效果，成就感会低一些）。就是收益不太高（一般只有投入，没有收入）。

后来随着工作后生活的负担（当然也有一部分域名投资失败的前车之鉴），不再把余钱投入到服务器上。所以用过一些静态的站点生成器，也自己写过一些，总体感觉……就是别扭，像是被压在了五指山下，空有洪荒之力却无处可用。因为不够灵活，很多事情做不了。比如评论系统、文章访问量统计展示之类的。

目前的规划是这样：

• 框架选用 Remix （基于 React 的全栈框架）

• 部署在 Cloudflare Pages 全球 CDN 加速

  • 并且还提供了 KV 缓存（这样就省下了 Redis 缓存的开销）

• 数据库使用 PlanetScale 云端 MySQL 服务

  • 使用 Prisma 下一代 ORM

整套配置均为免费，后续免费额度超出后阶梯收费，是我目前调研成本最低的前期方案了。在后续的更新中，可能会穿插一些静态或者动态方案、框架的简单对比。

中途加入

可能会有不少同学会在项目中途才发现这个系列的文章。所以我尽量优化代码提交，每次使用 Feature 分支，Squash 方式合并回主分支。这样，可以从提交历史中方便的回溯和查看对应的代码。

类似于图中箭头所示，main 分支中均以 PR 形式合并进来。点进 PR 查看各个 Feature 分支的代码提交，并且代码提交也如图中所示，参考 Angular 提交信息规范。

讨论和贡献

可以通过以下渠道参与讨论：

• 文章评论留言
• Discord 讨论版： https://discord.gg/ggFuFDNd
• 邮件： i(a)sh.gg ，将 (a) 替换为 @

以及欢迎对我的开源代码进行指正和优化。