ステップバイステップチュートリアル

1. セットアップ

Jekyllのステップバイステップチュートリアルへようこそ。このチュートリアルでは、フロントエンドのWeb開発経験がある方を対象に、デフォルトのgemベースのテーマに頼らず、ゼロから最初のJekyllサイトを構築する方法を説明します。

インストール

JekyllはRubyのgemです。最初に、お使いのマシンにRubyをインストールします。インストールにアクセスし、お使いのオペレーティングシステムの手順に従ってください。

Rubyをインストールしたら、ターミナルからJekyllをインストールします。

gem install jekyll bundler

新しいGemfileを作成して、プロジェクトの依存関係をリストします。

bundle init

テキストエディタでGemfileを編集し、jekyllを依存関係として追加します。

gem "jekyll"

bundleを実行して、プロジェクト用にjekyllをインストールします。

これで、このチュートリアルに記載されているすべてのjekyllコマンドの先頭にbundle execを付けて、Gemfileで定義されているjekyllバージョンを使用するようにすることができます。

サイトを作成する

サイトを作成しましょう！サイトの新しいディレクトリを作成し、好きな名前を付けます。このチュートリアルの残りの部分では、このディレクトリを**ルート**と呼びます。

ここでGitリポジトリを初期化することもできます。

Jekyllの優れた点の1つは、データベースがないことです。すべてのコンテンツとサイト構造は、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を実行し、http://localhost:4000のローカルWebサーバーで実行します。変更を加えるたびにサイトを再構築します。

サイトを開発しているときは、jekyll serveを使用します。変更のたびにブラウザを強制的に更新するには、jekyll serve --livereloadを使用します。競合がある場合、またはJekyllに開発サイトを別のURLで提供させたい場合は、serveコマンドオプションの説明に従って、--hostおよび--port引数を使用します。

jekyll serveが_siteにビルドするサイトのバージョンは、デプロイには適していません。jekyll serveで作成されたサイトのリンクとアセットURLは、サイトの設定ファイルで設定された値ではなく、https://localhost:4000またはコマンドライン設定で設定された値を使用します。デプロイの準備ができたときにサイトをビルドする方法については、このチュートリアルのデプロイセクションをご覧ください。

jekyll serveを実行し、ブラウザでhttp://localhost:4000にアクセスします。「Hello World！」と表示されるはずです。

この時点で、「それで？」と思うかもしれません。起こったことは、JekyllがHTMLファイルをある場所から別の場所にコピーしただけのことです。

焦らずに、学ぶことはまだたくさんあります！

次に、Liquidとテンプレートについて学びます。

戻る