Hugo+Github Pagesでプロフィールページを作ってみた
はしがき
Qiita、Zennなどアウトプットする場が増えていき、それをまとめるようなものを作りたいなと思い立ちました。今回は一念発起してプロフィールページを作ることにしましたので、手順などをまとめて公開しようと思います。
サーバーサイドばっかりやってて、フロントできないコンプレックス解消も目的であったのですが、これは達成されません笑
Github Pages使えば無料でできるし、使ってみたかったという理由でホスト先はGithub Pagesにしました。あとから色々調べてみるとNetlifyを使う方が多いみたいです。
調べていくうちに、静的サイトジェネレータ(SSG)を使ってWebページを作るのが簡単らしいことが分かりました。Jamstackのページに色々なものがまとまってます。今回は特に簡単に作れるらしいHugoを使うことにしました。
できたページはこちらです。よければ見ていってください。
では、さっそく手順を記載していきます。
とりあえず空リポジトリを作成する
Github.comから、新しくリポジトリを作成します。
作った空リポジトリをcloneしてその配下で作業する前提で書きます。
Hugoのインストール、ページ作成
brew install hugo
hugo new site profile
homebrewを使わない場合は公式ドキュメントを参照してください。
profileの部分は作ろうとしているサイト名に変えてください。
これでページのインストールとページ作成の準備ができました。か、かんたん・・・！！
Hugoテーマを決める
Hugoにはテーマと言われるデザインのテンプレートが多数用意されています。ここから、どのデザインをもとにするかを決めます。テーマ一覧はこちらから見れます。
プロフィールページを作るにあたってテーマ決めにすごい時間かかりました・・・
いくつか悩んだ候補を紹介したいと思います。どれも2021年9月時点で、最近も更新があったテーマをあげています。
toha
- よさそうな点
- スクロールしたときの動きとかデザインがイマドキな感じがする
- 公式のドキュメントが丁寧
- 不採用理由
- 個人的にもう少しシンプルなのが好み
- 個人的にトップページはなるべくシンプルにしておきたい
hello-friend-ng
- よさそうな点
- 左上のホームリンクかっこいい
- デモサイトがない
- 不採用理由
- ダークモード/ライトモードの切り替えボタンがなさそう
Coder
- よさそうな点
- シンプル
- 公式のドキュメントが丁寧
- 不採用理由
- ダークモード/ライトモードの切り替えボタンが右下にあって好みじゃなかった
PaperMod
- よさそうな点
- シンプル
- 公式のドキュメントが丁寧
- 採用理由
- ダークモード/ライトモードの切り替えの位置とボタンがしっくりきた
- github starも多くて、アップデートがしばらく続きそう
テーマを設定する
以下でテーマを設定できます。これも簡単でビックリ。
サブモジュールに設定すればOKです。
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1
git submodule update --init --recursive
ちなみに、削除したいときは以下でできます。
git submodule deinit -f themes/hello-friend-ng/
git rm -f themes/hello-friend-ng/
その後、サンプルのconfig.toml(PaperModはyml)を丸パクリしたあと、
hugo server
にて起動できます。http://localhost:1313/で見れると思います。
起動しておくと、変更を検知して自動で変更を反映してくれるのでとても便利です。
設定ファイルを書いて、ページを自分好みに設定する
公式の設定ドキュメントとテーマのドキュメントを見ながら、config.tomlを設定します。
自分のページの設定ファイルも配置しておきます。
また、記事を追加したい時はhugo new posts/hoge.mdと打てばcontents/posts配下に新規ページhoge.mdが作れます。
ちょっと詰まったポイントたち
- 記事を追加したつもりなのに表示されない
- 記事の設定の
draftをtrueからfalseに変更
- 記事の設定の
- ローカルの画像を表示したい
-
static配下におけば相対パスで参照できます
-
- ※ 2022/08/10追記
- 記事内に画像がうまく表示できていなくなっているのを発見しました・・・
- 原因はわかりませんがPage Bundleで解消しました。
- このような感じでディレクトリ内に画像をおけば記事内から参照できますのでそれで回避しました。
-
tagsに変更が反映されない-
hugo serverにて再度起動したら反映されました
-
Github Pagesで公開する
config.tomlに以下を設定します。
baseURL = "https://{ユーザ名}.github.io/{好きな文字列}/"
publishDir = "docs"
※ 2022/06/01追記
canonifyurls = trueに設定しないとページ遷移がうまくいかないテーマもあるみたいですが、Papermodの場合はデフォルトで大丈夫だったので、canonifyurlsの記載を削除しました。
これで、baseURLにサイトが公開されるようになり、docs配下にビルド成果物が出力されます。
Github PagesとHugoの仕様上、上記の設定が必要になります。
上記設定完了後、hugoと打てばビルドが実行されて、docs配下にビルド成果物が配置されます。
これをリモートにプッシュしましょう。
その後、Github.comにて、
Settings > Pages > Source > master > /docs
と設定。これでちょっと待てば(数分だった気がします)ページが公開されているはずです。お疲れ様でした！
それっぽい見た目になってビックリ
おくがき
とっても簡単、しかも無料でWebページが公開できてビックリしました。
Hugo Themesも色々見ていると会社HPに使ってそうなものから、ECサイトっぽいものまで色々あって結構なんでもできそうだなという印象です。
フロント苦手コンプレックスは全く解消できませんでしたが、プロフィールサイトを作ったことをモチベーションにこれからも頑張っていきます！！
最後まで読んでいただきありがとうございます😎
Discussion