このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

爆速 静的サイトジェネレータ「HUGO」が快適すぎる件。

tool

2016.06.29

この記事は最終更新日から1年以上が経過しています。

スクリーンショット 2016-06-29 0.35.40

HUGO

https://gohugo.io/

どもです。

海外旅行は実は今ではないかと企んでいる今日この頃の私です。

前回に続き、爆速続きで申し訳ないなのですが、「HUGO」が快適すぎる。

作業するにあたって、コンパイルなどやはり何かと早いのがいいですね。

そう、嫌われないぐらいにね。

というわけで、今回は所謂、静的サイトジェネレータに関してです。

HUGOて何?

HUGOは、プログラミング言語Goを使って開発された静的サイトジェネレーターとなります。

静的サイトジェネレーターはRuby 言語で作られた「jekyll」が有名かと思いますが、それと同類なのですが「HUGO」は構造のシンプルさと処理速度の速さで知られています。

jekyll

https://github.com/jekyll/jekyll

最近では(2016年6月現在)Static Site Generators調べによると、GitHubのスター数も3位となって来て注目のジェネレータとなっております。

Static Site Generators

https://staticsitegenerators.net/

スクリーンショット 2016-06-29 0.41.55

jekyllは決して出来の悪いソフトウェアでは無く、完成度の高い静的サイトジェネレーターなのですが、問題視されていたのがやはり、

コンパイルの遅さ」でした。

HUGO」は、静的言語(せいてきせいてき連呼してすみません。)であるGo言語で作られているということもあって、やはりコンパイルの早さに驚くものがあります。

興味湧いてきた

興味湧いてきましたか?

では早速使ってみましょう。

スクリーンショット 2016-06-29 0.58.36

HUGO GitHub

https://github.com/spf13/hugo

インストール

環境が、MacでHomebrewをお使いでしたらインストールも一瞬です。

Mac

brew install hugo

GO getコマンドでインストールを行う場合。

GO

git clone https://github.com/spf13/hugo
cd hugo
go get

HUGOの使い方

インストール完了すると、hugoコマンドを使用できますので、「hugo new site」でサイトの雛形を生成します。

hugo new site my_site

ディレクト移動

cd my_site/

サーバー起動

hugo server

ファイルがないので早いのは当たり前なのですが、にしても

スクリーンショット 2016-06-29 1.06.42

起動するまで「6ms」!

6秒ではありませんよ。0.006秒ですね。

早すぎて、お茶も汲みに行けないわ。

ポート1313に立ち上がりますので、ブラウザを開いて確認。

http://localhost:1313/

開いたところ、いい感じの真っ白。

漂白剤もビックリの白さです。

何も書いていないので当たり前と言えば当たり前ですね。

余計なものは出さないっていうのもシンプル設計。

サーバーを止める際は「Ctrl+C」となります。

それでは、少しディクトリを覗いてみます。

スクリーンショット 2016-06-29 1.11.14

archetypes

ターミナルからコマンドを用いて新しいドキュメントを作成するときに、テンプレートとするファイルを格納しておくディレクトリとなります。

content

記事となる mdファイルが格納されます。

(マークダウンで記事を生成できるのもサイトジェネレータの特徴でもあります。)

data

TOML / YAML / JSON形式のファイルをデータストアして使うためのディレクトリです。

layouts

ページを構成するHTMLファイル等を格納します。

static

CSS、JavaScript、Image ファイルなどのassetsファイルを格納します。

config.toml
サイトの設定ファイルとなります。

のようなディレクトリ構成となっております。

要点だけあげてしまって恐縮ですが、詳細は公式ドキュメントを参照されていただければと。

公式ガイド

http://gohugo.io/overview/quickstart/

それでは、公式ドキュメントであるように、記事を生成してみましょう。

hugo new post/good-to-great.md

スクリーンショット 2016-06-29 1.24.29

mdファイルが生成されているのが確認できます。

