esaをCMSにしてGithubActionsとhugoを用いて自動でホームページを更新する方法の考案

# 1 初めに
アドベントカレンダー23日目を担当します、愛知工業大学一年の牧野遥斗です。よろしくお願いします。

さて、みなさん。Webサイトは作られていますか？
Webサイトを作る時にそのままHTMLを触ってGithubなどで管理をしてもいいのですが、やはりGithubを使ったことない人にとってはWebサイトの更新だけでかなり大変な作業になってしまいます。

そこで、今サークルの情報共有で用いているesaを用いてWebサイトを更新したら簡単に、誰でも更新できるのではないかと考え、実装してみることにしました。
そこまで難しくないので、ぜひ参考にしてみてください。

# 2 実際の動作しているサイト

https://github.com/SystemEngineeringTeam/BlogSiteMarkDown

https://esa.harutiro.net/


# 3 用語まとめ

## 3.1 esa
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/d4e3a6bd-dc4f-79e8-91ab-b18a3402e433.png)
引用：https://esa.io/

>esaとは、2014年に設立された合同会社esaの「情報共有ツール」です。
>esaは「不完全でも早い段階でチームに共有し、更新を重ねることでより良い情報に育つ」という発想のもと生まれました。そのため「Share（公開）」「Develop（更新して情報を育てる）」「Organize（育った情報を整理）」の3つの流れで設計されています。
>現在は3,000社を超える企業に導入されており、主に情報の蓄積やWIP機能（書いている途中でも共有する機能）を用いて、業務の効率化を実現している企業が多いです。
引用：　https://www.stock-app.info/media/?p=37138#esa

## 3.2 hugo

![スクリーンショット 2022-12-22 19.39.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/964a6532-4616-42f9-cfa1-f838bea09a24.png)


引用：https://gohugo.io/


>HugoはGo言語で実装された「Webサイト構築フレームワーク」で、最初の公開は2013年という比較的新しいツールだ。コンテンツ管理システムではなく「Webサイト構築フレームワーク」と名乗っているとおり、コンテンツの管理ではなく、Webサイトで使われるHTMLファイルやRSSファイルなどの生成に特化した機能を備えている。
引用：https://knowledge.sakura.ad.jp/22908/?gclid=CjwKCAiAnZCdBhBmEiwA8nDQxVEZ6cnMO0uXYewDZvSncfx3Ugl2KaMjpzeWWLYtFNrCMnwrCSQKTBoCISgQAvD_BwE

## 3.3 github Actions

![スクリーンショット 2022-12-22 21.08.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/5d31d107-dee1-10cd-7a89-a1b22494ea13.png)
引用：https://github.co.jp/features/actions

>GitHub Actionsで、ソフトウェア開発ワークフローをリポジトリの中で自動化し、カスタマイズし、実行しましょう。 CI/CDを含む好きなジョブを実行してくれるアクションを、見つけたり、作成したり、共有したり、完全にカスタマイズされたワークフロー中でアクションを組み合わせたりできます。
引用：https://docs.github.com/ja/actions

## 3.4 github pages


>GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。 
引用：https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages

## 3.5 CMS

>「CMS」とは、「Contents Management System：コンテンツ・マネジメント・システム」の略で、簡単にいうとWebサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのことです。
引用：https://www.hitachi-solutions.co.jp/digitalmarketing/sp/column/cms_vol01/

# 4 技術構成

基本的には、esaによりマークダウンを作成して、それをGithubに保存して、GithubActionsを用いてhugoに出力して、Webサイトに公開する方法です。

ほぼほぼノーコードでできる構成になっているので、そこまで手間がかからずに作成をすることができます。

![Frame 75.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/dbf9b554-7e09-6bff-0aba-24d5b98551fc.png)

# 5 hugoについて

hugoは静的なWebジェネレーターということで、軽く環境構築をしていきましょう。

## 5.1 勉強資料

https://youtu.be/hjD9jTi_DQ4

## 5.2 環境構築

とりあえず、hugoをインストールしてみましょう。

```bash

brew install hugo

```

たったこれだけで完成です。

## 5.3 hugoプロジェクト作成

あらかじめ、レポジトリを作成しておきましょう。
githubからクローンをして、レポジトリを持ってきてください。

```bash

git clone 自分のリポジトリのURL

cd クローンしたディレクトリ

```

では、次にhugoのプロジェクトを作成します。

```bash

❯ hugo new site hugo-demo -f yml
Congratulations! Your new Hugo site is created in /Users/k22120kk/Downloads/hugo-demo.

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.
```

こんな感じにファイルが作成されます。
![スクリーンショット 2022-12-23 10.25.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/a7a31bef-5b26-4fd3-84ad-786ab1c4a76f.png)

## 5.4 テーマの設定

