建站/靜態網站生成器

施工中

什麼是靜態網站生成器？

　　「靜態站點生成器」由static site generators(SSG)直譯而來。通俗來說，常用的動態網站博客框架如typora，我們可以通過安裝主題以美化界面，同時可以在線上發布文章，每個文章都有相同的主題。但如果手動編寫靜態網站，最多使用同一套css/js腳本，html主體還是得手搓，會浪費很多時間在內容之外的事上；即便使用markdown等適用範圍廣的標記語言並輸出為html文件，但組織不同html頁面間的聯繫仍舊十分耗力。靜態網站生成器便是執行此工作，通過如傳統動態網站般的模板自動為內容生成html文件，保證每個文章的ui都遵循了主題的樣式設定，我們只需要在本地維護原始格式的文件（例如.md），即便更換主題，生成器也會為所有內容重新生成新的html文件，並推送到服務器中。與傳統動態網站博客相較，缺點是無法線上輕易的維護、沒有賬戶體系（可以外掛外部資源）；優點是備份內容更方便，本地創作一打包即可，站點更加輕量化，純html總比需要調用php、mysql要強，更加安全，沒有賬戶體系意味着除ddos外的絕大多數攻擊方式都將失效。

常用方案

目前比較流行的就是hugo和hexo，對於我這種只會用別人弄好的主題的人而言，兩者區別不大，哪個熱門用哪個就對了，因為意味着維護者多，遇到問題更容易解決。

本文採用hugo

部署hugo網站

※ https://gohugo.io/documentation/

0.前要條件

需要先安裝 Git 、 Go ，訪問官網以了解對應系統的安裝方式。

可選安裝Dart Sass，是將sass樣式文件編譯為瀏覽器可解析的css文件的編譯器，hugo附加的相對落後的LibSass編譯器或不支持一些sass語言的新功能。

• 建議直接下載預構建二進制文件，根據自己的系統架構選擇對應版本，解壓到合適的地方並將路徑添加到系統環境變量中。

1. 本地安裝hugo

可直接下載編譯好的文件：https://github.com/gohugoio/hugo/releases

也可使用對應系統自帶的包管理器安裝：

• Windows用戶參考：https://gohugo.io/installation/windows/#package-managers
  • 新版本win10/11預裝winget，舊版本參考其他人所寫的文章。
• Linux用戶參考：https://gohugo.io/installation/linux/#repository-packages
  • 並非所有發行版都預安裝snap，如果有需要可參考snap官網。

2. 新建站點項目

建立站點項目：hugo new site 项目名

• 默認會新建：~/项目名文件夾，存放網站資源文件，也是hugo站點根目錄。

在站點根目錄運行：hugo server -D 以啟動本地服務器，可預覽目標站點

• -D 參數是顯示草稿等其他內容，不帶此參數只有已發布內容。

3. 下載主題

將主題文件下載到站点根目录/themes

• 例如下載主題文件並手動複製到文件夾內，或在網站根目錄下運行：git clone https://github.com/JingWangTW/dark-theme-editor.git themes/dark-theme-editor

修改hugo.toml配置文件以啟用主題

• 通常添加行：theme = 'dark-theme-editor' 即可；
• 對於複雜的請參考主題的介紹頁面所提供的配置文件。

網站是熱加載的，直接刷新頁面即可體現出內容變化。

4. 編寫文章

創建文章：hugo new 文件夹名/文章名.md，默認會帶有如下信息：

---
title: "Osint"
date: 2024-11-14T00:31:29+08:00
draft: true
---

編寫完內容後將draft的值修改為false就會在預覽中顯示。

5. 輸出網頁

根目錄運行：hugo

md文件會自動轉為html，但注意如果自己編寫了html，那麼主題的樣式會覆蓋自定義的樣式。

其他選擇

hexo：輕量化個人博客，不過太輕量也不一定適合，跟typecho一個類別的，可以搜搜看別人使用此框架的網站，然後體驗體驗^{（不過不能只看我外觀，還是要看編輯是否方便）}。

• 待更新github+hexo的玩法，看很多人實現了動態站點一樣的外觀效果^（css+js），以及利用一些工具本地編輯.md文件，直接轉換成html且同步到github，雖然還是繁瑣點，但值得試試^{（應該跟本地編輯生成靜態頁面同步github一樣的原理）}。

MkDocs