はじめに

HugoとGitHub(github-pages)を利用して3分で静的サイトを立ち上げる方法です

Hugoは色々なことができるのですが、
全てすっ飛ばして兎に角サイトが立つまでの一直線の手順を書いてみました

では、どうぞ

環境

ローカルマシン (Ubuntu 16.04 LTS)
git / vi がインストールされている事 (されてるよね!?)
GitHubアカウントがあること

記事中の tomonobu Tomonobu3110 は自分の環境に合わせて読み替えてください

Hugoのインストール (Ubuntu 16.04 LTS)

× かなり古いhugoがインストールされる
$ sudo apt-get install hugo

○ 新しいバージョンのインストール
$ wget https://github.com/gohugoio/hugo/releases/download/v0.68.3/hugo_0.68.3_Linux-64bit.deb
$ sudo apt install ./hugo_0.68.3_Linux-64bit.deb

サイト(hugo_blog)を作る

$ cd ~/
$ mkdir git
$ cd git

$ hugo new site hugo_blog
Congratulations! Your new Hugo site is created in "/home/tomonobu/git/hugo_blog".

gitにコミット

$ cd hugo_blog
$ git init .
$ git add -A
$ git commit -m "Init Hugo."

GitHubにあげる

GitHubでリポジトリ作成 (hugo_blog)
以下、GitHubで表示されるチュートリアル

echo "# hugo_blog" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/Tomonobu3110/hugo_blog.git
git push -u origin master

実際の作業は↓

$ git remote add origin https://github.com/Tomonobu3110/hugo_blog.git
$ git push -u origin master

設定ファイルいじり

$ vi config.toml

config.toml

baseurl = "https://tomonobu3110.github.io/hugo_blog/"
languageCode = "ja-JP"
title = "Tomo3110's New Hugo Site"
publishDir = "docs"
copyright = "Copyright; 2020, Tomonobu Saito. All rights reserved."
theme = "pickles"

最初の記事を書く

$ hugo new posts/my-first-post.md
$ vi content/posts/my-first-post.md

my-first-post.md

---
title: "My First Post"
date: 2020-04-01T14:14:38+09:00
---
My first post.

※ draft: true は削除する

Hugo で使える Markdown の記法

Markdown Cheatsheet

テーマのダウンロード(pickles)

$ git submodule add https://github.com/mismith0227/hugo_theme_pickles.git themes/pickles

ローカル・デバッグ

HugoをWebサーバとして使う

$ hugo server --bind="xxx.xxx.xxx.xxx" --port=8080 --baseURL="xxx.xxx.xxx.xxx"

ブラウザで http://xxx.xxx.xxx.xxx:8080/ にアクセスすると
ホームページが見える！！

注：xxx.xxx.xxx.xxx はローカルマシンのIPアドレス

ビルドとデプロイ

$ hugo

                   | EN
-------------------+-----
  Pages            | 14
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  4
  Processed images |  0
  Aliases          |  2
  Sitemaps         |  1
  Cleaned          |  0

Total in 89 ms

$ git add -A
$ git commit -m "add: first post"
$ git push origin master

※ hugo の出力結果の数字は実際とは少し違うと思います

テーマがあると docs の下に index.html が生成される様子
テーマがないと index.xml だけ...