hugoでサイトを作るやつ

WordPressからhugoに移行していたのですが、やっとこさやる気になったのでちまちま初期設定を始めました。

ですが、インストール大会資料の該当ページそのままだとちょっとハマりました。~~シス管担当職員のくせになにやってんすか。~~ なので忘備録がてらログを適当に貼ってみようかと思います。そのうち自動化したいくらい長い。つかまくまくHugo/Goノート読んどけば大体OK。

以下、琉球大学工学部知能情報コースのサーバー上へGitLab経由でhugoで作ったサイトをアップロードする方法です。他のサーバーはフォローしていません。

ローカルにhugoをインストールしておく。gitとかの設定は、まあ流石に省略。
```
brew install hugo
```
エディタは VisualStudioCode のつもりなので、必要な人は下記を。Markdown書ければ何でも良いです。
```
brew install visual-studio-code
```
知能情報コースGitLabのie-webにプロジェクトへアクセスする。 https://gitlab.ie.u-ryukyu.ac.jp/ie-web
このie-web以下で該当するグループを辿りつつ(学生ならstudent, 教職員ならtearcher)、右上の New project ボタンから自分の名前のグループを作る。tearcher/nakarx だったり、student/k19/k198576 だったり。

（ここまで書いた後に5日経過したので以降はうろ覚えメモです）

新しいウェブサイトを作る。作業したいディレクトリで下記のコマンドを入力。my_siteは適当に書き換えましょう。
```
hugo new site my_site
```

うっかりユーザ名と作業ディレクトリ名を一緒にしてしまったおじさんの例

nakarx@midori# pwd
/Users/nakarx/nakarx

nakarx@midori# ls
archetypes   config.toml  content      data         layouts      node_modules public       resources    static       themes

theme（外観）が Hugo Themes で色々と公開されているのでお好きなやつをDLしてみる。私は mainroad にしてみた。
```
cd themes
git submodule add https://github.com/vimux/mainroad themes/mainroad
```
テーマによっては関連モジュール依存だったりするので npm install しろと怒られたらおとなしく従う。Hugo のテーマを設定するが参考になる。npm 自体は brew install node.js とかでいけんじゃね。結果的に下記みたいに出ればヨシ。
```
nakarx@midori# cat .gitmodules 
[submodule "themes/mainroad"]
  path = themes/mainroad
  url = https://github.com/vimux/mainroad
```
config.toml に theme = "mainroad" を追記してテーマ設定する
.gitignore を作成し下記のように記述する
```
/public/
/resources/_gen/
hugo_stats.json
```
全体設定ファイルの config.toml を下記のように記述する。nakarxは適宜ユーザ名で読み替えてください。タイトルは適当です。日記は “blog” というディレクトリにつっこむ設定です。
```
baseURL = "https://ie.u-ryukyu.ac.jp/nakarx"
title = "ie-nakarx"
theme = "mainroad"
languageCode = "ja"
defaultContentLanguage = "ja"
hasCJKLanguage = true
mainSections = ["blog"]
```

.gitlab-ci.yml (.ではじまる隠しファイル注意)を作成し、下記のように記述する。ユーザ名XXXXは適宜読み替えてください。

variables:
  GIT_SUBMODULE_STRATEGY: recursive

stages:
  - test

deployToHugo:
  stage: test
  script:
  - hugo
  - rsync -rlptvzP public/ syskan@christina.ie.u-ryukyu.ac.jp:/mnt/cephfs/ie-web/ie/XXXX
  - rm -rf public
  only:
  - master

本体はここまで。あとは記事を投稿する。content以下にblogというディレクトリを作成する（config.toml の mainSections で記載されてれば好きな名前で良い）。そこにmd形式でファイルを置くと良いはず。hugo new blog/YY.mdで。例は下記。
```
nakarx@midori# hugo new blog/20200202.md
/Users/nakarx/nakarx/content/blog/20200202.md created
```
自動生成されたフォーマットはこんな感じ。ここに追記していく。場所は content 以下なのに注意。
```
nakarx@midori# cat content/blog/20200202.md
---
title: "20200202"
date: 2021-02-02T17:30:14+09:00
draft: true
---
```
日記の更新。さっきの記事を以下のように編集した。文章を追記すりゃいいんですが、draft行は消し去っておく(下書きフラグなのですぐに公開したくないときに使う)
```
nakarx@midori# cat content/blog/20200202.md
---
title: "20200202"
date: 2021-02-02T17:30:14+09:00
---

ラーメン食べたい
```

hugo でコンパイルしてみる。成功すると下記みたいな感じ。

nakarx@midori# hugo
Start building sites … 

                | JA  
-------------------+-----
Pages            | 11  
Paginator pages  |  0  
Non-page files   |  3  
Static files     |  0  
Processed images |  0  
Aliases          |  2  
Sitemaps         |  1  
Cleaned          |  0  

Total in 602 ms

ローカル環境でサイトがどんな表示になるか確認したいときは hugo server で。http://localhost:1313/なんとかってURLを見ろって出るので確認する。

GitLab にコミットする

    git add .
    git commit -m "hugo new site した"
    git push

gitlab-ci さんが裏で頑張ってるのでちょっとだけ待って、ウェブが更新されたか確認する。https://ie.u-ryukyu.ac.jp/nakarx/ でユーザ名を各自のやつにしてアクセスする。

ここからあとは微調整。

hugo コマンドで下記のエラーが出る場合、慌てて作り直すよりも前にカレントディレクトリを疑う。hugoを設定したベースディレクトリじゃないから怒られたやつです。cd hugoのディレクトリ で移動するんだけど、毎回これだと面倒なので alias hugo="hugo -s ~/hugoのディレクトリ" とかaliasに書いちゃってもいいです。
```
Error: Unable to locate config file or config directory. Perhaps you need to create a new site.
      Run `hugo help new` for details
```
draftタグを毎回消すのがだるいからデフォルトで無効化したいなど、デフォルトで生成されるmdファイルのテンプレートをいじりたいときはここ
```
  ./archetypes/default.md
```
自動で更新用ファイルを開いたり、自動でcommitするスクリプトをここに書きました。
シス管が書き方まとめてくれたので、こっちを今後は参照したほうが正確なのかも HugoでWebサイトの生成 2021/02/08追記
参考リンク
- シス管 2020年新システム説明会
- tnal先生 Hugoで更新できるようになった？
- tnal先生ブログ始め
- GitLabの先生方のie-webレポジトリ
- まくまくHugo/Goノート