github.devでプライベートリポジトリを更新するとパブリックな静的サイトが更新されるようにする

# 概要

`github.dev`はGitHubの該当するリポジトリの中身を、VisualStudioCodeの機能を使ってブラウザ上で編集できるサービスです。

これを用いてプライベートリポジトリを更新することで、`GithubActions`上で`Hugo`を走らせ、パブリックなサイトを更新します。

# hugoでサイトを作る(ローカル)

ターミナルなどで`hugo new site {サイト名}` でフォルダと必要ファイル群が作られます。

hugoがインストールされていない場合は、[各種インストール方法](https://gohugo.io/getting-started/installing/)のどれかを実行してインストールしましょう。

フォルダができたら、VSCodeで開きましょう。

# hugoでテーマを作る(ローカル)

フォルダを開いた状態で、`hugo new theme {テーマ名}`で空のテーマができます。

何もないですが…とりあえず`config.toml`に`theme = "{テーマ名}"`と入れておきましょう。

あとはテーマづくりです。

ここが一番時間がかかります。

とりあえず最低限な感じで…

## ./themes/{テーマ名}/layouts/index.htmlを削除

## ./themes/{テーマ名}/layouts/_default/baseof.html を編集
```html 
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
</head>

<body>
    <header>
        <h1>{{ .Site.Title }}</h1>
        <nav>
            <ul>
                <!-- orders content according to the "date" field in front matter -->
                {{ range .Site.Taxonomies.tags.ByCount }}
                <li>
                    <a href="{{ " /tags/" | relURL }}{{ .Name | urlize }}">{{ .Name }}({{ .Count }})</a>
                </li>
                {{ end }}
            </ul>
        </nav>
    </header>
    <main id="content">
        {{- block "main" . }}{{- end }}
    </main>
    <footer>
        <address>mi.ki.ri.hassha.p@gmail.com</address>
    </footer>
</body>

</html>
```

基本的な骨格を決めるテンプレートファイルです。

`{{ - block "main" . }}{{ - end }}`にページに応じたコンテンツが入ります。

**.** を忘れそうになりますが、たぶんこのドットがmainの内容を表示という意味なので重要です。

またhead内では外部のスタイルシートを読んでいます。

## ./themes/{テーマ名}/layouts/_default/list.html を編集

```html
{{ define "main" }}

{{ range .Site.RegularPages.ByDate }}
<article>
  <section>
    <h3>{{ .Title }}</h3>
    <time> - {{ .Date.Format "2006-1-2" }}</time>
  </section>
  <section>
    {{ .Summary }}
  </section>
</article>

{{ end }}
{{ end }}
```

list.htmlはホーム画面やタグ、カテゴリーなど全般のテンプレートファイルです。

`range`はhugoにおいて重要な関数で、この場合サイトの、通常のページを、Date順に並べたものを`range`で繰り返しています。

中身は簡単です。ほぼタイトルとサマリーを表示しているだけです。

## ./themes/{テーマ名}/layouts/_default/single.html を編集

```html
{{ define "main" }}

<article>
  <section>
    <h3>{{ .Title }}</h3>
    <time> - {{ .Date.Format "2006-1-2" }}</time>
  </section>
  <section>
    {{ .Content }}
  </section>
</article>

{{ end }}
```

single.htmlは記事個別の画面のテンプレートファイルです。

内容は、list.htmlをさらに簡略化し、ループを無くしたものになります。

SummaryがContentに変わったのもありますね。

# 試し記事を書いてみる(ローカル)

hugoはマークダウンを採用したサイトジェネレーターですので、直に.mdファイルを作ることで更新できます。

ですがhugoコマンドからの記事作成もできます。

ターミナルに`hugo new post/hello.md`を入力します。

contentフォルダ下にpostフォルダができて、その中にhello.mdができているはずです。

```markdown
---
title: "Hello"
date: 2021-10-24T21:49:37+09:00
draft: true
---
```

そして中身は、ある程度自動入力されています。

hugoにおけるメタデータ、タイトルやタグなどはこの形式（frontmatter）で扱うのです。

現在、draft（下書き）がtrueになっているので、これをfalseに変えましょう。

さらに内容も何か書いておきます。

```markdown
---
title: "Hello"
date: 2021-10-24T21:49:37+09:00
draft: false
---

テスト記事です。
```

この状態で、ターミナルで`hugo`と入力して実行すると、publicフォルダにサイトがビルドされます。

# Github Actionsを設定する(ローカル)

GitHub Actionsは例えばコミットに反応してLinuxコマンドを走らせる、というようなことができます。

ここではmainブランチにコミットされたときにhugoコマンドを実行してgh-pagesブランチにプッシュ、というActionを指定したいと思います。

指定の方法は@peaceirisさんの [GitHub Actions による GitHub Pages への自動デプロイ](https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d)を御覧ください。

`.github/workflows`に上記記事にあるymlを配置するだけで動くはずです。

# GitHubにプッシュ(ローカル)

## GitHubにリポジトリを作成

`gh repo create {リポジトリ名} --private`

GitHubにプライベートリポジトリを作ります。

ローカルで.gitignoreファイルを作り、`public`とだけ記入します。

`git init`

ローカルのほうのリポジトリを作ります。

`git add .`

ファイルを全部ステージに上げます（publicフォルダ以外）。

`git commit -m "initial commit"`

コミットします。

`git remote add origin {URL}`

GitHubにあるリポジトリのURLを紐つけます。

`git branch -M main`

mainブランチを作ります。

`git push -u origin main`

GitHubに変更履歴を投げます。

これでGitHub上のリポジトリにmainとgh-pagesという2つのブランチができているはずです。

# GitHub上の設定(GitHub)

リポジトリのSettingタブからナビのpagesを選び、Sourceの欄にgf-pagesブランチを選びSaveをクリックします。

これで表示されたURLにてさきほどまでローカルで作っていたサイトがデプロイされているはずです。

# GitHub.devで編集(github.dev)

リポジトリのmainブランチを開き、おもむろにブラウザのURL欄のcomをdevに変えます。

おそらくローカルとほぼ同じ内容が表示されているはずです。

content/postフォルダを開き、world.mdファイルを作ってみます。

```markdown
---
title: "World"
date: "2021-10-24"
draft: false
---

テスト記事2です。

```

左のメニューからSource Controlを開き、world.mdをステージして、コミットします。

GitHub Actionsとデプロイ後の更新が走るのを待つと、world.mdの内容も表示されているはずです。

# 雑感

最初はいくつか手数が要りますがあとはほぼVSCodeをいじるだけなので、お手軽です。

ポートフォリオサイトなどにいいのではないでしょうか。