### 5.4.1 テーマの選択

hugoではテーマを用いることで簡単にそれっぽいWebページを作成することができます。

https://themes.gohugo.io/

この中から気に入ったテーマを探してみてください。
注意：テーマによって若干設定項目が変わる場所があるので気をつけてください。

では今回は下記のテーマを用いて作成していこうと思います。

https://themes.gohugo.io/themes/hugo-theme-stack/

ちなみに、各テーマに大体ドキュメントがありますので、そのｓtartedなどをみることをお勧めします。
今回のドキュメントはこちらになります。

https://stack.jimmycai.com/

### 5.4.2 テーマの反映
では、ドキュメントの指示に従いながら、テーマの反映を行っていきます。
https://stack.jimmycai.com/guide/getting-started

cdを用いて、hugoのプロジェクトページまできてください。
下記を実行することでテーマを反映させることができます。

```bash
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
```


gitinitをしていない場合はこちらで実行してみてください。
```bash
git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
```

そうすることにより、themesディレクトリが作成されて、テーマの素材が入ります。

![スクリーンショット 2022-12-23 10.43.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/806ca922-489c-ce1f-e198-2469110af999.png)

では、configファイルを設定して、themeを設定しましょう

```yml:config.yml

baseURL: ""
languageCode: ja
title: My New Hugo Site
theme: hugo-theme-stack
```

では、実際に動かしてみて、動作するか確認してみましょう。

```bash
❯ hugo server
Start building sites … 
hugo v0.108.0+extended darwin/arm64 BuildDate=unknown
WARN 2022/12/23 10:44:43 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2022/12/23 10:44:43 found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2022/12/23 10:44:43 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

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

Built in 6 ms
Watching for changes in /Users/k22120kk/Downloads/hugo-demo/{archetypes,assets,content,data,layouts,static}
Watching for config changes in /Users/k22120kk/Downloads/hugo-demo/config.yml
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
```

ウェブブラウザで`http://localhost:1313/ `をURLに入れて読み込んでみましょう。

下のような画像が出力されれば成功です。

![スクリーンショット 2022-12-23 10.55.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/f0ab4a7e-a88b-6641-8d9d-b222271fba41.png)


## 5.5 Webページを作成してみる。

では、軽くマークダウンを作成をしてWebページを作成してみましょう
下のコマンドを入力して、マークダウンを作成してみましょう。

```bash
hugo new post/first.md
```

そうすると下記のようなファイルができているはずです。

```md:content/post/first.md
---
title: "First"
date: 2022-12-23T10:49:46+09:00
draft: true
---

```

それでは追加で書き加えてみます。
ここで状態が編集モードになっているため、`draft:true`を`draft:false`に変更しましょう。
こうしないと、デプロイした時に表示されなくなります。

```md:content/post/first.md
---
title: "First"
date: 2022-12-23T10:49:46+09:00
draft: false
---

# 最初の書き込みです
ここから僕だけのウェブサイトが生まれます。

```

下のように、作成したWebページが作られているはずです。

![スクリーンショット 2022-12-29 10.20.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/4529d602-6445-8cf4-9d3b-778030185d61.png)

![スクリーンショット 2022-12-29 10.22.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/2d751d99-1d79-9045-2fca-030179ca0751.png)

## 5.6 細かい設定など
ここでは、細かく説明はしませんが、configファイルや、mdファイルの上の部分で様々な設定をすることができます。
詳しい説明をしてくれているWebページを紹介しますので、ぜひご自身で色々触って自分だけのオリジナルサイトを作ってみてください。


### 5.6.1 configの設定

https://github.com/CaiJimmy/hugo-theme-stack/blob/master/exampleSite/config.yaml

https://miiitomi.github.io/p/hugo/

### 5.6.2フロントマターの設定

https://takaken.tokyo/dev/hugo/post/write-post/


# 6 githubpagesの設定（デプロイをする）

## 6.1 gitmodulesの設定

>gitmodulesとは
>
>Git サブモジュール​は、あるリポジトリの内容を別のリポジトリ内に含めることを、参照されるリポジトリの場所を指定するだけでできるようになる Git SCM​ の機能です。 これは、外部ライブラリのソースをアプリケーションのソースツリーに含めるメカニズムを提供します。
引用：https://devcenter.heroku.com/ja/articles/git-submodules#:~:text=Git%20%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E2%80%8B%E3%81%AF,%E3%83%A1%E3%82%AB%E3%83%8B%E3%82%BA%E3%83%A0%E3%82%92%E6%8F%90%E4%BE%9B%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

ということで、デプロイする時に、この設定をしないとエラーが発生するので、設定をしましょう

```bash
touch .gitmodules
```

![スクリーンショット 2022-12-29 11.40.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/36bb97fd-346d-c770-d898-69218f57e3bb.png)


