おもこん

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

Jekyllを勉強中(2)

引き続きJekyllの勉強中です。

2つに分かれるJekyllのユーザ・タイプ

Jekyllのウェブサイトのドキュメントはほぼ読み終わって、全体的な感じがつかめてきたところです。 その中で見えてきたことは、Jekyllを使う2つのタイプのユーザを分けて考えることが重要だということです。

  • (A)ウェブサイトを構築する人=Jekyllでプログラムする人
  • (B)構築されたウェブサイトに内容を加える人

(A)と(B)は同じ人でも別の人でも良いです。 (A)はJekyllやHTMLなどの知識が必要な「開発者」ですが、(B)には高いプログラムのスキルは必要ありません。 マークダウンが書ければ十分で、それすら必要ないこともあります。

例えば、そのウェブサイトが毎日の天気を記録して、グラフや表にして表示するとします。 (A)はそのウェブの仕組みを作り、(B)は毎日の天気を入力してウェブに上げるというように役割分担ができます。 まずは(A)がサイトを作らなければなりません。 一度作ってしまえば、(A)はメンテナンスをするだけで、その後は(B)が作業するだけです。 (B)は、例えば

weather: 晴れ
temperature: 32

などと入力したファイルをウェブサイトにアップロードします。 単純作業ですから、やり方を覚えればプログラムのスキルは要りません。

他にも、ブログ(ただしコメントなどの機能はない)についても、(A)がサイトを構築したら、(B)はマークダウンで記事を書き、アップロードするだけです。 はてなほど簡単ではないけれど、難しい仕事ではありません。

Jekyllの利点

(B)にとっては「プログラムの知識が要らない」という利点がありますが、これは特に強調するようなことではありません。 むしろ「はてなブログ」の方が簡単でしょう。

(A)にとっては、ウェブサイトの構築の相当部分を自動化できる利点があります。 また、作られるウェブサイトが静的(コメント機能やログインがない)ので、安全性が高いというのも利点です。 加えて、データベースなどを使わないので作成作業がシンプルです。

はじめての「サイト構築」

(A)のサイト構築においては、テーマという枠組みが用意されていて、それを使えば構築さえも要らなくなります。 例えば、minimaというデフォルトのテーマを使って、sampleという名前のフォルダにサイト構築をするには、次のようにするだけです。

$ jekyll new sample
... ... ...
New jekyll site installed in /(ユーザ名)/sample. 
$ cd sample
$ nano Gemfile # エディタはnanoでなくても良い
(エディタで、Gemfileの最後に"gem webrick"を追加し、上書き保存する)
$ bundle install
... ... ...
Bundle complete! 8 Gemfile dependencies, 32 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
$ bundle exec jekyll serve
... ... ...
(ブラウザでlocalhost:4000を開くと作成されたサンプル・サイトが表示される)
(CTRL-Cでコマンドラインにもどる)
$

ウェブの内容を自分に合うようにするには

  • 「about.markdown」を自分用aboutページに修正する。このとき、冒頭の「---」で囲まれた5行は変更しない。
  • 「_posts/2022-08-12-welcome-to-jekyll.markdown」を参考に、同じ形式で「_post」ディレクトリに記事を追加していく。
    • ファイル名は「YYYY-MM-DD-タイトル名.markdown」。最初のところは年月日。拡張子は「md」でもよい。
    • ファイルの中身では、最初に「---」で囲まれた部分をサンプルファイルと同様に書く。「layout: post」はそのまま、「title:」にはタイトル名を記述。 「date:」には日時を書き、最後に「+0900」(Tokyoのローカルタイムの時差)を入れる。「categories:」タグは取り去って良い。 2つめの「---」の下から記事をMarkdownで書く。 以後、同様のファイルを「_post」に追加することで、記事を投稿できる。

この作業後、

$ bundle exc jekyll serve

として、「localhost:4000」をブラウザで確認すれば、変更が反映されているはずです。 (A)さんにとって、これで構築が済むなら天国にも登るような気持ちですよね。

なお、このサイトは「トップページ」「aboutページ」の2つの固定ページとブログの「記事ページ」からなります。 別の構成のサイトを作るには、構築段階で更に作業が必要です。

GitHub Pagesとの連携

GitHub Pagesを使うと自分のウェブページを公開することができます。 GitHub PagesはJekyllをサポートしているので、さきほどの「sample」フォルダでgitのコミットをしてGitHubにアップロードします。 (ここではGitHubへの登録、アップロードの説明は省略します)。 レポジトリの設定(setting)からGitHub Pagesを有効にします。 「https://(ユーザ名).github.io」をブラウザで見ると、sampleの画面が公開できているはずです。 ちなみに、私のGitHub Pagesは次のとおりです。

Jekyll, GitHub Pages, GitHub Actions

さらなるウェブページ作成の自動化がGitHub Actionsで可能です。 ここではそこまで書けませんが、参考になるYoutube動画をリンクしておきます。

細かいプログラムの話は無く、コンセプト的な内容なので分かりやすいと思います。 これを見ると、今後の勉強の方向性が見えてきます。

今回はJekyllの初歩の初歩を説明しました。 今後勉強を続けて、ある程度まとまったら、チュートリアル記事を書きたいと思います。