This guide is available to download as a free PDF. Download this file now. Feel free to copy and share this with your friends and family.

歡迎使用MakeUseOf指南來使用靜態站點生成器。在本指南中，我們將介紹什麼是靜態站點生成器（SSG），為什麼要使用它，以及如何使用它構建一個全新的站點。我們將探討的一些細節：

目錄

1. 靜態站點生成器（SSG）簡介為什麼要使用SSG？|SSG是如何工作的？|有哪些流行的SSG？|選擇SSG
2. 準備安裝jekylla本地安裝的優點|遠程安裝的優點|先決條件
3. Jekyll安裝安裝Ruby on Linux |安裝（更新）Ruby on macOS |安裝Ruby on Windows |安裝Jekyll
4. 項目設置和結構創建Jekyll項目|瞭解Jekyll結構
5. Jekyll Content AuthoringPreviewing Your Site | update the About Page | update the Site Configuration | Creating New Content in Markdown
6. 構建和部署構建|部署
7. 傑基爾主題
8. Jekyll插件

靜態站點生成器簡介

在過去的幾年裡，靜態網站重新興起。許多現代網站都使用內容管理系統（CMS），它結合了腳本和數據庫內容來動態構建頁面。

相反，靜態站點的頁面是創建的，然後上傳到web主機。聽起來有點老派，不是嗎？是的，但那是件好事。

為什麼要使用ssg？

在互聯網的早期，創建網頁的方法是將每個頁面**成一個文件，然後將文件上傳到服務器。在當今數據庫和高級管理面板的世界中，這似乎有點過時了。但這兩種趨勢的結合導致了ssg的日益流行。

• 首先，許多從事網絡工作的非技術性作者（比如博客作者）已經使Markdown這樣的輕量級標記語言非常流行。當人們開始習慣於以這些格式**內容時，SSGs就成為了一種方便的工具，可以將其轉換為一個網站。
• 其次，CMS系統的複雜性有時會導致性能和安全問題（例如，對於沒有大量功能的簡單博客而言，與CMS的開銷相比，靜態站點更具吸引力）。

SSGs還有其他好處，包括離線工作的能力和一天結束時非常快速的站點。靜態站點生成器不擅長的地方是創建非常交互式的網站。如果你計劃允許用戶註冊在你的網站上發表評論，甚至創建他們自己的頁面，SSG可能不是最好的選擇。同樣地，如果您希望銷售產品，請允許用戶相互發送消息，或在文檔上進行協作。但是如果你想找一個簡單的方法讓內容呈現在你的觀眾面前，ssg是一個很好的選擇。

SSG是如何工作的？

現代CMSE使用類似以下的流：

1. 網站訪問者從服務器請求一個網頁。
2. 服務器接受請求並確定用戶要查找的內容。
3. 服務器使用主要查詢數據庫的腳本來組裝內容。
4. 服務器以網頁的形式將內容發送回用戶，網頁顯示在瀏覽器中。

相比之下，靜態站點通過預先構建頁面來避免所有的複雜性。然後，訪問者的瀏覽器簡單地請求頁面，服務器返回所述頁面。

因此，您可以認為ssg本質上是發佈工具。創建內容，運行SSG，然後它將內容轉換為web頁面。然後使用任意數量的可用方法將這些頁面上載到web服務器。

聽起來不錯吧？如果你感興趣，讓我們看看一些流行的ssg，看看他們能提供什麼。

有哪些流行的SSG？

網站StaticGen是靜態站點生成器的主要資源。它提供了一個廣泛的可用列表，以及基於用戶投票和Github分叉的排名系統。

您可以仔細閱讀清單，輕鬆查看SSG使用的編程語言，並深入查看其功能的摘要。基於這些列表，讓我們基於以下屬性來檢查一些主要的ssg。