テーマによって、設定内容が変わってくるので、テーマに合わせた設定にしてください。

```:.gitmodules
[submodule "themes/hugo-theme-stack"]
    path = themes/hugo-theme-stack
    url = https://github.com/CaiJimmy/hugo-theme-stack
```

## 6.2 baseurlの設定
あとはbaseURLを指定しましょう。
ここが正しくないと、CSSがうまいこと読み取られないなどのバグが発生します。

ということで、configファイルを編集しましょう。

今回は、自分の設定をそのまま表示させていますが、カスタムドメインを使っていない場合は、`https://githubのユーザー名.github.io/レポジトリ名/`と設定しましょう。
カスタムドメインを使用している場合は、設定したドメインをそのまま書き込んでください。

```yml:config.yml

baseURL: "https://harutiro.github.io/hugo_test_qiita/"
languageCode: ja
title: My New Hugo Site
theme: hugo-theme-stack
publishDir: "docs"

menu:
    main:
      - identifier: home
        name: Home
        url: /
        params:
          icon: home
```


## 6.3 静的なファイルを生成する。

それでは、githubpagesの公開をするために、静的なファイルを生成します。
生成する時に`docs`に作ってもらえると都合がいいので、configを設定しておきましょう。

`publishDir: "docs"`を追記してあげてください。

```yaml:config.yml

baseURL: ""
languageCode: ja
title: My New Hugo Site
theme: hugo-theme-stack
publishDir: "docs"

menu:
    main:
      - identifier: home
        name: Home
        url: /
        params:
          icon: home

```

あとは下記のコマンドを打ち込んで静的なファイル(html,cssなど)を作成しましょう

```bash
hugo
```

![スクリーンショット 2022-12-29 10.39.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/1c8be447-96c9-87d9-6d23-4399f011727b.png)


## 6.4 github pagesの設定をする。

それでは、githubを用いてデプロイを行ってみましょう。
とりあえず、いつもの手順でgithubに公開しましょう。

```bash
git init
git add -A
git commit -m "initalCommit"
git remote add origin 個人のレポジトリ
git push origin master
```

![スクリーンショット 2022-12-29 10.50.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/d0efd21c-4be4-dd2d-5ab7-8f73667eed36.png)

それでは、pagesの設定をしていきましょう。
`setting/pages`を開きましょう。

![スクリーンショット 2022-12-29 10.51.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/077d55c3-16b7-6e98-8477-5b67f483bf7f.png)

`source`をDeploy from a branchに設定して

`Branch`をmaster /docsに設定しましょう

![スクリーンショット 2022-12-29 11.05.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/550f64df-44be-94b6-307b-808b753571cf.png)

カスタムドメインは今回は説明しません。


これで、masterにデプロイして、しばらく待つとデプロイが始まります。
![スクリーンショット 2022-12-29 11.44.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/aa3de768-c595-4cf6-9efa-128c1a377190.png)

うまくいった場合、設定したbaseURLの場所に行くとうまく表示されているはずです。

![スクリーンショット 2022-12-29 11.46.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/0b63f529-b651-7baa-2a41-63c962067ae9.png)


# 7 esaについて
esaではいつかのアップデートで、直接Githubに記事を保存ができるようになりました。
2016年のアップデートらしいですね。
細かい設定などは下の記事でご確認ください。

https://docs.esa.io/posts/176

では、とりあえず設定をしていきましょう。


## 7.1 設定

![スクリーンショット 2022-12-23 10.02.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/de2904ca-4e2c-8add-5e5b-8330b58ed67f.png)

setting -> Webhooksを選択します。

addを選択して、Github(β)を選択します。

![スクリーンショット 2022-12-23 10.03.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/3fe503d2-c7f3-3692-df77-7e499fcaefd8.png)

あとは、様々な設定を行って、保存をします。

**esa root category**
ここで、Webページに更新されて欲しい記事のディレクトリを選択することもできるので設定してみてください。
**output directory**
出力の場所はhugoの関係で指定しないといけないので、`/content/post/`と設定しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/9e6c283e-5b06-d2f9-5505-055cb237eb8c.png)

実際の設定項目
![スクリーンショット 2022-12-29 12.39.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/c809af84-809a-2193-758b-7776ec269640.png)


これで記事が更新（新規）で作られたら、Githubのレポジトリの更新されました。


では、実際にesaが更新されたらpostに新しいファイルが追加されるか確認してみましょう。

こういったファイルを投稿してみました。
![スクリーンショット 2022-12-29 13.07.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/e591dc8c-b871-461c-3ae8-0719d313a9a6.png)

ファイルが新しく追加されてますね。
![スクリーンショット 2022-12-29 12.37.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/1ecbebe8-401a-f513-e4dd-9afd79b732ae.png)

