GitHub Pagesでブログを作ってみた

今までお世話になっていたQrunchのサービス終了に伴い、GitHub Pagesでブログを作ってみた。

GitHub Pagesを使ってみた理由

  • Markdownで記事を書ける
  • .mdファイルをGitHubに上げると、自動でHTMLに変換して公開してくれる仕組みがある
    • Qrunchの記事が.mdファイルでエクスポートされたので、楽に移行できそう
  • gitでコンテンツのバージョン管理ができる
  • ブログのレイアウトのテンプレートが予めいくつか用意されている
    • →手っ取り早く始められて、取っ付きやすい
  • レイアウトを好きなようにカスタマイズできそう

【作り方その1】シンプルにページを作成する方法

以下のページが分かりやすかった：
GitHubを使ってMarkdown文書を５ステップでホームページとして公開する方法

このページに書かれた手順で簡単に始められる。

ハマった点

GitHub Pagesの設定をNoneからmaster branchへ変更したら、Themeの変更を行う前に一旦設定を保存する必要がある。
→GitHub Pagesの設定を変更した後、設定を保存する前にThemeの設定を行ったら、gh-pagesというリポジトリが作成された。そしてトップページの内容が、gh-pages内のファイル(自動生成されたもの)で置き換わってしまった。

【作り方その2】Jekyllを使ってGitHub Pagesサイトを作成する方法

ローカルでサイトのプレビューができるようにしたくなった。
そのためにはJekyllを使ってサイトを作成する必要があるらしいので、試してみた。

手順

以下のサイトの内容に沿って行った：
Jekyll を使用して GitHub Pages サイトを作成する

ハマった点

1. Jekyllサイト作成時

症状

サイトを作成するセクションの7にて、
bundle exec jekyll 3.9.0 new .を実行すると、Could not locate Gemfile or .bundle/ directoryとエラーを吐く。
試しにjekyll 3.9.0 new .を実行すると、-bash: jekyll: command not foundと言われてしまった。

解決方法

(色々試したので、ちょっとうろ覚え・・・)

  • gem update --systemを実行(→参考サイト)
    • 失敗したので、sudo gem update --system -n /usr/local/binを実行(→参考サイト)
  • 再度gem install --user-install bundler jekyllを実行
  • 以下のアドバイスを実行(→参考サイト)： 
    Did you first run jekyll new <project-name>?
If not start with that. In your Gemfile add gem 'jekyll', '3.8.7'.
Run bundle update which will download version 3.8.7 of the gem.
Then you can run bundle exec jekyll build or bundle exec jekyll serve.

    (この時点ではbuildもserveもまだ通らないが、大丈夫)

  • $ bundle updateを実行

2. ローカルでのテスト時

症状

サイトを作成するセクションの11→サイトをローカルでビルドするセクションの3にて、
(Gemfileにgem "github-pages", "~> VERSION", group: :jekyll_pluginsを追記後、)
bundle exec jekyll serveに失敗する。
Could not find gem 'github-pages (~> 3.9.0)' in any of the gem sources listed in your Gemfile.とのエラーを吐く。

解決方法
  • github-pagesのバージョンの指定に誤りがあったので修正
  • 以下のアドバイスを実行(→参考サイト)： 
    this worked for me
specify the version for gem "github-pages" in GEMFILE:
gem "github-pages", "~> 203", group: :jekyll_plugins
replace the version ( 203 ) above to the one from https://pages.github.com/versions/
then run:
$ bundle update jekyll
followed by :
$ bundle install
test site by launching it locally :
$ bundle exec jekyll serve

3. ページの公開後

症状

ローカルではレイアウトがうまくいっていたが、GitHub Pages上ではレイアウトが崩れている(CSSが効いていない感じ)

解決方法
  • _config.ymlの以下の箇所を修正(→参考サイト) 
    # baseurl と url を GitHub Pages のリポジトリに合わせる。
baseurl: "/tech_blog"
url: "https://marshmallow444.github.io"
注意
  • 上記でbaseurlの設定をGitHub Pages用に書き換えているので、ローカルでのテスト時はjekyll serve --baseurl ""のコマンドを使用する必要がある(でないとレイアウトが崩れる)

思ったこと

  • 最初はテスト用のリポジトリを作って、そこで色々試してみるのが良い
    • 失敗してもリポジトリごと消してやり直せる
  • GitHub Pagesではページのレイアウトもカスタマイズできるようなので、今後色々と試してみたい

終わりに

Qrunch、素晴らしいサービスでした。サービス終了してしまうのがとても残念です。
自分はQrunchで技術ブログ的なものを始めました。Qrunchのおかげで、自分の中にあった「勉強したことをアウトプットする」ことに対する心理的ハードルが下がったように思います。
今までお世話になりました。ありがとうございました。

参考