要点
Hugoで静的サイトを作成し、Github Pagesで公開した。
はじめに
Github Pagesでサイトを公開する一覧の流れを経験してみたかった。
またGithubアカウントに紐付いたサイトとなるため、「ポートフォリオ」「ポートフォリオ＋ブログ」「ブログ」にするか悩んでおり、テーマの変更で簡単に後から切り替えられ、変更コストが低そうなツールを用いてサイトを構築したかった。
そこでGithubのリポジトリでstatic-site-generatorタグがついたものから、目ぼしいものに軽く目を通し、聞き馴染みもあったHugoを選択した。
Hugoと好みのテーマでブログを作成し、Github Pagesで公開することにした。
静的サイトジェネレーター
Githubのリポジトリでstatic-site-generatorタグがついており、Documentサイト用ではなく汎用的な目ぼしいものを比較した。(2019年8月20日時点)
| “owner” | “name” | “star” | “created_at” | “updated_at” | “license” | “url” | “description” |
|---|---|---|---|---|---|---|---|
| “jekyll” | “jekyll” | 38443 | “2008-10-20T06:29:03Z” | “2019-08-20T07:18:59Z” | “MIT License” | “https://github.com/jekyll/jekyll" | “🌐 Jekyll is a blog-aware static site generator in Ruby” |
| “gohugoio” | “hugo” | 37488 | “2013-07-04T15:26:26Z” | “2019-08-20T08:29:02Z” | “Apache License 2.0” | “https://github.com/gohugoio/hugo" | “The world’s fastest framework for building websites.” |
| “gatsbyjs” | “gatsby” | 37346 | “2015-05-21T22:43:05Z” | “2019-08-20T08:18:17Z” | “MIT License” | “https://github.com/gatsbyjs/gatsby" | “Build blazing fast, modern apps and websites with React” |
| “hexojs” | “hexo” | 27700 | “2012-09-23T15:17:08Z” | “2019-08-20T07:48:37Z” | “MIT License” | “https://github.com/hexojs/hexo" | “A fast, simple & powerful blog framework, powered by Node.js.” |
やり方
サイト作成
下記を参考にすると、Hugoを利用し好きなthemeと共にサイトを構築が出来る。
- Build Site
- Theme (for me)
またGithub Pagesに公開する方法は下記が有用。
テーマ改造
themeは見た目的に好みでだったdream-plusを利用したが、設定変更だけでは対応できない事があった。 1つ目はリンク可能な外部サービスの種類拡張。 gistやamazonのiconが存在しなかったため、コードを書き換える必要があった。
2つ目は記事新規作成時のテンプレートの修正。こちらはthemeのarchtypesではなく、プロジェクトのarchtypes/default.mdを読み込ませるようにしても解決しそうではあった。 ただしヘッダーのメタ情報の設定はthemeに依存するので、新規作成時にメタ情報はthemeのテンプレートを利用、本文はプロジェクトのテンプレートを利用といった柔軟なことが出来なさそうだったので、themeのテンプレートを書き換えたかった。
上記の問題を解決したかったため、Materialsの内容では製作者のリポジトリをSubmoduleとして登録していたが、リポジトリをフォークしてそれをSubmodule化し、修正することにした。
- https://github.com/ta08/hugo-dream-plus/tree/fc64d64fbfbc49a664ff59135398a407057b182d
- https://github.com/ta08/hugo-dream-plus/tree/d9aec6c6f11b1bb4dae4e06b5ed05580f1c316bf
おわりに
Hugoを利用して静的サイトの公開を行った。初めてHugoを利用してみたものの、導入コストが非常に低く簡単にサイトの公開を行うことが出来た。やった！
まだ使用し始めて間もないため使用感があまりないが、ブログ用途の場合はMarkdownで記事を記述するため、既に登録されたタグやカテゴリーの補完が効かないので表記揺れが心配。