このサイトを作った時にハマったアレコレをメモしておきます。

はじめに

主に以下2つのサイトを参照しながら作成しました。

WINDOWS環境でHUGOでサイト構築してGAEにデプロイする方法

HugoをVSCodeで使ってAzureで公開する方法

その上で、いくつかハマったポイントをメモ程度に残しておこうかと思います。

環境

Go 1.9.2 windows/amd64

Hugo v0.31.1 windows/amd64

app.yaml

app.yamlのサンプルを探すと色々あるのですが、

  • version
  • name

があるとエラーになるっぽいので消しておきました。

とりあえずサンプルを貼っておきます。

Hugoコマンドで生成したpublic以下はこんな感じ

base url

実際のURLにしとく GAEなら hogehoge.appspot.comとか

そして、httpsにしておかないとbootstrap周りでエラーが出たので注意。

ドメインを取る

google domainsで買いました。ものにもよりますが、僕の場合は 1400 JPY / year でした。

baseurlを差し替えれば対応終了です。べんり。

ただ、deploy時のtarget url はそのまま残ってるので、どうしたらいいんだろ…

参考

Google Domainsで独自ドメインを購入してみる

超簡単!GAEアプリにカスタムドメインとSSLを適用する方法!!

layoutの上書き

始めはcloneしてきたテーマを直接編集してましたが、layoutsフォルダ以下で上書きすることにしました。

themes/[cloneしてきたテーマ]/layoutsと layouts/ は同じフォルダ構造にするとよいっぽい。

でないとHugoビルドでコケました。

全部layouts以下にコピーしておいて、変更していくのがよさそう。

フォルダ名がtitleと同じになる

この記事の front matter でtitleを日本語にした時、public 以下に生成されるフォルダ名が日本語になっていました…

そのためGAEにデプロイできなくなりました めっちゃ焦った。

解決方法としては、 front matter でurlも指定してあげると解決しました。

指定してないと 日付/title/index.html になるようです。

+++
title = "VSCode + Hugo + GAEでこのサイトを作ってみた時にハマったこと"
url = "post/abouthomepage" 
+++

Google Photoの画像を貼る

GOOGLE PHOTOS Generate embed code for any picture on Google Photos

というサイトを見つけたので、ここでリンクを生成してshortcodeで貼ってます。 (ちょっと面倒なのでなんとかしたい)

{{ $id := .Get "id" }} {{ if $id }}
<div class="gphoto-media">
    <img src="https://lh3.googleusercontent.com/{{ $id }}" {{with .Get "width"}} width="{{.}}" {{end}} {{with .Get "height"}} height="{{.}}" {{end}}></img>
</div>
{{ end }}

参考

HugoでGoogle Drive(Photos)の画像を表示するShortcodeを作った

deployコマンド

どこかで goapp コマンドはそのうちバイバイするかもなので、gcloud コマンドのがいいみたいのを見たので、

$gcloud app deploy

でデプロイしています。

まとめ

2-3年前にhtml直書きして遊んでたくらいで、web周りの知識がほぼなく苦戦しましたが、

とりあえず見れるものになってよかったです。

サイトのデザインは気が向いたらまた変えるかも…