hugoの分かる人しかわからない手順書

2842 ワード
Hugo 静的サイト JAMstack Hugo テキストリンク

現在、会社でhugoを使って私一人でWebサイト（静的サイト）を作っていたのですが、マーケの人が来たりボスが文章をいじりたいという話があったので会社のみんな向けに手順書を作ることにしました。

・・・・Qiitaに。

2020/6/4
1st fix

使用themeはdocsy
https://themes.gohugo.io/docsy/

フォルダ・ファイル役割

ざっくりざっくうとしか書きませんが

  • layout
    主にサイトの構成しているhtmlが格納されているスペース。hugoの機能でhtmlの部品化をすることによってコードの使いまわし等が容易。

  • content
    主にhugoでhtmlを構成するときに使うmdファイルで構成される。

  • public
    実際にnetlify等でWebページを公開するときにはここを参照している。

  • theme
    hugoのthemeを使う時はここのフォルダに入ってるthemeを適用する。
    config.tomlにて各設定。

  • static
    CSSとかイメージファイルとかJavaScriptの固定されたファイル置き場。

  • config.toml
    hugoの設定の多くが入っている。

Markdownファイルの処理方法

_index.md
---
title: "タイトル"
description: "備考的な？"
weight: 04　←　順番を指定する
type: "docs" ← ドキュメント
---

これをWeb表示したときにどうなるか。

ドキュメントの4番目に来る。

test1.md
---
title: "テスト１"
description: "テスト１ですよ"
linkTitle: ""
weight: 01
type: "docs"
---
test2.md
---
title: "テスト２"
description: "テスト２だよ"
linkTitle: ""
weight: 02
type: "docs"
---
test3.md
---
title: "テスト3"
description: "テスト３だわ"
linkTitle: ""
weight: 03
type: "docs"
---

webではこういうふうに見える。

あとはフォルダの階層をうまく分けることで対応できる。
重要なのは_index.md。

Markdownの書き方はdocsyならば
docsyドキュメント（公式）がおすすめ
https://www.docsy.dev/docs/

ざっくり。