Step by Step チュートリアル

1. セットアップ

Jekkylのstep-by-stepチュートリアルへようこそ。このチュートリアルの目的は、デフォルトのgemベースのテーマに頼ることなく、一から最初のJekyllサイトを構築し、フロントエンドのWeb開発の経験をすることです。
さあ、始めましょう！

インストール

JekyllはRubyプログラムですので、最初にRubyをあなたのマシーンにインストールする必要があります。インストールガイドへ向かい、OSにあわせた説明を確認してください。

Rubyをセットアップしたら、ターミナルで以下を実行し、Jekyllをインストールできます。

gem install jekyll bundler

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

bundle init

Gemfileを編集し、依存関係としてJekyllを追加します。

gem "jekyll"

最後にプロジェクトのためのJekyllをインストールするためにbundleを実行します。

以上でこのチュートリアルに書かれている全てのコマンドの前にbundle execをつけることで、Gemfileで定義されたjekyllのバーションを使用できます。

サイトを作る

サイトを作るときです！　サイト用の新しいディレクトリを作り、好きな名前をつけましょう。このチュートリアルでは、そのディレクトリを“root”とします。

冒険がお好きなら、ここでGitリポジトリを初期化することができます。Jekyllの素晴らしいところの一つは、データベースが無いことです。全てのコンテンツとサイトの構成はGitのリポジトリでバージョン管理できるファイルです。リポジトリを使用するのは完全にオプションですが、習得するのは良い習慣です。Gitの使用については、Git Handbookを読むことで学べます。

最初のファイルを作成しましょう。rootに以下の内容のindex.htmlを作成します。

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

ビルド

Jekyllは静的サイトのジェネレータですので、サイトを見る前にJekyllで構築する必要があります。
構築するためにrootで実行できるコマンドは2つあります。

jekyll build - サイトを構築し、_siteディレクトリに出力します。
jekyll serve - 上記と同じことをし、変更を加える度に再構築を行います。あわせてhttp://localhost:4000でローカルサーバを走らせます。

サイトを開発しているときは、変更を更新するためにjekyll serveを使用するとよいでしょう。

jekyll serveを実行し、ブラウザでhttp://localhost:4000を見てみましょう。”Hello World!”と表示されるはずです。

さて、あなたはこれが何だというのかと、考えているでしょうか？　JekyllはただHTMLファイルをある場所から別の場所へコピーしただけです。もう少し我慢してください。まだまだ学ぶことがあります。

Back