このホームページの作り方とか
最初の記事にもちょっと書きましたがHugoを使って作成しました。
ちなみになんでHugoにしたのかというところから話していきます。
Hugoにした理由
GithubPagesで公開するのが前提だったのでそれで調べた感じ選択肢になったのが
- Hugo
- Hexo
- Jekyll
あたりですかね。
ちゃんと比較したわけじゃないのでどれが優れているとかは余りわからないんですが、
Hugoへの移行トレンドがあるという情報をちらほら見たことや、
使う分には関係無いですが気になっていたGo言語で作られてるということでHugoを選びました。
あとWordPressも悩みはしたんですがセキュリティ関連が大変そうだったりGithubPagesにはあまり合ってなさそうだったのでやめました。
Hugo導入
他の記事がいっぱいあるので導入方法とかは超簡単に書いておきます。
- Hugoのインストール
公式サイト↓からインストーラをDL+環境変数からPathを通す。
https://github.com/gohugoio/hugo/releases
windowsなら多分windows-amd64ってやつを選べばいいと思います。
(ちなみに下で改めて書きますがextendedを最初から選んでおくと良いです。) - テーマの導入
公式のテーマサイト↓から選ぶ
https://themes.gohugo.io/
もしくは私がいいと思ったのは、
別の方が作成してくれていたランキング形式でテーマを紹介してくれている↓のページです。
https://automation-knowledge.com/hugo-theme-ranking/
選んだらgit cloneをつかってtheme/にクローンしてconfig.tomlにtheme = ‘[導入するテーマ名]‘を記入すればOKです。 - 記事の作成
cmdとかで
hugo new site [サイト名]
hugo new post/[記事名].md
を実行すれば content/postに.mdファイルが追加されるのでそれを編集して記事を書く (ホームの編集はconfig.toml) - ビルドと公開 cmdでhugoでビルドされる。 publicフォルダにビルドされたものが入ってるのでそれをコピペしてgithubにアップ
こんな感じですかね。
困ったこと
私は最初extendedじゃない方をインストールしていたのですが、どうもテーマを使うにはHugoのExtendedバージョンでないとエラーが出るらしいです。
こんなの↓
Error: Error building site: TOCSS: failed to transform "sass/jane.scss" (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS with transpiler set to 'libsass'.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information Built in 37 ms
これはchocoを使ってextendedバージョンをインストールしたら解決しました。
導入の1で始めからextendedをインストールしておけば起きない問題だと思います。
忘備録メモ
画像の保存先が分からなかったんですが、
static/images/にいれてpath : ‘image/….jpg’で通せばいいです。
(なおテスト環境hogo serverではなんか動かないですが…)
ちなみに本当はアイコンはgavaterを使ったり、挿入・背景画像はCDNを使ったほうが良いらしいです。
CDNに関してはそのうち使ってみようかと思いますが、金額と相談ですね。