初心者向けとして静的サイトジェネレーター「Hugo」についてまとめてみた！

最近、静的サイトに興味深々のぷるぷる（@pluplu2）です

表示スピード等々のメリットがある静的サイトを構築することができるツールとして「静的サイトジェネレーター」というものを知りました。
静的サイト、、、単純に言うとWordPress等で構築するPHPのサイトではなく、HTMLを中心に構築されたサイトをです。

過去の産物となりかけていた「静的サイト」ですが、最近ではページの表示スピードが速いことやデータの転送量が少ない、セキュリティ的な心配も少ないというメリットがある静的サイトが見直されてきています。

今回はその静的サイトジェネレーターの一つである「Hugo」を少しずつ使い始めたので、備忘録的な感じでHugoについてまとめていきたいと思います。

初心者であるぷるぷるが誰にでもわかりやすい表現を心掛けているため、正確な表現はできないかもしれないので、玄人の人向けではないです！
そのためちょっと温かい目で見てください！
明らかにここ違うよ～という内容があればご指摘いただけると嬉しいです。

Hugoとは？

Hugoは静的サイトジェネレータ―と呼ばれるツールの一つで、これを使うことによって、静的サイトを効率よく構築することができます。

静的サイトとは？

静的サイトの対義語は「動的サイト」です！

動的サイトは「動的」とあるが、「動きがある」サイトを指しているわけではなく、「ユーザー等の操作によって、柔軟なレスポンス（反応）をしてくれるサイト」を一般的に指しています。
たとえば、ログイン画面だったりフォーム画面だったりが動的サイトの代表例です。

一方で静的サイトは、ユーザーの操作に応じたレスポンスをすることができず、決まった動きしかできません。
インターネットが普及し始めた90～00年代は、この「静的サイト」主流でしたが、WordPressの台頭によって現在は「動的サイト」が主流となっていますが、サーバーの負担が少なくページの表示速度が速い等のメリットがあることから最近では「静的サイト」が再評価されつつあり増加傾向にあります。

Hugoの特徴

Hugoの特徴として、HugoではGoogleが開発した「Go」という言語が採用されています。
Go言語だったり、Go langとも呼ばれています。

プログラマーでもない人にとってはこのGo言語は聞きなれないので、「まじかー」と思ってしまうかもしれません。
しかし安心してください！

実際のところGo言語はというよりかは、コマンドプロントの操作と、HTML・CSSの編集ができれば、問題なく使えるので、心配しなくて大丈夫です！

またHugoの特徴の一つとしてあるのが、「ローカルサーバーの立ち上がりの速さがめちゃ速い」ということです！
私は静的サイトジェネレーターはHugoしかまだ使ったことがないので、比較できませんが、うわさによると他の静的サイトジェネレーターに比べ爆速で立ち上がるらしいです。

実際にローカルサーバーを何度も立ち上げたことがありますが、たしかに1秒くらいで立ち上がるので、ストレスも何もありません！

おそらく初心者の方は「なぜローカルサーバーを立ち上げるのだろう？」と思うかもしれませんが、サイトが実際にどのように表示されるか等確認する際にいったんローカルサーバーを立ち上げて確認をします。
公開する前のテスト環境のようなものですね。

導入のため必要なもの

導入するにあたっては以下のようなものが最低限必要になります。

それぞれについて簡単に以下で説明します。

パソコン（windows・macどちらも可）

当然ですが、パソコンは必須です(笑)
windows・macどちらでもいいですが、ネットにころがっているHugoの情報が結構macのものが多いので、macを使っている人の方が現段階ではいろいろと使い方を調べやすいかもしれないです。

ちなみにパソコンのスペックですが、ハイスペックに越したことはないですが、WordPressに比べると低スペックでも結構サクサク動くので、低スペックに悩む必要はないと思います。

Git

知っている人は当然のように知っていますが、日ごろWordPressくらいしか触らない人はどのようなものなのかいまいちわかっていない気がするのがこの「Git」です。

Gitは様々なファイルのバージョンを管理することができるオープンソースのサービスです。
この説明でもわからない人にはわからないと思うので、ざっくりいうと、ファイルをストレージにアップルロードすることができ、それをダウンロードもでき、複数人で開発する時により利用すると便利なサービスです。

hugoを使用する際に導入が必須であるとは言えませんが、色々なパソコンを使って作業したい時には、非常に便利なので、Gitは導入しておいた方がいいです！

Hugoのインストール

当然ですが、Hugoを使おうとするパソコン上にHugoをインストールする必要があります！

Hugoのダウンロードは以下の公式サイトからどうぞ～
https://gohugo.io/

インストールといっても、インストーラーを使うわけではなく、ファイルをダウンロードして置いておくだけです。

こんな人におすすめ・向かないかも

万人向けとは言えないHugoですが、オススメできる人と向かない人についてまとめました。

こんな人にHugoはおすすめ！

Hugoはこんな人におすすめです！

こんな人にはHugoは向かない

こんなな人にはHugoは向かないかもしれないです。

Hugoのメリット・デメリット

Hugoのメリット・デメリットというか静的サイトのメリット・デメリットかもしれないですがまとめました！

メリット

多言語対応サイトの生成が可能

Hugoの最大の特徴がこの「多言語サイトの構築」です。
Hugo独自の機能で、多言語サイトの構築を楽にすることができます！

多言語対応サイトの構築を考えている場合は、Hugoを採用するといいかもしれないです！

データベースがないためセキュリティ的に心配が少ない

動的サイトではないため、データベースを使用しません。
そのため、データベースの書き換えなどをされる恐れがなく、セキュリティ的にも安心です！

慣れればサクサク使える

WordPressの場合は、借りているレンタルサーバーのスペックだったり、通信環境、パソコンのスペックによって動作スピードが左右されますが、Hugoの場合は基本ローカル環境での作業になるので、ほとんどパソコンのスペックに左右されます。
パソコンのスペックに左右されますが、扱うファイルサイズを小さいので、基本的にハイスペックなパソコンでなくてもサクサク使えるので、ストレスが少ないです！

ただ、コマンドプロントを中心に使うので、コマンドプロントに慣れていない場合は、慣れるまでちょっとストレスかもしれません！

デメリット

SEO対策は自分でやらないといけない

WordPressの場合は、プラグインなどを使って簡単にSEO対策をすることができましたが、そうはいきません。
基本的には、自分でSEO対策をしなければいけないので、その点ちょっと勉強が必要かもしれないですね！

管理画面がない

基本コマンドプロントやHTMLファイルを直接編集するような作業になるので、WordPressのような管理画面はないです。
そのため、サイト構築初心者からすると、なかなかとっつきにくい部分があるかもしれないですね！

初心者向けの情報が少なく・慣れるのに時間がかかる

有名なCMSであるWordPressに比べると圧倒的に情報が少なく、初心者向けとなるとほとんどありません。
そのため、時には英語の情報をなんとか読んで情報を得なければいけなくなることもあるので、トラブルが起きると、対処するのが大変かもしれないですね～

まとめ：少しずつ分かってくるのがおもしろい！

私も最近少しずつ触り始めたばかりなので、わからないことの方が多いですが、わからないことがどんどんわかってくると結構おもしろかったりします。
現在WordPressで運用している自分のサイト（ブログではなく本業のサイト）を静的サイトに切り替えてみようかなと考えたときにこの静的サイトジェネレーターにたどり着きました。

コーポーレートサイトだと基本的に更新も少ないので、正直なところ静的サイトで十分なんですよね。
そんな目的のために現在Hugoを勉強中です！(笑)