概要
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 %}
次のように、ポストが追加される
_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 で作ったサイトを簡単に公開できるので、良さそうですね^^