逐步教學

1. 設定

歡迎使用 Jekyll 的逐步教學。本教學將引導您從具備一些前端網頁開發經驗，進而從頭開始建立您的第一個 Jekyll 網站，而無需仰賴預設的 gem 主題。

安裝

Jekyll 是個 Ruby gem。首先，在您的機器上安裝 Ruby。前往安裝並按照您的作業系統說明進行操作。

安裝 Ruby 後，從終端機安裝 Jekyll

gem install jekyll bundler

建立一個新的 Gemfile 來列出您的專案相依性

bundle init

在文字編輯器中編輯 Gemfile 並將 jekyll 加入為相依性

gem "jekyll"

執行 bundle 來為您的專案安裝 jekyll。

現在，您可以使用 bundle exec 為本教學中列出的所有 jekyll 指令加上前置字首，以確保您使用的是在 Gemfile 中定義的 jekyll 版本。

建立網站

現在要來建立一個網站！為你的網站建立一個新目錄，並隨意命名。在本教學的後續內容中，我們會將此目錄稱為根目錄。

你也可以在這裡初始化 Git 儲存庫。

Jekyll 的一大優點是它沒有資料庫。所有內容和網站結構都是檔案，而 Git 儲存庫可以對其進行版本控制。使用儲存庫是可選的，但建議使用。你可以閱讀Git 手冊，以進一步了解如何使用 Git。

讓我們新增你的第一個檔案。在根目錄中建立 index.html，其內容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

建置

由於 Jekyll 是靜態網站產生器，因此在我們可以檢視網站之前，它必須先建置網站。執行下列任一指令，以建置你的網站

jekyll build - 建置網站，並將靜態網站輸出到名為 _site 的目錄。
jekyll serve - 執行 jekyll build，並在 https://#:4000 的本機網路伺服器上執行，並在你每次進行變更時重新建置網站。

當你開發網站時，請使用 jekyll serve。若要強制瀏覽器在每次變更時重新整理，請使用 jekyll serve --livereload。如果發生衝突，或者你希望 Jekyll 在不同的 URL 上提供你的開發網站，請使用 --host 和 --port 參數，如serve 指令選項中所述。

網站的版本 jekyll serve 在 _site 中建立的版本不適合部署。使用 jekyll serve 建立的網站中的連結和資產 URL 會使用 https://#:4000 或命令列設定中設定的值，而不是您的網站設定檔中設定的值。若要了解如何在網站準備好部署時建立網站，請閱讀本教學課程的部署部分。

執行 jekyll serve 並在瀏覽器中前往 https://#:4000。您應該會看到「Hello World！」。

在這個時候，您可能會想：「那又怎樣？」。唯一發生的事情是 Jekyll 將一個 HTML 檔案從一個地方複製到另一個地方。

耐心點，年輕的蚱蜢，還有很多東西要學！

接下來，您將會了解 Liquid 和範本。

下一步