將簡單的網站遷移到 Astro

我有一個由 Hugo 提供動力的網站，但我想切換到一個更簡單的解決方案，這樣我在進行更改時就不必處理 Hugo 模板。

Astro 似乎是一個不錯的選擇。

我對 JSX 更加熟悉，如果將來需要，我還可以選擇使用像 Svelte 或 React 這樣的框架。

在本文中，我將向您展示如何進行切換。

我要談論的網站是 https://thejscourse.com，即 JavaScript 課程的網站。

它已經上線，使用純 HTML 和 CSS 構建，內嵌在頁面中。我只有一個 images/ 文件夾，以及一個 thanks/index.html 頁面，那是我在購買後感謝客戶的頁面。

以下是我的操作步驟。首先，我在 Git 倉庫中創建了一個新的分支，然後在其中初始化了 Astro，使用命令 npm init astro。

這要求我強制覆蓋現有文件：

然後，我選擇了 Minimal 模板並完成了安裝：

我將 images 文件夾移至 public 下，將 index.html 移至 src/pages/index.astro。

我運行了 npm install 和 npm run dev 以查看目前的工作狀況。

它運行正常！

然後，我將 thanks/index.html 頁面移至 src/pages/thanks.astro

檢查 URL，它也運行正常！

這是一次快速的過渡。轉換 HTML 不需要任何工作。

這與使用 JSX 時的預期不同。但正如您所知，Astro 的 JSX 有些獨特，讓我們的生活更輕鬆。不再需要使用骆驼命名法的屬性，也不再需要為所有 HTML class 使用 className=。

然後，我決定為這兩個頁面設計一個通用佈局，因為它們有很多共同之處。

我在 src/layouts/common.astro 中創建了一個佈局，並使用 <slot> 在其中製作了一個帶有頁面頭部和主體、所有 CSS、字體引入、元標記等的基本佈局容器。

這與我在有關 Astro 佈局的文章中所解釋的方式相同。

我唯一需要更改的是使用 <style global> 替換 <style>，以及圖像的鏈接，它們使用相對 URL，例如 ../images。現在，所有圖像都位於 /images 下。如果不這樣做，則構建將失敗，您可以在本地使用 npm run build 進行測試：

1	[build] file:///Users/flaviocopes/www/thejscourse.com/src/pages/thanks.astro: could not find file "/\_astro/src/images/welcome2.jpg".

這樣，我可以在該佈局中進行所有需要的修改，這將應用於所有頁面。

最後，是部署部分。

我轉到我的 Cloudflare Pages 頁面，配置了構建設定：

並在網站設置中配置了 NODE_VERSION 環境變量為 ^14.13.1，否則默認情況下版本太舊。

我將分支推送到 GitHub，觸發了預覽構建。

部署時間從原本的 2 分 26 秒，對於一個完全沒有構建步驟的簡單 HTML 網站，變成了大約 3 分鐘。沒有太大的差別。

這些時間的大部分都是設置構建環境，CFP 無論是哪種類型的網站，都需要進行這些設置。

確保一切設置正確後，我將該分支合併到我在 CloudFlare Pages 設置中設置的默認分支上，然後將更改推送到 GitHub，以便更改可以生效。

現在，Astro 正在驅動 http://thejscourse.com。