概要

esa.io を使って､静的サイトジェネレータである､Hugoを使って公開してみたので､手順にまとめてみました 😄 Hugo のインストール自体は､公式に書いてあった､Quick Startを見ながらやれば大丈夫！

全体の流

1. Hugo のインストール
2. 記事作成用のリポジトリ作成
3. 記事公開用のリポジトリ作成
4. CircleCIと記事作成用リポジトリとの連携
5. GitHub Page の設定
6. esa.io との連携

用意するもの

• brew がインストールされてるMac
• GitHubのアカウント
  • 記事作成用のリポジトリ
  • GitHub Page用のリポジトリ
• CircleCIのアカウント

Hugo のインストール

brew を使えばあっという間にインストールできます｡

❯ brew install hugo

とりあえず､バージョンを確認してみる

❯ hugo version
Hugo Static Site Generator v0.58.3/extended darwin/amd64 BuildDate: unknown

新規サイトの作成 esa-0ta2-blog が作りたいサイト名になるので適宜変えてもらえればOKです｡

❯ hugo new site esa-0ta2-blog
Congratulations! Your new Hugo site is created in /Users/0ta2/.ghq/github.com/0ta2/esa-0ta2-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.

記事作成用のリポジトリ作成

GitHub に記事公開用のプライベートリポジトリを作成しておいてください｡

記事作成用リポジトリにCommit & Push

配下に作成したサイト名でフォルダができるので､移動して git init を実行すればOK!

❯ cd esa-0ta2-blog/

❯ pwd
/Users/0ta2/.ghq/github.com/0ta2/esa-0ta2-blog

❯ git init

テーマの適用

テーマは､下記から探すことができます｡

https://themes.gohugo.io/

今回は､ zen というシンプルなやつにしました!

❯ git submodule add https://github.com/frjo/hugo-theme-zen.git themes/zen

config.toml に zen を設定すれば､テーマの指定ができます｡

❯ echo 'theme = "zen"' >> config.toml

試しに記事を作成してみる

❯ hugo new posts/my-first-post.md
/Users/0ta2/.ghq/github.com/0ta2/esa-0ta2-blog/content/posts/my-first-post.md created

❯ cat content/posts/my-first-post.md
---
title: "My First Post"
date: 2019-10-05T12:07:42+09:00
draft: true
---

ローカルで hugo を起動

サイトへのアクセスが､下記のURLと表示されてるので､アクセスすればシンプルな､ zen のテーマのサイトが見れるはずです｡

http://localhost:1313/

❯ hugo server -D
Building sites … WARN 2019/10/01 00:09:49 .File.UniqueID on zero object. Wrap it in if or with: {{ with .File }}{{ .UniqueID }}{{ end }}

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

Total in 203 ms
Watching for changes in /Users/0ta2/.ghq/github.com/0ta2/esa-0ta2-blog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/0ta2/.ghq/github.com/0ta2/esa-0ta2-blog/config.toml
Environment: "development"
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

終了したいときは､Ctrl + c で終了できます｡

カスタマイズ

下記の項目を修正すれば､タイトル等を変更することができます｡ canonifyURLs を有効にしないと､GitHub Page で表示できないので､必ず true にしましょう！

❯ cat config.toml
baseURL = "https://0ta2.github.io/gh-page/"
languageCode = "ja-jp"
canonifyURLs = true # 相対パスじゃなくて､baseURLを起点にする｡
enableEmoji = true  # 絵文字サポートを有効にする
title = "日々のメモ書き"
theme = "zen"

静的サイトを生成

静的サイトを生成するには､ただ単純に hugo とするだけで生成される｡

❯ hugo
Building sites … WARN 2019/10/05 12:11:42 .File.UniqueID on zero object. Wrap it in if or with: {{ with .File }}{{ .UniqueID }}{{ end }}

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

Total in 403 ms

記事作成用のリポジトリ作成

一旦､今までの状況をpushしておく

.gitignore で不要なものを除外するようにする｡

❯ cat .gitignore
# Hugo
/public

# Mac
.DS_Store
❯ git add .gitignore

git status でみると除外されてる｡

❯ git status
❯ git add .
❯ git cm -m "first commit"
❯ git remote add origin git@github.com:0ta2/esa-0ta2-blog.git
❯ git push -u origin master

記事公開用のリポジトリ作成

公開用のリポジトリを作成しておきます｡ 公開用になるので､パブリックリポジトリにしておきましょう！

CircleCIと記事作成用リポジトリとの連携

CircleCI にログインして､ADD PROJECTS から公開用になるページのリポジトリを､Set Up Projectの設定をしていきます！

