Jekyll(Minimal Mistakes) + GitHub Pagesで個人ブログ作ってみた話2

開発環境

• WSL
• Visual Studio Code

MMテーマのインストール

リポジトリのフォーク

mmistakes/minimal-mistakes右上の「Fork」マークからForkします¹。

もちろんフォークした場合のマニュアルも用意されています。

続いて、フォークしたリポジトリに移り、以下の図の矢印部分に該当する部分をクリックしURLをコピーして下さい。

自分の場合はWindows10 + WSL(Ubuntu18.04)環境でしたので、ターミナルで以下のコマンドを叩き、Gitリポジトリをローカル環境（自分のpc内）に持ってきます。

git clone あなたがコピーしたURL

GitHub Pagesを使う場合

GitHub Pagesを使う場合、GitHubでのレポジトリ名をあなたのユーザーネーム.github.ioとする必要があります。

不要なファイルとフォルダを削除

Forkした場合、以下のフォルダやファイルは不要ですので削除しましょう。

• .editorconfig
• .gitattributes
• .github
• /docs
• /test
• CHANGELOG.md
• minimal-mistakes-jekyll.gemspec
• README.md
• screenshot-layouts.png
• screenshot.png

Jekyllなどのインストール

WSL(ubuntu20.04)上でJekyllを動かすためのRubyその他諸々の環境を構築する必要があります。Ubuntuを利用するのであれば下のサイトを確認してください。

まれに上記サイトの通りインストールしようとしても上手くいかない場合があるようです。その場合は大抵Ubuntu側のアップデートなどによる影響であることが多いので根気よくggってください（もちろん他の要因が原因である場合もあります）。

サイトを動かすためのアップデート

Jekyllで生成されたサイトはRubyGemsが公開しているGemを使用しています。これにより複雑なコードを自分で書くことなく様々な機能を実装できます。あなたのリポジトリ内にもGemfileが存在していると思います。

さらに説明すると、Bundlerと呼ばれるgemのバージョン管理を行うプログラムによってgemの依存関係を記録したGemfile.lockが生成されます。

ForkしただけだとGemfileに記されたサイトの立ち上げに必要なライブラリがインストールされておらず、ローカル環境でデバッグなどを行うことができない状態にあります。そこで以下のコマンドを叩いてください。

bundle update
bundle install

このコマンドで何を行っているのか気になる方はQiitaの記事「bundle install と bundle updateの違いについて」で分かりやすく説明されているのでご確認ください。

サイトの生成

上記の処理が終わったら次のコマンドを実行するだけでMMテーマのページが生成されます。

bundle exec jekyll serve

http://127.0.0.1:4000/で↓の感じで確認できると思います。

こういった状態でデバッグを行うこともできます。また_draftsフォルダを作り、記事の草案（ドラフト）をそのフォルダに入れ、次のコマンドを叩くことで草案を反映させたままデバッグすることも可能です。

bundle exec jekyll serve --trace --drafts --livereload

_config.ymlを弄ってデザインをいい感じに

ここからは_config.ymlに必要事項を書いていきましょう。下に私の_config.ymlの一部を掲載しています。

_config.yml内に用意されている変数とその説明をまとめても良いのですが、結局は自分で一通り弄ってみないと分からない部分が多いと思いますので、ここについては下のサイトをご確認頂きながら根気よく色々試されることを強くオススメします。

• Minimal Mistakes Configuration

Site Author やSite Footerの設定を弄るだけでもかなり雰囲気が変わると思います。

ただし一つだけ注意ですが、記事内でコメントを残せるcomments:のstaticmanappについてはMMのマニュアルの説明が一部古くなっています。

staticmanappはこちらのリポジトリで紹介されていますが、MMのマニュアルに従っても正常に動作しません（2020/6/17現在）。

従来、staticsmanappというgithubユーザーが使われていたのですが、現在ではこうしたユーザーの利用が廃止されています。

代わりに、Herokなどへstaticmanアプリケーションをデプロイすることでコメント機能を実現できるようになっています（自分は面倒だったので実装を諦めました）。

追記（2020/8/27）

コメント機能を付けなくても質問があればTwitterにくることが分かったのでコメント機能は廃止しました。

GitHub Pagesとして公開

一旦、サイトデザインや記事の作成が終了したら自分のリポジトリへ変更点をプッシュしましょう。以下のコマンドはあくまでプッシュまでの例です。Gitのインストールは下記サイトなどをご確認ください。

• Ubuntu 18.04にGitをインストールする

git add .
git commit -m "finish site's design and made a post"
git push origin master

branchを切らずgit に作業した場合は多少コマンドが変わるかもしれません。

ここまでくるとサイト公開まであと一歩です。

レポジトリの設定を変更します。詳細は↓サイトの手順 6以降をご確認ください。

以上です！お疲れ様でした (^^)