こんにちは、アルバイトの小林です。
ふと、個人ブログを移行しようかなーと考えていたらJekyllという良さそうなのがあったので紹介します！

Jekyllとは

Jekyll
Rubyで書かれた静的Webサイト・ブログジェネレーターです。
とてもシンプルで扱いやすく、GitHub Pages経由でも公開できます。

GitHub Pages自体Jekyllで動いているみたいです。

まず動かしてみる。

$ gem install jekyll bundler
$ gem install github-pages // github pagesで使用する場合
$ jekyll new dir
$ cd dir
$ bundle exec jekyll serve

OPEN – http://localhost:4000

簡単！

基本ディレクトリ構成

基本ディレクトリ構成

.
├── _config.yml
├── _drafts
| ├── begin-with-the-crazy-ideas.textile
| └── on-simplicity-in-technology.markdown
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
| └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data
| └── members.yml
├── _site
└── index.html

caymanを適用させる

1. Gemfileのthemeを編集

source "https://rubygems.org"
ruby RUBY_VERSION

gem "jekyll", "3.4.3"

gem "jekyll-theme-cayman"

group :jekyll_plugins do
gem "jekyll-feed", "~> 0.6"
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

2. _config.yml のthemeを編集 – theme: minima -> theme: jekyll-theme-cayman

title: Your awesome title
email: [email protected]
description: > # this means to ignore newlines until "baseurl:"
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.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username: jekyll

# Build settings
markdown: kramdown
theme: jekyll-theme-cayman
gems:
- jekyll-feed
exclude:
- Gemfile
- Gemfile.lock

あとはビルドしなおせば、テーマが変わります。

$ bundle install
$ bundle exec jekyll s

OPEN – http://localhost:4000

サイトの基本設定

_config.ymlにタイトル、先ほどのテーマなどを設定します。

title:
email:
description: #
baseurl: ""
url: ""
twitter_username:
github_username:

# Build settings
markdown: kramdown
theme: jekyll-theme-cayman
gems:
- jekyll-feed
exclude:
- Gemfile
- Gemfile.lock

レイアウトを作成

_layouts/以下に作る。

* default.html (ヘッダとフッタ)
* home.html (トップページ)
* post.html (記事を表示するとき)

_layouts/default.html

{{ page.title | default: site.title }}

<section class="page-header">
<h1 class="project-name">{{ site.title | default: site.github.repository_name }}</h1>
<h2 class="project-tagline">{{ site.description | default: site.github.project_tagline }}</h2>
</section>
<section class="main-content">
  {{ content }} <!-- ここにhome.htmlなどが読み込まれる -->
  <footer class="site-footer">
  {% if site.github.is_project_page %}
  <span class="site-footer-owner">
    <a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{site.github.owner_name }}</a>.
  </span>
  {% endif %}
  <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span></footer></section>

_layouts/home.html

---
layout: default
---
<div class="home">
<h1 class="page-heading">Posts</h1>
{{ content }}
<ul class="post-list">
 <ul class="post-list">{% for post in site.posts %}
  <li>{% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
  <span class="post-meta">{{ post.date | date: date_format }}</span>
  <h2><a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a></h2>
  </li>
 </ul>
</ul>
{% endfor %}

</div>

_layouts/post.html

---
layout: default
---
<h2>{{ page.title }}</h2>
<p class="meta">{{ page.date | date: date_format }}</p>
{{ content }}

 bundle exec jekyll serve 

OPEN – http://localhost:4000

記事が表示されました！

GitHub Pagesを使って公開する

任意のリポジトリを作ってとりあえず全部pushします。

$ git init
$ git add .
$ git commit -m "Initial Commit"
$ git remote add origin https://github.com/username/xxxx.git
$ git push origin master

GitHub Pagesを設定します。

リポジトリ > 設定 > GitHub Pages > Source からブランチを選びます。

そしてSaveし正常にビルドされると以下のように表示されます！

OPEN – https://kobad.github.io/blog/　にて、公開されます！

終わりに

jekyllの簡単な使い方とGitHub Pagesで公開する方法を紹介しました。
まだ設定とか全然していないのでこれからサイドバーとか記事移行とかします。

ぜひ試してみてください！