おもこん

おもこんは「思いつくままにコンピュターの話し」の省略形です

Jekyllを勉強中(8)

今回はブログの作り方です。

ブログの仕組みの作り方

Leap daysはデフォルトでブログ機能をサポートしていないので、自分で仕組みを作らなければなりません。 といっても、それは大変な作業ではありません。 デフォルトのテーマminimaがブログをサポートしているので、それを参考に作るのが早いです。

あとはブログ記事を書いて_postsディレクトリに保存するだけです。

Minimal Mistakes

Jekyllのテーマはたくさんあり、JekyllのウェブサイトのResourcesにリンクがあります。 ここではブログ機能をサポートしているMinimal Mistakesをテーマにしてブログのサンプルを作ってみます。 なお、ここではローカルで動かします。 GitHubと連携するには別の方法が必要です。 Minimal Mistakesのドキュメントを参考にしてください。

インストール

ブログ用のディレクトリを作ります。 ここでは「sample」という名前にします。

$ mkdir sample
$ cd sample

Gemfileを作ります。

source "https://rubygems.org"

gem "minimal-mistakes-jekyll"
gem "webrick"

_cofig.ymlを作ります

   theme: minimal-mistakes-jekyll

gemをインストールします。

$ bundle install

以上でインストールは完了です。 簡単!!

index.mdを作る

トップページの名前は「index.md」と決まっています。 簡単なメッセージを書いておくことにします。

---
layout: home
title: サンプルページ
description: Sample site with Minimal Mistakes
header:
  image: "/assets/images/home.png"
---

みなさん、こんにちは!
  • レイアウトはhomeにする
  • titleとdescriptionを書く
  • ページを少しお洒落にするためにタイトルのヘッダに写真を入れる。 headerキーの下にimageキーで画像の場所を指定する

タイトル画面の画像を設定するyamlはMinimal Mistakesのレイアウトを調べると分かります。 ドキュメントには短く書かれているだけで分かりにくいです。 ソースコードを見るのが一番確かなのですが、ドキュメントにも書いてほしいです。

それでは、画面をチェックしましょう。

$ bundle exec jekyll serve

ブラウザでlocalhost:4000を開きます。

サンプルのホーム画面

写真が入るとイメージが良くなりますね。

記事の投稿

ブログの投稿記事は日時で順番付けられます。 日時はファイル名とフロントマターの2ヶ所に書きます。

---
layout: posts
title:  "Welcome to Sample page"
description: "The first post to Sample page"
date:   2022-08-20 14:05:00 +0900
---

はじめて記事を投稿します。

Sample page をよろしく!
  • layoutはpostsにする。これはMinimal Mistakesの仕様です。minimaではpostと単数形
  • タイトルとディスクリプションを書く
  • dateに日時を書く。フォーマットはYYYY-MM-DD HH:MM:SS +900。最後の+900はTokyoの標準時からの時差
  • ファイル名は2022-08-20-welcome-to-Sample-pagei.mdとした。「日付-タイトル.md」のフォーマット

もう一つ記事を作ってみます。

---
layout: posts
title:  ふたつめの記事
description: この記事が投稿2回目
date:   2022-084-20 14:15:00 +0900
---

2回目の投稿です。

Sample page をもっともっとよろしく!

ファイル名は2022-08-20-The-second-post.mdとしました。 全角文字を使ってもたぶん良いと思います。

2つの記事はホーム画面のコンテンツの下にリンクとして現れます。

まとめ

このように、ブログの仕組みがテーマに用意されていれば、記事の投稿は簡単です。 また、Leap dayも良かったのですが、Minimal Mistakeは洗練されたデザインでこれも使ってみたくなりました。 しかもざっと見ただけですが、機能が豊富です。

インターネットを見ると、「はてな」からJekyll+GitHubに移行した人もいました。 ある程度スキルが必要ですが、テーマを使えば敷居は低いように思います。

次回は、前回紹介したLiquidについて取り上げたいと思います。