Vinc3nt's Life

Astro Blog - 安裝以及部署

2024-03-21
tools
blog
astro
最後更新:2025-01-26
3分鐘
454字

作業系統: Windows 11

前期準備

Node.js

建議使用 nvm-windows 來安裝 Node.js,以便管理不同版本的 Node.js。安裝方式請參考 nvm-windows

pnpm

出於性能和結構優勢,我將使用 pnpm 作為包管理器。安裝 pnpm 的指令為 npm install -g pnpm,建議在 nvm 安裝後進行。遇到權限問題時,可透過以下指令調整 Windows Terminal 的執行策略:

1
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

VS Code

VS Code 是推薦的文本編輯器。安裝 Astro extension 可以增強 Astro 開發體驗。

初次安裝及部署

選擇一個適合的 Astro 模板,例如 astro-yi,並透過 Vercel 進行部署。以下資源可幫助你選擇模板:

按照指南完成部署後,你將獲得一個 Vercel 項目和相應的 GitHub 儲存庫。

準備工作環境

  • 克隆 GitHub 儲存庫到本地。
  • 在 VS Code 中打開專案,根據建議安裝 Astro 插件。
  • 執行 pnpm dev 以啟動本地開發環境。
  • 參考 配置和寫作技巧 調整主題和內容。
  • 設定 VS Code snippet 以優化寫作流程。

初次設定 VS Code snippet,可能會遇到 snippet 無效的狀況(沒有提示跳出來)。原因是 Markdown 格式初始預設沒有開啟提示。想要開啟需在 VS Code 設定加上以下內容:

1
{
2
"[markdown]": {
3
"editor.quickSuggestions": true
4
}
5
}

部署更新

  • 在部署之前,執行 pnpm build 確保你的文章格式無誤。
  • 將更改推送到 GitHub 即可自動觸發 Vercel 的部署流程。

What’s next

我打算花點時間優化撰寫部落格的流程、自建圖床以及使用自己的域名。 過些時間也會將過程整理成文章發布在這裡。 敬請期待。

參考

本文標題:Astro Blog - 安裝以及部署
文章作者:Vincent Lin
發布時間:2024-03-21