22 August 2019 / #hugo #プログラミング

静的サイトジェネレーターで独自ドメインのブログを作るメリット3選

独自ドメインでブログを作る時に何で作ろうか迷ってませんか？
無料ブログ？はてなブログ？独自ドメインならWordPressかな？
今の最善のチョイスは静的サイトジェネレーターです。

こんにちはクラウドランスの望月です。
独自ドメインでブログを作るなら、どの技術を選択すべきか迷いませんか？

今回は検索してもWordPressしか出てこないし、
他に良いの無いかなーと、探している方向けのブログです。

自分もこのブログを作る時に、めちゃくちゃ調べて探して、
この最強のブログ構築方法にたどり着きました。

その答えは静的サイトジェネレーターを使ってブログを構築することです。
理由はWordPressより、「安くて速くて安定的」だからです。

以下静的サイトジェネレーターとはなんぞや？とか、
メリット、WordPressより何が優れているのか？
など詳細に解説していきます。

1. 静的サイトジェネレーターってなに？

簡単に言うと、サイトのhtmlファイルを生成してくれるツールです。

ブログ記事マークダウン形式で書いて、生成コマンドを実行すると、
html,css,JavaScriptを吐き出してくれます。

あとはこの生成されたhtmlファイル一式をオンラインストレージに保存して、
そのストレージのホスティング機能でWebサイトとして公開するだけです。

有名な静的サイトジェネレーター

Hugo
Jekyll
Next
Gatsby

色々比較記事がありますが、ブログ用途には迷わずHugoを選んで間違い無いです。
よくわからないという人はHugo一択で決まりです。

参考記事：静的サイトジェネレーターの比較とHugoに決めた理由

2. サーバー代がかからないから安い

ブログなのにサーバー代がいらないってどういうこと？

静的サイトというのは基本オンラインストレージに保存されたファイルを公開するだけです。

HTML、CSS、JavaScriptファイルをアップロードして、
そのストレージのホスティング機能を利用して公開します。

なので、サーバーというものが全く入りません。

ということはサーバーの代金がいらないということです。

ちょっと待って！　ストレージのホスティング機能ってなに？
今は、AWSやGCPのストレージにあるHtmlファイルを
そのままWebページとして公開する機能が用意されています。

github、gitlabでも保存してあるファイルを
そのままWebページとして公開できます。

自分がおすすめなのは、Netlifyという静的サイト専用のホスティングサービスです。

自分のブログもこのNetlifyを利用してブログを公開しています。
アクセスも十分捌けるし速度も速いのでおすすめです。

3. 静的サイトだから速い

基本的にサーバーで処理を行う動的サイトに比べて、
静的サイトは処理をしないので、速度が速いです。

動的サイトの代表のWordPressブログが表示される仕組みはこうです。

ページを表示するリクエストが来る
アプリケーションが動いてデータベースにアクセス
データベースから取ってきたデータからPHPがHtmlを構築する
レンタルサーバーがHtmlファイルを返す。

この処理で一番ネックになるのがデータベースです。
サーバーの性能が低いと、この処理に時間がかかります。
結果ページが表示されるのに時間がかかってしまいます。

もっさりしたページは嫌ですよね。

静的サイトの表示される仕組みはこうです。

ページを表示するリクエストが来る
マネージドのホスティングサービスがHtmlファイルを返す。

マネージドのホスティングサービスとは、AWSやGCP、github、gitlab、netlify が
管理している仕組みでページを返すという事です。

このマネージドというのが次の「サーバーが落ちない」に繋がります。

4. サーバーが無いからサーバーが落ちない

サーバーが無いので、サーバーが落ちようがないですよね。
つまり安定性がめちゃくちゃ高いという事です。

ちょっとまって、サーバーはあるでしょ？と思ったあなた。

鋭いです。

サーバーはあるのですが、それはAWSやGCPの管理下の
超信頼性、安定性の高いサーバーがマネージドで動いています。
なので、自分が管理しているサーバは無いという認識ですね。

一方レンタルサーバーでWordPressを動かしている方はどうでしょうか？

レンタルした物理サーバーは自分が管理する必要があります。
基本１台なので、そのサーバーが落ちたら、つながらなくなりますよね。

