Jekyllを使ってGitHub Pagesのデザインをリニューアルした

Re*Index. (ot_inc)

Android関連なファイルなどを公開する場所としてGitHub Pagesを使っているのですが、味気がないのと項目が多くて流石にウザいなと思ったのでリニューアルしました。


そもそもGitHub PagesとJekyllって何?

GitHub Pagesとは?

GitHub PagesはGitHubで自分のWebページを作れてしまう機能です。マークダウンで作る事もできるのでHTMLやCSSを書く必要もなく簡単に編集や公開がやれちゃう物です。無料で使えるのに広告の挿入もされないのでクリーンな仕上がりにもなります。

Jekyllとは?

Webページの生成を行なう物です。
これを使う事でWordPressに近いようなブログ化がやれたり、色々なデザインに変更などが簡単にやれてしまう物です。セットアップの手順がありますが、それを済ませれば今後は楽です。

Jekyllの導入

GitHub Pagesは開始の仕方が色々と出てくるので割愛します。
JekyllはRubyで作られた物なのでRubyの環境をローカル内に構築する必要があります。必要な物は以下を参照。

RubyInstaller
MinGW
Jekyll + Redcarpet

RubyInstallerとMinGWのインストール後に以下のコマンドをWindowsTerminalで実行。

gem install jekyll
gem install redcarpet

で、JekyllとRedcarpetがインストールされます。

Jekyllでサイトの構築を開始

構築はローカル内で行ないます。
始めに

jekyll new サイトのタイトル名

でJekyllのディレクトリを作ります。
ディレクトリを作ったら

cd サイトのタイトル名

でディレクトリを開きます。
因みにディレクトリは「C:\Users\ユーザー名\」に置かれています。

設定の変更やテーマの変更など

Jekyllの設定ファイル

Jekyllの設定は「_config.yml」に記述されています。
これにはサイトのタイトル、ヘッダーページ、プラグインの設定が書かれています。

個別ページの作り方

個別のページを作りたいマークダウンを作ります。
タイトルは個別のページ名にしてから

---
layout: page
title: Title
permalink: /パーマリンクのタイトル/
---

ここにマークダウンかHTMLのコードを書く

と言う風にマークダウンのファイルを作ってから、_config.ymlを編集。

header_pages:
- title.md

とページに設定したいマークダウンのファイルを指定します。
記述の順番でヘッダーのリンクの配置を変える事ができます。

テーマの変更

Jekyll Themeなどで検索すると色々とテーマが出てきます。
物によってはプラグインを要求する物もあります。

プラグインのインストール

gem install プラグイン名

でインストールできます。
_config.ymlを編集でプラグインを除外する事もできます。

ローカルでWebページのチェック

ある程度設定をしたらローカルでチェックをします。
Windows Terminalで

bundle exec jekyll serve

を実行するとローカルでサイトをチェックする事ができます。
アドレスは「http://localhost:4000/」になります。
コマンドを実行後にエラーが起きた場合は、ファイルを修正して問題を解決させてください。「わからなくなった!!リセットする!!」という場合はディレクトリを削除してディレクトリを作り直してください。
ローカルのチェックの終了は「Ctrl+C」でやれます。

コマンドを実行時に `DidYouMean::SPELL_CHECKERS.merge!(error_name => spell_checker)' has been deprecated.` が発生してしまった場合

Bundlerをアップデートで修正できます。

bundle update --bundler


GitHub PagesにCommitする

サイトの作成を終えたらCommitをします。
Commit後はGitHubがアクションを実行してサイトの生成をします。

リニューアル後

こんな感じになりました。

メーカーごとに分類、Faviconの挿入、PCとモバイルでそれぞれの表示に対応とサイトらしいレイアウトになりました。マークダウンの編集箇所も削る事ができたのでやって良かったなと思える結果でした。

いいなと思ったら応援しよう！