October 31, 2024Programming教學

零成本自建博客系統：使用 Next.js、Strapi、Cloudflare 和 Vercel

自建個性化博客系統的門檻在近年來大大降低，尤其對於個人開發者或小型團隊來說，通過合理的 Tech Stack 組合和免費額度的利用，可以打造一個功能齊全且專業的博客平台（且高度個性化！絕非罐頭式博客），幾乎無需成本投入。筆者在這裡介紹如何利用 Next.js、Strapi、Vercel、Cloudflare 和 Cloudflare R2，以最低成本自建博客。

1. Tech Stack 簡介

我們采用以下前後端分離的 Tech Stack，以實現高度個性化的目的：

  • Next.js + Vercel：Next.js 是 React 生態的一個流行框架，擁有快速的構建能力和高效的靜態內容支持。而 Vercel 則提供了免費的“hobby”計劃，適合小型項目的部署。
  • Strapi + Fly.io：Strapi 是一款開源的 Node.js 內容管理系統（CMS），可以輕鬆管理內容並提供 API 支持。而 Fly.io 的免費額度支持全天候運行三台小型實例，非常適合托管小型 CMS。
  • Cloudflare R2：R2 是 Cloudflare 的對象存儲服務，每月提供 10GB 免費額度，適合作為博客的圖片上傳方案。
  • Cloudflare 域名：Cloudflare 提供了性價比極高的域名注冊服務，約 10 美元/年。

接下來，我們將分步驟搭建博客。

2. 搭建前端：使用 Next.js 和 Vercel

2.1 創建 Next.js 項目

首先，確保系統中安裝了 Node.js。然後，使用以下命令來初始化一個新的 Next.js 項目：

npx create-next-app@latest my-blog
cd my-blog

這會生成一個 Next.js 應用的基本模板，包含首頁、API 接口和樣式文件。

2.2 在 Vercel 上部署

  1. 注冊 Vercel 賬號：前往Vercel 官網注冊一個免費賬戶。
  2. 連接 Git Repo：將 Next.js 項目推送至 GitHub 或 GitLab。Vercel 支持直接從這些平台導入項目。
  3. 部署項目：在 Vercel 控制台中選擇“Add New Project”，選擇 Repo 並配置基本設置。Vercel 會自動檢測 Next.js 應用並完成首次部署。

Vercel 的免費計劃支持高效的靜態站點和 API 路由，適合流量不大的個人博客項目。

2.3 自定義前端頁面

根據需求修改 Next.js 頁面組件，設計博客布局。可以在pages/index.js中實現博客的主頁面。使用 Next.js 的靜態生成（Static Generation）或服務端渲染（Server-side Rendering）功能，來展示內容，更利於 SEO。

3. 內容管理後端：Strapi + Fly.io

3.1 在本地安裝 Strapi

使用 Strapi 管理博客內容（如文章、分類、作者信息等）。首先在本地安裝 Strapi：

npx create-strapi-app@latest my-strapi --quickstart

安裝後，進入http://localhost:1337/admin創建管理員賬戶。

3.2 配置內容類型

在 Strapi 中創建新的內容類型（Collection Type），如“文章（Posts）”，並添加字段（如標題、內容、發布日期、封面圖片等）。通過 Strapi 的 API 接口，前端 Next.js 項目可以動態拉取內容。

3.3 部署 Strapi 至 Fly.io

  1. 注冊 Fly.io 賬戶：前往Fly.io注冊一個免費賬戶。

  2. 安裝 Fly.io CLI：按照官網的指南安裝 Fly CLI 工具。

  3. 初始化 Fly.io 應用：在 Strapi 項目根目錄中運行以下命令初始化應用：

    fly launch

  4. 配置免費機器：在 Fly.io 的免費額度中，可以創建三台共享 CPU 的小型機器（256MB 內存）並保持全天候運行。確保將 Strapi 配置為不休眠，從而提供持續服務。

  5. 部署 Strapi：在 Fly.io 控制台中運行部署命令。

    fly deploy

Fly.io 提供的免費額度足夠支持個人博客的輕量級 CMS 需求。

4. 圖片上傳：Cloudflare R2 存儲

使用 Cloudflare R2 存儲博客的圖片文件。R2 的 10GB 免費存儲額度和每月 100 萬次免費請求，完全能夠滿足個人博客對圖片存儲的需求。

4.1 創建 R2 Bucket

  1. 注冊 Cloudflare 賬號：前往Cloudflare 官網注冊賬號。
  2. 創建 R2 Bucket：在 Cloudflare 控制台中選擇“R2”並創建新的 Bucket。
  3. 生成 API 密鑰：配置訪問 R2 存儲的密鑰，用於從 Strapi 或其他服務中上傳文件。

4.2 集成到 Strapi 中

在 Strapi 中，使用插件或代碼集成將 Cloudflare R2 設置為文件上傳的存儲目標。如果想直接從電腦上傳（而不通過網頁）或者不想寫代碼的話，可以直接用 PicGo 上傳圖片到 R2 取得圖片連結，再複製到博文內。詳細教程可以看這篇技術博客的文章。

5. 域名注冊與解析：Cloudflare 域名

  1. 選擇域名：去 Cloudflare 的域名注冊頁面並查找喜歡的域名。
  2. 完成購買：Cloudflare 的域名注冊價格透明，無額外的隱形費用，適合個人或小型項目。
  3. 配置 DNS 解析：在 Cloudflare 控制台中，將域名解析到 Vercel 提供的 DNS 記錄。