ここがフロントマッタ―
---
title: GitLab で Hugo を使う
subtitle: GitLab を使い倒す
date: 2020-01-01
tags: ["gitlab", "hugo"]
---
GitLab で新規プロジェクト作成時に、
[Create from template] で "Pages/Hugo" のテンプレートを使用うと、他にサーバを立てることなく Hugo が使えるようになる。
Hugo は静的サイトジェネレータと呼ばれるもので、マークダウン形式 で
記事を書いておけばよろしく処理をしてくれる。
とりあえず動かす
インポートしたら先ず最初にリポジトリ内の config.toml に記述されている
baseurl を自分のネームスペースのURLに変更。
baseurl = "https://pages.gitlab.io/hugo/"
↓
baseurl = "https://namespace.gitlab.io/projectname/"
(namespaceはアカウント名、projectnameは作ったプロジェクト名)
テンプレートが、GitLab/Pages を使っているので、内容を更新したら自動的に CI/CD が行われてデプロイされる。
デプロイが完了したら、ブラウザから baseurl を指定してアクセスできる。
微調整
あとは、configuration 等を参照しながら微調整していく。
- 日本語化
DefaultContentLanguage を en → ja に変更。
DefaultContentLanguage = "ja"
変な日本語があったら themes/beautifulhugo/i18n/ja.yaml を修正。
-
ナビゲーションのメニュー名を日本語に
[[menu.xxx]] プリフィクスの name属性を適宜修正 -
social media の修正
[Author] に自分のアカウントを設定する。
持ってないものはコメントアウトすれば表示されなくなる。
コンテンツの修正
| 場所 | 修正箇所 |
|---|---|
| フロントページの真ん中の部分 | content/_index.md |
| Aboutページ | content/page/about.md |
| ブログのページ投稿 | content/posts/ の下に スラッグ.md ファイルを作る。※１ |
※１）フロントマッタ―付きマークダウン形式を使う。
まとめ
- 動的サイトにも静的サイトにもそれぞれのメリデメがある。
- 更新が頻繁でなかったり、一時的なランディングページとかを立てるならあり。
- マークダウンなので、他のマークダウンを使うサイトやサービスと相性がいい。
とりあえず、ランディングページのベースとかを作って置けば、色々使いまわしできるかもしれないので
備忘録として残しておく。
で、作って見たサイトがここ → https://nekyox.gitlab.io/hugo/
（そんなに頻繁には更新しない予定・・・）
GitHab を使って公開する場合は Netlify と連動させる必要があるなど、もうちょっと面倒くさい。