とりあえず､Linux であればOK！

下の方に､サンプルの yml があるので､一旦そちらを使ってみる！

❯ vim .circleci/config.yml
❯ git add .circleci/
❯ git commit -m "Add Circleci yml"
❯ git push origin master

Push ができたら､画像にある Start building でbuild開始と思ったら､ すでにPushを検知して､buildが走ってる 😅

ここから､少しややこしいけど､ ssh 鍵の設定をやっていく｡ CircelCI自体はデプロイの権限しかないから､ssh鍵登録して､Pushできるようにしてあげる設定をする｡

SETTINGS の歯車マークから設定画面を開く

SSH Permissions から鍵登録する｡

Hostname と Private Key を登録します｡ Hostname のは､鍵に関連付けるホスト名を入力する必要があるそうです｡ なので､今回は github.com にしています｡ Private Key は､GitHubに登録している､鍵を使います｡ ただ､OpenSSHのデフォルトフォーマットはサポートしていないとのこと 😱

なので､適宜 pem に変換してね！

登録できたら､Fingerprintを確認できるので､メモっておきます｡

Pem に変換したら登録すれば､CircelCIでやっとPushできるようになります｡

メモった､Fingerprintを下記のconfに記載したら､git pushしちゃいましょう！

❯ mkdir .circleci
❯ touch .circleci/config.yml

---
version: 2

defaults: &defaults
  working_directory: ~/repo
  docker:
    - image: cibuilds/hugo:0.58
      environment:
        TZ: "Asia/Tokyo"

jobs:
  build:
    <<: *defaults
    steps:
      - checkout
      - run: git submodule sync
      - run: git submodule update --init --recursive

      - add_ssh_keys:
          fingerprints:
            - "64:73:27:82:6b:dc:99:e1:a8:bc:e4:67:8e:a3:20:f8"

      - run:
          name: Git Add config
          command: |
            git config --global user.name "CircleCI"
            git config --global user.email "circleci@example.com"

      - run:
          name: Git Commit & Push
          command: |
            git clone git@github.com:0ta2/gh-page.git public
            hugo
            cd public
            git add .
            git commit -m "[ci skip] publish"
            git push origin master

❯ git add .circleci/config.yml
❯ git commit -m "Modify CircleCI yml"

GitHub Page の設定

記事公開用 のリポジトリで設定していきます｡

Settings を選択して､下の方に設定項目があるので､移動します｡

GitHug Page の設定項目があるので､ None を master branch に変更します｡

これで､記事作成用のGitHubと記事公開用の連携ができたので､今度はesa.ioと連携していきましょう！

SETTINGS から設定する｡

Webhook・アプリ連携 からGitHub との連携設定をしていきます｡ Webhook・アプリ連携 を選択すると､Add webhooksのボタンが出てくるので､それを選択して進めていきます｡

いろんなものと連携できるようになっています｡ 今回は､GitHub(β) で連携します｡ まだ､β版なので本リリースが待ち遠しいっす!

参考: GitHub Webhook (β) で GitHubのリポジトリに md ファイルを push できるようになりました

GitHub(β) には､下記のように入力します｡

GitHub API は､ここから取得できるよ

実際に入力するとこんな感じ

これで､Ship It! での更新のタイミングでmdファイルが､GitHubにpushされるようになります!

動くかどうか､試してみましょう!

確かに新しく記事が追加されてのが確認できました!

❯ git pull origin master
remote: Enumerating objects: 8, done.
remote: Counting objects: 100% (8/8), done.
remote: Compressing objects: 100% (4/4), done.
Unpacking objects: 100% (5/5), done.
remote: Total 5 (delta 1), reused 0 (delta 0), pack-reused 0
From github.com:0ta2/esa-0ta2-blog
 * branch            master     -> FETCH_HEAD
   c2640e4..ffaba87  master     -> origin/master
Updating c2640e4..ffaba87
Fast-forward
 content/posts/12.html.md | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 content/posts/12.html.md

中身はこんな感じです

❯ cat content/posts/12.html.md
---
title: "testだよ!"
category:
tags:
created_at: 2019-10-05 13:02:38 +0900
updated_at: 2019-10-05 13:02:38 +0900
published: true
number: 12
---

これはテストです!

試しにローカルサーバで動かしてみると､､､

❯ hugo server -D

できてる 😀

所感

CircleCIからPushさせるのは始めただったので少し躓いたりしましたが､無事公開できました！ 😁 これで､お手軽に記事をどんどん公開できる！ 😎