目次

環境

Goolge Compute Engine
Ubuntu18.04 server

$ cat /etc/os-release
NAME="Ubuntu"
VERSION="18.04 LTS (Bionic Beaver)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 18.04 LTS"
VERSION_ID="18.04"

手順

パッケージのインストール

$ sudo apt-get install golang-go
$ go version
go version go1.10.1 linux/amd64

$ sudo snap install hugo
hugo 0.41 from 'hugo-authors' installed
$ hugo version
Hugo Static Site Generator v0.42.1 linux/amd64 BuildDate: 2018-06-13T14:52:13Z

作業ディレクトリの作成

$ cd ~
$ pwd
/home/kowloon

$ mkdir hugo
$ cd hugo

サイトの新規作成

$ pwd
/home/kowloon/hugo

$ hugo new site blog
Congratulations! Your new Hugo site is created in /home/kowloon/hugo/blog.

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.

テーマのインストール

$ git submodule add git@github.com:kakawait/hugo-tranquilpeak-theme.git ./themes/tranquilpeak
Cloning into '/home/kowloon/hugo/blog/themes/tranquilpeak'...
remote: Counting objects: 3872, done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 3872 (delta 0), reused 0 (delta 0), pack-reused 3867
Receiving objects: 100% (3872/3872), 16.70 MiB | 25.64 MiB/s, done.
Resolving deltas: 100% (2043/2043), done.

$ ls ./themes/
tranquilpeak

$ ls ./themes/tranquilpeak/
CHANGELOG.md  LICENSE    archetypes  exampleSite  images   package.json  src     tasks
Gruntfile.js  README.md  docs        i18n         layouts  showcase.png  static  theme.toml

テンプレートサイトのコピー

