Home Jekyllを用いたブログサイトの構築
Post
Cancel

Jekyllを用いたブログサイトの構築

はじめに

windows10で環境構築を行いました。LinuxとmacOS環境だともっと簡単できるみたいですが、自分はwindows環境で構築したので、少し手間が掛かりました。なので、このブログを作ろうと思ってました。少しでもブログサイトを構築したい方に参考にできれば幸いです。

Github Pagesを使って技術ブログサイトを構築するメリット

  • サーバー構築がいらない
  • 広告がない
  • mkファイルだけでブログが作れる(あとはJekyllが自動的にHTMLファイルに変換してくれる)

構築準備

オペレーティングシステム

  • Windows10

    開発環境

  • Visual Studio Code

構築

RubyInstallerを用いてRubyをインストールする

RubyとJekyllをインストールするのにもっとも簡単な方法はRuby for Windowsです。

上記の公式サイトからRubyがダウンロードできれば、デフォルトのままインストールを進めば大丈夫です。

インストールの最後のステップでは、コマンドプロンプトが自動的に起動されます。そこで、三つの設定選択肢がありますが、3番目のridk install MSYS2 and MINGW development tool chain に選択します。これはgemをローカルにインストールするために必要なパッケージです。 環境変数の変更を有効にするために、新しいコマンドプロンプトウィンドウを開きます。

Rubyがインストールされているかを確認するにはruby -v

RubyGemsをインストール

ここからZIPファイルをダウンロードするのがおすすめです。そのまま解凍して、フォルダの中でコマンドプロンプトを起動します。

  1. インストール ruby setup.rb
  2. バージョン確認 gem -v

Jelyllをインストール

gemをインストールした後、Jekyllをインストールができるようになりました。

  1. インストール gem install jekyll
  2. バージョン確認 jekyll -v

jekyll-paginateをインストール

  • インストール gem install jekyll-paginate

bundleをインストール

  1. インストール gem install bundle
  2. 必要なパッケージを補間する bundle install
  3. ローカルでサーバーを起動 bundle exec jekyll serve
    • サーバーが起動できたら、http://127.0.0.1:4000/ から構築したサイトをローカル環境で確認することができる。

カスタマイズ

さまざまなJekyllテーマが搭載されているサイト

  • https://github.com/topics/jekyll-theme
  • https://jamstackthemes.dev/ssg/jekyll/
  • http://jekyllthemes.org/
  • https://jekyllthemes.io/

プラグインもたくさん

  • https://github.com/topics/jekyll-plugin
  • https://github.com/planetjekyll/awesome-jekyll-plugins

作者はこのテーマにしました。

This post is licensed under CC BY 4.0 by the author.