github-pagesを使ったブログの作り方 part3

このブログの作り方(工事中)

github pagesを使ってブログを作成する過程を記録として残しておくことにする．私の腕前としてはgithubは普段から使っているがhtmlなどの知識はほぼゼロという状態からのスタートで，この記事もgithubについてはある程度使える，macも基本的なコマンドについては使えるという前提で書いていく予定．似たような方の参考になればと思う．

そもそもgithub pagesとはgithubのレポジトリをウェブサイトの形で公開できるサービスで，サーバー代がかからないのが大きな利点だ．記事はmarkdown形式で書けば自動的にhtmlに変換して公開してくれるので普段からmarkdownに慣れている人間には記事を書く負担が減るのも良い．

github pagesではサイトの静的ジェネレーターを活用して見た目や構造を整えることができる．例えば新しくブログ記事を書いたらトップページに新着情報として載せてほしいといったブログとして基本的な機能を利用するにはなんらかのジェネレータを活用するのが手っ取り早い．デフォルトではjekyllというジェネレータを使うことができるのでとりあえずはこれを使う方法で進める．

github pagesとして外部に公開するページを作るだけなら簡単なのだが，jekyllを入れてサイトの体裁を整えるところに苦労した．基本的な手順はgithubの公式docに従っている．

記事が長くなりそうなのでいくつかのステップに分けておく．今日は2回目で，具体的に新しいページを作ったり表示をいじってみたりということをやる．

• jekyllのセットアップ
• ブログの中身の変更
• minimal mistakesテーマを使う

テーマの変更

jekyllでは既に用意された色々なテンプレートを使ってブログを作れる．前回の記事ではデフォルトテーマのminimaを使っていたが，このテーマはデフォルトでサイドバーが入っていないという問題点があってちょっと使いにくいということで，サイドバーがあるテーマとしてminimal mistakesというのをみつけたのでこれを使ってみる．

インストールは簡単で，Gemfileと_config.ymlを以下のように編集する．

source "https://rubygems.org"

gem "github-pages", group: :jekyll_plugins
gem "jekyll-include-cache", group: :jekyll_plugins

# 注意: 他にremote_themeまたはthemeの行がある場合はその行は削除する．
remote_theme: "mmistakes/minimal-mistakes@4.24.0"

Minimal mistakesにかぎらず，他のテーマを使う場合でもGemfileと_config.yamlの変更のみですむ場合が多いと思う．Gemfileを更新したらbundleで実際にローカルにインストールする．これでサイトの見た目が変わったことがわかると思う．

_config.ymlの設定

Minimaからテーマを変更しても，基本的なディレクトリ構造は同じなので前回作ったブログポストはそのまま使える．ただし，_config.ymlの細かい設定は異なるのでこちらはちゃんと設定する．設定の花形としてはgithubレポジトリが参考になると思う．細かい解説は公式ドキュメントを参照．

# google analyticsの設定
analytics:
  provider: "google-gtag"
  google:
    tracking_id: "G12345678"
    anonymize_ip: false # default
	
# google search console
google_site_verification: "yourVerificationCode"

Minimal mistakesのいじり方

テーマのカスタマイズ方法について述べる．細かい部分は違っても多くのテーマで似たような操作が必要なはずだ．Minimal mistakesのgithubレポジトリを見てみると，_layoutsにいくつかのスタイルのhtml(Liquid)ファイルがある．この_layoutの中にhomeやpostといったスタイルのファイルがおいてある．これらのファイルは_includesにおいてあるヘッダーやフッターなどの共通部品のhtmlファイルを参照している．

一方でcssファイルは_sass以下に入っており，最終的にassets/css/main.scssで読み込んでいる．cssをカスタマイズする場合は_sass内のファイルを直接修正するのではなく，main.scssを修正する方がメンテナンスの面で良い．

dir
 |
 |- index.md
 |
 |- _config.yml
 |
 |- _posts/
 |
 |- _site/
 |
 |- _include/
 |
 |- _sass/
 |
 |- assets/css/main.scss

トップの最新記事にサムネイルを表示したい

ブログを書くに当たって，できるだけ今までのブログと似たような機能を盛り込みたいということで，重視していたことの一つが最新記事にサムネイルを表示すること．githubで運用するような技術系のブログならサムネはどうでも良いが，今回のような趣味のブログだとサムネがあった方が何をやった記事かわかりやすい．そこで今回の記事では最新記事のカスタマイズについて述べる．

まず，minimal-mistakesでの最新記事の表示はarchive-single.htmlというファイルで実行される．そこでこのファイルをコピーしてarchive-single-blog.htmlという名前をつける．サムネイル表示する場合にはhtmlのfloat:left機能を使うことにした．そのためにサムネイル，description，そしてそれら全体のためにdivを用意する．if文などでコードが複雑になっているが，やっていることは3つの要素をdivで囲んでいるだけ．

<div class="list__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="" rel="permalink"></a>
      
    </h2>
    

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          1 minute read
        
      </span>
    
  </p>


	
<!-- 最新記事のためのdiv.この中にサムネイルと記事のdescriptionを入れる -->	
    <div class="archive__item-subbox">
    
<!-- descriptionのためのdiv. -->	
　　　
    </div>
  </article>
</div>

対応するcssはassets/css/main.scssに以下のように追記する．

// メインページのRecent postにサムネイルを表示する
.archive__item-subbox {
  position: relative;
  overflow: hidden;
}

// サムネ用
.archive__item-teaser-blog {
  position: relative;
  border-radius: $border-radius;
  overflow: hidden;
  float: left; //左右に分割するため
  width: 40%;  //画像の幅を40%に
  margin: 2.5%;
  margin-top: 0;
  img {
      width: 100%;
  }
}

// 記事のdescription用
.archive__item-excerpt-content {
  width: 55%; //幅を55%に
  overflow: hidden;
  float: left; //こっちにもfloat leftが必要だった
}

ここまでやった後で，home.htmlでarchive-single.htmlとなっているところをarchive-single-blog.htmlに変更する．これで設定は完了した．