我有一個由 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 installnpm 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 進行測試:

[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