• 編程語言：描述編寫SSG工具的語言。這對於CMS應用程序非常重要，因為web服務器環境需要支持它。對於ssg來說，這仍然有點重要，但是在您自己的機器上可以安裝什麼和不能安裝什麼方面，您通常有更多的靈活性。
• 模板語言：模板語言是用來構造頁面結構以及執行一些自動化（例如，顯示分配給特定頁面的標記）的語言。如果你已經熟悉其中一個而不是另一個，這可能很重要。
• （本機）輸入格式：可以用來起草內容的文本標記格式。
• （本機）輸出格式：我們專注於生成網站，因此這裡給出了HTML（加上CSS/Javascript）。但是一些生成器也可以輸出其他格式，比如PDF。
• 特性：SSG可能包含其他有用的特性。一個常見的例子是，如果它是“blog-aware”，它允許您向內容文件添加標記和日期，並將生成的頁面安排成類似blog的結構。

此表總結了五個主要SSG的上述情況：

選擇ssg

像任何應用程序一樣，您應該根據1）它對您的需求的支持程度和2）一些初始測試來選擇一個可用的生成器。看看上面的表格，它的三個選項跳出來，我認為是好的。

Jekyll是其中最受歡迎的，並且在可用的主題、插件等方面得到了最廣泛的支持。另一方面，我喜歡Hugo中更大的內容模型，以及使用Org模式作為輸入的可能性。通過GitBook將站點導出為PDF圖書的能力也很吸引人。

最終，我決定使用Jekyll，因為我可以通過插件實現它缺少的一些功能。但決定性的因素是它是用Ruby編寫的，而且web主機更可能支持Ruby而不是Hugo的Go編程語言。（“等等，我還以為這是本地節目呢！”是的，或者至少可以。正如我們將在下一節中看到的，這有優點也有缺點。）

準備安裝傑基爾

既然我們已經解決了傑基爾，讓我們把一切都安排好。以下部分將幫助您決定在何處安裝生成器本身，以及需要哪些必備軟件。

與CMS不同，靜態站點生成器應用程序本身的安裝位置具有一定的靈活性。請記住，這些系統並不是真正為網站訪問者提供頁面服務的系統。它們以一種格式獲取內容並將其轉換為HTML。因此，您可以選擇安裝SSG：

• 本地（即在您編寫內容的同一臺計算機上）
• 遠程（即在站點所在的服務器上）

本地安裝的優點

在本地安裝SSG的首要優勢是能夠在發佈之前輕鬆預覽。你的SSG是把你的純文本內容和吐出HTML版本，有各種各樣的視覺應用。在您擔心複製到服務器之前，能夠在瀏覽器中構建和預覽您的站點是非常有用的（稍後將詳細介紹）。下圖顯示了正在運行的Hugo服務器--請注意它是如何構建所有內容的，然後啟動web服務器併為您提供查看它的URL的：

如前所述，本地安裝可能是您唯一可用的選項。您的web宿主環境可能不支持SSG的基本編程語言。例如，如果不支持Ruby，我們的Jekyll命令將無法運行，因此您無法構建您的站點。但是，在自己的計算機上安裝必備組件應該沒有問題，除非您沒有管理權限。

遠程安裝的優點

另一方面，您可以選擇在服務器上安裝SSG。在這種情況下，您的工作流看起來像：1）編寫原始內容，2）將原始內容移動到服務器，3）運行SSG將原始內容轉換為HTML。這種方法的一些好處如下：

• 一組先決條件：在一個地方安裝SSG意味著您只需要完成一次安裝。
• 一次安裝管理：像所有軟件一樣，SSGs將發佈新版本，如果你想要這些新特性，你必須更新。如果您在多臺機器上使用SSG，則必須分別更新每臺機器。但是將你的SSG建立在一箇中央服務器上意味著你只需要更新一次。
• 創作中的平**立性：如果您在各種設備上工作，那麼遠程SSG意味著您只需要在本地擔心創作。既然你是用純文本創作的，你幾乎可以用任何你喜歡的設備。例如，您可以在Android**上使用文本編輯器起草文章，然後在Windows機器上進行校對和添加圖形。您甚至可以將所有內容與眾多跨平臺文件同步解決方案之一保持同步。

