静的サイトジェネレーター Advent Calendar 2018 - 6 日目

Hugo を使っている ふうせん🎈 Fu-sen. でございます。はじめまして。

PHP+MySQL の攻撃にやられている世界中のサイトを見て、
もう PHP+MySQL を使っている CMS で Web サイトは作りたくない!
と思っていたところに出会ったのが 静的サイトジェネレーター でした。
ここまで進化してたんだ、と知った時は驚いた記憶があります。

さて、GitHub・GitLab・Bitbucket へ git push(コミット)して
Netlify で hugo などを実行して公開、という人も増えていると思いますが、
今回はコマンドで Web サイトを生成する前提でのお話です。

hugo

Hugo では hugo と入力するだけで
通常は public フォルダ内に完成した Web サイトを生成します。
Hugo 使っていない人もいると思うので、その前提での説明です。

では、更にコマンドを叩いて Web サイトも公開できたら便利だと思いませんか?
できるんです。今回はそういうお話。いくつかサービスをご紹介しますよ。

ZEIT Now

今回紹介する中では日本で知名度があって、
Qiita でも話題にしている人がいらっしゃいます。
公開 URL は https://●●●.now.sh 、静的なら完全無料です。
無償で独自ドメインでも公開ができます。これも SSL 対応。
2018年11月より Node.js・PHP・Go・React(Next.js) などの
動的ファイルも実行可能になりました。(無料の実行回数制限あり)
Heroku の代わりに Now を使う事もできるようになった、という事ですね。

公開ルートの index.html などがあるところに次の now.json を作成します。
Hugo であれば static フォルダに入れる事になりますね。
hugo コマンドで static フォルダ内のファイルはそのまま public へ入ります。

{
  "version": 2,
  "name": "●●●",
  "alias": "●●●"
}

あとは次のコマンドだけで公開できます。

hugo
cd public
now
now alias

now コマンドが二つになっています。
過去のデプロイも残しておいて、問題があった場合は戻す事が可能になっています。

今回は英語が苦手な人も使えるよう、簡単な日本語解説が付いてます。安心~~~。
もちろんこれも Now+Hugo で作ってあります。

他に自分が公開している Web サイトでは、サイドバーメニューにある サイト一覧、
これも Hugo+Now を使っています。

Surge

Now よりも数ヶ月はやく公開されているのが、この Surge。
公開 URL も https://●●●.surge.sh と似ています。こちらも完全無料です。
独自ドメインも無償登録できますが、
独自ドメインの SSL 化は有償+独自 SSL 証明書発行が必要です。

公開ルート index.html などと一緒に CNAME ファイルを生成します。
Hugo であれば static フォルダ内です。
https:// を省略すると http:// でも参照できるようになります。

https://●●●.surge.sh

あとはこれだけ。

hugo
surge public

Surge の方がシンプルですね。

追記 2018/12/09・修正 2018/12/22

●●●.surge.sh では robots.txt によってクローラーを拒否している事が判明しました。
つまり ●●●.surge.sh で Web サイトを公開しても Google などの検索結果にでてきません。

独自ドメインではこの制限が解除されます。しかし SSL 化は有償になります。
そこで Cloudflare を用いると、無償プランで SSL 化が可能になります。
Cloudflare 側の設定で常時 SSL も可能です。
この方法を用いて Surge を使用したまま独自ドメインを用いて SSL 化を行い、
不特定多数に参照してもらえる Web サイトを公開する事が可能です。

Neocities

日本の Yahoo! ジオシティーズ は 2019年3月でサービスを終了しましたが、
英語の Yahoo! Geocities は 2009 年にサービスを終了しています。
それを後継するようなサービスとして 2013 年に生まれたのが Neocities です。

Web サイト上のファイルマネージャーが通常の公開・編集方法になっているのですが、
CLI を使って公開する事もできます。

URL は https://●●●.neocities.org です。これは完全無料で使用できますが、
無料では 1 メールアドレス 1 サイトしか作れません。複数サイト・独自ドメインは有償です。
CLI 実行時にログインをします。ログイン ID がサブドメイン ●●● です。

hugo
neocities push public

これもシンプルなコマンドで Web 公開できます。

作ったサイトを素早く公開!

Now は now のみだと ●●●-◯◯◯.now.sh で生成されます。
◯◯◯ は実行する度に毎回変わります。
それを ●●●.now.sh や独自ドメインにするのが now alias コマンドです。
作成した Web サイトを他の人に確認してもらいたい時に now を実行して、
生成された URL を連絡します。問題なければ now alias で公開。
Now はそういう開発者が製作している Web を共有するためのツールとして
開発された意図があったりします。

Hugo は数秒で公開ファイルを生成しますが、
同じ位のはやさで Web 公開ができてしまうのも驚きです。
これを知ったらもう FTP は使えませんね。

静的サイトジェネーター でスパッと Web サイトを作ったら、
更にコマンドを叩いてスパッと Web サイトを公開しましょう。


静的サイトジェネレーター Advent Calendar 2018