Astro 部落格架設筆記(1) - 系統環境初始化

前言

前一篇文章 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 一直失敗,但是可以本機編譯看看。

    Blogger Comment

0 意見: