目次

1. 初めに

このブログは公開するにあたりGitHubPagesとJekyllを利用しています。 前回の記事でGitHubPagesで公開していることを伝えましたが、 大まかに段階を踏んで公開までの話をしようと思います。

2. サンプルサイト(中身空っぽ)の作成と動作確認

まずはGitHubPagesのみで完結するサンプルサイトを作成しました。

GitHubの画面で言われるがままに操作し、殆ど何もないサイトが出来上がりました。 こんなことができるのかというイメージの確認程度です。

サンプルサイト01

3. サンプルサイト(ブログっぽい何か)の作成と動作確認

次にGitHubPagesとJekyllを利用したサンプルサイトを作成しました。

Jekyllで静的なサンプルサイトを生成し、それをGitHubPagesで公開し、ブログっぽいそれなりのサイトが出来上がりました。

サンプルサイト02

ただ、使用を検討していたプラグインがGitHubPagesでは動作しないことがわかって残念です。 便利そうだったのに。。。

  • jekyll-last-modified-at
  • jekyll-archives

ローカルサーバでは動作しますが、GitHubPagesではJekyllがセーフモードとやらになってしまうらしく、動作しないとのこと。 GithubActionsなんかでひと手間掛かりそうなので今回は断念しました。 いつかの機会に代替案でも模索します。

因みに以下のページがサポートしているプラグインです。意外と少ない。

4. カスタムテーマを用いたブログの作成と動作確認

次に作成したサイトにカスタムテーマを適用しました。

Jekyllテーマの検索サイトで20ページ(400個のテーマ)まで確認して以下のテーマを適用したところ、ブログが出来上がりました。

ここまでは意外と簡単でしたが、テーマを編集するとなると意外と大変でした。 ただ、一旦満足できるレベルのデザインに仕上がったのでよしとします。

サンプルサイト03

なぜ大変だったかというと、自分はJekyll、GitHubPages、Liquidなどを今まで触ったことがなかったので、 新たに基礎から理解する必要がありました。 その上でこのテーマがどう作られているかを理解する必要があったからです。

そのために資産が綺麗に管理されてそうで、 理解の妨げになる余分な資産がなさそうなシンプルなテーマを最終的に選びました。 もちろん一番最初はデザインで選びました。

中身を詳しく確認すると改善点は沢山ありましたが、思った通りでこのテーマに満足しています。 自分ならデザインを１から決めてテーマを作成するなんて、センスないので出来ないです。

また、今回限りではなくこれからもテーマの編集は続けていくつもりです。

5. ブログ公開

最後にGitHubPagesでブログを公開します。

予めGitHubで設定しておくとプッシュするだけで、裏でJekyllがページを生成・デプロイしてくれて、 GitHubPagesが公開してくれるのですごい楽です。

6. 最後に

今回はブログを公開した時の流れ、感想、気になったことなどをまとめました。 いつか見返した時にこんなことやったなーと思い出す材料になると嬉しいです。

7. (付録)触った技術

付録として公開する上で触ったサービス、言語、ライブラリなどの説明をすごく簡単にまとめました。 (出典元2)

  • Jekyll
    • 静的サイトジェネレーター (SSG)
  • GitHubPages
    • 静的ウェブページのためのウェブホスティングサービス
    • ユーザーのブログやプロジェクトのドキュメント、1冊の本全体を公開するためにも使用できる
    • 内部でJekyllを使用できる
    • 上記以外を使用したい場合は、GithubActionsなどのCI/CDツールと連携が必要になる
  • Liquid
    • テンプレート言語
    • 別のメインとなる言語(今回はHTMLやJavaScript)に埋め込める言語
  • FontAwesome
    • フォントとアイコンのツールキット
  • Bootstrap
    • フロントエンドWebアプリケーションフレームワーク
    • HTMLおよびCSSベースのデザインテンプレートとして用意されている

8. 参考サイト

今回公開するにあたり参考にしたサイトです。 とても助かりました。ありがとうございす。

9. 出典元

  1. GitHubPages
    • 記事ヘッダ画像に使用しました
  2. ウィキペディア