The public_html - h12o's Weblog

Unix生まれLinux育ちmacOS在住

Google Cloud Compute Engine VMとHugoでこのウェブログを立ち上げる

Posted at — 2019-07-21

このウェブログは、Google Cloud上でHugoを使って作成しています。

Google Cloud Compute Engine VMインスタンスのセットアップからHugoでコンテンツを生成、アップロードするまでに行ったことを書き出してみました。

Google Cloud Compute Engine VMインスタンスのセットアップ

  1. 新しいプロジェクトを作成します。
    • 名前「Userdir」
    • ID「blessedgeeks-org」
    • (プロジェクト番号は自動採番)
  2. Compute Engine→VMインスタンスを作成します。
    • インスタンス名: 「userdir」
    • マシンタイプ: f1-micro(vCPU x 1、メモリ 0.6 GB) ※永久無料枠はf1-microのみ
    • ゾーン: us-central1-a ※永久無料枠はUSリージョンのみ
    • ファイアウォール:
      • HTTP トラフィックを許可する・HTTPS トラフィックを許可する を有効にします。
      • default-allow-sshを許可する他、default-allow-moshを タイプ: 上り・ターゲット: すべてに適用・プロトコル/ポート: udp:60000-61000・優先度: 65534・ネットワーク: default で作成、許可しておきます。
    • ネットワーク インタフェースに外部IPアドレスを割り当てます。
      • 名前: 「userdir-v4」
      • 外部アドレス: 自動割り当て
      • リージョン: us-central1
      • タイプ: 静的
      • バージョン: IPv4
    • CentOS 7のブートディスクを作成します。
      • 名前 : userdir
      • ソースイメージ : centos-7-v20190619
      • サイズ(GB) : 30
      • デバイス名 : userdir
      • タイプ : 標準の永続ディスク
      • 暗号化 : Google が管理
  3. ブートディスク(userdir)を30GBフルに使うよう、userdirにsudo権限があるユーザでログインして、以下を順に実行します。
    1. sudo growpart /dev/sda 2
    2. sudo xfs_growfs /dev/sda2
  4. yumでnginxとletsencryptをインストールします。

nginxの設定

以下のような/etc/nginx/conf.d/blessedgeeks-org.confを作成します。 最初は443の部分をコメントアウトしておき、letsencryptで証明書を発行できたところで修正します。

server_tokens off;

server {
  listen 80;
  listen [::]:80;
  server_name blessedgeeks.org;
  root /var/local/www/html;

  location /.well-known/acme-challenge/ { allow all; }

  set $maintenance false;
  if (-e /home/userdir/.maintenance) { set $maintenance true; }
  if ($maintenance = true) { return 503; }

  location / { return 301 https://$host$request_uri; }
}

server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name blessedgeeks.org;
  root /var/local/www/html;

  ssl_protocols TLSv1.2;
  ssl_ciphers HIGH:!aNULL:!eNULL:!kECDH:!DSS:!MD5:!EXP:!PSK:!SRP:!CAMELLIA:!SEED
:!RSA;
  ssl_prefer_server_ciphers on;
  ssl_session_cache shared:SSL:10m;
  ssl_certificate /etc/letsencrypt/live/blessedgeeks.org/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/blessedgeeks.org/privkey.pem;
  gzip on;
  gzip_disable "msie6";
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_http_version 1.1;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
  add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload' always;
  resolver 8.8.8.8 8.8.4.4 valid=300s;
  resolver_timeout 5s;
  ssl_stapling on;
  ssl_stapling_verify on;

  set $maintenance false;
  if (-e /home/userdir/.maintenance) { set $maintenance true; }
  if ($maintenance = true) { return 503; }

  location ~ ^/~(.+?)(/.*)?$ {
    alias /home/$1/public_html$2;
    index index.html;
    autoindex on;
  }
}

location ~ ^/~(.+?)(/.*)?$ { …… }を入れることで、https://blessedgeeks.org/~h12o/のような「~」付きのURLにアクセスがあると、nginxは各ユーザのpublic_htmlディレクトリ以下を探してコンテンツを返すようになります。 Apacheのmod_userdirと同じようなことをさせるものです。

Google Cloud上のプロジェクト名を「Userdir」としていまして、Apacheのmod_userdirから採ったものなのですが、nginxで設定した方が簡単というのは複雑な気持ちになります。

Hugoのインストール

macOSなので、brewでhugoとrsyncをインストールします。

macOS付属のrsyncは、ファイル名の文字コード変換機能がないので、brewからインストールしたrsyncを使うことがポイントです。

Hugoの作業ディレクトリをgitで管理する

Hugoの作業ディレクトリはgitで管理します。 macOSで作業し、Linuxにアップロードすることから、UTF-8ファイル名の扱いが問題になります。 そこで、以下のように、core.precomposeunicode=trueであることを確認しておきます。

h12o@h12o-no-MacBook-Pro h12o % git config --list| grep 'precomposeunicode'
core.precomposeunicode=true
h12o@h12o-no-MacBook-Pro h12o % 

Hugoのテーマ

テーマはEzhilのlayoutsディレクトリ以下とstaticディレクトリ以下をまるごと、Hugo作業ディレクトリのlayouts/とstatic/にコピーしてから、手を加えて使用しています。 これは、EzhilがbaseURLにサブディレクトリがあるケースを想定していないことが原因で、「Based on Ezhil theme, Modified by h12o」とあるのはそのためです。

コンテンツのプッシュ

~/Documents/Hugo/h12o以下が作業ディレクトリです。 また、出力ディレクトリはpublicからpublic_htmlに変更しています。

  1. cd ~/Documents/Hugo/h12o
  2. /usr/local/bin/hugo
  3. /usr/local/bin/rsync --iconv=UTF-8-MAC,UTF-8 --delete --archive public_html/ blessedgeeks.org:public_html/

rsyncの--iconv=UTF-8-MAC,UTF-8オプションは、macOSのファイルシステムの文字コード系の扱いとLinuxのそれとの違いを吸収するためのものです。 macOS標準のrsyncにはありません。

comments powered by Disqus