iT邦幫忙

2023 iThome 鐵人賽

DAY 26
0

你的 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 buildmake preview 上。這裡只是將原本的 yarn buildyarn 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 "layout: '@Components/pages/SinglePostLayout.astro'" >> 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 被建立,內容會是:

---
layout: '@Components/pages/SinglePostLayout.astro'
title: hello-world
date: 2023-09-01 19:30:21
tag:
	- []
banner:
summary:
draft:
---

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

從此再也不用透過複製貼上來建立新文件了。

總結

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

參考


本文同步發佈於普通文組 2.0


上一篇
動態路由與 /tag
下一篇
部署
系列文
捨棄 create-react-app 之餘還架了個 astro blog 昭告天下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言