CG・映像デザイナー技術ブログ

【Hugo】静的サイトジェネレーターでのサイト作成方法

たまたまWEB系のデザイナーさんと少しお話する機会があって、WordPressって移転とかめんどくさいですよねーという話から、今は静的サイトジェネレーターでサイト作るのが良いですよ!と聞いたので試してみました。

<メリット>

  • サーバー費用 0円 独自ドメイン可

  • 表示が高速

  • マークダウンで記述できる

  • PHPとかSQLとかDBみたいなものは無い!使用技術がシンプル

<デメリット>

  • 環境構築が基本コマンド。エンジニアではない人は敷居が高い!(ググって、その通りにやればなんとかはできます…)
この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

環境構築

Hugo(Windows版)のダウンロード

https://github.com/gohugoio/hugo/releases

OSのよってデータが違います。今回はWindows版をダウンロード。

ディレクトリの作成

  • C:Hugoに「Hugo」フォルダを作成
  • 「hugo_バージョン名_Windows-64bit」フォルダをbinという名前に変えて、C:Hugobinに配置

  • C:Hugositesに「sites」フォルダを作成

環境変数の設定

パスを保存して、コマンドを使えるようにします。

せっかくなのでこれもコマンドプロンプトで設定します。

win+Rから「cmd」と検索してコマンドプロンプトを起動

setx path "PATH=%PATH%;C:Hugobin"

と入力。「成功: 指定した値は保存されました。」と表示されればOK

環境パスの設定がうまくいかない時

Hugoのコマンドの前にパスを入れましょう。

C:Hugobinhugo

という感じにする方法もあります。

コマンドが使えるか確認

コマンドプロンプトで下記を入力

hugo version

バージョンが表示されていればOK

サイトの作成

コマンドプロンプトで下記を入力

cd C:Hugosites
hugo new site サイト名

Congratulations! Your new Hugo site is created in C:Hugositesサイト名.とでればOK

テーマのインストール

https://themes.gohugo.io/

から好きなテーマを探し、GitHubのパスを控えます。

階層下のthemaのフォルダへ移動し、テーマをダウンロードします。(gitが入っていること前提です)

cd C:Hugositesjsx-methodthemes
git clone https://github.com/yoshiharuyamashita/blackburn.git

サイトを確認

ローカルにてサーバーを起動します。(+テーマも設定)

cd C:Hugositesサイト名
hugo serve -t blackburn
http://localhost:1313/

をブラウザで開いて、サイトを確認します。

基本操作

環境設定

C:Hugositesブログ名config.toml

を開いて編集。

テーマのサンプルを参考にする

https://github.com/yoshiharuyamashita/blackburn

テーマの指定

theme = "blackburn"

記事の投稿

hugo new post/hello.md

で記事をポスト

サーバーの再起動

cd C:Hugositesjsx-method
hugo serve

※テーマを指定しているので、serve -tの記述は省ける

※「hugo serve -D」 をつけると “draft = true” とした下記事も表示されるようになります

※「hugo serve -w」(-w)を付けておくと、ファイルの変更がすぐに反映されます。

カテゴリーの設定

タグとカテゴリーの設定

config.tomlに記述

[indexes]
tag = "tags"
category = "categories"

サイドバーのメニューも追記

[menu]
[[menu.main]]
name = "Category"
pre = "<i class="fa fa-list fa-fw"></i>"
weight = 3
identifier = "Categories"
url = "/categories/"

設定用HTMLの設置

  • themesblackburnlayoutstaxonomyのフォルダへ移動
  • 同階層にあるtag.htmlを複製してcategory.htmlに変更

Netlifyを使ってサイトを公開する方法

GitHubにリポジトリを作成(データを置く)Netlifyでデプロイ(サイトを展開して公開する)してみます。

GitHubにリポジトリを作成

簡単に。

  • GitHubのアカウントを作成
  • リポジトリを作成。URLを控える

  • SourceTreeなどを使って、クローンして繋ぐ

  • 作成したサイトデータ(C:Hugositesjsx-methodの階層下!!)をコミット・プッシュして、サーバーに上げる

Netlifyの設定

https://www.netlify.com/

Get started for freeに従って、記入していきます。

  • GitHubを選択
  • リポジトリを選択

  • デプロイの設定

・master
・hugo_0.51 ※バージョンをつけないと失敗するそうです。あらかじめhugo versionのコマンドで調べておきます。
・public/

サイドにDeploy Siteボタンを押せば、すぐにサイトが公開されます。

https://jsx-method.netlify.com/

他の設定周り

  • Hugoのconfig.tomlのbaseURLで設定したURLを記入しておきます。
  • Netlifyで、Change Site Nameからサイト名(jsx-method)をいれます


https://jsx-method.netlify.com/とか

独自ドメイン設定も可能。

感想

終わってみて。作業的にはすぐにサイト構築できるので簡単!です。

※ 普段コマンド打たないので、調べながらそれなりに時間かかりましたが。

情報をアーカイブしていく、WIKIが好きなのでExtendScriptのメモ用にちょっといじっていこうと思っています。

追記

ワンクリックで作成できるテンプレートも用意されてました。まずはここから始めてもよいかもしれません。

Start with a Template

参考

Netlify CMS(Hugo)でMarkdownで記述可能な無料ブログを構築する(構築編)

以上、すいみん(@cg_method)でした!