一方面，在發佈任何更改之前預覽站點的能力遠遠超過了遠程安裝的好處。因此，如果你只選擇一個，就去本地安裝。

但請記住，這兩者並不是相互排斥的。對於正常的“默認”工作流，沒有什麼可以阻止您在本地（例如，在Windows計算機上）進行安裝，但是也可以在服務器上維護安裝，以便從移動設備發送緊急郵件。

先決條件

為了在一般情況下使用SSG，您需要以下內容：

• 能夠用純文本書寫內容的編輯。不受干擾的編輯器是一個不錯的選擇（上圖為Mac的Lightpaper）。
• 網絡託管環境。
• Internet訪問，將內容傳輸到宿主環境。

如果你是那種在“點擊式”****服務上考慮SSG的人，那麼你很可能已經擁有了所有這些東西。此外，您還需要滿足軟件需求。對傑基爾來說，這些是：

• Ruby版本2.2.5或更高版本
• RubyGems，一種用於打包基於Ruby的應用程序的格式
• 一個開源軟件編譯器GCC和make（不用擔心，你根本不需要擔心，但是Jekyll確實在後臺使用它）

傑基爾裝置

在linux上安裝ruby

在基於Unix的操作系統（如Linux）上，先決條件是一個快照：幾個簡單的命令行安裝。在Ubuntu及其衍生工具上，以下APT命令將為您設置Ruby語言：

這將安裝Ruby語言以及處理一些Gems所需的開發工具。Gems是Ruby包格式，安裝其中一些Gems實際上會將它們構建到位。但別擔心，安裝人員會處理好這一切。

一旦Ruby就位，就可以按照下面“安裝Jekyll”一節中的描述安裝Jekyll。

安裝（更新）ruby-on-macos

macOS的確有Ruby的現成安裝。不幸的是，該版本（至少在High Sierra中）是2.0.0，因此不足以運行Jekyll。

最直接的安裝方法是通過Homebrew項目，它提供了一個命令行工具來安裝許多有用的開源程序。這和MacPorts沒什麼不同，我們以前在MUO上研究過。

首先，通過將以下內容粘貼到終端應用程序中來安裝Homebrew base。它將下載並運行一個安裝程序，該程序將進一步解釋該過程：

接下來，使用brew命令安裝支持Jekyll的更新版Ruby：

此時，請確保關閉並重新打開終端——它將獲取更新的Ruby版本（如下圖所示）。然後使用下面“安裝Jekyll”中的命令進行安裝。

在windows上安裝ruby

Windows不是Jekyll正式支持的目標。儘管如此，還是有幾種方法可以安裝它，有些方法可以說比mac更簡單。

• 首先，您可以通過標準的.EXE安裝程序進行安裝。RubyInstaller項目支持最新的2.5.0版本。雙擊文件（如上圖所示）將運行熟悉的安裝嚮導。
• 或者，您可以使用chocolate（Windows的包管理器）來安裝Ruby。按照前面的指南安裝chocooley，然後使用chocoinstallruby命令安裝Ruby。
• 最後，如果你運行的是最新的windows10，你可以從Windows商店安裝Ubuntu。然後，您可以使用上面提到的APT命令安裝Ruby，以及Ubuntu提供的所有開放源代碼。

安裝傑基爾

安裝了Ruby後，您可以在所有三個平臺上使用gem命令安裝Jekyll及其所有依賴項（總共約25個）：

注意：在Ubuntu上，使用sudo預先設置上述內容，以便在系統範圍內安裝。雖然只允許用戶安裝，但我發現這是有問題的。

最後，您可以通過以下內容確認Jekyll的安裝和版本：

如果成功了，你可以進入下一節，建立你的第一個傑基爾網站。

項目設置和結構

創建jekyll項目

現在你已經安裝了Jekyll，你的第一步就是建立一個項目。這表示要使用Jekyll創建和管理的單個站點。以下命令將在當前目錄中創建新項目：

這將創建一個名為awesome site的新目錄。讓我們深入瞭解一下，熟悉一下。

瞭解傑基爾的結構

Jekyll項目結構包含許多關鍵文件和子目錄，如下所示：

• _貼子：顧名思義，這裡是你放置博客貼子的地方。博客文章不同於“常規頁面”，因為它們將包含一個有助於排序的日期，以及組織它們的可選類別。在“內容創作”部分，我們將更仔細地研究這一點。
• _配置yml：這是站點的配置文件，以YAML格式編寫。YAML是一種用於結構化信息的標記語言，是configs的通用格式。當開始創作我們的內容時，我們將更改其中的一些。
• html：與其他系統一樣，當訪問者請求未知的url時，404頁面會顯示出來。
• Gemfile：這是一個Ruby配置文件。我們稍後將在安裝其他組件時對此進行添加，但對於現在，請不要對此進行任何更改。
• 索引.md：如果您通常熟悉web服務器，那麼這應該看起來很熟悉。當用戶轉到URL時（如“www.makeuseof.com“”，典型的web服務器將嘗試加載索引.html“或”索引.php“此降價文件將轉換為”索引.html“我們的靜態網站。

你可能會注意到這張單子上少了一件事。。。頁！你怎麼能有一個沒有網頁的網站？

你可以自由地為你的網站創建其他文件和文件夾。只要它們不是以下劃線開頭，它們就會被認為是“內容文件夾”關於.md“文件（如上圖所示）或這些任意文件夾中。我們所缺少的只是寫一些內容。我們將在下一節集中精力做這件事。

jekyll內容創作

預覽網站

我們能做的第一件事就是看看這個網站是如何開箱即用的。如前所述，在本地安裝Jekyll的優點之一是使用其內置的web服務器輕鬆預覽我們的站點。下面的命令將啟動該服務器，並讓您知道如何將瀏覽器指向它。

注意：從項目的目錄（即下面示例中的“/home/aron/Documents/awesome site/”）發出Jekyll的命令非常重要。否則，你會得到各種各樣的錯誤，關於丟失的東西，似乎只有這樣，因為你沒有在正確的地方。

正如輸出所說，我們現在可以在瀏覽器中使用http://127.0.0.1:4080. 現在有一個網站歡迎我們來到傑基爾，如下圖所示。

更新關於頁面

從上圖中，我們可以看到標題菜單中的“About”鏈接。點擊它會彈出一個頁面，裡面有一堆關於傑基爾和它的最小主題的垃圾。

但這是我的網站！讓我們把它改成個性化的。我們可以加一些降價到”關於.md“文件在我們項目的根目錄中。還要注意文件頂部的“front matter”，其中指定了“/about/”URL。

刷新我們的瀏覽器標籤（Jekyll的服務器將實時接收我們的更改），我們的歡迎信息就出現在頂部。很 完美！

但是現在其他的事情變得明顯了。這個網站的標題是“你最棒的標題”而不是“我最棒的標題”。而且還有一些關於_配置yml“在網站的描述中。讓我們把它們修好。

更新站點配置

那個_配置yml（這實際上很重要，不是胡說）文件包含了一些關於我們網站的重要信息，如下圖所示：

在這裡查找和調整內容很簡單，讓我們1）更改標題，2）更改描述，3）刪除Github鏈接。與頁面更改不同，我們需要重新啟動服務器，以使用Ctrl+C（停止）和jekyll-serve（再次啟動）來獲取更新的配置文件：

但擺弄亞姆不是我們想要的。不，我們希望能夠創建像降價這樣的格式的內容。

在降價中創建新內容

正如本指南前面提到的，為大多數靜態站點生成器創建內容的方法是降價。這種非常流行的輕量級標記語言使得在文本編輯器中創建網頁變得非常容易。我們以前在MUO上討論過很多次，包括它值得學習的原因，以及針對Windows、Mac和Linux的可靠編輯器。但是，如果你是一個全新的降價，邁克爾的超級降價概述應該是你的第一站學習的細節。

