ChromebookにJekyll開発環境を構築する

Chromebookはキーボードが備わっている機種も多く、起動も速いため、ちょっとした時間にブログを書くのに最適です。 Chrome OSにTermuxをインストールしてJekyllの開発環境を構築します。

Termuxのインストール

Chrome OS上の開発環境というと、 Crostini やCroutonを利用する方法もありますが、 AndroidアプリのTermuxを使うと簡単に開発環境を構築できます。

Termuxは Google Play からインストール可能です。

インストール直後はテキストサイズが小さいので調整します。

CTL+ALT++: テキストサイズを大きく
CTL+ALT+-: テキストサイズを小さく

パッケージをアップグレードしておきます。

pkg upgrade

Termuxの情報は英語ながらTermux Wiki に良くまとめられています。

Jekyllのインストール

Jekyllの開発環境を構築するにはRuby, RubyGems, GCC, Makeが必須¹です。 Termuxにはgccが用意されていませんのでclang packageを利用します。

pkg install ruby clang make
gem install jekyll bundler

ファイル共有や記事の編集に他のアプリを使うためにdownloadに Jekyllのサイトを作成します。

termux-setup-storageで各ストレージにリンクを作成しています。ダイアログが表示されたらストレージへのアクセス許可を与えてください。

termux-setup-storage
cd storage/download

全ての作業がTermux内で完結するのであれば$HOME下でも大丈夫です。

Jekyllサイトの作成

jekyll new myblog
cd myblog
bundle exec jekyll serve

download/myblog/_postsに記事を作成していきます。

downloadにアクセス許可のあるアプリなら、どんなアプリでも使用可能です。

Jekyll serveについて

Chrome OSでAndroidアプリはVM内で動作してますので、Chrome OSのブラウザからは外部からのアクセスとなるためhttp://localhost:4000でアクセスはできません。

Termuxでip aを実行してIPアドレスを確認します。手元のChromebookで実行した結果は以下のとおりです。

$ ip a
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
    inet6 ::1/128 scope host
       valid_lft forever preferred_lft forever
2: arc0: <BROADCAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
    link/ether xx:xx:xx:xx:xx:xx brd ff:ff:ff:ff:ff:ff
    inet 100.115.92.2/30 brd 100.115.92.3 scope global arc0
       valid_lft forever preferred_lft forever
    inet6 fe80::xxxx:xxxx:xxxx:xxxx/64 scope link
       valid_lft forever preferred_lft forever
4: wlan0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
    link/ether xx:xx:xx:xx:xx:xx brd ff:ff:ff:ff:ff:ff
    inet 100.115.92.14/30 brd 100.115.92.15 scope global wlan0
       valid_lft forever preferred_lft forever
    inet6 2400:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx/64 scope global dynamic mngtmpaddr
       valid_lft 86394sec preferred_lft 14394sec
    inet6 fe80::xxxx:xxxx:xxxx:xxxx/64 scope link
       valid_lft forever preferred_lft forever

Chrome OSからのアクセスには、2: arc0:のinetに記載のあるIPアドレスを使います。

    inet 100.115.92.2/30 brd 100.115.92.3 scope global arc0

上記のIPアドレスを--hostに指定します。上記のIPアドレスはあくまでも例ですので、実際に確認したIPアドレスを指定してください。

bundle exec jekyll serve --host=100.115.92.2

--hostに指定したIPアドレスの4000番ポートにブラウザからアクセスすると Jekyllのサイトが確認できます。

http://100.115.92.2:4000

Androidのブラウザアプリを使う場合

Androidのブラウザアプリで確認する場合は、同じVM内のアクセスになるので localhostでアクセス可能です。

bundle exec jekyll serve

serveを--hostオプションなしで起動した上でhttp://localhost:4000にアクセスして確認できます。

Browser Syncについて

適切に--hostを指定すれば jekyll-browsersync によるライブリロードも機能します。

Androidでも同様に機能します。

Jekyllのビルドとデプロイ

様々な制約のあるChromebookで本番環境用のビルドを頻繁に行うことはあまりないかもしてませんが、他の環境と同じようにビルドできます。

JEKYLL_ENV=production bundle exec jekyll build

Termuxにはgit, ssh, rsyncなど運用に必要なツールもインストール可能です。

pkg install git openssh rsync

rsyncを使ってXREAにデプロイできます。

rsync -avz --delete --exclude='log/' --exclude='.fast-cgi-bin/' \
      -e ssh --progress -r _site/ username@s000.xrea.com:~/public_html/

参照: XreaにSSH鍵認証でアクセスする

インストールガイド参照 ↩