捨棄 create-react-app 之餘還架了個 astro blog 昭告天下：腳本

2023-10-11 08:09 2023鐵人賽 astro make

你的 astro 部落格沒什麼大問題，真要說的話，就是每當你要新建立一篇文章時，都是隨機挑選一份既有的 .md 檔，然後複製貼上它、修改內容。這麼純手工實在太不適合工程師了，於是今天的主題就是——分享個人在部落格專案使用的 Makefile 腳本。自動化萬歲。

不熟悉 Makefile 與 make 的讀者歡迎先參考鐵人賽第 6 天的介紹。

本文

安裝套件

雖然發生頻率不高，不過當你在新的機器把專案 git clone 下來後，鐵定是需要先把套件都安裝完才能運行的。而以下腳本能讓你以「不更動套件的 -lock 檔」為前提，來安裝專案所需套件：

.PHONY: i
i:
	rm -rf node_modules && \
	yarn install --frozen-lockfile --production=false

啟動、打包、預覽三連星

使用 npm create astro@latest 建立 astro 專案後，package.json 中的 scripts 應該至少會包含 dev / build / preview 三個指令。如果想要完全把腳本都集中到 Makefile 裡面，可透過以下方式實現：

BIN := node node_modules/.bin

.PHONY: start
start:
	$(BIN)/astro dev

.PHONY: build
build:
	$(BIN)/astro check && \
	$(BIN)/tsc --noEmit && \
	$(BIN)/astro build

.PHONY: preview
preview:
	$(BIN)/astro preview

BIN := node node_modules/.bin 代表建立一個變數 BIN 並賦予其值 node node_modules/.bin。當我們執行 make start 時，執行的內容就等同：

node node_modules/.bin/astro dev

翻譯成白話文即是：啟動 node_modules/bin 中的 astro 執行檔（本體在 packages/astro/astro.js），並將參數 process.argv = dev 傳入 cli()（本體在 packages/astro/src/cli/index.ts）執行。

而 cli('dev') 會啟動一個本地伺服器（可循線至 packages/astro/src/cli/dev/index.ts 查看相關內容），結果就是你會在終端看到 astro 已經在 http://127.0.0.1:3000（3.0 版後 port 預設為 4321）運行。

同樣的邏輯也能套用到 make build 與 make preview 上。這裡只是將原本的 yarn build 與 yarn preview 替換為 Makefile 版本。

建立新文章

只要在終端輸入 make new post=$(文章標題)，即可在對應的 ./src/pages/${當下年份} 資料夾內建立 $(文章標題).md：

YEAR := $(shell date +%Y)
YMD := $(shell date +%F)
DATE := $(shell date +%T)

# create new .md in <root>/src/pages/post folder
# syntax: make new post=<article name>
.PHONY: new
new:
	@echo "---" >> src/pages/$(YEAR)/$(post).md
	@echo "" >> src/pages/$(YEAR)/$(post).md
	@echo "title: $(post)" >> src/pages/$(YEAR)/$(post).md
	@echo "date: $(YMD) $(DATE)" >> src/pages/$(YEAR)/$(post).md
	@echo "tag:" >> src/pages/$(YEAR)/$(post).md
	@echo "	- []" >> src/pages/$(YEAR)/$(post).md
	@echo "banner: " >> src/pages/$(YEAR)/$(post).md
	@echo "summary: " >> src/pages/$(YEAR)/$(post).md
	@echo "draft: " >> src/pages/$(YEAR)/$(post).md
	@echo "---" >> src/pages/$(YEAR)/$(post).md
	mkdir -p public/$(YEAR)/$(post)

首先 YEAR / YMD / DATE 如名稱所示，是保管日期資訊的變數，格式分別是 YYYY / YYYY-MM-DD / HH:MM:SS。而下方一整片 @echo 內容翻譯成白話文其實就是：在 ./src/pages/$(YEAR) 資料夾建立檔案 $(文章標題).md，並在這個檔案內寫入預設內容。最後，建立該篇文章對應的靜態檔案資料夾，路徑為 ./public/$(YEAR)/$(post)。

所以當我在 2023/9/1 19:30:21 執行 make new post=hello-world 時，會有一個 ./src/pages/2023/hello-world.md 被建立，內容會是：

---
title: hello-world
date: 2023-09-01 19:30:21
tag:
	- []
banner:
summary:
draft:
---

並且 ./public/2023 中會多一個名為 hello-world 的空資料夾。這就是透過 make new 建立新文章時會完成的內容。

從此再也不用透過複製貼上來建立新文件了 ･*･:≡(　ε:)

總結

今天搞定了建立文章的腳本，明天會來聊聊如何繼續在 Makefile 處理專案打包＋部署到 GitHub Pages 的方法。敬請期待 _(°ω°｣ ∠)

參考