靜態網站易於建立，使用速度極快。如果你學會使用雨果，你可以在Linux上生成基於主題的靜態網站。建立網站又是一種樂趣！

雨果網站生成器

靜態站點是指不動態建立或修改網頁的站點。沒有後臺數據庫、電子商務處理或PHP。所有的網頁都是完全預先構建的，可以很快地提供給訪問者。

但這並不意味著一個靜態網站一定會很無聊。他們可以使用HTML提供的一切，加上層疊樣式表（CSS）和JavaScript。他們也可以很容易地像影象旋轉木馬和網頁滑動背景影象。

Hugo網站生成器使用模板和您建立的任何內容來生成一個完整的網站。然後你可以把它放在一個託管平臺上，並立即有一個實時網站。

雨果對你建立的頁面和部落格條目使用降價。Markdown是最簡單的標記語言，它使維護站點變得簡單。

Hugo的配置檔案使用的是Tom明顯的最小語言（TOML），而YAML不是標記語言（YAML），這兩種語言同樣簡單。另一個好處是雨果速度極快，一些網站的載入時間不到一秒鐘。它有許多模板，你可以選擇，更多的被新增的所有時間，所以很容易開始。只需選擇一個模板，並新增一些內容，使它成為您的。

雨果在你的電腦上也扮演著一個小小的網路伺服器的角色。在設計和建立網站時，以及新增新帖子時，都可以看到網站的實時版本。它還會在每次你在編輯器中“儲存”時自動更新，因此你可以立即在瀏覽器中看到更改的效果。

託管您的網站

當談到託管你的靜態網站，你被寵壞的選擇。大多數公司為個人或開源使用者提供免費託管服務。當然，您也可以選擇正規的網路託管公司，如以下任何一種：

• 特技飛行
• 亞馬遜S3
• 天青
• 雲峰
• 夢幻主人
• 火基
• GitHub頁面
• 戈達迪
• 谷歌雲端儲存
• 赫羅庫
• GitLab頁面
• Netlify公司
• 莫索
• 浪湧

相關：如何在谷歌Firebase託管平臺上免費託管靜態網站

安裝雨果

與雨果一起，你需要安裝Git。Git已經安裝在Fedora32和Manjaro20.0.1上。在ubuntu20.04（focusa，）上，它被自動新增為Hugo的一個依賴項。

要在Ubuntu上安裝Hugo，請使用以下命令：

在Fedora上，您需要鍵入：

Manjaro的命令是：

與雨果一起建立網站

當我們要求雨果建立一個新網站時，它會為我們建立一組目錄。這些將持有我們網站的不同元素。這不是最終的網站，將上傳到您的託管平臺，但是。這些目錄將儲存主題，配置檔案，內容和影象雨果將作為輸入，當我們要求它建立實際的網站。

這就像原始碼和編譯程式之間的區別。原始碼是編譯器用來生成最終產品的工具。同樣，Hugo獲取這些目錄的內容並生成一個工作網站。

我們將要執行的命令將建立一個與要建立的站點同名的目錄。該目錄將在執行該命令的目錄中建立。

因此，移動到您希望在其中建立網站的目錄。我們正在使用主目錄，因此鍵入以下內容：

這將建立一個“geek demo”目錄。我們鍵入以下內容以切換到該目錄並執行ls：

我們看到了配置.toml“配置檔案和已建立的目錄。不過，這些實際上是空的，因為這只是網站的腳手架。

初始化git並新增主題

我們需要新增一個主題，讓雨果知道我們希望完成的網站看起來像什麼。為此，我們必須初始化Git。在站點的根資料夾中（包含配置.toml“檔案），執行此命令：

有數百個主題可供選擇，每個主題都有一個描述主題的網頁。你可以執行一個主題的演示並找出下載它的命令。我們用一個叫梅格那的。

要將該主題合併到我們的網站中，我們需要切換到“主題”資料夾並執行git clone命令：

