工事中HUGOでwebサイト作ってみた
いままでずっとPukiWikiで自分のホームページを作っていて、若い頃(！)はSmarty対応にしてみたりとか、負荷下げるためにMySQLにページのデータ突っ込んで見たりとか、PHP5.3～7対応とかいろいろいじっていたのだけど、最近はPHPをあまりいじらなくなってしまったし、手入れをサボっている間に本家のコードを追い切れなくなったりしていてもうメンテナンス辛いし、更新もあまりしなくなってしまっていた。 だけど、出来合のブログサイトじゃなくて自分のサーバに記事を置きたいよなという変なこだわりがあって、何かPukiWikiに代わるいいものないかなと調べていたのだけど、 今の時代は手元で何かしらの手段で静的HTMLファイルを生成して設置するのが流行という気配を感じた。 いろいろ検索した結果HUGOがGoで書かれていてバイナリをポン置きで動くのが楽そうなので使ってみることにした。
以下 https://gohugo.io/getting-started/quick-start/ に書いてあることをそのまま読みながらやった記録
hugoコマンドが動くまで
超楽々！
- https://github.com/gohugoio/hugo/releases から自分の使っているOSに合わせてバイナリを取得 (私はWSLに64bitのUbuntuを入れて使っている、パッケージでもよかったけどファイル名にLinux-64bit.tar.gzが含まれるものをダウンロードした)
- ダウンロードしたファイルを
tar xvzf ファイル名として展開し、出てきたファイルをPATHの通ったbinディレクトリに配置、hugo versionとして動くのを確認
ホームページのデータを置くひな形を作成しテーマを選ぶ
テーマはいろいろあるし、hugoのバージョンとの組み合わせによって使えたり使えなかったりするものがあるので、一個良さそうなのを選んだらすぐにページのデータを作って見て、それからテーマを選び直したりするのがよさそう。
hugo new site ディレクトリ名として、できたディレクトリをgit管理下に置く- テーマを https://themes.gohugo.io/ から選ぶ https://themes.gohugo.io/mainroad/
- テーマをsubmoduleとしてさっき作ったディレクトリ以下のthemesに置く
cd themes;git submodule add テーマのgithubリポジトリ - https://github.com/vimux/mainroad/#installation の指示に従ってexampleSiteから config.toml をhugoで作るサイトのトップに置く config.tomlはテーマによってはconfig.yamlやconfig.jsonの場合もあるのでそのときは最初においてあったconfig.tomlを消す
- ↑でコピーしたファイルの必要な部分を書き換える
ページのデータを作る
hugo new ディレクトリ名/ファイル名
でページのひな形が置かれる。ディレクトリ名はカテゴリとして使われるっぽい。
markdownで書きたいならファイル名の末尾には .md をつけておく。
contentディレクトリ以下にディレクトリとファイルが置かれるのでそれを編集する。
draftがtrueの場合 HUGO -D としないとページのデータが作られない下書き状態になる
---
title: "HUGOでwebサイト作ってみた"
date: 2019-11-10T14:34:45+09:00
draft: true
---
ここに本文を書く
テスト用のサーバを起動する
hugo server -D を実行すると http://localhost:1313 で実際にどのような姿になるかを確認することができる。
(-Dをつけて通常は下書きモードで編集してヨシこれは公開出来るとなったらdraftをfalseにすると良さそう)
テーマの設定を変更する
テーマを準備したときにコピーした config.(toml|yaml|json) を編集する。
設定できる項目はテーマごとに異なるのでテーマのWebサイトを確認する
今回選んだMainroadというテーマは本来は赤が基調のテーマだったけど、元々PukiWikiで作ってたサイトがroyalblue基調にしていたので、赤はイメージ変わりすぎるな…
と思っていたけど、highlitecolorでメインの色を変更できた