しかし、このままだとWebページは更新されていません。
それはhugoを用いて静的なファイルを生成していないためです。

docsが更新されてないです。
![スクリーンショット 2022-12-29 12.41.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/f3f078be-c1ce-9035-4d23-241b5af41cdc.png)


では次の章ではGithubActionsを用いてhugoを実行するプログラムを書いていきましょう。


# 8 github Actionsの設定

githubActionsを設定していきましょう。

流れとしては、新しいブランチを作成して、その中にhugoを実行させて静的なファイルを作成して、強制プッシュを用いて更新をかけていくやり方です。
無理くり動かしている雰囲気は感じますが、今はこのままでいきましょう。
何かいい方法がありましたら、教えてください。

`.github/workflows`フォルダーを作成しましょう
その中に`github-actions-demo.yml`として、ファイルを作成しておきましょう

```bash
mkdir .github
cd .github
mkdir workflows
cd workflows
touch github-actions-demo.yml
```

![スクリーンショット 2022-12-29 13.02.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/f6aceaee-ea5f-8970-2d04-b7c7d4390eee.png)

中のファイルはこのように書き込んでいきましょう。
一部人によって変わる場所があるので気をつけてください。

** 変えるもの **
`起爆させるブランチ名` `コミットする時のユーザー名、ファイル名` 

```yaml:github-actions-demo.yml

name: Deploy Sakura Server

on:
  push:
    branches:
      - master  # masterブランチが更新された時に発火させる

jobs:
  deploy:
    name: deploy
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.102.3'  # コンパイルに使用するHugoのバージョンを指定

      - name: Build
        run: hugo --minify  # 実際にHugoでコンパイルする(--minifyはファイルを圧縮するオプション)

      - name: git commit
        uses: EndBug/add-and-commit@v9
        with:
          author_name: harutiro # 投稿するユーザーに合わせてください。
          author_email: hogehoge@example.com　# 投稿するユーザーに合わせてください。
          new_branch: web_public
          message: 'hogehoge' # いい感じにメッセージを書いてあげてください。
          add: '* --force' 
          push: origin web_public --force
```

あとは、新しくgithubpagesの設定を書き換えて完成です。
ブランチの位置を`web_public`に書き換えましょう。

![スクリーンショット 2022-12-29 13.10.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/6d128cb9-d474-a800-f41f-e80671cb2b6a.png)


これで完成です。
新しくpushがされたタイミングで更新がかかっていきます。

# 9 動作実験

## 9.1 esaで記事を書く
今回はこの二つを投稿したとします。

![スクリーンショット 2022-12-29 13.08.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/df0006a3-1a3d-9c6a-c52e-271fdf51e98f.png)

![スクリーンショット 2022-12-29 13.11.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/2b1fa4f6-4b05-b813-eadc-91f0c08f5a0f.png)


## 9.2 githubの状態
しばらくすると、esaのWebhooksが走って、mdを保存してくれます。

![スクリーンショット 2022-12-29 13.12.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/2d3a75ab-4249-485e-f712-9f83a4148fbd.png)

## 9.3 githubActionsの状態
あたらしくPushされると、GithubActionsが走って、`web_public`のブランチに静的ファイルが生成されます。

![スクリーンショット 2022-12-29 13.14.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/ed393412-ccf5-be2f-fb2a-5beb1f19a9f2.png)

![スクリーンショット 2022-12-29 13.15.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/883a21a0-65ff-d7bc-4ce4-31604fab3a6c.png)

## 9.4 githubPasesの状態
`web_public`にpushされるとgithubpasesが走って、自動的にデプロイされます。

![スクリーンショット 2022-12-29 13.17.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/a0b85e07-6136-b1c1-388c-fdf451e60891.png)

## 9.5 webページの状態

自動で更新がされていることが確認できました。

![スクリーンショット 2022-12-29 13.18.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/65731781-193e-9f10-3611-5f769603afc2.png)
![スクリーンショット 2022-12-29 13.18.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/50782b8e-a081-db1b-d605-a9cea6884d5c.png)
![スクリーンショット 2022-12-29 13.18.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1209385/486f1526-9deb-31d6-ac5d-5f9744aeaa80.png)


# 10 終わりに

いかがでしたでしょうか？
あまりesaをCMS化しようという試みがないかもしれませんが、大変便利なものなのでぜひ使ってみてはいかがでしょうか？
2022年/12月時点では、esaは学生団体でしたら、1年間無料で使えて更新も無料らしいので、ぜひ使ってみてはいかがでしょうか？

# 11 参考文献

https://zenn.dev/ryo_kawamata/articles/4bf52f97165058

https://nabinno.github.io/posts/67

https://youtu.be/hjD9jTi_DQ4