设计人机体验不是为了制作更漂亮的桌面，而是为了创造一个和现实有特殊关系的、充满想象力的世界。 在这个世界我们能扩展、放大和丰富人类思考、感受和行动的能力。 ------不记得摘录自哪本书了
你有想过部署个人网页吗？当你的脑海里突然冒出来一个想法，你决定捕捉它、分析它、实现它，然后，更自由的将其分享给你的小伙伴们 🤩
如果你已经开始想象这样的画面，那就赶快行动起来吧！ 本篇文章将以【个人博客网页】为示例，从单篇文章到多来源文章，从简单动态效果到深度交互，总有一款适合你当前需求的前端架构 + 部署平台 😘
静态网站
如果说你还没有想好你的网页的更新频率或交互方式------
这意味着你的初步计划是搭建一个
- 内容固定
- 不会频繁更新
- 没有动态功能（评论/搜索等） 的基础网站。
喔那直接行动吧！部署这样一个网站的成本几乎为零。
GitHub Pages
正如初学代码，先来一份 Hello world!，在部署个人网页这件事上，可以先利用 GitHub Pages ，来一个 index.html。
如果 index.html 文件也还没有想好，可以考虑去跟 Gemini 聊聊天。
部署 GitHub 个人页面
Step1 创建repo
- 登录 GitHub，点击 -> New repository
- 输入仓库名（必须在创建 repo 时就符合需求）：username.github.io 【例如 GitHub username 时 xiaoming，那 repo 名就是 xiaoming.github.io】
- 勾选 "Add a README file"
- 点击 Create repository
Step2 上传项目文件
- 在新创建的 repo 中，点击 Add file -> Upload files
2. 拽一个 index.html 文件（或者整个 folder），并提交 commit changes
部署成功后就可以在相应的 username.github.io 浏览网页啦
部署 GitHub 项目页面
username.github.io 只能有一个，但我其实有多个项目文件，希望通过网页进行部署，那就可以部署具体的项目页面。
Step1 创建项目 repo
- 新建 repo，项目名随意（后文中代指 [repo-name] ）
- 不要勾选 "Add a README file"
Step2 开启 GitHub Pages
- 根据图示依次选择：
Setings->Pages->Source - GitHub Actions->Static HTML->Configure - 配置特定模板后会自动生成一次提交内容，此时点击
commit changes
Step3 上传项目文件
之后的操作就与部署个人网页一致：
- 在新创建的 repo 中，点击 Add file -> Upload files
2. 拽一个 index.html 文件（或者整个 folder），并提交 commit changes
部署成功后就可以在相应的 username.github.io/[repo-name] 浏览网页啦
Cloudflare Pages
除了 GitHub Pages, 你也可以拿着这份 index.html 通过 Cloudflare Pages 进行在线部署。登录网页后进入 Workers & Pages 页面。
直接上传文件，部署页面
当你手中拿着与 gemini 聊天产出的 index.html，在思考如何将这个文件发布上网站时，Cloudflare 为你提供了 Use direct upload 的选项，并为你设定的 project name 自动生成 url
将你的 index.html 包在一个文件夹中，上传 ➡️ 等待部署～ well done！
关联 GitHub 部署
相较于直接上传文件，关联 GitHub 部署需要你存在一定的代码基础------至少得清楚自己的项目使用的是什么框架，以及运行什么指令进行打包。在配置相关信息的界面，可以看到它支持更多环境变量的设置
静态站点生成 (Static Site Generation, SSG)
如果说你已经有一些文章的积累（数量从几十到上百都可以），并且有持续更新（但不是实时变化）的内容，同时对加载速度和 SEO 有较高要求时，SSG 架构将非常适合你！
Vercel
Vercel 作为 Next.js 的创建者，Vercel 对 SSR/SSG 应用（尤其是 Next.js）有无与伦比的优化和支持，提供零配置部署、边缘函数、部署预览等。是 SSR/SSG 应用的首选。
Vercel Template
不知道从何处开始？不用担心，让我们先上 vercel templates 寻找心仪的模板～
- 在具体的模版页面，可以
view Demo先查看参考效果，确认满意后，点击Deploy
- 选择 Git Provider，创建 repo name，然后点击
Create。接下来就是等待部署啦！
- 当部署已经完成后，你就可以找到对应的 repo，看看
README.md，看看 repo 结构，找到这个模板中展示内容都放在哪个文件夹内，再将自己的文件内容替换进去即可。
GitHub repo 导入
或许你看了 Vercel 提供的模板，觉得差点意思，我有更好更漂亮的项目 UI 文件并且已经有对应的 repo 了，万事俱备，只差 domain，那也可以以 GitHub repo 导入的形式生成项目 url。
- 登录 Vercel： 访问 Vercel 官网 (vercel.com) 并登录你的账户。
- 导入项目： 在 Vercel Dashboard 中，点击"Add New..."或"Import Project"按钮。
- 连接 Git 仓库： 授权 Vercel 访问你的 Git 账户，然后从列表中选择你想要部署的 SSG 项目仓库。
- 自动配置与部署： Vercel 会自动检测你的项目框架（例如 Next.js），并推荐默认的构建命令（如 npm run build）和输出目录。通常这些默认设置是正确的，你只需点击"Deploy"即可。
- 自动更新与预览： 部署成功后，Vercel 会为你的网站分配一个 .vercel.app 的免费子域名。此后，每次你向连接的 Git 分支（通常是 main 或 master 分支）推送新的代码，Vercel 都会自动触发一次新的构建和部署，更新你的网站。更棒的是，对于每个 Pull Request (PR) 或 Commit，Vercel 都会生成一个独立的预览 URL，方便你和团队成员在合并代码前进行审查和测试。
单页应用程序 (Single-Page Application, SPA)
如果说在静态的网页展示基础之上，你希望探索更多的网页交互------例如丝滑的动画效果、流畅的应用体验等【SEO 不是首要考虑】，那此时你可以将此【个人博客网页】理解为一个单页应用程序。
单页应用程序 (SPA) 的核心就是客户端渲染 (CSR)。它在首次加载时需要下载并执行大量的 JavaScript 代码来构建页面，这确实会导致首次内容绘制 (FCP) 和最大内容绘制 (LCP) 时间相对较长，用户可能会经历短暂的白屏或加载动画。
动态的交互体验目前可能从需求描述到技术实现，在一定程度上交给 AI 辅助编程工具来优化，或许存在一定困难。那要不要考虑一下无代码建站应用 Framer ？
Framer
Framer 主要用于设计和构建高度交互式的网站和原型。所以，如果你使用 Framer 来构建网站，那么你实际上就是在构建一个以客户端渲染和丰富交互为核心的单页应用程序 (SPA)。这种架构能够充分发挥 Framer 在设计和动画方面的优势，并提供卓越的用户体验。
start with framer template
首先，让我们上 Framer Templates选择一款心仪的模板，在模板详情页 preview 查看 -> 满意 👍，那就点击use for free，跳转到设计界面，进行调整。
Framer 在设计界面上与 figma 具有一定的相似之处，并支持同时 responsive 的页面展示调整。但这个部分需要额外的 effort 以及 UX 知识储备，如果只是想部署内容，我们可以转向 CMS tab。
在 CMS tab 中，是在网页信息展示的集中管理的部分。简单理解的话，就是网页上展示的模块需要进行一组组完形填空，而填空的位置就在 CMS 中进行统一管理。
当你对完形填空的数据填充替换完成后，点击 publish，就可以获得自己的个人网站啦。
小结
除开上述提到的 静态网站 / SSG / SPA，还有 SSR（相较于 SPA 对 SEO 提出了更高需求），以及完整的全栈应用。如果技术架构的探讨进入到更深层的、更细节的设计，则需要根据具体情况制定更细致的方案。 但简单的部署就一定单调吗？如同 Vercel / Framer 提供了丰富多样（还有付费 hhh）的模板，静态网站配合丰富的动态效果设计，也能创造出充满想象力的网页交互体验。
ellisonleao/clumsy-bird: :bird: A MelonJS port of the famous Flappy Bird Game
先行动起来吧！在试错中总结更多（属于自己而不是 AI 输出）经验吧～