静的サイトジェネレーター Advent Calendar 2019 - Day 1

ふうせん🎈 Fu-sen. と申します。

静的サイトジェネレーター Advent Calendar は
2018 年にも参加しています。
今年は Advent Calendar に 静的サイトジェネレーター が
11月30日までできていなかったのです。
いや、記事にできる人がいるはずだ! と
今年は自分がカレンダーを作成いたしました。


Hugo

記事の段階(2019年12月1日)での Hugo 最新版は 0.60.1 です。
0.60.0 でこのブログがおかしくなる事に気が付き、
その一つは不具合として報告しました。0.60.1 で反映されています。
HTML タグを .md に入れている場合に設定が必要となりました。
その辺は先日記事にしていますので、こちらを参照して下さい。

GitHub ではテーマ関連で issue に報告している事はあったのですが、
愛用している Hugo そのものにも issue してしまったのです。
このブログで 0.60.0 にしたら表示がおかしくなっていたからなんですけど。

Hugo についての説明は他の人に任せるとしまして…… 😲😆😅
(もしかしたら自分で記事にしないといけないかもしれませんが…… 😭)

通常 hugo をコマンドで叩くと public フォルダに公開ファイルが生成されます。

hugo

ここから更にコマンドを叩いて生成した Web・ブログを公開しよう!
……というのがこの記事です。
昨年と変化しているところがあり、
昨年の記事内容で使えなくなっているサービスもあり、削除済みです。
改めて記事投稿現在でいくつかご紹介します。


Git

GitHub、GitLab、Bitbucket などのリポジトリサービス、
また、Heroku も Git に対応しています。

例えば GitHub Pages などを使用するの目的で、
public フォルダのみをリポジトリに入れているのであれば……

hugo
cd public
git commit -m "変更内容"
git push origin master

Netlify で public を pull する場合など、
作業ディレクトリを丸ごと push している場合は cd public 不要です。

……で、コマンドあってますよね? 間違ってますか?
自分は Git 関連は CLI で叩くのではなくて、
GUI クライアント GitHub Desktop と SourceTree を使っています。
複数のリポジトリを管理していると一覧表示から変化が確認でき、
必要な手続きも順次行えるようになるので、push 忘れも減りますよ。

Git Advent Calendar 2019
GitLab Advent Calendar 2019
Atlassian Advent Calendar 2019 - Bitbucket を含む
Heroku Advent Calendar 2019


Firebase Hosting

Google のクラウドサービスです。
クラウドサービスって聞くと、
「課金~~~怖い~~~😭」という人も多いと思いますが、
Firebase は無料の Spark プランがあるので、課金の心配は不要です。

Firebase Hosting の保存容量は 1GB、転送量は 10GB となっています。
サブドメインは ~.firebaseapp.com と ~.web.app が使えます。
もちろん独自ドメインも設定できます。他への転送設定なら Web 上で可能です。
注意してほしいのは、ビルドした時に過去のビルドも残されていて、
それも容量に含まれている点です。Web 上で削除できます。
これは問題があった場合にロールバックできる仕組みとなっています。

Firebase の構成ファイルも Hosting は public フォルダです。
そのため、Hugo と共に構成ファイルを運用できます。

hugo
firebase deploy

自分は ~.web.app が使えそうなので、
独自ドメインで運用しているのを他サービスへ移して空けているのですが、
今のところ理想的な Web サービスができていません。
一時このブログを Firebase Hosting で運用しています。

Firebase Advent Calendar 2019 #1 Firebase Advent Calendar 2019 #2


Vercel Now(旧 ZEIT Now・now.sh)

Vercel Now は細かく機能追加されています。数ヶ月で仕様変更もあるんです。
そんなわけで、昨年とは使い方が変わっている部分があります。
Node.js・Go・Python の動作も可能になっているのですが、
もちろん静的サイトの公開を目的にした操作も可能です。

hugo
now --prod public

