JekyllとGitHub Pagesでブログを作る＠テーマ設定編

こんちは！しろくま＠胡瓜です。

前回のあらすじ

前回はパソコンくんにRubyをインストールし、Jekyllの環境を構築しました。また、GitHubでリポジトリを作り、初期状態のPushが終わった状態です。詳細は前回の記事を参照してね。

今回やること

このシンプルすぎるテーマを改善していきます！

テーマ探し

まず自分にとって「これだ！」って感じのテーマを探していきます。

こちらのサイトとかにたくさん載ってるので、探してみましょう。

• jamstackthemes.dev
• jekyllthemes.org
• jekyllthemes.io
• jekyll-themes.com

見つけたらそのテーマのリポジトリをダウンロードして解凍してください。

ちなみにですが、僕はこちらのGaladaというテーマを使わせていただきました。

ここで皆さんに謝罪

前回の記事でいろいろコマンドたたいたり、ローカルサーバー立ち上げたりしてうほうほしていましたが、あれはJekyllがうまくインストールされているかの動作確認です！！！
あれがそのままサイトになると期待していた皆様方、

超スーパーウルトラハイパーすみませんでした！！！！！！！！！！！！

適用する

展開した中身を原始的な方法でコピペしていきます。一回リポジトリの中身を全消しして、先ほど回答したzipの中身を展開していきます。README.mdは別にしなくてもいいと思います。

こんな感じで、右のフォルダを全部左に突っ込んでください。（全消しして突っ込む前の画像です。）

では、正しく動いているか確認していきましょう。
僕が選択したテーマのREADME.mdを見ると、

To run the theme locally, navigate to the theme directory and run bundle install to install the dependencies, then run jekyll serve or bundle exec jekyll serve to start the Jekyll server.

訳:ローカル環境でそれっぽく動かすには、そのディレクトリで

$ bundle install

して、そのあとに

$ jekyll serve

か

$ bundle exec jekyll serve

してね☆

とのことだったので、指示通りコマンドプロンプトでこれらをたたいてみると、

今度こそ、できました！

_config.ymlの編集

ディレクトリ内の_config.ymlを編集していきます。書き方は例に示す通りです。その他テンプレートによっていろいろ付け加えがあると思うのですが、それに関してはテンプレートのREADME読んで頑張ってください。

title: ブログ名です
description: 説明をどうぞ
baseurl: "" #ダブルクォーテーションのみで大丈夫
url: "https://hogehoge.github.io/"

投稿

基本的に_postフォルダにマークダウンを作成してリモートにPushすると記事が投稿できます。形式についてはこれは使ったテンプレートによって違うので、そのテンプレートのREADMEを参照してください。

デザイン

テンプレートを元にデザインを自分好みに若干変更することもあると思います。その時はcssとかをご自分でいじってください。いじり方は割愛します。（そもそも全くいじれない人はGitHub Pagesでブログ作らないと思うので。）僕のテンプレートはscssを使うもので、デザインが崩れて一瞬はまったのですが、Node.jsをインストールしたら問題なく動かすことができました。

まとめ

• 無料でここまでカスタマイズできるGitHub PagesとJekyllはすごい！
• テンプレートをクローンして自分のリポジトリにコピペで基本的にOK
• うまく動かなかったら、しっかりとREADMEを読むこと！

以上、しろくま＠胡瓜でした！

お知らせ

しろくま＠胡瓜's Blogはこの記事を通して作ったブログです。頑張って更新しますので、是非！