Git在程序中顯示一些訊息。完成後，我們使用ls檢視包含主題的目錄：

雨果主題包括一個工作的例子網站。必須將預設網站複製到網站的目錄中。

首先，返回網站的根目錄。我們使用-r（遞迴）cp選項包含子目錄，使用-f（強制）選項覆蓋任何現有檔案：

在本地啟動站點

我們已經做了足夠的工作，在當地建立了一個新網站。它仍然包含佔位符文字和影象，但這些只是表面上的改變。讓我們先來驗證一下這些技術性的東西是否有效。

我們告訴Hugo執行它的web伺服器並使用-D（draft）選項來確保任何可能被標記為“draft”的檔案都包含在網站中：

下圖顯示了hugo命令的輸出。

我們被告知雨果在142毫秒內建立了這個網站（我們確實說過它很快，對吧？）。它還告訴我們按Ctrl+C來停止伺服器，但現在讓它保持執行。

開啟瀏覽器，前往本地主機：1313到檢視您的網站。

修改預設網站內容

當它像這樣執行時，雨果正在從記憶體中為網頁服務。它沒有在硬碟上建立網站，而是在RAM中建立了一個工作副本。不過，它在監控硬碟上的檔案和影象。如果其中任何一個被更改，它會重新整理瀏覽器中的站點，您甚至不必按Ctrl+F5。

開啟另一個終端視窗並導航到網站的根目錄。“開啟”配置.toml“編輯器中的檔案。將“baseURL”更改為網站所在的域，並將“title”更改為網站名稱。儲存更改，但保持編輯器開啟。

雨果檢測到“有變化”配置.toml“檔案，因此它讀取這些檔案，重建網站，並重新整理瀏覽器。

現在，您應該可以在“瀏覽器”選項卡中看到為站點選擇的名稱。在儲存的更改上獲得即時的視覺反饋大大加快了定製網站的過程。

所有的主題都是不同的，但我們發現那些我們曾經很容易遵循。網站的不同部分都有明顯的名稱，每個部分的設定也是如此，所以你所做的改變總是顯而易見的。

同樣，一旦儲存了更改，就可以在瀏覽器中看到更改的內容。如果你不喜歡，就把零錢倒過來重新儲存。

控制網站的各種配置檔案都專用於單個作業，並以有意義的方式進行標記。追蹤它們並不困難，因為它們在目錄中的位置不多。通常，它們位於“Data”資料夾中。

因為我們使用的是雙語模板，所以我們的英文配置檔案位於“En”子目錄中。

如果開啟資料>En>橫幅.yml在編輯器中，您將看到管理網站標題區域的設定集合。

當您更改“標題”和“內容”設定時，您將更改標題頁上的文字。

我們還更改了“標籤”設定，因此按鈕文字顯示“查詢更多”。對於您的站點，您可能也需要更改影象。

一旦儲存更改，您將在瀏覽器中看到這些更改。

更改網站的其他元素

您可以以類似的方式更改所有其他元素。只需找到適當的配置檔案，並更改設定和文字，以滿足您的需要。

您還需要更改影象。預設映像將在配置檔案中引用。您可以很容易地找到並檢視原始影象，以瞭解其尺寸。

影象被放置在“Static>Images”目錄中，其中包含網站不同部分的子目錄。將任何favicon和logo直接放在“Static>Images”目錄中。

新增新部落格內容

到目前為止，我們已經在研究改變已經存在的東西。但是，如何新增新的部落格文章？雨果使用一個叫做“原型”的概念來建立新的內容。如果我們沒有為我們的部落格條目建立一個原型，那麼每次我們要求雨果建立一個新的部落格條目時，都會為我們建立一個預設檔案。

這很好，但是有了一個原型，我們就可以省去一些精力，並確保儘可能多的前面的事情提前為我們輸入。

在這個主題中，部落格條目位於Content>English>blog。如果我們在“simple-blog-post-1.md”這樣的編輯器中開啟現有的部落格條目，我們可以看到前面的內容。

