Jekyllのテーマを自作する 基本編 – 第1回 – 初期データを作成する

Jekyllのテーマを自作する方法基本編の連載、第1回では、最も基本となる初期データを作成します。

Jekyllのテーマを自作する 基本編 記事一覧

こんなサイトを作ります

今回は、ごくシンプルな、以下のようなサイトを作成します。

  • トップページにブログの一覧を表示する
  • ブログ一覧はページネーションあり
  • 固定ページ、投稿ページの機能がある
  • 投稿ページに前後の記事へのリンクを表示する
  • フッターにGithub, Twitterへのリンクアイコンを作成する
  • 投稿のフィード(feed.xml)を出力する

完成イメージ

トップページ

固定ページ

投稿ページ

ワークスペースを用意する

適当なワークスペースを用意し、移動します。ここでは、 ホームディレクトリ直下にworkspaceというフォルダを作り、そこをワークスペースとします。

$ cd ~
$ mkdir workspace
$cd workspace

Jekyllのテーマの初期データを作成する

まず、下のコマンドで、my-jekyll以下にJekyllテーマの初期ファイルが生成されます。「my-jekyll」の名前は任意です。

$ jekyll new-theme my-jekyll

テーマフォルダに移動します。

$ cd my-jekyll

現在、「my-jekyllフォルダ内はこのようなファイル構成になっています。


my-jekyll
├── .git
├── .gitignore
├── Gemfile
├── LICENSE.txt
├── README.md
├── _includes
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _sass
├── assets
└── my-jekyll.gemspec

本記事では、Gemfileについては言及しません。また、ライセンスやREADMEもテーマを配布しない場合は不要なので、今回は分かりやすく以下4つのファイルを削除します。

$ rm Gemfile
$ rm my-jekyll.gemspec
$ rm LICENSE.txt
$ rm README.md

次に、テーマ作成の準備をします。以下のファイルやフォルダを作成します。

$ touch _config.yml index.html
$ mkdir _posts assets/css assets/js assets/images

さて、ここまでで基本ファイル一式が揃いました。このようなファイル構成になっています。


my-jekyll
├── .git
├── .gitignore
├── _config.yml
├── _includes
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
├── _sass
├── assets
│   ├── css
│   ├── images
│   └── js
└── index.html

これでテーマ作成用の最低限のファイルは出揃いました。次回は設定ファイルに設定を記述します。