「GitHub Pagesで無料ブログを作成すr - Part4 自分のオリジナルのテーマを作る」です。
他の記事はこちら
Jekyllのテーマのカスタマイズする
前回の記事ではJekyllの設定をカスタマイズする方法を紹介しました。
カスタマイズするとはいえ、既存のテーマを使っていました。
Jekyllでは既存のテーマを使うこともできるのですが、さらに一歩踏み込んで、自分で既存のテーマをカスタマイズしたり、テーマを作ることもできます。
まずは、既存のテーマをカスタマイズする方法について紹介します。
既存のテーマをカスタマイズする
Jekyllでは_config.ymlで設定しているテーマを使いつつ、自分で少しカスタマイズすることができます。
カスタマイズ方法はテーマによったりもするのですが、例えばデフォルトのテーマminimaでは、GitHubのリポジトリにカスタマイズ方法が記載されています。
Jekyllはディレクトリの構造が決められているので、そのルールにしたがって定義されているファイルを上書きすることで、カスタマイズすることができます。
例えば、ヘッダー部分をカスタマイズしたい場合は、自分のリポジトリに_includesフォルダを作成して、header.htmlを作成します。ゼロから作るのは難しいと思うので、minimaのデフォルトのheader.htmlをコピーした上でカスタマイズしていくと良いと思います。
JekyllではLiquidというテンプレートを処理するための言語が使用されています。Liquidを使うことでテンプレートの中でif文によって分岐やループ処理を書くことができます。
Jekyllでは様々な変数が定義されているので、それらを使ってテンプレートを書いていくことでレイアウトやページを作成していきます。
レイアウトをカスタマイズする場合は、_layoutsフォルダを作りカスタマイズしたいレイアウトのhtmlファイルと同じファイル名でhtmlを作成し中身を上書きします。
こちらも0から作るのは大変なので、既存のレイアウトをコピーしてからカスタマイズしていくといいと思います。
minimaではcssをカスタマイズすることも可能です。assets/css/style.scssというファイルを作成します。拡張子からもわかるようにJekyllはsassをサポートしており、sassで記述していくことが可能です。
またファイルの先頭には以下を記述する必要があります。
---
---
@import "minima/skins/classic";
@import "minima/initialize";
このように既存のテーマをカスタマイズしていく場合は、基本的にはテーマで定義されているファイルを上書きして自分のファイルを作成する、という手順になります。
自分のテーマを作る
Jekyllでは既存のテーマをカスタマイズするだけでなく、自分のテーマを作ることもできます。
これまではGemで公開されているテーマを使ってきましたが、Jekyllのディレクトリ構造にしたがって、必要なファイルを作成すれば自分のオリジナルのページを作ることができます。Wordpressでテーマを作るのに似ています。
Jekyllのディレクトリやテンプレート言語のLiquidの使い方についてはJekyllの公式サイトに書かれています。テンプレートの作り方全てを紹介するのは難しいのですが、基本的にはレイアウトに使われるhtmlやヘッダー・フッターなどの共通のhtmlなどを作成していくような形になります。
既存のテーマをカスタマイズする場合は、上書きしない部分を変更する必要はありませんでしたが、自分でテーマを作る場合は全て作る必要があります。しかしかなり柔軟にレイアウトを作成することができるので、まずはテーマを使ってみて、不満な部分があれば自分でテーマを作ってみるのをお勧めします。
ちなみに、このブログは自分でレイアウトを作成しています。
まとめ
Part1からPart4で、GitHub Pagesで無料ブログを作成する方法を詳しく説明してみました。形さえ出来あがればあとはMarkdownで記事を書いていくだけで、とても使いやすいのでGitHub Pagesを使ったサイト作りはお勧めです。
Jekyllでサイト自体は生成できるので、静的サイトをホスティングできるところであればGitHub Pagesではなくても同じサイトを構築することができる点もメリットですね。もしファイルサイズはアクセス数に引っかかってしまった場合も、例えばAWSのS3のような場所に引越ししやすいのではないかと思います。
エンジニアリング GitHub Pages ブログ
関連記事
-
2024/3/24
try! Swift Tokyo 2024
try! Swift Tokyo 2024の参加メモ
Swift
-
2023/1/31
SwiftUIでTabBarを非表示にする
SwiftUI TabBar
-
2023/1/14
Bootstrap5.3で追加されたダークモードに対応してみました
Bootstrap DarkMode
-
2021/2/17
brew upgradeで Your CLT does not support macOS 11というエラーがでた
homebrew macOS Big Sur
-
2020/12/1
Apple Silicon搭載 MacBook Pro M1で Homebrewとrbenvをインストールする
先日購入したApple Silicon搭載 MacBook Pro M1にこのブログをビルドするためにHomebrewとrbenvをインストールしたのでメモ。
Apple Silicon Homebrew rbenv
-
2020/11/27
Apple Silicon搭載のMacBook Pro M1が危うく文鎮化するところだったので記録
Apple Silicon搭載のMacBook Pro 13インチを仕事用に購入したのですが、クリーンインストールしたところ文鎮化しかけたので記録しておきます。
MacBook Pro Apple Apple Silicon M1
-
2020/6/23
Platform State of the Unionまとめ
Platform State of the Unioまとめ
WWDC2020 Apple アップル iOS macOS watchOS tvOS
-
2020/6/23
WWDC2020キーノートまとめ
WWDC2020 キーノートまとめ
WWDC2020 Apple アップル iOS macOS watchOS tvOS
-
2020/5/28
GitHub Pagesで無料ブログを作成する - Part3 Jekyllの設定をカスタマイズする
前回の記事では、Jekyllのテーマを利用する方法と記事を追加する方法を紹介しました。今回はさらにJekyllをカスタマイズしていきますが、確認を簡単にするためにまずJekyllをローカル環境で実行する方法を紹介します。
GitHub Pages ブログ
-
2020/5/26
GitHub Pagesで無料ブログを作成する - Part2 Jekyllを使ってみる
JekyllはGitHub Pagesで使用することができる静的サイトのジェネレータです。Jekyllを使うことで、Markdownで書いたブログの記事やhtmlで作ったページをビルドして、公開用のhtmlとして生成することができます。
GitHub Pages ブログ