ちなみに昨年は hugo の後、cd public → now → now alias としていました。
コマンドがシンプルになって使いやすくなりましたね。

デプロイを Now 側に任せてしまう事もできます。
今はこれが Docs で記載されている方法。
その辺の設定もしてあれば、最低限はこれだけです。

now

更に GitHub・GitLab・Bitbucket の push 連動もできます。
(Bitbucket は 2019年11月 から公式に提供開始されたばかりです)
git push するだけで Netlify のような自動デプロイも可能という事です。

記載時時点(2019年12月)で無料プランは、
月単位で転送量 20GB、ビルド時間は 2 時間、デプロイ数 100 回までとなっています。
サブドメイン ~.now.sh が使え、独自ドメインも設定できます。
珍しいところでネームサーバも提供されていて、
世界的に登録できる独自ドメインは登録・移管も可能になっています。
サーバは東京にあるので、レスポンスも良好です。
ただし、仕様がコロコロ変わるので、ご注意下さい。

ちなみに ふうせん🎈 Fu-sen. が公開している Web サイト一覧は
Vercel Now で公開しています。もちろんこれも Hugo ですよ。


Surge

Vercel Now よりはやく似たようなサービスとして提供されていたのが Surge。
でも公開直後から仕様に大きな変化がなく、知名度はいまいちです。
それにしてはトップページに出ている数字はかなり大きいような気がしますが、
その実態は無料で使えるためにスパム悪用されている模様です。😅
この影響があってか ~.surge.sh というサブドメインが提供されていますが、
これは robots.txt で検索エンジンがインデックスされないように記載があります。

User-agent: *
Disallow: /

~.surge.sh は無料で SSL が有効です。そのため逆にメリットをいうと、
不特定多数向けではない一時用途の Web サイトや、
お問い合わせなどのフォーム表示で ~.surge.sh を使うのはアリですね。

独自ドメインも使用でき、この場合は robots.txt の制限はありません。
しかし、独自ドメインだと SSL は有料になっています。
でも回避策があります。CDN サービス Cloudflare を使うと、
Cloudflare で SSL 証明書を適用し、SSL 化を行う事ができます。しかも無料で。
Surge は日本にサーバがありませんが、
Cloudflare の CDN サーバは東京と大阪にあるので、レスポンスも向上します。

Surge は無料で使用できるサイト数や転送量などの制限がありません。
また、Cloudflare も無料による帯域幅・サイト数に制限がありません。
ええ、これらのサービスは無料で完全に制限がないんです。

このブログ、運用 Web サービスを変えたり、ドメイン名を変えたりしているのですが、
運用している Web サービスは Surge+Cloudflare で落ち着きました。
アクセスは記事の追加と日数の経過で多くなってきているのですが、
それでも独自ドメイン名の料金以外、一切料金を支払っていません。

hugo
surge public

Cloudflare は無料の場合、独自ドメインからサイトの追加を行い、
ネームサーバも Cloudflare 管理になります。
その中のサブドメインで Cloudflare の機能を有効・無効を設定できます。
そんなわけで、このブログ blog.balloon.im では
ドメイン balloon.im 部分から Cloudflare 管理です。
サブドメインのない balloon.im、シンプルな表示なのですが、
このブログと同じように Hugo を用いていて、Surge→Cloudflare で公開しています。


最近だと……

ここでは CLI でコマンドを叩いて公開する前提で記載しましたが、
最近は CI/CD などを用いてデプロイを自動化しているケースも多いかと思います。
GitLab・Bitbucket にはありましたが、
GitHub でも GitHub Actions が公開されています。

CI/CD Advent Calendar 2019
GitHub Actions Advent Calendar 2019
Azure DevOps Advent Calendar 2019
CircleCI Advent Calendar 2019


追加 2020/04/22

▲ZEIT が ▲Vercel に変わりました。このページで紹介していたので変更しています。
PHP の動作も可能になっていたので、こちらも紹介しています。


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

静的サイトジェネレーター Advent Calendar 2019 | Qiita