概要
github.devはGitHubの該当するリポジトリの中身を、VisualStudioCodeの機能を使ってブラウザ上で編集できるサービスです。
これを用いてプライベートリポジトリを更新することで、GithubActions上でHugoを走らせ、パブリックなサイトを更新します。
hugoでサイトを作る(ローカル)
ターミナルなどでhugo new site {サイト名} でフォルダと必要ファイル群が作られます。
hugoがインストールされていない場合は、各種インストール方法のどれかを実行してインストールしましょう。
フォルダができたら、VSCodeで開きましょう。
hugoでテーマを作る(ローカル)
フォルダを開いた状態で、hugo new theme {テーマ名}で空のテーマができます。
何もないですが…とりあえずconfig.tomlにtheme = "{テーマ名}"と入れておきましょう。
あとはテーマづくりです。
ここが一番時間がかかります。
とりあえず最低限な感じで…
./themes/{テーマ名}/layouts/index.htmlを削除
./themes/{テーマ名}/layouts/_default/baseof.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 を編集
{{ 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 を編集
{{ 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ができているはずです。
---
title: "Hello"
date: 2021-10-24T21:49:37+09:00
draft: true
---
そして中身は、ある程度自動入力されています。
hugoにおけるメタデータ、タイトルやタグなどはこの形式（frontmatter）で扱うのです。
現在、draft（下書き）がtrueになっているので、これをfalseに変えましょう。
さらに内容も何か書いておきます。
---
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 への自動デプロイを御覧ください。
.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ファイルを作ってみます。
---
title: "World"
date: "2021-10-24"
draft: false
---
テスト記事2です。
左のメニューからSource Controlを開き、world.mdをステージして、コミットします。
GitHub Actionsとデプロイ後の更新が走るのを待つと、world.mdの内容も表示されているはずです。
雑感
最初はいくつか手数が要りますがあとはほぼVSCodeをいじるだけなので、お手軽です。
ポートフォリオサイトなどにいいのではないでしょうか。