大学院へ留学する際に、必要となってくるのがポートフォリオ。まだ載せる作品が少ない内はいいけど、今後の就職活動や今作っているものをまとめたページが欲しくなると思い、暇なうちに作ってみることにしました。
Web系の技術を学んでいる身としてはWeb上でポートフォリオサイトを作りたい。かといっていまさらサーバー借りてwordpress導入するのも手間とお金がかかる。できれば最近の技術も応用したいな〜といろいろ考えて、Github pagesとHugoで作ることにしました。markdownで更新できるのも便利。
実は以前もHugoでサイトを作ろうと思い、トライしたことはあるのですが、その時は今より技術不足だったので断念。年月を経て、やり方をていねいに解説している方もいて参考にしたら出来ました。コンテンツはまだ何もないのですが。自分のテーマがある程度作れたらちゃんとポートフォリオとして作っていこうと思います。
Github pagesとして公開する場合、docsフォルダ以下を公開するように設定しなければいけないのですが、そこで少しつまづきました。Hugoでサイト作成についてには他の方がやり方を掲載しているのでそちらをご参考ください。
hugoBasicExampleをclone する
今回の記事ではHugoでオリジナルのテーマを作るために、テーマの雛形を入れて、コンテンツが表示される最低限のコードまで書いていこうと思います。 Hugoをインストールしている前提で進めます。
git clone git@github.com:gohugoio/hugoBasicExample.git
公式が用意しているサンプル記事が入ったリポジトリをcloneします。これがあれば自分のテーマできちんと記事が表示されているか、追加した機能が使えるか確認ができます。テーマが完成して公式テーマに掲載してもらうためにも入れておきます。
テーマの雛形をつくる
先ほど入れたサンプルとは別ディレクトリでテーマの雛形を入れます。作成したテーマを単体で管理するためです。 すでにあるHugoサイトとは別でテーマを生成します。以下のコマンドを実行します。
hugo new theme [Your theme name] もしくは、 hugo new theme [Your theme name] --themesDir
--themesDir無しだと、themesフォルダの中にテーマが作成されます。アカデミック用のサイトが作りたいのでテーマ名をAcademiaと名付けました。
Githubでテーマ用のリポジトリを作成します。この場合はhttps://github.com/thisisassy/Academiaになります。
cd [Your theme name] git init git add . git commit -m "first commit" git remote add origin [your theme repository] git push -u origin master
Hugoで作ったサイトディレクトリ(hugoBasicExample)で、テーマを参照します。
git submodule add git@github.com:yourname/Academia.git themes/Academia
こうすると、サイトディレクトリの中のthemesフォルダにAcademiaディレクトリが作られます。
この時点ではテーマ側のindex.htmlに何も書かれていないので何も表示されないはずです。試しに<h1>タグでサイトタイトルなどを表示してみましょう。
hugo new themeを実行してできたフォルダの中身は下記のようになります。
├── LICENSE ├── README.md ├── archetypes │ └── default.md ├── layouts │ ├── 404.html │ ├── _default │ │ ├── baseof.html │ │ ├── list.html │ │ └── single.html │ ├── index.html │ └── partials │ ├── footer.html │ ├── head.html │ └── header.html ├── static │ ├── css │ └── js └── theme.toml
この中身についてよく分からない人は、公式ドキュメントを見るか、こちらの記事が参考になります。
ひとまずオリジナルテーマ作成にあたってtheme.tomlを編集しておきましょう。私の場合は以下のようになります。
name = "Academia" license = "MIT" licenselink = "https://github.com/thisisassy/Academia/blob/master/LICENSE" description = "" homepage = "http://harukaashiuchi.me/" tags = [] features = [] min_version = "0.41.0" [author] name = "Haruka Ashiuchi" homepage = "http://harukaashiuchi.me/"
最低限の要素を書いていく
サイトディレクトリで試しに作ったテーマを見てみます。
hugo server -t Academia
この時点では、layouts/index.htmlに書かれた見出ししか書かれていません。
これだけでは、ほぼ空っぽなのでミニマルなサイトとして運用できるように必要最低限の要素だけ書いていきましょう。
layouts/index.html
{{ define "title" }} {{ .Title }} – {{ .Site.Title }} {{end}}
{{ define "main" }}
<main>
{{ range first 10 .Data.Pages }}
<section class="archive-entry">
<li>
<a href="#">{{ .Title }}</a>
</li>
</section>
{{ end }}
</main>
{{ end }}
_default/baseof.html
<!DOCTYPE html>
<html prefix="og:http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
{{- partial "head.html" . -}}
<body>
<div id="wrapper">
{{- partial "header.html" . -}}
<div id="content">
{{- block "main" . }}{{- end }}
</div>
{{- partial "footer.html" . -}}
</div>
</body>
</html>
partials/head.html
<meta charset="utf-8">
<title>{{ block "title" . }}
{{ .Site.Title }}
{{ end }}</title>
<link rel="canonical" href="{{ .Permalink }}">
partials/header.html
<header>
<div class="head__inner">
<h1>{{ .Site.Title }}</h1>
</div>
</header>
partials/footer.html
<footer>
<div class="foot__inner">
<p class="copyright"><span>©</span> 2020 Haruka Ashiuchi</p>
</div>
</footer>
上記のように書いた上で再度どうなっているかみてみます。
hugo server -t Academiaを実行すると画像のように表示されました。
まだスタイルは当たっていませんが、ここから少しずつ自分のデザインになるように作っていきます。
テーマを自作する上でいろいろな方の記事を参考にしました。
参考：
Hugoのセットアップと最初の記事作成 | Hugo 入門 / 解説 | nasust dev blog
Hugoのテーマを自作してみる テーマの雛形をつくってGitHubで管理する - hansode Lab
Hugoのテーマを何個か作ったので知見をまとめてみる - blog.unresolved.xyz
https://www.oio-blog.com/contents/%E3%83%86%E3%83%BC%E3%83%9E%E4%BD%9C%E6%88%90/(