一旦你準備好降價了，我們就可以開始創建你的第一篇文章了。創建一個名為“YYYY-MM-DD”的新純文本文件-標題.md“不管你喜歡什麼方法，名字的第一部分代表日期。將文件放在“\u posts”目錄中，然後用您喜愛的文本編輯器打開它。

原始的Jekyll源文件大多是標準的降價，除了前面的內容。這是一些以YAML格式出現在文件開頭的配置（請參閱，告訴您它很流行）。最基本的東西，你可以提供通過前面的事是職位的標題。您還應該選擇一個主題的可用佈局（以下示例中的“post”）。在兩組三個破折號之間的最開始處將它們放入降價文件中：

在用三個破折號結束前面的內容之後，您可以用標準降價來寫剩餘的內容。最好不要直接使用任何H1標記，因為Jekyll會將這些標記應用於您上面定義的標題。但添加一些較低的標題（第二級和第三級）和其他文本（包括項目符號列表）會使我們的頁面更加充實。

此時，您可以開始累積帖子。如果你想從你的Jekyll網站上得到的只是一個簡單的，日誌式的博客，那麼，你已經得到了。您可能需要考慮採取的進一步步驟包括（鏈接將帶您訪問更詳細的參考資料）：

• 創建其他靜態頁面，比如我們之前修改的“About”頁面。請記住，您可以將這些源文件放在項目的根目錄中，也可以放在您定義的子文件夾中。
• 用“category”關鍵字對前面的頁面進行分類。然後，創建篩選每個類別的登錄頁。
• 使用前面的“permalink”關鍵字將頁面組織成一個站點樹。例如，這允許您指定關於.md在你的項目的根實際上得到一個地址“真棒-網站.com/關於“/”。

有了這些知識，你就擁有了創建一個網站所需的一切，可以作為一個投資組合、個人博客，甚至是一個小型商業網站。問題是，到目前為止，它仍然侷限於你的桌面。在下一節中，我們將探討當您構建站點時發生了什麼（您甚至不知道您是這樣做的，是嗎？）。我們還將研究一些將構建的或“生成的”站點放到web上的方法。

構建和部署

建造

看一下上面的屏幕截圖——在第五行，您會注意到輸出“Generating…”

為了服務你的網站，傑基爾首先需要建立它。這需要將所有的標記轉換為HTML，並根據需要組裝頁面（比如我們前面提到的分類頁面）。jekyllserve命令還為您構建項目。這就是為什麼我們只需要刷新瀏覽器就可以看到變化。

我們還可以使用以下命令手動構建項目：

生成項目將創建一個名為\u site的子目錄。它包含站點的“實時”版本（我們將在下一節討論如何做到這一點）。其結構與主要項目結構相似，但略有不同：

在項目建設過程中，傑基爾將採取以下措施：

• 正在將標記轉換為HTML。
• 向站點頁面添加“包含”元素，如頁眉和頁腳。
• 將模板中的動態代碼段替換為其值。例如，通過查找所有博客文章並在列表中填寫日期和標題來創建頁面。
• 在必要的地方創建導航，比如文章類別的文件夾（上圖中的“jekyll”）或者指向“awesome”的“About”菜單項-網站.com/關於“/”。

在這個過程結束時，您可以簡單地將“\u site”目錄的內容推送到一個web託管環境中。

部署

由Jekyll生成的站點不需要任何花哨的數據庫安裝就可以工作。您只需將“\u site”目錄的所有內容放到您的web主機上。您可以使用多種方法來執行此操作，包括：

