こんにちは。hacknoteのr.katoです。
最近Wordpressを個人利用されている方々から注目されているHUGO。
その使い方を調べたので紹介していきます。
HUGOとは？
Go言語(golang)で作られた軽量、静的サイトジェネレーターの１つです。 簡単なコマンド操作とmarkdownの編集ができれば、比較的ハードル低めに初めることができます。 また、静的サイトのためデータベースを必要とせず、サーバーの管理や構築が簡単になります。 GitHub Pagesなどのホスティングサービスを使えばすぐサイトを公開できます。
必要なものリスト
- git
- Homebrew
- HUGO
今回はmac,WSLなどHomebrewやLinuxbrewが使える環境での構築方法の紹介です。
Homebrewのインストール方法はこちらを参考にしてください。
Windowsの場合、golangのインストールとビルドが必要です。golangのインストールはこちらを、HUGOのインストールはこちらを参考にしてください。
また、HUGOはgitを使えることを前提としている記事が多いので、こちらを参考にGit bashをインストールしておいた方がいいです。
インストール方法
$ brew update $ brew install hugo
これでインストール完了です！
HUGOを使ってみる
- terminalで適当なフォルダに移動します。そこで次のようにすると…
$ hugo new site プロジェクト名(今回はプロジェクト名をtestにしました) Congratulations! Your new Hugo site is created in PATH/hugo/test. 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".
このようになり、以下の構成のファイルが作られます。
.
└── test
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
- テーマ(theme)の適応
themeは公式のページがあるので、そこから探すor自分で作ります。
今回はanankeを使うことにします。
$ cd test $ git init $ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
これで、themeの用意ができました。
config.tomlを編集して、themeの適応をします。
$ vim config.toml baseURL = "http://example.org/" #もしドメインがきまっていたら、変更してください languageCode = "en-us" #日本語の記事にするならjaに変更してください title = "My New Hugo Site" #ここまでデフォルトで書いてあるはずなので、次の行にtheme = "ananke"を追加 theme = "ananke"
- サーバーの起動
そして、次のようにするとブラウザで localhost:1313 にアクセスすれば、themeの適応されたページにアクセスできます。
$ hugo server -D
-D をつけることで、ドラフト記事(下書き)も表示されるようになります。
次のようにきちんと表示してくれました。
- 記事の作成
HUGOに記事のファイルを作らせます。この時、ファイルの拡張子を .md にしないとmarkdown扱いにならず、htmlに変換してくれなくなります。
$ hugo new posts/hacknote.md
すると、 test/contents/posts/hacknote.md が作られます。
ためしに編集してみます。
$ vim contents/posts/hacknote.md #------------------------------- --- title: "Hacknote" date: 2019-11-14T15:28:52+09:00 draft: true #falseにすると、下書きでは無くなる --- # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ```python import numpy as np import matplotlib.pyplot as plt data = np.array((1,2,3,4,5,6,7)) plt.plot(data) plt.show() ```
するとlocalhost:1313が、次のようになり、
localhost:1313/posts/hacknoteが次のようになりました。
- ジェネレートして公開ファイルを作成する
公開したい記事のdraftをfalseにしてから次のコマンドを実行します。
$ hugo
すると、publicというフォルダが作成され、public以下に静的ファイルができます。
public以下をGitHub Pagesなどにホスティングすると公開することができます。(参考:GitHub Pages 無料ホスティングサービスを使ってみた
HUGOチュートリアル
