Ruby未経験でもできる！Jekyllで転職活動用の自己紹介サイトを作成する

Last updated at 2024-11-11Posted at 2024-10-09

はじめに

転職活動を始めたんですが、忙しくて時間が取れないので少しでもオートマチックに活動ができるようにパブリックな自己紹介サイトを作りました。
あわよくばRubyの勉強になればと思い、Jekyllを使いました。
結果的にRubyの勉強には全くならなかったのですが、デザインセンスがなくても簡単にそれっぽく作れたので記事にします。

作った自己紹介サイト

とても長い記事になってしまったのですが、この記事の順を追ってコマンドを実行していけばほぼ同等のものが作れます。

環境

Mac M2
Ruby

$ ruby -v
ruby 3.3.5 (2024-09-03 revision ef084cc8f4) [arm64-darwin23]

Jekyllとは

Rubyで開発された静的サイトジェネレーター
Markdownで書ける
GitHub Pagesに割と簡単にデプロイできる。

Jekyllは、ブログやポートフォリオ、技術ドキュメント、個人ウェブサイトなど、簡単なウェブサイトを素早く構築できるのが特徴です。
サーバーサイドの処理が必要ない静的サイトジェネレーターなので、ホスティングコストが低く、特にGitHub Pagesを使えば無料で公開できます。

作っていく

RubyとJekyllのインストール

Mac前提です。
他言語と同じでインストールしてPATHを通すだけ。

# Ruby
$ brew install ruby
$ echo export PATH="/opt/homebrew/opt/ruby/bin:$PATH" > ~/.zshrc
# jekyll
$ gem install bundler jekyll
$ jekyll -v
jekyll 4.3.4

gemってcomposerとかnpmみたいな依存関係管理してくれるものだと思うんですが、このインストール方法だとグローバルっぽいのでちゃんと範囲決めたりDocker使ったほうがいいかもですね。

Jekyllサイトを作成

Jekyllがインストールできたら早速作っていきましょう。
jekyll new {プロジェクト名}で新しいディレクトリができてよしなに作ってくれます。

$ jekyll new qiita-jekyll
$ cd qiita-jekyll

Hello World（飛ばしてもいい）

とりあえずこの時点でHello Worldしたい方は以下のコマンドでインストール&ビルド&実行をします。
bundle installは、GemFileに記載された依存関係をインストールします。

$ bundle install
$ bundle exec jekyll serve

http://localhost:4000/ にアクセスするとトップページに飛べます。

minimal-mistakesテーマのインストール

そのままでも自己紹介サイトくらいなら十分作れそうですが、テーマを入れてみます。

画像をいい感じに貼れたり、全体的な色もざっくり変えられるテーマです。
なんだかこんな感じのページよく見るなあと思って採用しました。

プロジェクトの中のGemFileに以下を記述します。

source "https://rubygems.org"

gem "jekyll", "~> 4.3.4"
gem "minimal-mistakes-jekyll", "~> 4.24.0"

テーマは更新頻度高くないみたいでjekyll自体の最新バージョンに追いついていないみたいなので、ちゃんとバージョン指定してあげます。
依存関係を追加したのでもう一度インストールします。

$ bundle install

プロジェクト内にある_config.ymlにもテーマを追記します。
これはPagesへのデプロイ時に書き換えます。

# 元のテーマはコメントアウトしておく しなくても動きます
#theme: minima
theme: "minimal-mistakes-jekyll"

ビルドして確認

-lオプションでホットリロードができるようになるのでつけておきましょう。
_config.ymlを編集した際は後述のホットリロードの設定をしておいてもビルドが必要になります。
--baseurl-""がついている理由はこちら

$ bundle exec jekyll serve --baseurl="" -l

http://localhost:4000/ にアクセス
初期テーマと違うテイストのページに変わっていると思います。

Sassの警告がうるさいとき

jekyllのバージョンのせいだと思うんですが、Sassの非推奨関数を使っているという警告が無限に出ると思います。
ログに流したくないときは_config.ymlに以下を記述します。

sass:
  quiet_deps: true

再ビルドして実行すれば警告が出力されなくなります。

ページを作っていく

Front Matter

jekyllは基本的にMarkdownで記述していくのですが、それぞれのページにFront Matterという---で囲んだyml形式のフィールドがあります。
ここには変数だったりテーマごとの設定を書くことができます。
mistakesではいい感じに画像を配置してくれる設定があるので使ってみましょう。

ざっくり以下2点は覚えておいたほうがいいフィールドです。

layout
こちらにあるレイアウトが使えます。

permalink
ページへのパスになります。
このページはトップページなので/です。

index.markdown

---
layout: single
title: "ここがタイトル"
date: 2024-09-25
permalink: /
header:
  overlay_image: https://user0514.cdnw.net/shared/img/thumb/aig-ai23419012-xl_TP_V.jpg
  overlay_filter: 0.5
  overlay_color: "#000"
  caption: "ここがキャプション"
  actions:
    - label: "ここがリンク"
      url: https://qiita.com/
      class: "btn--primary"
excerpt: "ここが概要"
---
# ここが記事
## ここが記事
### ここが記事
#### ここが記事
##### ここが記事

一気によく見るホームページのようになりましたね。
あとはMarkdownでどんどんページを書いていきましょう。

Tips.ymlの中身は空でもいい

Front Matterはjekyllに対して、jekyllで書かれたページだよと教えて上げる意味もあります。
なので以下のように何も書かなくてもフィールドさえ作っておけば以下のようにjekyllがページを作ってくれます。

---
# 空でもページは作ってくれる。
---

