Ben Ben Blog.

建立我的第一個Blog - part 1: Strapi + Next.js

一手一腳建立一個自己的Blog - Strapi + Next.js

引言

為什麼我想自己建立一個Blog呢，主要有幾個原因：

  • 最近工作方面比較空閒，也都為轉工找新工作而煩惱，但自己也沒有什麼亮眼的project可以放到github上讓面試官看到。
  • 自己其實都一直有學不同的語言，寫過不少不同類型的系統，但都是freelance，不方使公開。
  • 最近也積極接觸不同的新東西，例如AI, 3D printing，但缺乏一個地方讓我去記錄。

所以，想藉此自己建立一個Blog來滿足上面的目的。

為什麼選擇 Strapi 和 Next.js

  • 自己的主力language是Node.js，而Strapi就是使用node.js和typescript來寫，方便統一開發語言。
  • 在frontend方面，react也一直是我常用的library，還有react native用在mobile development方面。而Next.js更是更年來最多人用的framework，提供簡單方捷的網頁開發外，亦可以提供server-side rendering和static website generation，十分適合用來建立Blog。

開波！

主要project structure會分為CMS和web部分，首先建立一個名為"blog"的folder

mkdir blog

並用Vscode打開

code blog

建立 Strapi CMS

npx create-strapi@latest cms

建立Next js web

這邊借用了一下別人的template減輕一下develop成本。

use create next-app and use example: https://vercel.com/templates/next.js/blog-starter-kit

yarn create next-app --example blog-starter web

現在應該已經有 web 跟 cms兩個folder

Folder structure:


|- web
|- cms

簡單的project setup先到這邊，之後會講的：

  • env 設定
  • 用docker建立strapi image
  • 用docker compose deploy包含strapi+postgreSQL的 DEV 和 PRODUCTION 環境
  • 用Github action 做CD Deploy (self-hosted runner)
  • CD Deploy web to Vercel
  • Vercel 接Cloudflare domain