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

Hugoでブログやポートフォリオなど自分のサイトを作って公開する。

Negipoyoc

はじめに

このサイトをHugoで作成し、CSSで見た目をいじるなどしたので、そのへんの知見をまとめようかなと思います。

(基本的にコーディングは0です。)

この記事では、静的サイトジェネレーターHugoを使ってサイトを構築。それを、GoogleAppEngineでホストするまでの一連の流れを書きます。(Windows)

やること

  • hugo環境構築
  • サイトのカスタマイズ(テーマダウンロードや適用など)
  • GAEのインスタンスを立ち上げ
  • デプロイして公開する。

Hugoとは?

静的サイトジェネレーターです。Golang製で、非常に高速でビルドできることが売りです。 特にブログでは記事が多くなればなるほど、こうしたツールでビルドが大変になりますが、Hugoは例外です。

なので、サイトをカスタマイズ→確認→カスタマイズ→確認→…という一連の流れが非常に早いということですね。

サイトを作る準備

Hugoをコマンドプロンプトから使えるようにする。

https://github.com/gohugoio/hugo/releases

ここからhugo_0.30.2_Windows-64bit.zipをダウンロードする。

中身のhugo.exeを適当なディレクトリに移動させておく。
今回は、C:\Hugo\bin以下に配置する。(このディレクトリは自分で作ったものです。)

そして、コントロールパネル>システムとセキュリティ>システム>システムの詳細設定>環境変数にこのディレクトリを登録します。

画像のように、Pathにこのディレクトリを登録できていればOKです。

コマンドプロンプトを開いて、hugoと打ってみて使えるようになったか確認してください。

サイト用のワークスペースディレクトリを作る。

サイトを作るにあたって、そのワークスペース用のディレクトリを作ります。 自分は C:\Go\WorkSpace に作っています。

コマンドプロンプトを開いて、カレントディレクトリをそのディレクトリにします。

C:\Users\CST>cd C:\Go\WorkSpace
C:\Go\WorkSpace>

サイトに使うコンポーネントを初期化する

C:\Go\WorkSpace>hugo new site {サイトの名前}
例:) C:\Go\WorkSpace>hugo new site negipoyoblog

をします。

問題が起こらなければ

C:\Go\WorkSpace>hugo new site negipoyoblog
Congratulations! Your new Hugo site is created in C:\Go\WorkSpace\negipoyoblog

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

といったメッセージと共に、negipoyoblogディレクトリに以下のようなファイル群ができているはずです。

準備を元にサイトを作る

以上で準備は完了なので、ここからサイトを作ってみます。

テーマを選ぶ

https://themes.gohugo.io/ からすきなものを選びましょう。 自分はこれを選びました。

ブログだけで100以上テーマがあるので、好きなものを選びましょう。

テーマを選んだら

C:\Go\WorkSpace\negipoyoblog>cd themes

でテーマフォルダにカレントディレクトリを移します。

その後、

C:\Go\WorkSpace\negipoyoblog>git clone https://github.com/jpescador/hugo-future-imperfect.git

でテーマに合わせてGit cloneします。
(Gitをインストールしてない人は、git cloneしなくても、そのテーマのGithubからダウンロードしてきてこのディレクトリに配置しても良いです。)

テーマを適用してみる。

自己流のやり方ですが、サンプルを元にして改造して自分のサイトコンテンツを作っていくのが良いのでは?と思っています。

サンプルについて:テーマにもよるのですが、基本的にテーマにはexampleSiteのようなディレクトリがあるはずです。

そのexampleSiteの中に画像(左)のように用意されているので、それを↑で初期化したフォルダに上書きでコピーしてしまいます。

一度動かしてみる

上書きコピーが終わったら、hugoコマンドでビルドした後、hugo serverコマンドでローカルでサーバを起動してみてください。

その後、localhost:1313にアクセスすると、ダウンロードしたテーマのサンプルサイトが動いているはずです。

※自分は上のコマンドをbatファイルでまとめています。

debug.bat
hugo
hugo server --watch

–watchオプションは、CSSやmdなど、更新するたびにブラウザ側のプレビューも自動で更新されます。便利です。

サイトをカスタマイズしてみる。

全体的に作用するパラメータ(メールアドレスやサイト名など)などは基本的にconfig.tomlにまとまっているはずです。

他はテーマによるのですが、Blog記事やページの記述などはcontentフォルダ以下にまとまっているのが多いです。

ざっと何がどこにあるか眺めてもらって、mdやCSSなどを変えてみて、どのように反映されるか見ながら変えてみましょう。

GoogleAppEngine(GAE)にデプロイして確認する。

個人的にはGoogleAppEngineにホスティングするのが楽なので紹介しておきます。

GCP上でプロジェクトを作る

https://cloud.google.com/?hl=ja にアクセスします。

Googleアカウントを選択して、コンソールを開きます。 ページで左上に「プロジェクトを選択する」というのがあるので其れをクリックします。

+ボタンを押して、プロジェクトを作ります。 プロジェクト名を決めてあとはクラウド上でプロジェクトが生成されるのを待ちます。(1分くらい)

自分は今回「negipoyoblog-1」というプロジェクト名にしました。

AppEngineのインスタンスを作る。

作成したプロジェクトを選択して、左端のハンバーガーメニューをクリックします。

すると以下のような画面になります。

自分の場合Goにしています。

次にリージョン選択ですが、自分は asia-northeast1 にしました。

これでインスタンスが立ち上がるので待ちます。(立ち上がったらチュートリアルをやらないか?と勧められますが無視します。)

これでGCP側は準備完了です。

サイトをDeployする。

GAE用にサイトにファイル追加

  • main.go
  • app.yaml を追加します。場所は自分の場合だと C:\Go\WorkSpace\negipoyoblog 以下にこの2つを設置します。
main.go
package main

import "net/http"

func init() {
    http.Handle("/", http.FileServer(http.Dir("public")))
}
app.yaml

https://blog.youyo.info/post/2015/10/23/publish-hugo-in-gae/

こちらのサイトを参考にしました。

デプロイする。

GoogleCloudSDKをインストールしてない人はここでインストールしてください。 自分は

http://www.apps-gcp.com/google-cloud-sdk-install/

こちらのサイトを参考にしました。


デプロイする時は

  • hugoコマンドでビルドする
  • goappコマンドでデプロイする

という感じでやりましょう。

デプロイするにあたりいちいちコマンドを打ってもよいですが、自分はbatファイルを書いています。

deploy.bat
hugo
goapp deploy -application {作ったプロジェクトのID} app.yaml
  • hugo コマンドでまず全体をビルドする。(大抵一瞬で終わる)
  • それが完了した後デプロイを開始する。

ということを1つのコマンドでできるようにしてます。

これができたらもうWeb上に反映されているので確認してみましょう。

Web上で確認してみる。

基本的には
https://{作ったプロジェクトのID}.appspot.com
(今回の自分なら https://negipoyoblog.appspot.com

にデプロイされています。

デプロイが完了してから反映されるまで少し時間がかかるので、2,3分待ちましょう。

お疲れ様でした。

-終-