Static Site With Tailwind

靜態站點（附順風）

堆疊

• 超文本標記語言
• 順風CSS

如何跑

DEV

• 運行yarn serve:dev這將為src提供index.html作為入口點。

• 在第二個終端機中運行yarn watch 。這將監視src/內的所有文件，並知道使用在此過程中添加的任何新的 tailwind 樣式重新編譯app.css 。

注意：在點擊刷新之前會有一點延遲...“嘿，這不是一個奇特的 React 應用程式 KISS，只需點擊刷新按鈕即可。”

• 為dev手動編譯 Tailwind CSS，無需觀看運行yarn compile:css:dev

生產建築

所以你實際上想部署這個東西...

• 執行yarn build:all來完成「所有事情」 這會將所有*.html檔案複製到/build目錄並使用NODE_ENV=production編譯app.css 。這告訴 Tailwind 使用 tailwind.config.js 中預設的purge選項

• 將此/build目錄複製到任何靜態託管網站...或告訴您的靜態託管網站使用/build/index.html作為入口點。

注意：構建後，您也可以在本地提供此構建，並透過運行yarn serve:prod來查看“prod”的外觀。這將提供build目錄而不是src以便使用新編譯的程式碼進行檢視。

路由

如何為新頁面建立一些乾淨的網址？新增一個定義了routes的 vercel.json 文件，然後讓 Vercel 處理其餘的事情。

 {
  "version": 2,
  "routes": [
    {"src": "/about", "dest": "/about.html"}
  ]
}

有關更多詳細信息，請在此處查看他們的文檔

就是這樣

就是這樣，夥計們...放入一些靜態 HTML，連結index.css ，然後享受樂趣。

與 Vercel 一起寄存

連結儲存庫和設置

部署預覽

完畢！