昔、Hugoでブログを作るってのをやっていたけど、再度必要になってやってみました。
が！
過去に自分でやった手順が結構変わっていたので書き直しておこうと思います。
環境
いまだに旧Cloud9を使っています。AWS Cloud9ではなくて、Amazonに買収される前のCloud9ですｗHugoでの静的ファイルの作成はそこでやって、Github Pagesにアップロードするようにしようと思います。
Goのバージョン。
$ go version go version go1.8.3 linux/amd64
Hugoのインストール
まずはHugoのインストールをします。公式サイトに各プラットフォームでのインストール手順がかいてあります。
今回はReleaseファイルを持ってきて現段階の最新版（0.48）をLinuxにインストールします。
$ cd /tmp $ wget https://github.com/gohugoio/hugo/releases/download/v0.48/hugo_0.48_Linux-64bit.deb $ sudo dpkg -i /tmp/hugo_0.48_Linux-64bit.deb
インストールできたか確認します。
$ hugo version Hugo Static Site Generator v0.48 linux/amd64 BuildDate: 2018-08-29T06:33:51Z
OKOK。
テンプレートを作成してテーマを適用
それではHugoでのテンプレートを作ります。コマンド一つで出来上がります。以下のコマンドではquickstartというサイト名で作ったイメージです。
$ hugo new site quickstart
いくつかファイルが出来上がります。
$ ls archetypes/ config.toml content/ data/ layouts/ resources/ static/ themes/
これで完了。以降はquickstartというディレクトリの下でいろいろと作業していくことになります。
これにテーマを適用します。今回はtranquilpeakというテーマを使ってみようと思います。
テンプレを作ったところに行き、以下のコマンドを実行します。
$ cd quickstart $ git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git themes/tranquilpeak
そして、テーマを適用します。
$ echo 'theme = "tranquilpeak"' >> config.toml
記事を書く
環境設定は整ったので、それでは実際に記事を書いてみましょう。
記事ファイルの作成コマンドは以下。
$ hugo new post/hugo-test.md
post/hugo-test.mdにマークダウンで書いていきます。こんな感じ。
確認してみる
これでとりあえずHugoを使う環境は整ったので、一度確認してみます。
使っている環境は旧Cloud9なのでHugoの起動の仕方がちょっと違います。以下のコマンドで起動できます。
$ hugo serve --bind=$IP --port=$PORT
パラメータとしてドラフト状態のものもビルドする-Dとかホットリロードする-wを追加してみてもいいかと思います。
やってみたところ・・・・
うまく表示されねぇorz
DevTools見てみたところ、どうにもCSSがよく読み取れていない様子。
なので、config.tomlでサイト名とかその辺を整えつつ、baseURLを整える必要があるようです。
とりあえず表示されたので今日はここまで。
先は長い・・・・
まとめ
最初、完全にthemeの考え方を間違っていて、themeのリポジトリをcloneしてきてやっていました。
完全にHugoの使い方間違ってた。もう一度見直そう。
— やった (@yatta47) 2018年9月23日
情けない。
でもちょうど見直す機会になってよかったかも。
続きはconfigを整えて、Github Pagesに公開する手順までを書こうと思います。
それでは！
参考サイト
Hugo + GitHub Pagesで独自メインのブログ作ってみました
GitHub - kakawait/hugo-tranquilpeak-theme: A gorgeous responsive theme for Hugo blog framework
