GitHub Pages

静的サイトジェネレーター Jekyllのインストール

GitHub Pages作成環境の構築 3/N

公開日: 2020-12-27
更新日: 2023-11-15

  Table of Contents

今回のスコープ

  • GitHub Pages作成環境の構築のための静的サイトジェネレーター Jekyllのインストール
  • 中華フォント現象の解消方法
  • sitemapの<lastmod>tagの設定

GitHub Pagesの個人ブログの制作環境としてJekyllを用いてます. 今回は, localにjekyllをインストール & いくつかの設定ポイントの紹介をします. localにJekyllをインストールする以外に dockerで対応する方法もありますが, この説明は後日とします.

Requirements for Jekyll

  • Ruby version 2.4.0 or higher
  • RubyGems
  • GCC and Make
  • GitHub Pagesの構成はすでにレポジトリーにあるとします（ない人はテンプレートのrepositoryをcloneしてください）

Jekyllのインストール

まず必要なパッケージをインストールします

1
2

% sudo apt update && sudo apt upgrade -y
% sudo apt install ruby ruby-dev make gcc gem

Version確認をします

1
2
3
4
5
6
7
8
9
10
11
12
13
14

% ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-linux-gnu]
% gem -v
3.1.2doctoc\: false
% gcc -v
(略)
gcc version 9.3.0 (Ubuntu 9.3.0-17ubuntu1~20.04) 
% make -v
GNU Make 4.2.1
Built for x86_64-pc-linux-gnu
Copyright (C) 1988-2016 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

次にPATHを通します。

1
2
3

echo '# Install Ruby Gems to ~/gems' >> ~/.zshrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.zshrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.zshrc

Jekyllとbundler gemsをインストールします。

1

% gem install jekyll bundler

GitHub Pages作成環境の構築

local serverでブログが表示できたことを確認したら、インストール完了とする。

1
2
3
4
5
6
7
8
9
10
11
12

% git clone https://github.com/RyoNakagami/RyoNakagami.github.io
% bundle install #Gemfileからdependenciesをinstall
% bundle exec jekyll server #Test
Configuration file: /home/dst/RyoNakagami.github.io/_config.yml
            Source: /home/dst/RyoNakagami.github.io
       Destination: /home/dst/RyoNakagami.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.502 seconds.
 Auto-regeneration: enabled for '/home/dst/RyoNakagami.github.io'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

Tip 1: Github-Pagesのフォントの変更

解決したい症状

  • Defaultの設定のままだと、日本語フォントが違和感のある形で出力される

症状の発生原因としては以下が考えられます:

  • 中華フォント現象は 中国語を日本語よりも優先指定している場合 に起こります(例：糸偏の漢字を出力する時など)
  • cssのfont-familyに日本語フォントが設定されているか？そこでの優先順番はどのようになっているかを確認する

対策方針

  1. css/ryo-blog.cssを開きます
  2. bodyのfont-familyを確認し、自分の好みのフォントと順番に設定する
  3. 保存 & git push

実行例として, css設定ファイルを開きfont-familyの設定を確認したところ、以下：

1
2
3
4

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  ...
}

"PingFang SC", "Hiragino Sans GB"といった中華フォントが上位に設定されている一方、日本語フォントが設定されていないことがわかります. ですので、個々の設定で日本語フォントを上位に置く形で修正します.

1
2
3
4
5
6

body {
  /*font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  */
  font-family: -apple-system, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  ...
}

Tip 2: sitemap.xmlの<lastmod>tagの設定

Def: sitemap

sitemapとは, ウェブサイト上のページやビデオやファイルに関する情報(created, modified)やそれぞれの関係性を記載したファイルのこと. Googleを始めとするSearch engineはsitemapを参照してcrawlを実施 & ウェブサイトの情報を集めてsearch engine検索結果に表示できるようにindexしています.

sitemapの形式例としては以下となります:

1
2
3
4
5
6
7
8
9
10
11
12

<urlset xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>
https://ryonakagami.github.io/2020/10/01/terminology-FTE/
</loc>
<lastmod>2023-10-08T00:00:00+00:00</lastmod>
</url>
...
<url>
<loc>https://ryonakagami.github.doctoc\: falseio/page25/</loc>
</url>
</urlset>

sitemapは本当に必要か？

sitemapが設定されていなくても, ウェブサイトの規模が小さい場合はGooglebotさんは上手い具合にページを見つけてくれます. Googleがsitemapが必要ないかもしれない条件を以下のように示しています:

  • Your site is “small”: 目安としてはページが500以内
  • Your site is comprehensively linked internally: Home pageから適切にたどることができる状態になっている
  • You don’t have many media files (video, image) or news pages

どのようなとき必要なのか？

基本的にはCrawlerに「いつ, なにを優先的にクロールして欲しい」かというシグナルを送りたいときに設定します. シグナルを送ったほうが良い状況例として,

  • Your site is large: 大きいとGooglebotはページを見つける(discover)することができない可能性がある
  • Your site is new and has few external links to it: ネットの海の中で孤島となっているサイトはクローラーさんには見つけづらいため
  • Your site has a lot of rich media content (video, images)
  • Your site changes quickly: 頻繁に更新する場合, クローラーによる探索が間に合わないため

Jeklyllでsitemap.xmlを作成する方法

基本的にはsitemapはマニュアルで作成するものではなく, プラグインなどを用いて自動的に作成します. このブログでは, jekyll/jekyll-sitemapを用いています.

設定方法としては,

  1. Gemfileにてgem 'jekyll-sitemap'を書き加える
  2. bundleする
  3. config.ymlに以下のようにpluginsリストにjekull-sitemap書き加える
1

plugins: [jekyll-paginate, jekyll-sitemap, jekyll-archives]

すると自動的にURL locationなどを含んだsitemapを作成してくれます.

追加で設定すべき項目: <lastmod> tag

記事を公開後編集し直したりするときにもう一度crawlerに情報を読み込んでもらいたいときがあります. このとき, この情報をcrawlerに伝えるためには<lastmod> tagを用います.

Defaultではpost.date情報を参照し, creation dateをvalueとして格納しますが, Front Matterに last_modified_at:をdateで指定するとその日付を<lastmod> tagとして格納してくれます.

Front Matterとはheaderにある

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---
layout: post
title: "静的サイトジェネレーター Jekyllのインストール"
subtitle: "GitHub Pages作成環境の構築 1/N"
author: "Ryo"
header-style: text
header-mask: 0.0
catelog: true
mathjax: true
last_modified_at: 2020-12-27
tags:

- GitHub Pages
---

のことです.

REMARKS

  • Google cralwerはsitemapにおける <priority> and <changefreq> valuesを無視します
  • <lastmod> valueは一貫性がある（前回の更新日よりも後に更新されているなど）場合のみに参照されるとのこと

References

Share Buttons
 Share on:
Feature Tags
Leave a Comment
(注意：GitHub Accountが必要となります）
CONTENTS