/var/www/yatta47.log

やったのログ置場です。スクラップみたいな短編が多いかと。

Hugoを使ってGithub Pagesにサイトを公開する(Hugo環境整備まで)

f:id:yatta47:20180924020621p:plain

昔、Hugoでブログを作るってのをやっていたけど、再度必要になってやってみました。

が!

過去に自分でやった手順が結構変わっていたので書き直しておこうと思います。

環境

いまだに旧Cloud9を使っています。AWS Cloud9ではなくて、Amazonに買収される前のCloud9ですwHugoでの静的ファイルの作成はそこでやって、Github Pagesにアップロードするようにしようと思います。

Goのバージョン。

$ go version
go version go1.8.3 linux/amd64

 

Hugoのインストール

まずはHugoのインストールをします。公式サイトに各プラットフォームでのインストール手順がかいてあります。

Install 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というテーマを使ってみようと思います。

github.com

テンプレを作ったところに行き、以下のコマンドを実行します。

$ 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にマークダウンで書いていきます。こんな感じ。

f:id:yatta47:20180924020734p:plain

 

確認してみる

これでとりあえずHugoを使う環境は整ったので、一度確認してみます。

使っている環境は旧Cloud9なのでHugoの起動の仕方がちょっと違います。以下のコマンドで起動できます。

$  hugo serve --bind=$IP --port=$PORT

パラメータとしてドラフト状態のものもビルドする-Dとかホットリロードする-wを追加してみてもいいかと思います。

やってみたところ・・・・

f:id:yatta47:20180924021024p:plain

うまく表示されねぇorz

DevTools見てみたところ、どうにもCSSがよく読み取れていない様子。

f:id:yatta47:20180924021137p:plain

なので、config.tomlでサイト名とかその辺を整えつつ、baseURLを整える必要があるようです。

とりあえず表示されたので今日はここまで。

先は長い・・・・

 

まとめ

最初、完全にthemeの考え方を間違っていて、themeのリポジトリをcloneしてきてやっていました。

情けない。

でもちょうど見直す機会になってよかったかも。

続きはconfigを整えて、Github Pagesに公開する手順までを書こうと思います。

それでは!

 

参考サイト

Hugo + GitHub Pagesで独自メインのブログ作ってみました

GitHub - kakawait/hugo-tranquilpeak-theme: A gorgeous responsive theme for Hugo blog framework

ブログを hexo から hugo に変更した

hugoを触ってみる - WhereToStart

Developing a Hugo site on Cloud9 - tips & tricks - Hugo Discussion

Real Time Web Analytics