JekyllとGitHub Pagesでブログを作る

はじめに

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

さてさて、僕はこうしてQiitaに投稿していますが、プログラミング以外のことを投稿したくなることも多くなってきました。Twitterは140字しかないので、情報というほどの情報を載せることができません。

ブログ作っちゃおうううううううう！！！！！！！！（狂気）

基礎知識

GitHub Pagesって？

GitHubで公開リポジトリを作り、その中にhtmlファイルを乗っけることでGitHub側がいい感じにサイトとして公開してくれるサイトです。裏の魔法については知りませんが、まぁそういうことです（）

じゃぁJekyllって？

静的サイトを作るときになんか便利なやつです。これが無かったら、サイトを作るためにhtmlにいろいろめんどくさくコピペしてスタイルを記述していかなければなりません。この作業を身代わりしてくれて、かつMarkdownで記述できるという強者です。よく分かりませんが動けばよしということで。

準備するもの

• Gitインストール済みパソコン（僕は経済的な都合でWindowsです）
• GitHubアカウント
• やる気

こんなもんかな？

環境構築

Rubyのインストール

まずこちらのサイト（Ruby Downloads）に行って、自分の環境に適合したRubyをダウンロードしましょう。基本的に最新版でいいと思います。

ダウンロードしたら開きます。（管理者権限は要求されませんでした。）

適当に同意して、Next!

レッツゴー！

進んでいきます。

終了したらそっと閉じておきましょう。

　
その後コマンドプロンプトで、

$ ruby -v

と打って

ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x64-mingw32]

と返ってきたら多分あってます。

Jekyllのインストール

コマンドプロンプトで、

$ gem install jekyll bundler

と叩きます。ちょっと待つと色々出てきます。

そのうち終わります。

リポジトリ作成

適当にリポジトリを作成します。僕の場合は「shirokuma-89.github.io」にしました。他のでもできなくはないですが、あえてほかの理由にする理由もないかと思われます。もちろんPublicにしておきましょう。

出来たリポジトリを、何でもいいのですがSourceTreeかなんかでクローンしておきましょう。

そのリポジトリでターミナルを開き、

$ jekyll new hogehoge

と打ちます。そしてしばらくたつと、先ほどクローンしたディレクトリの中にhogehogeってフォルダができてると思うのでその中身を、引っ張り出してhogehoge.github.ioの直下に引っ張り出します。空になったhogehogeフォルダは消して大丈夫です。

クローンしたディレクトリに移動して

$ jekyll serve

と打つと、http://127.0.0.1:4000/ にローカルサーバーが立ち上がります。チェックしてみましょう。

やったぁ！(≧▽≦)

出来たらコミットしてプッシュしておきましょう。この際もうmasterに直接でいいです（笑）

リポジトリの設定

リポジトリの設定ページにアクセスし、下のほうへスクロールして、

こうなっていたら成功です！初期設定完了！

まとめ

意外とスムーズにいきました。もしわからないところがあったらお気軽にコメントください！まってます。じゃぁね！

次回予告

Jekyllにテーマを設定していきます！
JekyllとGitHub Pagesでブログを作る＠テーマ設定編