サイトジェネレータJekyllでブログサイト構築 2025年度版

ブログの様な静的サイトを作るのにMarkdown原稿を用意するだけで、いい感じにHTMLファイルに変換してくれるJekyll Gemが便利だ。便利なのでBundlerでフォルダにGemをInstallして試してみようとするとこれが一筋縄では行かない。公式サイトにはデカデカと画像でクイックスタートの方法が記載されてるが、よく見るとなんだか怪しいコマンドの列に見える。

Jekyll • シンプルで、ブログのような、静的サイト

Headless Linux BoxにInstallして動かそうとするとこれが一筋縄では行かない。そこでハマりポイントを回避しながらサイトの起動までたどり着く手順を残しておくことにする。なお、HeadlessとはDockerコンテナ内にInstallするように、Display無しのマシンにsshでloginしながら運用するような環境の事である。
ブラウザの画面
まずは作業フォルダを準備し、必要なRuby GemをInstallする準備をする。configファイルにはGemの配置場所を記載する。
```
mkdir jekyllwork
cd jekyllwork
bundle init
mkdir .bundle
touch .bundle/config; echo '---\nBUNDLE_PATH:"vendor"'
```
Jekyllとサイト構築に必要なThemeをInstallするためGemfileを次の様に編集しbundle install
```
gem "jekyll"
gem "jekyll-theme-so-simple"
```
Jekyllでサイトのソースをfooフォルダに作成、するとファルダは下記の様になる。bexecはbundle execのalias
```
bexec jekyll new foo
```
作業フォルダjekyllworkの様子は下記のとおりで、fooフォルダの中にはThemeに関連するファイルが配置されている
```
$ls
foo  Gemfile  Gemfile.lock  vendor
```
コマンドで作成されるfoo/_config.ymlファイルにはサイトの設定が記載されているが、minima Themeを使う設定が記載されている。これをjekyll-theme-so-simpleに書き換える。
```
# theme: "minima"
theme: "jekyll-theme-so-simple"
```

フォルダを指定してサイトのソースを作成する。jekyllworkフォルダの様子は、下記のとおり_siteフォルダが出来ている。次のコマンドでサイトが起動する

bexec jekyll build -s foo

作業フォルダ

$ls
foo  Gemfile  Gemfile.lock  _site vendor

サイト起動。Hオプションにサイトのアドレスを与えないとLAN内のブラウザからアクセス出来ない。アドレスは0.0.0.0でも可。このアドレスはanyの意味。

bexec jekyll serve -s foo -Hbar.lan
  
... ommited
     @import
    /home/pi/jk/bar/bar/assets/css/skins/light.scss 41:9                                root stylesheet
Warning: 26 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
                    done in 0.556 seconds.
 Auto-regeneration: enabled for 'bar'
    Server address: http://bar.lan:4000/
  Server running... press ctrl-c to stop.

サイト起動は_siteフォルダに移動して次のコマンドを打っても確認できる
```
ruby -run -e httpd
```

環境、Ruby3.4はGitHubのruby-installを使ってソースからInstall

$cat /etc/debian_version
12.9
$ruby -v
ruby 3.4.1 (2024-12-25 revision 48d4efcb85) +PRISM [aarch64-linux]
$which ruby
/opt/rubies/ruby-3.4.1/bin/ruby

参考サイト
Jekyll Themes
CloudCannon/jekyll-learn-blog-template
Installing Jekyll | CloudCannon
コメントシステムusing webhook included in the package repo.

aioobe/dead-simple-jekyll-comments: Dead simple DIY comment system for Jekyll.

Categories