我們需要複製該節，編輯當前條目，以便可以將其用作原型模板，然後將其儲存在“Archetypes”資料夾中。如果我們命名的話”部落格.md，“它將自動用作新部落格條目的模板。

在gedit中，我們可以按如下方式執行：

高亮顯示包含兩條虛線的頂部部分，然後按Ctrl+C將其複製。按Ctrl+N開始一個新檔案，然後按Ctrl+V貼上複製的內容。

現在，進行以下更改，並確保在每行的冒號（：）後面留一個空格：

• 標題：將其更改為“{replace.Name”-“”“| Title}}”（包括引號）。每個新部落格文章的標題將自動**。它是由傳遞給hugo new命令的檔名形成的，我們將看到。
• 日期：將此更改為{.Date}。建立部落格的日期和時間將自動輸入。
• Image\u webp：這是以webp格式指向部落格標題影象的路徑。如果主題找不到，它將使用下一行的影象。
• 圖片：這是指向JPEG格式的部落格標題圖片的路徑。您不妨將這些圖片保留為預設圖片。然後，所有的部落格文章將有一個權宜之計的形象，甚至在你找到，調整大小，或儲存一個自定義的。完成此操作後，您可以輕鬆地編輯檔名以匹配自定義影象的檔名。
• 作者：把這個改成你的名字。
• 描述：請在此處鍵入每個帖子的簡短描述。如果將其更改為空字串（“”），則可以為每個新部落格鍵入說明，而無需編輯舊文字。

將此新檔案另存為“原型”/部落格.md，然後關閉gedit。雨果現在將使用這個新的原型每當你想建立一個新的部落格條目。

請注意，我們的檔案應該有一個“.md”副檔名，因為我們將使用markdown來編寫日誌：

現在，我們要在編輯器中開啟新的部落格條目：

我們的新部落格文章將在gedit中開啟。

前面的所有內容都為我們添加了：

• 標題：這是從檔名推斷出來的。如果它需要任何調整，你可以在這裡編輯它。
• 時間和日期：這些是自動新增的。
• 預設影象：您可能希望找到一個相關的、免版稅的影象。把它放到靜態>影象>部落格。您必須在此處鍵入影象的實際檔名。
• 作者：你的名字是自動新增的。
• 說明：已編輯。

使用markdown編寫部落格，並對標題、粗體、斜體、影象、連結等使用標準標記。每次儲存檔案時，雨果都會重建網站並在瀏覽器中進行更新。

下圖顯示了我們的新部落格條目在主頁上的顯示方式。

下圖顯示了新部落格條目在其自己的頁面上的外觀。

寫完部落格文章後，儲存更改，然後關閉編輯器。你也可以關閉你的瀏覽器，因為我們要停止雨果伺服器。

在執行Hugo伺服器的終端視窗中，按Ctrl+C。

建立網站

在網站的根目錄中，發出以下命令以構建網站：

雨果建立了這個網站，列出了它建立的頁面和其他元件的數量。建立我們的花了134毫秒。

雨果在你網站的根目錄中建立了一個名為“Public”的新目錄。在“Public”目錄中，您將找到需要傳輸到託管平臺的所有檔案。

請注意，您必須將“Public”目錄中的檔案和目錄上載到託管平臺，而不是“Public”目錄本身。

現在你知道基本情況了

每一個主題都需要一點探索，以找出如何讓它看起來像你想要的，但這是有趣的部分！考慮到雨果能夠在瀏覽器視窗中立即呈現更改，沒有什麼需要太長時間。

你可能會發現，寫你的文字和尋找和修剪影象的過程中，需要最長的部分。

雨果文件網站也很有幫助，但內容廣泛。希望，這個基本的演練將足以讓你開始。

如果您使用Git和Github、GitLab或BitBucket，那麼這些平臺也可以使用整合。他們監視你的遠端Hugo儲存庫，並在你將更改推送到實時站點時重建它。