Webtrotion

使用 Notion 作為內容管理系統

Webtrotion 允許您使用 Notion 作為內容管理系統，您可以使用 Notion 的介面來建立、編輯和管理您的網站內容，包括文章、頁面和產品資訊。

與 Astro 整合

Webtrotion 與 Astro 框架整合，Astro 是靜態網站生成器，可以幫助您快速建立效能良好的網站。Astro 會將您的 Notion 內容渲染成靜態 HTML 檔案，以便快速載入。

自訂網站外觀

Webtrotion 提供了預設樣式，但您也可以自訂網站的外觀，例如使用 CSS 調整樣式，或使用自訂的 Astro 元件來建立您自己的網站設計。

輕鬆部署

Webtrotion 可以輕鬆部署到各種平台，例如 Netlify 和 Vercel。您只需要將您的 Notion 資料庫連接到 Webtrotion，然後部署您的網站即可。

• 部落客：使用 Webtrotion 建構網站，並直接從 Notion 簡化內容建立流程，從而增強網站營運和部落格管理。
• 網站開發者：實施 Webtrotion，利用 Astro 和 Notion CMS 快速進行網站原型設計，從而改善網站營運和部署工作流程。
• 內容創作者：利用 Webtrotion 的單檔案配置和 Notion 整合來建立對 SEO 友善、反應靈敏的網路漫畫風格內容。
• 小型企業：使用 Webtrotion 建立線上形象，利用其經濟高效且可配置的 Astro-Notion CMS 網站建構工具。
• 開源愛好者：貢獻和自訂 Webtrotion 專案，擴展其功能和整合，以實現更廣泛的網站營運應用。

Webtrotion 是什麼？

Webtrotion 是一個使用 Notion 作為內容管理系統（CMS）和 Astro 作為靜態網站生成器來建立網站的開源工具。簡單來說，就是你用 Notion 寫文章和管理網站內容，然後 Webtrotion 會自動幫你把內容轉換成一個漂亮的網站！

Webtrotion 如何使用？

你需要先將 Webtrotion 的 GitHub 程式碼下載到你的電腦上，然後用你最喜歡的程式碼編輯器打開。你需要將 Notion 工作空間中的資料設定到 Webtrotion 中，然後運行它，Webtrotion 就會自動生成網站。

Webtrotion 有什麼優點？

Webtrotion 使用 Notion 作為 CMS，這意味着你不需要學習任何複雜的網站建構技術，就能輕鬆地管理網站內容。而且 Webtrotion 使用 Astro 作為靜態網站生成器，這使得網站速度更快，更安全。

Webtrotion 適合哪些人使用？

Webtrotion 適合任何想要快速建立一個漂亮的網站，並且希望用 Notion 管理內容的人。你不需要會寫程式，只需要會使用 Notion 就好。Webtrotion 可以用於個人部落格、企業網站、產品展示網站等等。

Webtrotion 相對於其他工具有什麼優勢？

Webtrotion 的優勢在於它使用了 Notion 作為 CMS，這意味着你可以用你熟悉的工具來管理網站內容。而且 Webtrotion 使用 Astro 作為靜態網站生成器，這使得網站速度更快，更安全。

Webtrotion 的價格如何？

Webtrotion 是開源軟體，所以它是完全免費的。你可以在 GitHub 上免費下載和使用 Webtrotion。

Webtrotion 是一個使用 Astro 和 Notion 建構的入門級網站，允許使用者建立部落格和完整的網站。它直接與 Notion 整合，使用 TailwindCSS 和 CSS 變數進行自訂。

• 首先，從 GitHub 倉庫部署 Webtrotion 模板，確保你已設定好 Astro 環境。此動作會初始化網站。

• 配置 constants-config.json 檔案以自訂網站設定。這包括 TailwindCSS、站點元數據、顏色以及用於個人化控制的整合選項。

• 透過正確設定 Notion API 整合來連接你的 Notion 工作區。將 Notion API 密鑰和資料庫 ID 輸入到你的設定檔中。

• 在 Notion 中建立和組織你的網站內容，利用支援的區塊用於不同的內容類型。在 Notion 資料庫中組織頁面和部落格文章。

• 使用 npm run dev 執行本地開發伺服器以預覽你的 Webtrotion 站點。在開發過程中檢查佈局和內容整合問題。

• 自訂 TailwindCSS 類別以匹配你的品牌，利用 Notion 顏色匹配功能。編輯 Tailwind 設定檔以進行特定調整。

• 透過配置啟用 Giscus 或 Bluesky 評論等功能，以與你的受眾互動。配置 Webmentions 以追蹤其他地方對你網站的提及。

• 使用 npm run build 建構你的靜態網站，以獲得最佳化的生產檔案。此過程產生可供部署的最終網站。

• 將你的靜態檔案部署到 GitHub Pages 或 Netlify 等託管提供商。透過 GitHub Actions 自動化部署，以實現持續整合和部署。

• 定期在 Notion 中更新你的內容；變更應自動反映在已部署的 Webtrotion 站點上。使用 Github Actions 快取以實現快速重建。