でも、このままだと何も見れないので、ビルドを行いましょう。

「hugo」でビルドを行うことができます。

build

hugo

すると、「public」フォルダが生成されるのが確認できます。

スクリーンショット 2016-06-29 1.36.33

こちらが、公開に必要なリソースが格納されるディレクトリとなります。

content内のファイルもそのままビルドされるかと思います。

スクリーンショット 2016-06-29 2.08.54

ちなみに、hugo new で生成した、記事のファイルに関して少し。

ファイルの上部の ”+++”が囲われた部分が「front matter 」と言われる部分で、こちらでそれぞれの設定が行えます。

共通して利用する「front matter 」がある場合は archetypes/default.md に記述することによって

hugo new コマンド毎にセットされる形となります。

例:
archetypes/default.md

+++
tags = ["x", "y"]
categories = ["x", "y"]
+++
hugo new post/my-new-post.md

my-new-post.md

+++
categories = ["x", "y"]
date = "2016-06-29T01:56:11+09:00"
tags = ["x", "y"]
title = "my new post"

+++

ここに記事を書いていく...

となります。

公式ドキュメント

http://gohugo.io/content/front-matter/

テーマのインストール

1から作るのもいいのですが、「HUGO」には様々なテーマが用意されていて(作成されている)、利用することによってリッチなブログを容易に準備できます。

公式ドキュメント

http://themes.gohugo.io/

スクリーンショット 2016-06-29 2.16.46

では、早速テーマのインストールを。

プロジェクト内で以下のコマンドで gitcloneを。

git clone --recursive https://github.com/spf13/hugoThemes.git themes

しかし、このコマンドだとテーマが全部cloneされてちょっと時間かかりますね。。

個別にダウンロードも可能ですので、ご利用は計画的に。

個別にダウンロード

cd themes/
git clone https://github.com/dplesca/purehugo.git

今回は、「purehugo」のテーマをダウンロード。

「purehugo」を指定してサーバーを起動します。

hugo server --theme=purehugo --buildDrafts

スクリーンショット 2016-06-29 2.30.07

きました〜!

いやぁ。便利。

リアルタイムプレビューなので、サーバー起動したまま、記事であるMarkdownファイルを編集すると即座に反映されます。

 

と、「Hugo」の触りのところを紹介させていただきました。

勿論、本格的にカスタマイズする事も可能で、その際は「layout」フォルダにテンプレートファイルとなるhtmlを作っていくのですが、今回は端折らせていただきました。

次回にでも機会があればと書いていこうかと思います。

使用者の記事などを読んでいると「WordPress」から移行する方も多くなって来ているようで、やはり「爆速、シンプル、容易」といった魅力に使用者が増えてきている状況かと思います。

当方も「WordPress」から移行はまだですが、サイト制作の際のサイトジェネレーターは「HUGO」と「gulp」等を用いて作っていたりもします。

コンパイルに遅さを感じている方にはオススメの「静的サイトジェネレーター」となりますので、もしよろしければとー。

ではではー。

hugo

Comment

Related Article

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

2018.03.27

無料でホームページ作成できるWixに新機能「Wix Code」 が追加!

2017.10.02

ドラクエ11(PS4)もプレイ可能!モバイルディスプレイ Diginnos DG-NP09D 8.9インチ を購入してみました!

2017.09.03

【簡単】iPhone Androidの画面をPCに表示や録画するアプリ。 Reflector2の使い方

2017.09.03

nginx location ディレクティブの優先度

2017.03.19

忙しい人向けの Docker Composeで作る nginx + PHP7-fpm + mysql + phpMyAdmin の環境構築

2017.02.13

誰でも簡単に「ホームページ制作」が行える!というWix のサービスを使ってみました。

2017.02.07

SketchファイルをGitHubで管理。簡単デザイン差分表示!「git sketch plugin 」利用法

2016.11.07

CATEGORY LIST

LATEST NEWS

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US