そして普通はおそらく一番安いサーバーを借りて動かしているのではないでしょうか？
エックスサーバーの一番安いプランとか、
お名前ドットコムでドメイン買った時に付随してくる一番安いサーバーを
使ったりとかですよね。

サーバーの性能も超絶低いものになるので、速度は遅いしメモリも少ないし、
とうてい大量アクセスを捌けないですよね。

マネージドのホスティングサービスは基本AWSやGCPが作っています。
なので超信頼、超安定で99.9999%落ちることがありません。

Googleさんが落ちませんよと保証してくれていることを含めてのサービスです。

もちろんnetlifyのサービスでも同じく安定性を保証しています。

githubやgitlabのサービスでも基本同じでマネージドのホスティングサービスです。

つまり安定性に関しては気にする必要がないということですね。

まとめ

以上「静的サイトジェネレーターで独自ドメインのブログを作るメリット3選」でした。

今から独自ブログを作るんであれば選択肢としては
WordPressかVIXか静的サイトジェネレーターですよね。

この中だとやはり「安くて速くて安定的」な静的サイトジェネレーターですよね。

ただ1つデメリットがあって、
1から全てを構築するには多少プログラミングの知識が必要っていうところです。

静的サイトジェネレーターでブログを作る手順

静的サイトジェネレーターをダウンロード
サイトの公式ドキュメントを見てインストールする
サンプルサイトをビルドする
ローカルから表示を確認する
表示した記事を自分なりに変更してデプロイする

ここまでの作業でも、やはりプログラミングの知識がない方には少しきついです。
操作は基本的にLinuxの黒い画面で行います。

サイトを公開する手順

githubかgitlabに作ったサイトをアップロードする。
netlifyと連携してWebサイトとして公開する。
CMSを適用して、管理ページから記事を書く

サイトを公開する時もエンジニア的な操作が必要です。

この辺の課題を解決できたり、
自分で勉強しながら作りたいって言う意欲をお持ちの方にはおすすめです。

Hugo + Netlify CMSでブログ構築のリンク

実際に自分のブログ「札幌のフリーランスブログ」は Hugoを使って静的サイトホスティングしています。

Hugo + NetlifyがWordPressに比べてどれぐらい最強なのかを力説したブログ記事がこちら
WordPressはオワコン！Hugo+Netlifyで最強の独自ドメインブログを作ろう

以下に構築した時の手順をなるべく詳細にまとめた記事がこちら。

この手順で作業を進めれば構築出来るはずです。

その他Hugoでブログを作る方法のTipsを色々ブログにしています。

Google Analiticsを設置する方法
静的サイトホスティング無料枠の徹底比較対決！

https://cloudlance-motio.work/tags/hugo/

逆にこんなの難し過ぎて元々プログラマーにしか出来ないよって人もいますよね。

安心してください。

期間限定＆人数限定で「HugoとNetlifyCMSで作る最強ブログ」を構築代行します。
非エンジニアの方でも超簡単に静的サイトジェネレーターのブログを運営できます。

依頼と構築期間や費用などの質問はTwitterのDMから受付いたします。
「HugoとNetlifyCMSで作る最強ブログ」を作りたい方はご連絡くださいませ。

Follow @freemotio

それでは、また次回の記事でお会いいたしましょう。

このブログではフリーランス情報やプログラミング情報の発信を
続けていこうと思うのでぜひ応援お願いします。
また、Twitterでも日々の為になる技術情報やフリーランスについての
有益な情報をつぶやくので、いいなと思った方はTwitterのフォローをお願いします。

Follow @freemotio

ブログの著者：IT業界10年以上のベテランフリーランスエンジニア。
会社員時代に比べ年収2.5倍にUP。
AWSとGCPの両方でゲーム系インフラの構築,運用と
C#とPHPでのサーバープログラミングの二刀流で絶賛稼働中。
有益なIT情報を発信出来きるように日々IT情報収集が日課です。
ブログではフリーランスやIT情報を毎日更新中です。

自分のスキルレベルと経歴をまとめたページを作りました。
お仕事のご依頼の際には参考にしていただければと思います。

クラウドランス望月のポートフォリオサイト

またブログに関する感想やご意見、応援などがありましたら、
こちらから自分宛てにTweetして頂ければと思います。

Tweet to @freemotio

Tweets by freemotio