如何构建个人博客

1. 技术选型

构建个人网站的目的是为了记录与分享，所以根据这两点原则来进行技术选型。

• 我会写 Markdown，不需要复杂的网页富文本编辑页面
• 为了避免服务器运行的支出，我会采用纯静态的方式来进行构建
• 因为希望网站的内容能够很好的被搜索引擎所搜索到，所以 SEO 也是非常重要的，即不能使用 React 或者 Vue 之类的前端框架在浏览器端渲染我的内容，而应该在用户请求时直接返回渲染完毕的 HTML 页面给用户

经过上述筛选过程后，最终就剩下一些 SSG 工具或者支持 SSG 的框架了，比较热门的有如下方案

• Astro
• Hugo
• Next
• Nuxt
• VitePress

对于这些技术，我认为最好选择是 Astro 和 Hugo ，因为它们简单，开箱即用，而且流行程度也是在第一档，这意味着容易找到相关的教程。

因为 Next / Nuxt 都是前端开发框架，当它们更新一些功能的时候可能组织代码的方式需要改变，尤其是 Next 的 App Router 和 Pages Router 给我的印象很差，而 VitePress 的话想自定义一些东西需要学习它的配置，如果希望以非技术文档的方式布局就不太方便（比较久之前的经验，目前不知道怎么样）。

而 Astro 和 Hugo ，它们都默认支持 Markdown 的解析，且有丰富的开箱即用的博客模板可以直接使用。但既然我是一个有着 JavaScript 和 Golang 经验的开发人员，自然不满足与直接使用第三方模板，总得折腾点自己的页面样式，而相比在 Astro 中写 TypeScript，Hugo 的 template 语法写起来太麻烦而且难以维护，而且如果想使用 tailwindcss 的话还得依赖 [Node.js] ，所以我选择直接用 Astro 。

2. 初始化项目

Astro 依赖 Nodejs 环境，所以先去 Nodejs 官网下载一个最新版的安装包进行安装即可。

1. 打开终端，运行下面的命令，如果能输出版本号，类似 v20.12.2 字样即表示安装成功。

   node -v
   

2. 运行命令安装一个 pnpm

   npm install --global pnpm
   

3. 初始化自己的项目目录

   pnpm create astro@latest
   

   当出现 How would you like to start your new project? 的时候选第二个

   • Include sample files (recommended)
   • Use blog template ✅
   • Empty

4. 运行命令启动项目，终端里会提示一个本地的访问地址，通常是 http://localhost:4321 ，点击在浏览器打开即可访问

   npm run dev
   

3. 自定义样式

对于无开发经验的人，只想用默认样式的话可以跳过这一节。

如果希望自定义的话，主要就是在 pages/ 目录下创建自己的想要的页面，并且在 TypeScript 代码块里写一下这个页面如何获取 props 和 staticPaths 的逻辑。

对于样式，我集成了 Tailwindcss ，然后可以使用它的原子类来进行布局。自定义没有标准，按照自己的需求可以做任何事情。

4. 上线

GitHub Action + Cloudflare Pages ，当然 Cloudflare 也可以换成任意支持公网访问的静态文件托管平台，比如一些云提供商的文件存储或者 Vercel/Netlify 之类的玩意。接下来就可以愉快的 Commit -> Push 自动发布了。

5. 总结

非常推荐用 Astro 来构建静态博客，简单快速纯粹。