less than 1 minute read

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

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

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

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

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

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

  • jekyllのセットアップ
  • ブログの中身の変更
  • テーマの変更(今ココ!)

jekyllのテーマ

最初はデフォルトのテーマ(minima)でブログを立ち上げてみたものの,拡張性を考えるとサイドバーが欲しくなってきたのでサイドバーがあるテーマに移行する.jekyllのテーマはネットで探せば色々出てくる.最初はシンプルなminimalにしようと思ったのだが,デフォルトで使えるレイアウトがminimaより少なかったのでminimal mistakesというのにしてみた.ただ基本的にどのテーマを選んでもここに書いてある内容通りで良いはず.

1. ローカルに新しいテーマをインストールする(option)

多分この操作はローカルでも表示を確認したい人以外はいらないが,ローカルから見れたほうが何かと便利なのでやっておく.ローカルに新しいテーマをインストールする.Gemfileを以下のように編集した.

# gem "minima" >> コメントアウト
gem "minimal-mistakes-jekyll"

その上で第一回目と同じようにbundle installを実行する.

sudo /path/to/bundle install

これでインストールは完了した.

_config.yamlファイルの修正

_config.yamlファイル内でテーマを設定してある部分があるのでそこを修正する.

remote_theme: "mmistakes/minimal-mistakes@4.24.0"
plugins:
  - jekyll-include-cache

基本的にはgithub-pagesを利用している場合はこれで動くようになる.

テーマを変更するときの注意

テーマによって変数が微妙に異なるため,自分で色々設定をカスタマイズしていた人は修正が必要.初心者のうちはあまり設定をいじらずにどのテーマにするかじっくり選んだ方がよいかも...