Hugoのセットアップと最初の記事作成

こんにちはnasustです。 今回はHugoで、最初のセットアップから記事を書くまでの 手順を解説します。

サイトの作成

hugo new site hugoblogを実行します。 hugoコマンドは前回の記事でインストールの仕方を解説しています。

$ cd hugoblog
$ hugo new site hugoblog

Congratulations! Your new Hugo site is created in /Users/hideki/Documents/Dev/hugoblog.

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.
bash

実行すると、hugoblogディレクトリができます。 中身はhugoのサイト生成に必要なディレクトリ・ファイルの雛形ができます。

テーマのダウンロード

Hugoのテーマは以下のサイトで配布されています。

今回は以下のテーマを適用します。

ダウンロードの手順

Hugo Bootstrap | Hugo ThemesDownloadをクリックします。

Clone or downloadをクリックしてから、Download ZIPをクリックします。 ZIPファイルがダウンロードされます。

テーマの適用

ZIPファイルを解凍します。解凍して出来上がった hugo-bootstrap-masterディレクトリをhugoblogディレクトリ > themesの中に移動します。

hugo-bootstrap-masterディレクトリをhugo-bootstrapに名前を変更してください。

hugoblogディレクトリに移動してhugo server -t hugo-bootstrapを実行してみて下さい。

$ hugo server -t hugo-bootstrap

Building sites … WARN 2019/06/06 14:35:43 Page's .RSSLink is deprecated and will be removed in a future release. Use the Output Format's link, e.g. something like: 
    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}.
WARN 2019/06/06 14:35:43 Page's .URL is deprecated and will be removed in a future release. Use .Permalink or .RelPermalink. If what you want is the front matter URL value, use .Params.url.

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

Total in 11 ms
Watching for changes in /Users/hideki/Documents/Dev/hugoblog/{content,data,layouts,static,themes}
Watching for config changes in /Users/hideki/Documents/Dev/hugoblog/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
bash

実行するとhttpサーバーが立ち上がり、http://localhost:1313/ でウェブページにアクセスできます。 ブラウザで記事が1つも無い状態のウェブサイトが表示されます。

最初の記事を作成

最初の記事を作成します。カレントディレクトリがhugoblogで以下のコマンドを実行します。

$ hugo new first_entory.md
/hugoblog/content/first_entry.md created
bash

contentディレクト以下にfirst_entry.mdが作成されました。 Hugoの文章は全てcontentディレクトリで作成します。 作成したfirst_entry.mdを以下のように編集します。

---
title: "最初の記事"
date: 2019-06-06T16:54:14+09:00
draft: true
---
こんにちは、最初の記事です。
markdown

hugo server -D -t hugo-bootstrapでウェブページを表示してみます。-Dは下書き状態の記事を強制的に表示させます。hugo newで作成された記事のデフォルトは下書き状態になります。

http://localhost:1313/first_entry/ を表示してください。

Markdownファイルの内容がHTMLに反映されました。 ウェブサーバーを起動した状態で文章を編集して保存すると、 ブラウザが自動的にリロードして編集した内容がウェブページに反映されます。

すぐに反映されるのでトライ & エラーを素早く繰り返す事ができます。 記事だけでなく、テンプレートの編集なども同じように反映されます。

次回は、このテンプレートを利用してウェブページを作成して行きます。

prevnext