ブログを書く場所をJekyllへ移行してみた

今後はこちらでブログを書いていこうと思っています。
乗り換え理由とかは既に向こうで書いたので省略。

kotakawase.net

ここでは、乗り換え手順だったり、Jekyllを使ってみたい方が参考になりそうなことを書きます。

そもそも、Jekyllとは

Jekyll(ジキル)は静的サイトの生成を行うための、RubyGemsで配布されているRuby製のツールのことです。生成までを行なってくれるので、簡単にブログやWebページを作ることができます。

Jekyllを触ってみる

前提

前提として、Rubyの開発環境が必要になってくるのでインストールしておきます。Jekyllの公式ドキュメントにもある通り、バージョンについては2.5.0以上が必要条件として明記されています。(僕は3.1.0を使っています)

jekyllrb-ja.github.io

Jekyll install

Jekyllをインストールします。

gem install jekyll

バージョン確認。

❯ jekyll -v     
jekyll 4.2.2

Jekyll new

以下のコマンドを入力すると、静的サイトの雛形が生成されます。プロジェクト名は任意の名前に変えれます。

❯ jekyll new プロジェクト名

生成後は、そのプロジェクトディレクトリへ移動しておきます。

❯ cd プロジェクト名

Jekyll server

以下のコマンドを入力し、プロジェクトを立ち上げます。

❯ bundle exec jekyll server

立ち上げた際、下のようなエラーログが表示されていた場合は、webrickというHTTP Webサーバの機能を提供するRubyGemsをインストールする必要があります。

/Users/kota/.rbenv/versions/3.1.0/lib/ruby/gems/3.1.0/gems/jekyll-4.2.2/lib/jekyll/commands/serve/servlet.rb:3:in `require': cannot load such file -- webrick (LoadError)
省略..

Gemfileに追記 & インストール。

❯ bundle add webrick

再度bundle exec jekyll serverを実行し、http://127.0.0.1:4000 へアクセスしましょう。

Welcome to Jekyll !!

以下の画面が表示されるはずです。

個人的にこれでも十分ブログとして運用していきたい。いや、そう思っていましたが、Jekyllには色んなテーマが用意されています。テーマの変更も比較的簡単にできるので、気になるテーマがあれば検討してみてもいいかもしれません。

下のリンクにテーマを公開しているサイトがまとめられているので、参考になりそうです。

jekyllrb-ja.github.io

僕はtaleというテーマを使っていて、一部デザインを修正したりしました。
何も変更しないときのテーマは、minimaが適用されているみたいですね。

その他でやったこと

Netlifyへデプロイ

www.netlify.com

GitHubPagesでもよかったのですが、こちらだと、リポジトリをパブリックで公開しないといけない制約があったのでやめました。

独自ドメインの適用

NetlifyだとURLが、kotakawase.netlify.appになります。もちろんこれでよかったのですが、せっかく作ってみたので独自ドメインを適用することにしました。

手順については、以下の記事が参考になりました。

お名前.comとNetlifyで独自ドメインを設定する | mintsu's blog

本当は、kotakawase.comにしたかった…。空きがあったのですが、先に今のドメインを購入してしまったため、1円で購入できなくなってしまった。

デザインを自分好みにした

デザイン力というよりかは、コーディング力が試されているかのように時間が溶けました。taleのスタイルシートはSassで書かれていますが、完全に雰囲気で変更したり修正したりした気がします。

もっと綺麗にしたいのが本音ですが!

おわりに

というわけで、ブログを書く場所を変更したというご報告と、Jekyllでブログを作る手順を簡単にまとめてみました。
もともと自作ブログに興味があったのですが、このJekyllというツールを知るきっかけとなったみそしるさんに感謝申し上げます。ありがとうございました。

触発された記事。

mssp160.netlify.app

mssp160.netlify.app

みそしるさんは、ご自身で1からデザインをコーディングしたとのこと…。
素敵なデザインなので、ぜひ参考にしたいと思います。

ひとこと

移行したとはいったが、はてなブログの更新をやめたとはいってない。
(保険かけるのやめい)