jekyll で静的ページを作成する

# 概要
jekyll を利用して、静的ページを作成する。

# 手順
## jekyll インストール
```
gem install bundler jekyll
```

## プロジェクト作成
```
% jekyll new my-jekyll-site
Running bundle install in /Users/yuhori/Work/my-jekyll-site...
  Bundler: Fetching gem metadata from https://rubygems.org/...........
  Bundler: Fetching gem metadata from https://rubygems.org/.
  Bundler: Resolving dependencies...
  Bundler: Using public_suffix 3.0.3
  Bundler: Using addressable 2.6.0
  Bundler: Using bundler 2.0.1
  Bundler: Using colorator 1.1.0
  Bundler: Using concurrent-ruby 1.1.5
  Bundler: Using eventmachine 1.2.7
  Bundler: Using http_parser.rb 0.6.0
  Bundler: Using em-websocket 0.5.1
  Bundler: Using ffi 1.10.0
  Bundler: Using forwardable-extended 2.6.0
  Bundler: Using i18n 0.9.5
  Bundler: Using rb-fsevent 0.10.3
  Bundler: Using rb-inotify 0.10.0
  Bundler: Using sass-listen 4.0.0
  Bundler: Using sass 3.7.4
  Bundler: Using jekyll-sass-converter 1.5.2
  Bundler: Using ruby_dep 1.5.0
  Bundler: Using listen 3.1.5
  Bundler: Using jekyll-watch 2.2.1
  Bundler: Using kramdown 1.17.0
  Bundler: Using liquid 4.0.3
  Bundler: Using mercenary 0.3.6
  Bundler: Using pathutil 0.16.2
  Bundler: Using rouge 3.3.0
  Bundler: Using safe_yaml 1.0.5
  Bundler: Using jekyll 3.8.5
  Bundler: Using jekyll-feed 0.12.1
  Bundler: Using jekyll-seo-tag 2.6.0
  Bundler: Using minima 2.5.0
  Bundler: Bundle complete! 4 Gemfile dependencies, 29 gems now installed.
  Bundler: Use `bundle info [gemname]` to see where a bundled gem is installed.The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
New jekyll site installed in /Users/yuhori/Work/my-jekyll-site.
```

## 起動
```
% cd my-jekyll-site
% bundle exec jekyll serve
Configuration file: /Users/yuhori/Work/my-jekyll-site/_config.yml
            Source: /Users/yuhori/Work/my-jekyll-site
       Destination: /Users/yuhori/Work/my-jekyll-site/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 0.447 seconds.
 Auto-regeneration: enabled for '/Users/yuhori/Work/my-jekyll-site'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

http://127.0.0.1:4000/ にアクセスすると、次のような画面となりました。

<img width="1080" alt="Screenshot 2019-04-10 21.31.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/366472/bffae459-e7e9-c4df-19db-c4b535b9149b.png">


## ディレクトリ構成
% ls -al .
total 56
drwxr-xr-x  12 yuhori  staff   408  4 10 20:58 ./
drwxr-xr-x  15 yuhori  staff   510  4 10 20:57 ../
-rw-r--r--   1 yuhori  staff    35  4 10 20:57 .gitignore
drwxr-xr-x   4 yuhori  staff   136  4 10 20:58 .sass-cache/
-rw-r--r--   1 yuhori  staff   398  4 10 20:57 404.html
-rw-r--r--   1 yuhori  staff  1039  4 10 20:57 Gemfile
-rw-r--r--   1 yuhori  staff  1692  4 10 20:57 Gemfile.lock
-rw-r--r--   1 yuhori  staff  1652  4 10 20:57 _config.yml
drwxr-xr-x   3 yuhori  staff   102  4 10 20:57 _posts/
drwxr-xr-x   8 yuhori  staff   272  4 10 20:58 _site/
-rw-r--r--   1 yuhori  staff   539  4 10 20:57 about.md
-rw-r--r--   1 yuhori  staff   175  4 10 20:57 index.md
```

## _posts にファイルを作成
```
% cat _posts/2019-04-11-diary.markdown
---
layout: post
title:  "今日の日記"
date:   2019-04-10 20:57:09 +0900
categories: jekyll update
---
今日とても美味しいアイスクリーム屋さんを見つけました。
etc ...

僕は、数を数えるのが好きです。
{% for i in (1..5) %}
  {{ i }}
{% endfor %}


```

次のように、ポストが追加される
<img width="1107" alt="Screenshot 2019-04-10 21.33.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/366472/d3385ef8-4109-a03d-b950-31a586f1e9ca.png">

<img width="888" alt="Screenshot 2019-04-10 21.33.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/366472/1970fd35-0d88-cb0b-6388-95ebb6f5628e.png">


## _site 以下に、自動的にページが作成される
```
% cat _site/jekyll/update/2019/04/10/diary.html
<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.6.0 -->
<title>今日の日記 | Your awesome title</title>
<meta name="generator" content="Jekyll v3.8.5" />
<meta property="og:title" content="今日の日記" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="今日とても美味しいアイスクリーム屋さんを見つけました。 etc …" />
<meta property="og:description" content="今日とても美味しいアイスクリーム屋さんを見つけました。 etc …" />
<link rel="canonical" href="http://localhost:4000/jekyll/update/2019/04/10/diary.html" />
<meta property="og:url" content="http://localhost:4000/jekyll/update/2019/04/10/diary.html" />
<meta property="og:site_name" content="Your awesome title" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-04-10T20:57:09+09:00" />
<script type="application/ld+json">
{"url":"http://localhost:4000/jekyll/update/2019/04/10/diary.html","headline":"今日の日記","description":"今日とても美味しいアイスクリーム屋さんを見つけました。 etc …","dateModified":"2019-04-10T20:57:09+09:00","datePublished":"2019-04-10T20:57:09+09:00","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/jekyll/update/2019/04/10/diary.html"},"@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Your awesome title" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="/">Your awesome title</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="/about/">About</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">今日の日記</h1>
    <p class="post-meta">
      <time class="dt-published" datetime="2019-04-10T20:57:09+09:00" itemprop="datePublished">Apr 10, 2019
      </time></p>
  </header>

  <div class="post-content e-content" itemprop="articleBody">
    <p>今日とても美味しいアイスクリーム屋さんを見つけました。<br />
etc …</p>

<p>僕は、数を数えるのが好きです。</p>

<p>1</p>

<p>2</p>

<p>3</p>

<p>4</p>

<p>5</p>


  </div><a class="u-url" href="/jekyll/update/2019/04/10/diary.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">Your awesome title</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Your awesome title</li><li><a class="u-email" href="mailto:your-email@example.com">your-email@example.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/jekyll"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">jekyll</span></a></li><li><a href="https://www.twitter.com/jekyllrb"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">jekyllrb</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
```

## 備考
github.pages を使えば、jekyll で作ったサイトを簡単に公開できるので、良さそうですね^^