前言
前一篇文章 Astro 部落格架設筆記(0) - 為什麼選擇 Astro 與 GitHub Pages 我提到為什麼選擇 Astro 來架設部落格,接下來就準備環境開始動手架設,以下是我運行的版本資訊:
- Node.js V20.19.4
- Astro 5.13.5
1. 安裝 NVM
首先,請先安裝 Node Version Manager (NVM),方便管理 Node.js 版本。
我自己平常是使用 Chocolatey 來管理 Windows 上的軟體套件,只不過在使用 NVM 的時候,切換 Node.js 會發生找不到對應 exe 的狀況,而我自己也不想要手動去修改環境變數,為了避免麻煩,還是直接使用 Windows 安裝檔比較方便。
2. 建立 Astro 專案
執行以下指令,建立 Astro 專案
npm create astro@latest
3. 選擇 Blog Template 樣板
官方一共有提供四種範本,不過其他範本都太簡略,不符合我架設部落格的需求,並且從零開始架設對我來說也不太符合經濟效益,有一點基礎的樣板我才知道要怎樣調整。
4. 環境設定
在 src/consts.ts
中設定網站的基本資訊
export const SITE_TITLE = 'Rojer 的網路學習筆記';
export const SITE_DESCRIPTION = '分享程式開發、Toastmasters 演講經驗、科技產品開箱與旅行心得,記錄學習與生活的點滴';
在 astro.config.mjs
中設定網站的網址
export default {
site: 'https://rojerchen.github.io',
}
5. 本機測試
想要在本機環境測試,可以執行以下指令,再開啟網址就可以測試了
npm run dev
6. 編譯
我自己平常是本機測試完畢無誤後,就透過 Github Action 來將程式部屬到 Github Page,所以我自己是不會使用下面這個指令。
npm run build
只不過有一件事情要留意
本機測試正常,編譯未必能成功
我就曾經發生過 Github Action 一直失敗,我以為是 Github 的問題,直到我本機測試後,才發現到問題。如果也發現到 Github Action 一直失敗,但是可以本機編譯看看。
0 意見:
張貼留言