LoginSignup
1
4

More than 1 year has passed since last update.

GitHub PagesとJekyllを使ってポートフォリオページを作ろう②Jekyll構築編

Last updated at Posted at 2020-03-26

前回
GitHub PagesとJekyllを使ってポートフォリオページを作ろう①GitHub Pages構築編

今回はJekyllの環境構築編です。

参考にしている良記事様

Jekyllって?

Webサイトを構成するHTMLファイル一式を出力するツールです。
特徴としては
・Rubyベースで動作する
・テーマを簡単に取得できる
MarkDownで書ける
GitHubPagesが公式サポート
といった感じです。MarkDownで書いたものをHTML出力してくれるみたいです。便利ですね。

Jekyllの環境構築

①まずはRuby

(Mac前提)
JekyllはRubyベースなのでまずはRubyをインストールします。これについては良い記事がたくさんあるので割愛させていただきます。
こちらの記事を参考にしてください。(投げやり)
homebrewrbenvrubyの順番でインストールする感じです。
https://qiita.com/Ficus/items/bdef5c2b504d7a4008fb

②Jekyllをインストール

ruby -vあるいはrbenv versionsでrubyの生存確認とバージョンをチェックしておきましょう。
確認ができたらgem install bundler jekyllでJekyllをインストールします。

※gemとはライブラリのことです。gemをインストール→ライブラリをインストールです。pip的なやつ。
※Bundlerはgem管理のライブラリです。詳細はこちら

Jekyllの生存確認もしておきましょう。
jekyll -v

Jekyll 使ってみよう

①Jekyllのプロジェクト作成

jekyll new [プロジェクト名]でプロジェクトを作成できます。
GitHub Pagesのリポジトリ名に合わせると良いでしょう。(***.github.io)
カレントディレクトリにフォルダが作成されるので、あらかじめJekyll用のディレクトリを作ることをお勧めします。
※リポジトリをクローンしても大丈夫です

②Jekyllスタート

作成したプロジェクトディレクトリに移動し
bundle exec jekyll serveでJekyllを起動します。
起動したらhttp://127.0.0.1:4000/にアクセスします。
**Welcome to Jekyll!**と表示されたページにアクセスできれば成功です。

構築完了

これでJekyll構築は終了です。次回以降、実際にJekyllを使用してページを編集してみようと思います。
ありがとうございました。

前回→GitHub PagesとJekyllを使ってポートフォリオページを作ろう①GitHub Pages構築編
次回→

1
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4