Hugo + LoveItでWebサイトを作る

とりあえずこのサイトを作った時の覚え書きを残しておきます。

Hugo, LoveIt導入

そこそこ新しいバージョンが必要なので、brewを使わない場合はGo本体のバージョンを上げる必要があるかもしれません。

• https://gohugo.io/getting-started
• https://themes.gohugo.io//theme/LoveIt/theme-documentation-basics/

フォント変更

フォントがデフォルトだと中華フォントになっているので、変更します。

LoveItにはconfig/css/_override.scssというファイルでSCSSの変数を上書きできる機能があります。 書き換えられるデフォルトの変数は全てthemes/LoveIt/assets/css/_variables.scssに入っています。 ここで定義されているglobal-font-familyを日本語用のものに上書きすれば解決します。

1

$global-font-family: system-ui, -apple-system, BlinkMacSystemFont, /*フォント...*/ !important;

デフォルト設定だと最後が!defaultになっていますが、!defaultだと変数が定義されていない時しか値が設定されなくなるので、すでに定義されている$global-font-familyを上書き出来ません。

Social icon追加

トップページにはSNSアカウントへのリンクを貼れるようになっていて、サポートされているSNSは公式ドキュメントのsite-configurationのsocialに列挙されています。

デフォルトで用意されていないアイコンは設定を追加することで使えるようになります。 themes/LoveIt/assets/data/social.ymlにサポートされている全てのSocial iconの設定方法が書いてあります。 これと同じ構造をconfig.tomlの[params.social.XXX]に書けば新しいsocial iconを追加することができます。

見た限り、アイコンはfontawesomeとsimpleiconsがサポートされており、これらにないものはsvgファイルを自分で用意しているようです。

fontawesomeを使う場合はparams.social.XXX.icon.classにアイコンを指定し、

1
2
3
4
5
6

[params.social.Hatena]
  weight = 4
  id = "in-neuro.hatenablog.com"
  prefix = "https://"
  title = "Hatena Blog"
  icon = {class = "fas fa-pencil-alt"}

simpleiconsを使う場合はparams.social.XXX.icon.simpleiconsに名前を指定しましょう。

1
2
3
4
5
6

[params.social.Qiita]
  weight = 4
  prefix = "https://qiita.com/"
  id = "niina"
  title = "Qiita"
  icon = {simpleicons = "qiita"}

GitHubのStarボタンを追加

GitHubのボタンは https://buttons.github.io/ で作れます。

普通にHTMLを書くと動きませんが、以下で紹介されているshortcodesを追加することで生HTMLを書けるようになります。

• https://anaulin.org/blog/hugo-raw-html-shortcode/

GitHub buttonを生成するshortcodesの方が便利かもしれませんが、とりあえず生HTMLで。

GitHub Pagesにpublish

公式サイトが親切に教えてくれています。

public/をgit submoduleにしてuser.github.ioに繋ぐというやり方ですね。

• https://gohugo.io/hosting-and-deployment/hosting-on-github/