Zenn
📝

HUGO使ってみた

2022/04/14に公開
Hugo
tech

こんにちは、ぴよ太です🐤
はじめて技術ブログを書きます！
自分のやっていることを文書として記録することで、学習した内容の定着、
備忘録（後で見直して「そうだった！そうだった！」）などなど、そうなればよいなぁと思って始めてみました。
最終的にどこかで困っている人の役に立てたらいいなぁと思ってます😄

何を書こうか迷ったのですが、直近でやっていることについて書くことにしました。

やっていること

ドキュメント作成にHUGOを使い始めました。
HUGOでをサイトを作成して、s3などで公開（社内限定）を目標にしてます！

なぜやっているのか

WordやPowerpointとフォーマットがバラバラでなので、
1つに統一したいと思ったことがきっかけです。
あとは、Webサイトとして公開すればブラウザで確認できるし、
ファイルを探す手間も省けるかも！と思ったからです。

HUGOインストール

前提条件

  • Windows
  • powershellでコマンドを実行

公式サイトのQuick Install - Binary (Cross-platform)に従ってインストールしていきます。

  1. Hugo Releasesからインストーラをダウンロードします。

    • hugo_0.96.0_Windows-64bit.zip

  2. C:/Hugoに展開します。

    > tree c:/Hugo /f
Folder PATH listing for volume Local Disk
Volume serial number is xxxx-xxxx
C:\HUGO
    hugo.exe
    LICENSE
    README.md

No subfolders exist

  3. 環境変数のPATHにC:/Hugoを追加します。

  4. インストールされたか確認します。

    > hugo version
hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb+extended windows/amd64 BuildDate=2022-03-26T09:15:58Z VendorInfo=gohugoio

サイトの作成

  1. 以下のコマンドでHugoのサイトを作成します。
    > hugo new site quickstart
Congratulations! Your new Hugo site is created in C:\xxx\quickstart.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
    Choose a theme from https://themes.gohugo.io/ or
    create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
    with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
  2. フォルダ構成は以下の通りです。
    > tree /f
Folder PATH listing for volume Local Disk
Volume serial number is FC68-4EFF
C:\xxx\
└───quickstart
    │   config.toml
    │
    ├───archetypes
    │       default.md
    │
    ├───content
    ├───data
    ├───layouts
    ├───static
    └───themes
  3. Hugo標準の簡易サーバを起動してみます。
    > cd C:\xxx\quickstart
> hugo serve -D
Start building sites … 
hugo v0.96.0-2fd4a7d3d6845e75f8b8ae3a2a7bd91438967bbb+extended windows/amd64 BuildDate=yyyy-mm-ddThh:mm:ssZ VendorInfo=gohugoio
WARN yyyy/mm/dd hh:mm:dd found no layout file for "HTML" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN yyyy/mm/dd hh:mm:dd found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN yyyy/mm/dd hh:mm:dd found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

                | EN
-------------------+-----
Pages            |  3
Paginator pages  |  0
Non-page files   |  0
Static files     |  0
Processed images |  0  
Aliases          |  0
Sitemaps         |  1
Cleaned          |  0

Built in 108 ms
Watching for changes in C:\xxx\quickstart\{archetypes,content,data,layouts,static}
Watching for config changes in C:\xxx\quickstart\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
  4. ブラウザでhttp://localhost:1313にアクセスします。
    ※特にテーマを設定していないので、真っ白な画面が表示されるかと思います。

テーマ設定

  1. themes.gohugo.ioから好きなテーマを選択します。

    • 今回は、Learnを選択します。

  2. Learnを設定する。

    > cd themes/
> git clone https://github.com/matcornic/hugo-theme-learn.git
Cloning into 'hugo-theme-learn'...
remote: Enumerating objects: 2651, done.
remote: Counting objects: 100% (2651/2651), done.
remote: Compressing objects: 100% (1085/1085), done.

