GithubPages で Jekyll を使ってみよう

2019年12月1日 /

#githubpages#jekyll

from Qiita: GithubPagesでjekyllを使ってみようより

GithubPagesJekyll を利用し、静的ページを作成した。

major update history

20190825：GithubPages with jekyll 作成
- 目的：自分の情報などを纏めるサイト作成の為
- remote theme：fongandrew / hydeout
20191206：デザイン等変更
目的：アクセシビリティ改善、デバイスによる見た目差を小さく

twitter

デザインを大幅修正した件

Environment

Windows
vm OS: Linux Ubuntu Bento/Bionic
- Ruby ruby 2.5.1p57

Refferrence

デフォルトのGithubPages作成

jekyllの準備、作成

1
gem install bundler jekyll
2
jekyll new oriverk.github.io

Gitリモートリポジトリ作成、git push

リポジトリ名を username.github.io にすること

Github Pages HP If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

デフォルト状態完成

上記に従ったデフォルト状態では、テーマminimaが適用され、こんなページになる。

jekyllテーマを変更

参照：jekyll-theme-hydeout 4.0.2

テーマをhydeoutに変更してみる

上記の jekyll new username.github.io で作成したディレクトリに手を加えていく。

まず、Gemfile を編集し、 gem "github-pages" をアンコメント。また、今回使用するテーマ hydeout の gem を書き加える。

1
# uncomment
2
gem "github-pages", group: :jekyll_plugins
3
# add
4
gem "jekyll-theme-hydeout"

次に _config.yml を編集する。今回はリモートテーマを使用するので、 theme を remote_theme に変更する。さらにプラグインも追加しておく。

1
# theme: mininma
2
remote_theme: fongandrew/hydeout
3

4
plugins:
5
  - jekyll-feed # pre writen
6
  - jekyll-remote-theme　# added
7
  - github-pages # added

1
bundle install
2
bundle exec jekyll server

エラー

参照：GitHub Pages ビルドのトラブルシューティング

Layoutが見つからないエラー

記事投稿中にターミナルログを消してしまって、エラー文を覚えていないが、該当の.md ファイル中の Layout を Layout:page に変えたら、エラーが解消された。

Invalid theme folder: _sass

参照

参照先での議論を見る限り、問題ない…・？

カスタマイズ

※使用テーマやテーマの追加方法によって、ディレクトリ構造が違うので、他テーマは使うべきではない言葉なので修正してください

ディレクトリに _include フォルダを作成。

headタグ内の情報を書き込む

_include フォルダ内に、 head.html ファイルを作成する

1
<head>
2
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
3
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
5
  <title>
6
    {% if page.title == "Home" %}
7
    {{ site.title }}{% if site.tagline %} &middot; {{ site.tagline }}{% endif %}
8
    {% else %}
9
    {{ page.title }} &middot; {{ site.title }}
10
    {% endif %}
11
  </title>
12
  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}" />
13
</head>

ページネーション

1
# _config.yml
2
plugins:
3
  - jekyll-paginate
4

5
paginate: 5
6
paginate_path: '/blog/page:num'
7
sidebar_blog_link: '/blog'

1
bundle install
2
bundle exec jekyll server

Googleアナリティクス

参照: Google Analytics for Jekyll

1
<!-- google-analytics.html -->
2
{% if jekyll.environment == 'production' and site.google_analytics %}
3
<script>
4
  (function (i, s, o, g, r, a, m) {
5
  i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
6
    (i[r].q = i[r].q || []).push(arguments)
7
  }, i[r].l = 1 * new Date(); a = s.createElement(o),
8
    m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
9
  })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
10
  ga('create', '{{ site.google_analytics }}', 'auto');
11
  ga('send', 'pageview');
12
</script>
13
{% endif %}

_include/head.html に書き加える。

1
<head>
2
  {% include google-analytics.html %}
3
</head>

_config.yml にトラッキング ID を書き加える。トラッキング ID は、UA-　から始まる ID。

1
google_analytics: UA-〇〇〇〇〇

github に上げて完了。

Twitterカード追加

参照

_include/twitter-card.html を作成

1
<meta name="twitter:card" content="summary_large_image" />
2
<meta name="twitter:site" content="@not_you_die"/>
3
<!-- <meta name="twitter:creator" content="@{{ page.author }}"/> -->
4
<meta name="twitter:title" content="{{ page.title }}"/>
5

6
{% if page.summary %}
7
  <meta name="twitter:description" content="{{ page.summary }}"/>
8
{% else %}
9
  <meta name="twitter:description" content="{{ site.description }}"/>
10
{% endif %}
11

12
{% if page.image %}
13
  <meta name="twitter:card" content="summary_large_image"/>
14
  <meta name="twitter:image" content="{{ site.url }}{{ page.image }}"/>
15
{% else %}
16
  <meta name="twitter:card" content="summary"/>
17
  <meta name="twitter:image" content="{{ site.title_image }}"/>
18
{% endif %}

_include/head.html 内に書き加える

1
<head>
2
  {% include twitter-card.html %}
3
</haed>

Git に push し、Twitter Card Validator で確認

こんな感じで、サイドバーに nav-link 付け足したい。

デザインを大幅修正した件

改修方針
- モバイルファースト
- ページ数を少なく
- サイズ指定に px を極力使わず、rem や％を使う

実作業

1
git branch changeDesign
2
git checkout changeDesign

`Gemfile` と `_config.yml` から不要なものを削除

1
source 'https://rubygems.org'
2

3
gem 'github-pages', group: :jekyll_plugins
4
group :jekyll_plugins do
5
  gem 'jekyll-admin'
6
  gem 'jekyll-feed', '~> 0.6'
7
end
8
install_if -> { RUBY_PLATFORM =~ /mingw|mswin|java/ } do
9
  gem 'tzinfo', '~> 1.2'
10
  gem 'tzinfo-data'
11
end
12
gem 'wdm', '~> 0.1.0', install_if: Gem.win_platform?
13
gem 'jekyll-coffeescript'

最低限必要なディレクトリ構造を考える

自分でデザインを構成するには、jekyll と liquid でできることを理解する必要があった。

_include 配下のファイルは {% include footer.html %} の形で変数展開の様に扱う
- ただし、画像はこの方法では利用できない。svg は ok
_site 中身は bundle exec jekyll serve で自動で生成されるので中身は触らない

自分の結果

1
# ...
2
# .
3
# ├── _config.yml
4
# ├── _includes
5
# |   ├── svgファイル類
6
# |   └── `head`内パーツ類（head.html, twitter-card, google-analytics, bootstrap ...
7
# |   └── `body`内のhtmlパーツ類
8
# ├── _layouts ─ default.html
9
# ├── _posts   ─ 2007-10-29-why-every-programmer-should-play-nethack.md
10
# ├── assets   ─ jpg / png 画像類
11
# └── index.html # can also be an 'index.md' with valid front matter

スクロール関連の変更

1
body{
2
  background-image:url("../taiwan.jpg");
3
  background-size:cover;
4
  background-position: right;
5
  background-attachment:fixed;
6

7
  -ms-overflow-style: none; // IE用
8
  overflow: -moz-scrollbars-none; // Firefox用
9
  &::-webkit-scrollbar { // Chrome用
10
    display: none;
11
  }
12
}