聊聊个人网站的搭建

前言

大概十多年前，我从论坛中了解到了虚拟主机，通过 FTP 传输 PHP 文件，便走上个人网站搭建的道路，但是没想到这条路居然走了十多年。

十多年间，网站似乎都是投入了很多精力进行部署，匆匆写了几篇文章后，便落下了灰。直到了解到新的框架、新的部署方式，好奇心驱动着将之前的网站推倒重来，所以对我来说，可能个人网站从来不是沉淀和积累的地方，更像是一个灵感变现之所。

由于相较于长篇的日记或文章，我更倾向于通过 Memo（Yu’s Life）或者陈列（What I use basket）的方式记录我的生活轨迹。因此我便并不满足于使用现成的博客应用进行创作，而更倾向于将我脑中对于个人网站的定义直接实现出来。

目前的版本是我个人比较满意的一种模式，具有可开发和可备份的特点，在定制化和可靠性之间做到了平衡。因此想借此文章与大家分享一下这个网站的架构和部署方案。

解决方案

概述

前言提到，我倾向于实现一个个性化的个人网站，因此在前端方案的选择上，我舍弃了 WordPress、Ghost 等开箱即用的传统博客应用，也排除了 Hexo、Hugo 等 SSG 博客框架，因为与其因个性化的定制需要学习框架模板的语法，不如从头开始按照自己的设想实现一套出来。所以前端框架我采用 Next.js 这个热门的前端框架进行开发，它使用 React 的语法，对于 React 开发者非常友好，同时也拥有 SSR、SSG 等特性用于提升个人网站的加载性能。

在内容提供方面，我没有采用传统的解析 Markdown 文件进行渲染的方式，而是将 Strapi 作为内容的提供者，通过 GraphQL 展现在前端页面上。Strapi 提供内容数据结构的设计来满足定制化的需求，并且 Strapi 使用数据库存储内容，所以可以通过定期备份数据库来保证数据不会丢失。

Next.js

由于这套方案是 23 年底实现的，所以 Next.js 直接采用了 App Router 而非 Pages Router。其中内容非常简单，只有一个首页和一个文章页。在样式的选择上，直接采用与 Next.js 相性非常好的 Tailwind，集成在脚手架中，直接开箱即用。

在内容的拉取上，采用 Strapi + GraphQL 的方案，因为我希望内容的字段需要配合场景进行定制，所以使用 GraphQL 可通过编写对应的查询语句，来满足获取针对不同场景内容的需求。并且现在可以通过借助 GPT 的能力，即使零基础编写一个复杂的查询语句也并不难。

对 Markdown 的渲染我采用 markdown-to-jsx，首先是因为这个库本身提供的就是 React 组件，非常适合在 Next.js 中使用。其次它支持通过配置的方式自定义每一个 HTML 标签的渲染，因此能够很方便的定制各种元素，如果需要对 <img> 标签设置样式，就可以直接实现一个 Image 组件。

使用 markdown-to-jsx 转换出来的元素是没有任何样式的，文章的样式我采用 Tailwind 的 typography 插件。首先本站已经用上了 Tailwind，所以使用这个插件非常方便，其次这个插件提供的样式已经可以很好满足文章的展示，天然支持暗黑模式，且有丰富的定制化方案。

部署方案

Next.js 和 Strapi 的源码均是托管在 GitHub 上，通过 Commit 触发构建。

对于部署平台的选择，Next.js 我选择了 Vercel，正是因为 Vercel 正是开发 Next.js 的团队，因此对 Next.js 的支持最好，部署也最方便，基本没有什么额外需要配置的内容。而 Strapi，我选择的是 Zeabur，这个平台在《周刊 01 期 - Hello World - Mashiro's Blog》有提到过，感兴趣的话可以看看。Strapi 官方提供了 Docker 的部署方案，因此只要在 Strapi 仓库根目录新建一个 Dockerfile 就能实现在 Zeabur 上的部署，非常方便。

域名 & 证书

域名在哪家供应商购买不重要，重要的是首年价格和续费价格，推荐根据你想购买的一级域名去选择较便宜的供应商，TLD-List 就是我经常使用的比价网站，会列出每种一级域名的首年价格，续费价格和转让价格。

证书的话，Let's Encrypt 的泛域名证书已经足够大多数的使用场景了，通过 acme.sh 可做到证书的生成和自动续期。

后记

流水账一般将个人网站的搭建方案给写完了，自认为本文很难帮助到那些刚上手的初学者，互联网上有很多写的更好的内容可以帮到大家。本文更像是 te.sb 的 Readme，希望借此可以让读者感受到个人网站的魅力，让更多的朋友能够加入进来。

前言

解决方案

概述

Next.js

部署方案

域名 & 证书

后记

参考资料