How to use Jekyll in GithubPages

updated at Dec 1, 2019

githubpages jekyll

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

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

major update history

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

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

Environment

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

Refferrence

デフォルトのGithubPages作成

jekyllの準備、作成

gem install bundler jekyll
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 を書き加える。

# Gemfile
# uncomment
gem "github-pages", group: :jekyll_plugins
# add
gem "jekyll-theme-hydeout"

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

# _config.yml
# theme: mininma
remote_theme: fongandrew/hydeout

plugins:
  - jekyll-feed # pre writen
  - jekyll-remote-theme　# added
  - github-pages # added

bundle install
bundle exec jekyll server

エラー

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

Layoutが見つからないエラー

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

Invalid theme folder: _sass

参照

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

カスタマイズ

※使用テーマやテーマの追加方法によって、ディレクトリ構造が違うので、他テーマは知らない

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

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

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

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

ページネーション

# _config.yml
plugins:
  - jekyll-paginate

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

bundle install
bundle exec jekyll server

Googleアナリティクス

参照: Google Analytics for Jekyll

get google analytics tracking
touch google-analytics.html

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

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

<!-- _include/head.html -->
<head>
  {% include google-analytics.html %}
</head>

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

# _config.yml
google_analytics: UA-〇〇〇〇〇

githubに上げて完了。

Twitterカード追加

_include/twitter-card.htmlを作成

<!-- _include/twitter-card.html -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@not_you_die"/>
<!-- <meta name="twitter:creator" content="@{{ page.author }}"/> -->
<meta name="twitter:title" content="{{ page.title }}"/>

{% if page.summary %}
  <meta name="twitter:description" content="{{ page.summary }}"/>
{% else %}
  <meta name="twitter:description" content="{{ site.description }}"/>
{% endif %}

{% if page.image %}
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:image" content="{{ site.url }}{{ page.image }}"/>
{% else %}
  <meta name="twitter:card" content="summary"/>
  <meta name="twitter:image" content="{{ site.title_image }}"/>
{% endif %}

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

<!-- _include/head.html -->
<head>
  {% include twitter-card.html %}
</haed>

gitにpushし、Twitter Card Validator で確認

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

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

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

実作業

git branch changeDesign
git checkout changeDesign

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

# Gemfile
source 'https://rubygems.org'

gem 'github-pages', group: :jekyll_plugins
group :jekyll_plugins do
  gem 'jekyll-admin'
  gem 'jekyll-feed', '~> 0.6'
end
install_if -> { RUBY_PLATFORM =~ /mingw|mswin|java/ } do
  gem 'tzinfo', '~> 1.2'
  gem 'tzinfo-data'
end
gem 'wdm', '~> 0.1.0', install_if: Gem.win_platform?
gem 'jekyll-coffeescript'

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

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

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

自分の結果

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

スクロール関連の変更

// _layout.scss
body{
  background-image:url("../taiwan.jpg");
  background-size:cover;
  background-position: right;
  background-attachment:fixed;

  -ms-overflow-style: none; // IE用
  overflow: -moz-scrollbars-none; // Firefox用
  &::-webkit-scrollbar { // Chrome用
    display: none;
  }
}