Building This Site - サイト構築メモ

このサイトを構築するためのメモ。だいぶ雑。

Hugo 使い方

手順通りやるだけでした。ここでは Hugo のインストールからテーマの導入、設定、コンテンツの書き方までをメモします。

Hugo のインストール

• homebrew

  brew install hugo
  

• create site

  hugo new site hugoquickstart
  cd hugoquickstart
  git init
  

テーマ探し

• 公式にたっぷりある
  • cupper はうまく動かなかった（自分が下手くそ？）
  • techdoc が一番のお気に入り
  • Book も良さそう
• JAMstack Themes もおすすめ。いろんな JAMstack アプリケーションのテーマが並んでいる

TechDoc テーマのお試し

• add this theme

  git submodule add https://github.com/thingsym/hugo-theme-techdoc.git themes/hugo-theme-techdoc
  

• theme の demo ページが themes/hugo-theme-techdoc/exampleSite 配下に色々と置いているのでコピーしてきたり参考にして動かしていきます。

  • config.toml をコピーしてくる
    • 何より大事なのがこのテーマを有効化すること: theme = "hugo-theme-techdoc"
    • menu_style = "slide-menu" にしたり
    • custom_background_color = "gray" にしたり

• table of contents の動作・見た目確認

  • 横には行かない。コンテンツごとに front matter で宣言する必要あり

• todo

  • uml, 数式は特に無い. 自前 shortcode 作成？
  • twitter 等色々なメディアを埋め込むための shortcode サンプルは充実

book テーマのお試し

• 左にメニュー、右に ToC で見やすい
• tag は使わない？
• code は横スクロールが気になる
• なにかインストールすれば動くかも
  • uml は mermaid.js
  • 数式は KaTeX

Todo

must なもの

• tag cloud (weighted が良い)
  • Tag Cloud - tips & tricks - HUGO
  • Tag Cloud for Hugo
  • Hugo Tag Could | Henrik Sommerfeld’s blog
  • Nice tagcloud with Hugo · Artem Sidorenko
• 検索の使い勝手
• コードの見栄え
  • 横スクロールは避けたい？
  • syntax highlight
• 更新日時の見栄え

あれば嬉しいもの

• uml 使えるか探す
• 数式
• カラーテーマのリアルタイムな切り替え
• 非公開にする機能
  • なければサイトを分けてしまう

Docsy theme

• lunr.js での全文検索は日本語が使えない & ドラフト記事は検索対象に入らない