WordPress便利なんだけども、静的サイトジェネレータの「hugo」を使ってみたいと思い始めた。いろいろ安上がりになるのも良い。
Cloud9を使って、サイトを生成してプレビューまでIDEだけでできたら便利な気がしたので、設定した。
インストール
Fedora Coprに公開されてるのをインストールした。
下記ページを参照しながらやった。
https://gohugo.io/getting-started/installing
https://qiita.com/bellflower2015/items/e8aadc3c177d98cebb30
$ sudo yum install epel-release
$ sudo wget https://copr.fedorainfracloud.org/coprs/daftaupe/hugo/repo/epel-7/daftaupe-hugo-epel-7.repo -O /etc/yum.repos.d/daftaupe-hugo-epel-7.repo
$ sudo yum install hugo
サイトを作る
quick startの手順をそのままやっただけ。
https://gohugo.io/getting-started/quick-start/
$ hugo new site hugo-blog
テーマを設定する
begというテーマがイケてたのでこれを使わせてもらう。
$ cd hugo-blog
$ git init
$ git submodule add https://github.com/dim0627/hugo_theme_beg.git themes/beg
$ echo 'theme = "beg"' >> config.toml
しかし、ページ作ろうとするとエラーが出てしまった。
$ hugo new posts/my-first-post.md
ERROR 2018/01/11 15:14:13 Unable to find archetypes directory for theme "beg" at "/home/ec2-user/environment/workspace/hugo-blog/themes/beg/archetypes"
archetypesというディレクトリがないみたい。
submoduleの中を触ってしまうのどうかなーと思いつつ、一旦ディレクトリとファイル追加。
下記ページを参考にさせてもらった。
https://inataya.bitbucket.io/blog/0002/
$ cd themes/beg
$ mkdir archetypes
$ cd archetypes
$ vim default.md
+++
slug = ""
tags = []
+++
再び試すとエラー出なかった。
$ hugo new posts/my-first-post.md
プレビュー
hugo serverコマンドでアプリケーションを走らせる。
Cloud9でプレビューするには、8080ポートでアプリケーション動かさないといけないので、--portオプションで8080を指定する。
あと、Cloud9のプレビューは「 https://ENVIRONMENT_ID.vfs.cloud9.REGION_ID.amazonaws.com/ 」というURLで動くけど、hugo serverコマンドで特にオプション指定しなかったら、生成されるページ内のリンクのベースURLが「 http://localhost:8080/ 」になってしまうので、プレビュー内でリンクがうまく動かない。なので、--baseURLオプションを使って、Cloud9のプレビューが動くURLを明示的に指定する
$ hugo server -D --port 8080 --baseURL https://ENVIRONMENT_ID.vfs.cloud9.REGION_ID.amazonaws.com/
Cloud9のIDEの、画面上側にあるPreviewを押して、Preview Running Applicationを押下すると、hugoで作ったサイトをプレビューできる。
ちなみに、Cloud9のプレビューが動くURLについては下記のページに書いてる。
https://docs.aws.amazon.com/cloud9/latest/user-guide/app-preview.html#app-preview-preview-app
追記:
別の環境でCloud9 IDE開いてみたら、なぜかプレビュー内のリンクがうまく動かなかった。ネットワークとかの設定によっては、hugo serverのオプションを設定してもうまく動かないかも。