layoutを使わずすべて自前で書くときは使うといいかもしれません。
jekyll使う意味もなくなってしまうかもしれません。

ページを追加する

トップページができたのでページを追加していきます。
ルートディレクトリに適当な名前でmdファイルを作ります。

$ touch skill.md

中身にトップページと同じでFront Matterを記載してあげます。
permalinkは/skillとでもしておきましょう。

skill.md

---
layout: single
title: "スキル"
permalink: /skill
---
# 私のスキル
## 私のスキル
### 私のスキル
#### 私のスキル
##### 私のスキル

http://localhost:4000/skillにアクセスしてみましょう。
ページができているはずです。

ヘッダーにページ一覧を表示

ページは追加できましたが、毎回トップページにリンクを貼るのは面倒です。
ヘッダーに一覧を出しちゃいましょう。
ルートディレクトリに_data/navigation.ymlを作成します。

$ mkdir _data
$ touch navigation.yml

中身にヘッダーに追加したいページタイトルとpermalinkを書きます。

navigation.yml

main:
  - title: "プロフィール"
    url: /

  - title: "スキル"
    url: /skill

ヘッダーにリンクが追加されました。

サイドバーにプロフィールを表示

_config.ymlにauthorフィールドを追加し、サイドバーにプロフィールを表示します。

_config.yml

author:
  name: "しもやま"
  bio: "Qiita記事執筆中"
  location: "東京都"
  email: "qiita@example.com"
  linkedin: "https://www.linkedin.com/in/qiita"
  github: "https://github.com/qiita"

プロフィールを追加したいページのFront Matterにauthor_profileを追加します。

index.markdown

---
layout: home
title: "ここがタイトル"
date: 2024-09-25
permalink: /
header:
  overlay_image: https://user0514.cdnw.net/shared/img/thumb/aig-ai23419012-xl_TP_V.jpg
  overlay_filter: 0.5
  overlay_color: "#000"
  caption: "ここがキャプション"
  actions:
    - label: "ここがリンク"
      url: https://qiita.com/
      class: "btn--primary"
excerpt: "ここが概要"
author_profile: true # これを追加
---

カスタムリンク

カスタムのリンクやSNSを追加したい場合は、linksフィールドに新しいエントリを追加して表示させることができます。
以下のアイコンサイトの画像がアセットに入っており使用することができます。

注意点があり、こちらのサイトのバージョンが6系のアイコンは使えませんでした。
探すときはバージョンを5系にしましょう。

author:
  name: "しもやま"
  bio: "Qiita記事執筆中"
  location: "東京都"
  links:
  - label: " Qiita"
    icon: "fas fa-pen" # 代替アイコンとしてペンを使用
    url: "https://qiita.com/simoyama2323"

GitHub Pagesにデプロイ

GitHub側

ある程度ページができてきたらGitHub Pagesにデプロイしてみましょう。
GitHubにレポジトリを作ってpushしておきます。（省略）
レポジトリができたら、GitHubの設定ページからSettings -> Pagesに移動し、Branchの項目をmasterまたはmainに設定してSaveをクリックします。

GitHub側の設定はこれだけになります。
jekyll用のactionが用意されていて、あとはpushするだけで自動でやってくれます。
超簡単。

ローカル側

_config.yml

最後にjekyllの_config.ymlにPages用の設定をしていきます。

urlとbaseurl

GitHub Pagesにデプロイする際、urlとbaseurlを正しく設定する必要があります。
urlは公開するページの基本URLで、baseurlはそのURLのサブディレクトリに当たります。

_config.yml

baseurl: "/{レポジトリ名}"
url: "https://{自分のアカウント名}.github.io"

baseurlを設定すると、ローカル環境でのビルドでもURLのパスに/リポジトリ名が付いてしまいます。
これにより、リンクが正しく機能しない場合があるため、ローカル開発時には--baseurl=""オプションを使ってこの挙動を無効にします。
こうすることで、ローカル環境ではトップディレクトリからアクセスできます。

$ bundle exec jekyll serve --baseurl="" -l

theme

こちらで設定したテーマをリモートから取得するように書き換えます。
こうしておかないとGitHubAction内で立ち上がったDocker内からテーマを探しに行ってしまうのでエラーになります。

_config.yml

# theme: "minimal-mistakes-jekyll"
remote_theme: "mmistakes/minimal-mistakes"

plugins

リモートテーマを使用するためにプラグインを追加しておきます。

_config.yml

plugins:
  - jekyll-feed
  - jekyll-remote-theme
  - jekyll-include-cache

GemFile

リモートテーマプラグインを使用するためにGemFileにモジュールをインストールしておきます。

GemFile

gem "jekyll-remote-theme"

ページを確認してみよう！

ここまでで最低限の設定は終わりです。
pushするとGitHub Actionが動くのでそれが終わったらページを確認してみましょう。
URLはhttps://{ユーザー名}.github.io/{レポジトリ名}/です。
お疲れ様でした。

_config.ymlのアレコレ

最低限Pagesで動かすようの設定をしましたが色々な記述ができます。
以下にこのテーマで使えるプロパティの一覧があるので色々試してみるとおもしろいと思います。

まとめ

この記事では、Jekyllを使って転職活動用の自己紹介サイトを作成する手順を紹介しました。
最初は自分で借りてるVPSで公開しようと思ってたんですが、Pagesでの公開が簡単すぎたので使ってみました。
Markdownで書けるって素晴らしい。

最後に

この記事が役に立った、または私の技術に興味を持っていただけた企業様がいらっしゃいましたら、ぜひ以下の自己紹介サイトよりお気軽にご連絡ください！

使用させて頂いた素材

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up