静的サイトは無料で爆速にできるらしい#Hugo[wordpress辞めよ]

2020/01/07

web

どうもー・ω・ガッチ（@gatchsite）です。

wordpress を使ってブログを作成していると、「ページ表示されるまで時間がかかる。」「画像の表示が遅い。」こんな経験あるかと思います。

ページ速度を「PageSpeed Insights」なんかで調べてみてもスコアがすこぶる悪い。。。

本記事では、静的サイトのメリットやサービスの紹介、具体的なフレームワークなんかも紹介しています。

少しでもお役に立てたら嬉しいです。

記事の内容はこちら

wordpress が遅い理由

アクセスがあってから、HTML を作っているため遅くなってしまいます。

受注生産の自動車工場で考えてみると、分かりやすいかもしれません。 wordpres は受注生産のため発注（アクセス）があってから自動車（HTML）の生産を開始します。自動車を作るには、設計書（データベース）やパーツ（テンプレート）が必要なため、準備にも時間がかかります。

いろいろ工夫することで速くすることもあ可能ですが、そのためにはサーバーやデータベース、ネットワークの知識など、覚えなければならないことが多くなります。

静的サイトが選ばれる理由とメリット

「無料でブログを作れる可能性がある」という点は大きな理由ではないでしょいうか。

ブログを作るには、レンタルサーバーを借りて、データベースの設定をして、テーマを購入して、、、などなど。少額ですが費用がかかることに変わりはないですからね^^;

その点、静的サイトは無料で公開できてしまうので始めるきっかけとしても良いのではないかと思っています。

静的サイトのメリット

いろいろありますが、主要なところだと以下のようなメリットが考えられます。

無料で作れる可能性がある
データベースが必要ない
プログラムが必要ない
サーバーが必要ない
記事の管理が分かりやすい

静的サイトを作るジェネレーター

効率よく静的サイトを作るためには「静的サイトジェネレーター」を使う方法がおすすめです。

静的サイトジェネレーターは、markdown 形式で作成した記事とテンプレート（HTML の元となるファイル）を組み合わせて HTML を作成してくれるツールです。そのため、html、css の知識があれば簡単にブログサイトを作ることができます。

様々なサービスが出ていますので、自分の使い方にあった物を選んでみてください。

Hugo Go 言語でできた静的サイトジェネレーター
Gatsby React を使ってます。
Nuxt Vue.js を使ってます。
Hexo EJS,Pug,Haml などのテンプレートを使えます。

もっと知りたい方はこちらもみてみてください。

https://www.staticgen.com/

静的サイトを無料で公開する方法[gatch.site の構成も紹介]

無料でブログできたら良いですよね。このサイトも静的サイトジェネレーターへ移行してランニングコストを大幅に削減しています。

構成としては、こんな感じです。

静的サイトジェネレーター： Hugo
ホスティングサービス　　： Google Cloud Storage
ドメイン　　　　　　　　：お名前.com

残念ながら、独自ドメインの費用だけはかかってしまいます。m(_ _)m

GithubPages などを使って無料でブログを公開している人もいるので、そういった方法もアリかと思います。

静的サイトジェネレーターのメリット

wordpres のようにサーバー上で記事を書いたり、css を修正したりする必要がなくなります。自分の持っている PC で記事を書いて HTML を作成して、出来上がった HTML をアップするだけ。

記事を word やメモ帳で書いて、記事を wordpress の管理画面からコピペする必要もなくなります。記事の修正を word でやったのか管理画面から直接やったのかを気にする必要もなくなります。記事の管理も静的サイトジェネレーターを一緒に管理できるので、管理の手間も省けます。

オススメプログラミングスクール

SkillHacks : Rubyを学びたい方。動画教材とLINE@による無制限サポート
TechAcademy : php/wordpressを学びたい方。現役エンジニアのマンツーマン
CodeCamp : Pythonを学びたい方。データサイエンス初級をオンラインで

静的サイトジェネレーター「Hugo」

gatch.site でも採用した Hugo は、Go 言語（Google で作成されたプログラミング言語）で作られています。

使い方は簡単で、以下の５ STEP を行うだけで確認することができます。

1.Hugo のインストール

brew install hugo

※Mac の homebew がインストールされていない場合はこちらからインストール

2.Hogu で新しいサイトを作成

hugo new site [name]

3.theme のインストール

git submodule add https://github.com/onweru/newsroom.git themes/newsroom

4.theme を設定する config.toml に以下を追記します。

theme = "newsroom"

5.Hugo でテストする

hugo server

おまけ Hiugo で静的サイトを作成する

これが意外と乗っていなくて、ちょっとハマってました笑

コマンドはこれだけなので、めちゃ簡単なんだけど、、、^^;

hugo

静的サイトと wordpress どっちが良いの？

ちょっと話がそれますが、どっちにしようか悩んでいる方もいるのではないかと思うので。

IT 知識が全くない方は、まず wordpress を使ってみる方が良かったりします。

さっきまでの話と違うじゃないか！と思うかもしれませんが、今ではどのレンタルサーバーでもポチッとボタンを押すだけで wordpress が使えるので、コードが分からない方はまず wordpress で知識を勉強しながらブログを書いていく方が良いのではないかと思います。分からない事は、検索すればだいたい誰かが解決してくれています（笑）

HTML、css の知識がある方は、静的サイトジェネレーターがオススメです。 wordpress の場合、テーマのデザイン修正が思ったようにできなかったり、謎の css をどうにかこうにか修正したりと使いずらかったりします。静的サイトジェネレーターの場合、データがないおかげで、分かりやすく修正も容易にできるのではないかと思います。