Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@OriverK

GithubPagesでjekyllを使ってみよう。

More than 1 year has passed since last update.

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

major update history

  • 20190825:GithubPages with jekyll 作成

  • 20191206:デザイン等変更

    • 目的:アクセシビリティ改善、デバイスによる見た目差を小さく

作り替えた結果

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

環境

  • ホストOS: Windows10 Home with Windows Insider Program
  • 仮想環境ゲストOS: Linux Ubuntu Bento/Bionic
    • Ruby ruby 2.5.1p57

参照

GithubPages:https://pages.github.com/
Jekyll:https://jekyllrb.com/
Jekyll Themes :hydeout
幣GithubPagesリポジトリ:https://github.com/oriverk/oriverk.github.io

デフォルトの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に変更してみる

このテーマはgem版があるので、それを利用することにした。他のテーマは知らない。
上記のjekyll new username.github.ipで作成したディレクトリに手を加えていく。

まず、Gemfileを編集。
デフォルトでは`gem "github-pages"がコメントアウトされてるので、アンコメント。
また、今回使用するテーマhydeoutのgemを書き加える。

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

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

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

plugins:
  - jekyll-feed # 元から入っている
  - jekyll-remote-theme # added
  - github-pages # added
bundle install
bundle exec jekyll server

これで、テーマがhydeoutに変更されているはず。

エラー

githubpages公式のgem等由来であれば、Troubleshooting GitHub Pages builds
で、大体は悩み解消されるのではと思う。実は、投稿中に存在に気づきました。

追記:GitHub Pages ビルドのトラブルシューティング

Layoutが見つからないエラー

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

Invalid theme folder: _sass

参照:Invalid theme folder: _sass when using Github Pages with remote_theme #7630
参照:Page build failed: Invalid Sass or SCSS

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

Liquid Exception: invalid byte sequence in UTF-8

参照
- Github: "Liquid Exception: invalid byte sequence in UTF-8..." with binaries #5181
- Jekyll: Error: invalid byte sequence in UTF-8

単なる文字コードのエラーではあるが、最初に後者の方を参考にした。後者で質問している人は、同僚と共同編集している際にスペイン語の特殊文字が混入したという事に気づき、エラー解消したみたいだ。

キャプチャ.JPG
nav-linksでのWantedly用svgファイル中のsvgタグid属性が"レイヤー_1"となっている。。。
公式からダウンロードしたのにな。。

20191024追記:結局エラー処理できなかったので、泣く泣くエラー発生前までgit resetしました。。

カスタマイズ

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

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

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

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

head.html
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <!-- Enable responsiveness on mobile devices-->
  <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>

  <!-- CSS -->
  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}" />
</head>

ページネーション機能

jekyll関連gemにページネーションがあり、プラグインなので_config.ymlに書き加える。

_config.yml
plugins:
  - jekyll-paginate

paginate: 5
paginate_path: '/blog/page:num'
sidebar_blog_link: '/blog'
terminal
bundle install
bundle exec jekyll server

Googleアナリティクス

参照:Google Analytics for Jekyll

1. まず、GoogleアナリティクスをトラッキングIDを取得する。(割愛
2. 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 %}

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

_include/head.html

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

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

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

githubに上げて完了。

Twitterカード追加

参照
サルワカ:【2019年版】Twitterカードとは?使い方と設定方法まとめ
Supporting Twitter Cards with Jekyll
Twitter Cards on Jekyll

  1. _include/twitter-card.htmlを作成
_include/twitter-card.html
<!-- Twitter cards -->
<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 %}
<!-- end of Twitter cards -->

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

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

3.gitにpushし、Twitter Card Validator で確認

sidebar-nav-link

キャプチャ.JPG
こんな感じで、サイドバーにnavlink付け足したい。

svgファイルの最適化

順序的には下の文字コードエラーの後なのだが、まあ。
SVGファイルの最適化を、vscodeの拡張機能svgoを利用して行った。

使い方は、書いてある通り。
長々と数行に渡って記述されていたsvgファイルから余計なタグが取り払われ、1行コードになってた。

wantedly.svg
# ※wantedly公式ダウンロードサイトからDLしたものを最適化した。DLリンクはエラー↓の文字コードの所。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900"><path fill="#fff" d="M100 208.6h100l150 362.1L400 450 300 208.6h100l50 120.7 50-120.7h100L500 450l50 120.7 150-362.1h100L600 691.4H500l-50-120.7-50 120.7H300z"/></svg>

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

前のは自分好みのデザインではあったが、PCファーストで訪問者的にはよろしくなかった。

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

実作業

GithubPages公開にはマスターブランチしか使えない。ので、ブランチを作成して、そこで作業する。

git branch changeDesign
git checkout changeDesign

Gemfile_config.ymlから不要なものを削除

今回は外部テーマを使わないので、外部テーマのgem類は要らない。削除した結果↓

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'

_config.ymlは割愛。今回はpaginationも削除した。

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

自分でデザインを構成するには、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
|   └── 2009-04-26-barcamp-boston-4-roundup.md
├── assets
|   └── jpg / png 画像類
└── index.html # can also be an 'index.md' with valid front matter

スクロール関連の変更

サイトコンテンツが画面高を超えると、右端にスクロールバーが現れ、背景画像サイズが変わるのがいやっだ。あと、スクロールしても背景画像は動かないようにした。なお、背景画像はbodyにcssで指定。

_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;
  }
}
4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
OriverK
農学学士。植物学等を専門に学び、所属研究室では画像処理による農作物列検出の研究。卒業後は食品系企業に就職したが幸か不幸か退職することになり、この機を逃すまいと勉強を本格的に再開し、現在の転職活動に至る。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?