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