導入
ブログを作っても、他のサイトと似たようなデザインになる…
このボタンをもう少し小さくできたら…
ブログを作成するとこのような悩みはないでしょうか？
無料で作成できるブログは簡単に作れますが、細かいカスタマイズができないことが多いです。
そこで今回はプログラミングを使ってブログを自作する方法を紹介します。
ブログを自作するメリットとデメリット
実際にブログの作り方を紹介する前に、まずはブログを自作するメリットを紹介します。
メリットは以下のようなものがあります。
- 維持コストが無料でできることが多い
- オリジナルなデザインにすることが可能
- 細かなカスタマイズができる
- 機能を自由に追加できる
- ポートフォリオとして提出できる（エンジニア向け）
一方、デメリットは以下のようなものがあります。
- プログラミングの知識が必要（HTML・CSS・JavaScript など）
- 実装に手間がかかる
デメリットはありつつも、エンジニアやエンジニアを目指す方にとってはブログを自作す るメリットは大きいと思います。
なにより、他のサイトとの差別化を考えると、自作するか外注するしかなくなってくるので、コスト削減をするためにも自作をお勧めします。
WordPress と静的サイトジェネレータ
プログラミングを使ってオリジナルのサイトを作る際、大きく分けて以下の 2 つの方法があります。
- WordPress のテーマを自作・カスタマイズする
- 静的サイトジェネレータを使ってブログを作る
静的サイトジェネレータとは、ブログなどの静的サイトを簡単に作るためのツールです。
コマンドを入力することで、簡単にブログの雛形ができます。
この 2 つを比較した結果がこちらです。
| ツール | サイトの速度 | 情報の集めやすさ | 習得の容易さ | カスタマイズのしやすさ | サーバー代 | セキュリティ |
|---|---|---|---|---|---|---|
| WordPress | △ | 〇 | 〇 | △ | △ (無料枠がないことが多い) | △ |
| 静的サイトジェネレータ | 〇 | △ | △ | 〇 | 〇 (無料枠がある) | 〇 (管理画面がない) |
どちらもよい方法ですが、サイトの速度が速く、セキュリティ的にも優れている静的サイトジェネレータをお勧めします。
ここからは、静的サイトジェネレ ータの中でおすすめのフレームワークを紹介します。
静的サイトジェネレータの比較
静的サイトジェネレータで有名どころはこのようなものがあります。
（ *参考 https://jamstack.org/generators/ ）
| 名前 | スター数 | 言語 | テンプレート |
|---|---|---|---|
| Next.js | 80419 | JavaScript | React |
| Hugo | 56670 | Go | Go |
| Gatsby | 52252 | JavaScript | React |
| Jekyll | 43994 | Ruby | Liquid |
| Nuxt | 39262 | JavaScript | Vue |
| Hexo | 34101 | JavaScript | EJS,Pug,Haml etc. |
使うフレームワークによって使用する言語が違うのですが、言語としては JavaScript を使うことが多いです。
中でも、ブログ作成におすすめのフレームワークをいくつか紹介します。
Gatsby.js
React (JavaScript) で書ける静的サイトジェネレータです。
中では有名でネット上に多くの記事があるので、わからないことがあっても安心です。
MicroCMS や Contentful などのヘッドレス CMS とも連携可能なので、エンジニアがブログシステムを作り、非エンジニアが記事を投稿することも可能です。
もちろん markdown で記事を書くこともできます。
Hugo
Go というプログラミング言語で書かれた静的サイトジェネレータです。
Go なので速度が速く、テーマも豊富です。
ブログだけでも 250 種類以上のテーマがあります。
https://themes.gohugo.io/tags/blog/
Jekyll
Ruby 製の静的サイトジェネレータです。
Ruby を使ったことのある方は使いやすいと思います。
GitHub Pages との連携が簡単なようです。
Hexo
Node.js (JavaScript) 製の静的サイトジェネレータです。
この中で唯一ブログ用のフレームワークを謳っています。
こちらはブログ用ということもあり、ブログに特化したテーマが 350 種類以上あります。
https://hexo.io/themes/
デプロイ先（使うサーバー）の比較
次に、デプロイ先（使うサーバー）を比較します。
WordPress の場合はさくらのレンタルサーバーなどのレンタルサーバーにブログを置くため、月にいくらか必ず払います。
静的サイトジェネレータでは、デプロイ（サイトを本番環境に公開すること）に使うサービスは無料枠が大きいため、アクセスが少ないうちは無料で使うことができます。
ここでは、以下のことに注目し、各デプロイ先のサービスを比較します。
- 無料枠が存在するか（転送量）（初期は広告収入がほとんどないと思われるため）
- 商用利用可能か（ブログは一応商用利用？）
- デプロイ速度が速いか
- デプロイが簡単か（GitHub からのデプロイ etc.）
- サイトのパフォーマンスが早いか（CDN, ADN, リージョン）
- 独自ドメインが使えるか
- HTTP2 対応
- HTTP3/QUIC 対応（できれば）
- SSL 対応が簡単か（https 対応にしたい）
- テキストの圧縮（gzip）
- キャッシュの設定が可能か
- お問い合わせフォームの設置が可能か
- 日本語記事の情報量が多いか
これらの対応表がこちらです。
| 名前 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Vercel | △ (商用利用不可) | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | × | 〇 | 〇 | 〇 | △ (外部サービス) | 〇 |
| Netlify | 〇 (100GB/月) | 〇 | 〇 | 〇 | △ (日本リージョンなし) | 〇 | 〇 | × | 〇 | 〇 | 〇 | 〇 (付属) | 〇 |
| Cloudflare Pages | 〇 (無制限) | 〇 | △ | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | △ (制限あり？) | △ (外部サービス) | △ (若干少なめ？) |
| Github Pages | △ (商用利用不可) | × | 〇 | △ (要設定) | △ (Netlify より遅い) | 〇 | 〇 | × | 〇 | × | × | △ (外部サービス) | 〇 |
| Firebase Hosting | 〇 (10GB/月) | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 | × | 〇 | 〇 | 〇 | 〇 (Cloud Functions) | 〇 |
この中でおすすめは Netlify です。
上で紹介した静的サイトジェネレータはすべてデプロイできることに加え、100GB/月までの大きな無料枠・お問い合わせフォームの設置も容易なため、ブログをデプロイするにはぴったりの環境です。
また、ネットにも多くの記事があるため、わからないことがあれば調べることもできます。
https://www.netlify.com/
無料枠の大きさでは Cloudflare Pages のほうが大きいですが、2021 年の 4 月に始まったサービスなのでまだ情報が十分といえません。
なので、とりあえず Netlify を選ぶといいと思います。
終わりに
今回はプログラミングで独自性のあるブログを作成する方法を紹介しました。
静的サイトジェネレータを使うことで、高速で高セキュリティのブログを簡単に作ることができます。
また、公開先としては Netlify がおすすめです。
私は、以下の技術でこのブログを作ることを決めました。
- 静的サイトジェネレータ：Gatsby.js
- デプロイ先：Netlify
次回からは、これらを使ったブログの作成・カスタマイズ方法を紹介します。
