パート1〜Heroku + WordPress + Netlify + Nuxtで無料ブログ環境構築してみた〜の巻

1. きっかけ

（いきなりですがw）私はケチなのでとにかく無料で色々試したかったんです。自分のスキルのアウトプットや情報発信のツールとしてブログを始めたいなと思ったのですが、自分のプログラミングスキル向上がてら無料で環境構築をすることにしました。

そう！このブログ、現時点では完全無料で運営しているんです！

どんなアーキテクチャかは別の記事で書こうと思いますので、この記事ではどんなサービスをどのように使用して無料でブログサイトを構築したかを書こうと思います。

記事の中で”PaaS”やら”CDN”やらシステム関連の用語が出てきますが、分からない方は検索しながら読んでいただければと。

2. Herokuについて

ここで言うHerokuはPaaSのことです。元々はHeroku社が開発したサービスでしたが、2010年にSalesforce社に買収されたので、現在はSalesforce社のサービスとなります。

今回はこちらのサービスを用いてWebアプリケーションとデータベースを稼働させています。WebアプリケーションとしてはWordPressをデプロイしています。

3. WordPressについて

皆さんご存知のWordPressです（私は最近まで知りませんでしたが）。WordPressはブログなどを構築するためのオープンソースソフトウェアです。全世界で公開されているブログやWebサイトの約40％がこのWordPressで構築されているみたいです。

そのため、もしご存知ない方は知っておいて損はないと思いますので、色々調べてみてください！

WordPressだけで簡単にブログの管理・公開ができるのですが、プログラミングスキル向上を図るために、今回WordPressはHeadlessCMSとして使用しています。

そう。今回はお勉強がてら”JAMstack”なWebサイトの構築・運用をしています。JAMstackって何？は次回以降に記事にしようと思います。

4. Netlifyについて

NetlifyはWebホスティングができるサービスです（それ以外にもたくさんの機能がありますが、簡単に言うと。）。最初はただのCDNかなと思っていたのですが、それだけではくGitHubと連携してCI/CDを実現できたり、プログラムのビルドができたりとかなり色々と機能があります。素敵。

今回はこのサービスを用いてブログの公開用画面を稼働させています。そう、この画面はNetlifyからホスティングされています。

5. Nuxt.jsについて

Nuxt.jsはVue.jsと言うJavaScriptフレームワークのフレームワークですw

Vue.jsでもっと簡単にWebアプリケーションを作れるようにしたもの、だと私は理解しています。最初Nuxt（”ナクスト”と発音します）を聞いた時はNextやNestの聞き間違いだと思いましたが、ちゃんとNuxtと言うフレームワークがあります。ややこしい。

今回はこちら用いて、ブログ公開用画面を作成しています。お作法など中々苦戦しましたが、理解すると使いやすいなと感じています。もっと勉強してNuxtで他のアプリケーションも作成してみたいです。

6. 構築してみた感想

他にもこの構成で記事を書かれている方はいましたので参考にさせていただきましたが、やはり一つの記事だけで全部うまくいかないことがほとんどだったのでだいぶ苦戦しました。

しかし、最初自分の頭の中には一つのWebアプリケーションで記事の投稿や管理・公開を提供することしか思い浮かんでいませんでしたが、今回の無料ブログ環境の構築を通してJAMstackやHeadlessCMSなど色々知ることができました。

構築していくうえでどんな箇所で詰まったか、は自分のためにも記事にするつもりですのでぜひ見てください。記事書いたらリンクをこのページにも追加します。

構築したブログ環境のアーキテクチャ周りはこちらを参照してください。