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.

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

テーマのダウンロード

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

ダウンロードの手順

Hugo Bootstrap   Hugo Themes

Xzya hugo bootstrap  This is a simple Hugo theme using Bootstrap v4

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

テーマの適用

今回は私が作成したテーマを適用します。

ダウンロードしたZIPファイルを解凍します。解凍して出来上がった basic-design-personal-blog-masterディレクトリをhugoblogディレクトリ > themesの中に移動します。

basic-design-personal-blog-masterディレクトリをbasic-design-personal-blogに名前を変更してください。

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

$ hugo server -t basic-design-personal-blog

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

Built in 24 ms
Watching for changes in /Users/hideki/Documents/Dev/temp/hugoblog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/hideki/Documents/Dev/temp/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:1818/ (bind address 127.0.0.1)
Press Ctrl+C to stop

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

My New Hugo Site

最初の記事を作成

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

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

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

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

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

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

first entry

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

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

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

iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker