sveltekit static blog template

SvelteKit 靜態部落格模板

用於部落格和作品集網站的輕量級且可自訂的模板，使用 SvelteKit 建立。

它的構建有幾個目標：

• 響應式設計：網站在各種尺寸的螢幕上看起來和表現都很好；
• 快速：它只載入工作所需的內容；
• 自適應：預設支援大多數作業系統（桌面和行動裝置）的深色模式；
• 漂亮：具有令人愉悅的設計，既易於使用又賞心悅目。

我在 SvelteKit 的幫助下實現了這個目標。幾乎沒有 JavaScript 運行，而且它實際上可以在禁用 JS 的情況下工作！雖然 JS 很棒，但重要的是要知道什麼時候不需要它。

示範站點

您可以在示範網站上看到該範本。此外，您還可以在 Histoire 上單獨檢查所有組件。

本地建置和運行

要在本地運行它，您只需運行：

 # First, install dependencies
npm install
# Then, run it on dev mode
npm run dev

該網站現在應該可以在本機電腦上的 http://localhost:5173/ 以及網路上的本機電腦的 IP 位址上存取 — 非常適合在行動作業系統上進行測試。

歷史/故事書

我使用了 Histoire，這是一個基於 Vite 的 Storybook 替代品，能夠單獨查看和開發組件。要打開它，請執行npm run story:dev 。

影像優化

該網站使用圖像轉換來自動優化網站中使用的圖像。這意味著，即使您使用非最佳圖像格式（例如無損 PNG），只要您使用<Image />組件而不是<img />這是在建置時完成的，因此在本地運行網站時不會改變任何內容。

管理貼文

所有貼文都是使用 MDsveX 處理的 Markdown 文件，以允許在其中使用 Svelte 元件。為了更輕鬆地管理帖子，我強烈推薦 Front Matter VS Code 擴展，它為您提供了一個類似 CMS 的漂亮 UI。

託管

當您執行npm run build時，該網站將被編譯為靜態站點，這意味著您幾乎可以在任何地方託管它。我推薦的一些免費替代品是 GitHub Pages、Vercel 和 Netlify。