• 直接手動複製。不大驚小怪，不混亂。只需記住使用SFTP，而不是常規的（不安全的）FTP。
• 文件同步。如果你能找到一個支持SFTP（或常規FTP，如果你必須的話）的同步工具，你可以將它設置為將“\u site”目錄與你的web根目錄同步。請記住，它應該是一個單向同步，從您的機器到網絡主機。Rsync在所有平臺上都是可用的選項，Grsync UI也使其易於使用。
• 源代碼管理。最後，對於像博客一樣快速頻繁變化的內容，您應該使用源代碼管理來管理“原始”內容。一個部署選項是在源代碼管理下設置“\u site”目錄，它允許您在創建或修改內容時向宿主環境“git push”更新。或者，如果你真的很聰明，你可以在源目錄上嘗試一個post-commit鉤子，它使用rsync將更新的內容複製到你的web主機上。

此時，您已經擁有創建網站所需的一切。但這並不是說我們已經涵蓋了一切。例如，默認的最小值主題是一點點，嗯。。。缺乏。讓我們用尖銳一點的東西來裝飾一下。

傑基爾主題

要為你的Jekyll網站找到一個新主題最困難的事情是從所有選項中選擇。有數百個可用。試試傑凱爾主題網站，以獲得一個漂亮的，瀏覽的主題庫。一旦你決定了一個，按照它的網站上的說明安裝它。

注意：許多主題都打包為Ruby gems，這意味著您可以利用我們前面使用的“gem install”命令。不過，這項工作仍在進行中。或者，有些主題可能需要您手動安裝。

由於大型的垂直側邊欄菜單很酷，我們將安裝Hydeout主題。（在整個Jekyll生態系統中，您可以找到許多對這本經典小說的引用。）它被打包為Ruby gem，因此您可以使用我們最初安裝Jekyll時使用的相同命令來安裝它：

然後創建一個新的Jekyll站點，並將以下兩個更改為1）考慮包含主題的gem，2）將主題實際應用到當前站點。首先，更改文件中的以下行：

現在，更改中的設置_配置yml要使用Hydeout（使用gem名稱“jekyll theme Hydeout”）表示站點的活動主題：

現在重新啟動Jekyll服務器（請記住，我們接觸了配置文件），並看到您令人敬畏的新主題：

jekyll插件

主題並不是美化網站的唯一方法。Jekyll插件有助於添加新的輸入和輸出選項、自動生成目錄或嵌入spotifyweb播放器等功能。它甚至可以提供一些我們強調為SSGs的缺點的功能，比如評論（例如gem“dischs for jekyll”支持dischs服務）。

我們將為我們的網站安裝一個管理面板，使之成為一個類似於“靜態網站CMS”的東西。。。我們只需要安裝它：

然後根據開發人員的說明在Gemfile中啟用它：

完成！轉到站點的新管理面板你的網站：4080/管理員:

總結

總而言之，在本指南中，我們瞭解到：

• SSG如何將純文本內容轉換為格式良好的網頁
• SSG的重要屬性是什麼，以及如何選擇一個適合您的屬性
• 如何在Windows、Mac和Linux上安裝Jekyll靜態站點生成器
• 如何開始你的第一個Jekyll項目，以及它的結構是什麼樣的
• 如何使用標記語言為站點創建內容，並預覽結果
• 如何獲取Jekyll的輸出並將其從本地計算機傳送到web主機
• 如何為您的站點安裝和選擇新的Jekyll主題
• 如何安裝和使用附加組件向Jekyll添加功能

有了這些知識，您應該能夠使用Jekyll快速輕鬆地運行一個以內容為中心的基本網站。此外，該網站將是快速，安全，易於管理。無論你身在何處，無論你是否可以上網，你都可以處理你的內容，就像在線一樣預覽你的作品。

你可以在任何一個網絡主機上託管你的網站，甚至可以使用非常實惠的“**”計劃。同時，你可以使用現代的，好看的主題，甚至通過插件添加一些CMS特性。

你覺得基於SSG的網站怎麼樣？對你合適嗎？或者這一切聽起來太複雜了，你寧願堅持使用WordPress？請在評論中告訴我們！