$ cp -R ./themes/tranquilpeak/exampleSite/* ./


$ ls content/
post

$ ls static/
img

$ head config.toml
# Tranquilpeak
# Version : 0.4.3-BETA
# Author : Thibaud Leprêtre

# I STRONGLY recommend you to use a CDN to speed up loading of pages.
# There is many free CDN like Cloudinary or you can also use indirectly
# by using services like Google Photos.

設定ファイルの編集

クイックな動作確認のため、最小限の設定値のみ変更する。

$ vi config.toml


baseURL = "http://blog.kowloonet.org/"
languageCode = "en-us"
defaultContentLanguage = "en-us"
title = "九龍堂雑録"
theme = "tranquilpeak"
disqusShortname = "tranquilpeak"

動作確認

config.tomlが配置されているディレクトリに移動して実行すること。

$ hugo server -D

                   | EN-US
+------------------+-------+
  Pages            |    73
  Paginator pages  |     4
  Non-page files   |     0
  Static files     |     5
  Processed images |     0
  Aliases          |    27
  Sitemaps         |     1
  Cleaned          |     0

Total in 311 ms
Watching for changes in /home/kowloon/hugo/blog/{content,data,layouts,static,themes}
Watching for config changes in /home/kowloon/hugo/blog/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

ローカルホストのTCP:1313でLISTENされるので、 ターミナルソフトで別のSSH接続を行い、curlで確認する。

$ netstat -na | grep 1313
tcp        0      0 127.0.0.1:1313          0.0.0.0:*               LISTEN

$ curl -X GET http://localhost:1313


<!DOCTYPE html>
<html lang="en-us">
  <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="Hugo 0.42.1 with theme Tranquilpeak 0.4.3-BETA">
    <title>九龍堂雑録</title>

curlの実行結果にて、htmlが取得できれば問題なし。
Ctrl+CでHugoのサーバを停止。

GitHubへのコミット (サイト構築前)

ここまでの結果をいったんGitHubにコミットする。

$ pwd
/home/kowloon/hugo/blog

$ git init
Initialized empty Git repository in /home/kowloon/hugo/blog/.git/

$ git add .

$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

	new file:   .gitmodules
  <snip>

$ git commit -m "1st commit."
  [master (root-commit) a18b7f1] 1st commit.
   17 files changed, 1982 insertions(+)
   create mode 100644 .gitmodules
   <snip>

GitHub.com上にリポジトリを作成。

hugo_setup_01.png

SSHの欄をコピーして、ターミナルに戻る。
hugo_setup_02.png

ローカルからリモート(Github.com)に向けてpush

$ git remote add origin git@github.com:kowloon-dev/blog.git

$ git push --set-upstream origin master
<snip>
To github.com:kowloon-dev/blog.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

GitHub.com側にファイルがPushされたことを確認。
hugo_setup_03.png

記事のBuild

config.tomlがあるフォルダでhugoコマンドを実行すると、 publicフォルダ配下に公開用のHTMLファイルが生成される。

$ pwd
/home/kowloon/hugo/blog

$ hugo

                   | EN-US
+------------------+-------+
  Pages            |    73
  Paginator pages  |     4
  Non-page files   |     0
  Static files     |     5
  Processed images |     0
  Aliases          |    27
  Sitemaps         |     1
  Cleaned          |     0

Total in 353 ms

$ ls ./public/
2013  2015      archives    css     img         index.xml  page  sitemap.xml
2014  404.html  categories  images  index.html  js         post  tags


ドメイン名の設定

サイトを公開するためのドメイン「blog.kowloonet.org」のDNSレコードを書き換えて、Hugoを稼働させているサーバのIPに変更する。
(本例ではGoogle Compute EngineのサーバIP)

hugo_setup_04.png


Nginxの設定

Nignxの実行ユーザである「www-data」を公開ディレクトリのグループ(本例では「kowloon」)に追加する

$ ll -d /home/kowloon/hugo/blog/
drwxrwxr-x 10 kowloon kowloon 4096 Jun 14 20:57 /home/kowloon/hugo/blog//

sudo vi /etc/passwd
www-data:x:33:33:www-data:/var/www:/usr/sbin/nologin


$ sudo vi /etc/group
kowloon:x:1003:www-data  ←末尾に「www-data」を追記

Nginxの設定ファイルを編集。

sudo vi /etc/nginx/sites-available/default

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /home/kowloon/hugo/blog/public;

        index index.html index.htm index.nginx-debian.html;

        server_name _;
}

$ sudo service nginx start

http://blog.kowloonet.orgにアクセスし、テンプレートの記事が表示されることを確認する。

hugo_setup_05.png

テンプレートファイル/カテゴリディレクトリの削除

$ cd content/post/
$ pwd
/home/kowloon/hugo/blog/content/post

$ ls
Cover-image-showcase.md            Tags-plugins-showcase.md
Elements-showcase.md               Video-integrations-showcase.md
Hidden-pagination-showcase.md      Welcome-to-the-new-Tranquilpeak.md
Hidden-social-section-showcase.md  highlighted-code-showcase.md
Hidden-tag-section-showcase.md     中文測試.md
Image-gallery-showcase.md          日本語テスト.md

↑↑↑
テンプレートで用意されていた.mdファイル群。これらを削除する。

$ rm ./*.md

$ cd ~/hugo/blog/public/categories/
$ pwd
/home/kowloon/hugo/blog/public/categories

$ ls
features  hugo  index.html  index.xml  releases  tranquilpeak

↑↑↑
テンプレート記事で生成されたカテゴリ群。これらを削除する。

$ rm -rf ./releases/
$ rm -rf ./tranquilpeak/
$ rm -rf ./features/


$ cd ~/hugo/blog/public/
$ ls
2013  2015  404.html  categories  images  index.html  js    post   tags
2014  archives  css         img     index.xml   page  sitemap.xml

↑↑↑
2013,2014,2015年のディレクトリはテンプレート記事で生成されたもの。これらを削除する。

$ rm -rf ./2013
$ rm -rf ./2014
$ rm -rf ./2015
$ ls
archives    css     img         index.xml  page  sitemap.xml
404.html  categories  images  index.html  js         post  tags

自分の記事を配置

content/postディレクトリに、自分の記事(Markdown形式)を配置する。 hugoコマンドでサイトを再構築

$ cd content/post/
$ pwd
/home/kowloon/hugo/blog/content/post

$ vi Hugo+GCEでMarkdownブログサイトを作る.md

---
title: "Hugo+GCEでMarkdownブログサイトを作る"
date: 2018-06-14
categories:
- hugo
tags:
- markdown
---

(以下、記事本文をMarkdownで書く)
:wq

$ cd ~/hugo/blog
$ hugo

                   | EN-US
+------------------+-------+
  Pages            |    16
  Paginator pages  |     0
  Non-page files   |     0
  Static files     |     5
  Processed images |     0
  Aliases          |     4
  Sitemaps         |     1
  Cleaned          |     0

Total in 75 ms

サイトに反映されたことを確認する。 hugo_setup_06.png

hugo_setup_07.png

GitHubへのコミット(サイト構築後)

ここまでの結果をGitHubにコミットする。

$ git add .
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

	deleted:    content/post/Cover-image-showcase.md
	deleted:    content/post/Elements-showcase.md
<snip>

$ git commit -m "1st site building has succeeded."

$ git push
Counting objects: 226, done.