如何构建个人博客

1. 技术选型

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

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

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

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

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

AstroHugo ,它们都默认支持 Markdown 的解析,且有丰富的开箱即用的博客模板可以直接使用。但既然我是一个有着 JavaScript 和 Golang 经验的开发人员,自然不满足与直接使用第三方模板,总得折腾点自己的页面样式,而相比在 Astro 中写 TypeScriptHugo 的 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 代码块里写一下这个页面如何获取 propsstaticPaths 的逻辑。

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

4. 上线

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

5. 总结

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