【自作ブログ】Nuxt.js + Contentful + Netlifyでブログサイトを作ろう！
今回から数回にわたって、開発環境の構築から実際にリリースするまでの過程を記録として残していきます。
記事の執筆は初めてなので、色々と試行錯誤しながら書いていきますが最後までお付き合いいただけると嬉しいです！
用語
まずは簡単に各用語の説明から。
- Nuxt.js
- Vue.jsのために設計されたフレームワーク
- vue-routerやvuexなどの公式ライブラリが組込まれている
- SSR(サーバサイドレンダリング)も簡単にできちゃうすごいやつ
- 今回の導入目的は主にSSG(スタティックサイトジェネレート/静的サイト生成)ができる点
- Contentful
- Headless CMSと呼ばれる、APIに特化したCMS
- WordPressなどと同じように記事投稿用の管理画面が用意されている
- ただしWordPressなどとは違い、サイトのUIは一切用意されていない→自分で作る
- Netlify
- 静的なサイトをホスティングできるwebサービス
- あくまで静的なサイトだけなのでSSRなどはできない
- SSRしたり動的なサイトを公開したい場合はHerokuなどを使う
この構成でブログサイトを構築するにあたって重要なのは、個人レベルの物であれば全て無料で使えることです。
どんなものができるか
今ご覧になっているこのサイトがまさに表題の技術を使って構築したものになります。
当サイトのレイアウトを手書きの図で簡単に説明します。
当サイトの簡単なレイアウト
このようになっていて、メインコンテンツ表示部だけが切り替わる仕組みになっています。
(固定)となっている箇所はサイトが読み込まれた初回のみ描画が行われ、以後は表示されっぱなしである事を意味しています。
また、NetlifyはGithubなどのリポジトリを紐付けることができるので、masterなどの特定のブランチにpushされたタイミングで自動的にデプロイされるようになっています。
さらに、Netlifyにはwebhookを使って自動で再デプロイできる機能があるので、Contentfulで記事を投稿、編集した時に自動で反映されるようにすることが可能です。
手間いらずでステキですよね。
作業の進め方について
どのような順序で作業を進めていっても問題はないのですが、今回はわかりやすさと問題の解決しやすさを考慮して以下の順序で進めていこうと思います。
- Nuxt.jsのプロジェクトをローカル環境に作成する(まずはhello world)
- GithubのアカウントでNetlifyにログインしてmasterブランチのソースをデプロイできるようにする
- Contentfulにアカウントを登録（Githubアカウントでイケます）して、自分のSpaceを作成
- ブログ用のContent modelを作成して、テスト用の記事をいくつか用意する
- いよいよブログサイトの作成を開始する
実際にコーディングをする前に準備が色々あって大変ですが、どのみちやらなくてはいけないので最初の方にまとめて連携されておきたいと思います。後々になって連携させてみたら上手くいかない…となってしまうとモチベに大ダメージですので…。
終わりに
今回は導入部ということで、システムの概要と進め方のガイドラインをまとめるところまでとします。
次回から早速ブログサイトの作成をやっていきましょう！
記事の更新についてはTwitterで告知しますので、よろしければアカウントのフォローもお願いします！
それではまた次回。