Receiving objects: 100% (2651/2651), 14.08 MiB | 7.64 MiB/s, done.
Resolving deltas: 100% (1547/1547), done.

  3. quickstart/config.tomlを編集します。

    baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

# Change the default theme to be use when building the site with Hugo
theme = "hugo-theme-learn"

# For search functionality
[outputs]
home = [ "HTML", "RSS", "JSON"]

    ※HUGO LEARN THEMEのBasicsに記載があります。

  4. Hugo標準の簡易サーバを起動して確認してみます。

    > cd C:\xxx\quickstart
> hugo serve -D

  5. ブラウザでhttp://localhost:1313にアクセスします。

ロゴの設定

learn | change the logoを参考に、ロゴをデフォルトから変更してみます。

  1. quickstart/static/imagesフォルダを作成して、任意の画像を格納します。

    > C:\xxx\
> tree .\quickstart\static\ /f
C:\xxx\QUICKSTART\STATIC
└───images
        chick_logo.svg

  2. quickstart/layouts/partials/logo.htmlを作成します。

    > tree .\quickstart\layouts\ /f  
Folder PATH listing for volume Local Disk
Volume serial number is xxx-xxx
C:\xxx\QUICKSTART\LAYOUTS
└───partials
        logo.html

  3. logo.htmlを編集します。
    ※quickstart/staticからのパスをsrcに設定します。

    <img src="/images/chick_logo.svg" alt="" width="300" height="200">

  4. Hugo標準の簡易サーバを起動して確認してみます。

    > hugo serve -D

  5. ブラウザでhttp://localhost:1313にアクセスします。

    ※左上のロゴ部分が変更されています。

favicon設定

learn | change the faviconを参考に、faviconも変更してみます。

  1. quickstart/static/imagesフォルダに、任意の*.icoファイルを格納します。

    > tree .\quickstart\static\images\ /f
Folder PATH listing for volume Local Disk
Volume serial number is xxx-xxx
C:\xxx\QUICKSTART\STATIC\IMAGES
    chick.ico
    chick_logo.svg
    
No subfolders exist

  2. quickstart/layouts/partials/favicon.htmlを作成します。

    > tree .\quickstart\layouts\partials /f
Folder PATH listing for volume Local Disk
Volume serial number is xxx-xxx
C:\xxx\QUICKSTART\LAYOUTS\PARTIALS
    favicon.html
    logo.html

No subfolders exist

  3. favicon.htmlを編集します。

    <link rel="shortcut icon" href="/images/chick.ico" type="image/x-icon" />

  4. Hugo標準の簡易サーバを起動して確認してみます。

    > hugo serve -D

  5. ブラウザでhttp://localhost:1313にアクセスします。

    ※ブラウザのタブのfavicon部分が変更されています。

ドキュメントを追加

  1. Markdownファイルを作成します。

    > hugo new posts/sample.md
Content "C:\\xxx\\Hugo\\quickstart\\content\\posts\\sample.md" created

  2. quickstart/content/posts/sample.mdを編集する。

    ---
title: "Sample"
date: yyyy-mm-ddThh:mm:ss+09:00
draft: true
---
サンプルです。

{{% notice tip %}}
[shortcut code](https://learn.netlify.app/en/shortcodes/notice/)を使うと様々なことができます。
{{% /notice %}}
    1. Hugo標準の簡易サーバを起動して確認してみます。
    > hugo serve -D

  4. ブラウザでhttp://localhost:1313にアクセスします。

    ※左のHOMEの下にsampleが追加されています。

終わりに

  • Hugoのインストール
  • 簡単な設定
  • ドキュメントの追加

について書いてみました！
その他色々できるのですが、きりがないのですみませんが省略します😢😢

Hugoの利用だけでなく、今後はGit・S3・CodeBuild等を使用して
ドキュメント管理・共有の仕組みを構築していく予定です。
（その辺りも書いていけれたらいいなと思ってます～）

参考

Discussion