【ブログサイト開発其の1】
スキルセットと技術選定
みなさん。こんにちは！
「ぱくもぐブログ」の管理人「じぃ」です。
このサイトは「Nuxt.js+microCMS+Netlify」を使用し且つ静的サイトという構成で構築をしました。
今回からは、このサイト構築について詰まったところやポイントなどを書いていこうと思います！
同じ構成でブログサイトやコーポレートサイトを作成している方もいるかと思いますので、その助けになると幸いです。
今回は私のスキルセットとこのサイト構築の技術選定についてご紹介したいと思います！
スキルセット
会社では主にHTML/CSS、javaScriptを使用してコーディングをしています。
しかし、昨今フロントエンド技術の種類が多くなっており、
今までのスキルセットですと、今後のキャリア、転職の際に限界があるなと思っていました。
そのため、スキルアップをしなくては（汗）と思い、
フロントエンド技術の中でとっつきやすいと言われているVue.jsの勉強をまずは始めました。
Vue.jsは結構使われている技術ですので、ネットでも情報がゴロゴロありましたが、ゼロから勉強を始めるにはネットの情報だけでは難しいと感じました。
なぜかというと、
- Vueのバージョンによって記述やメソッドが違う
- Vue+Laravelの技術も多くヒットする
ということがあり、そもそものVueの基礎について焦点を当てたサイトに辿り着くのに時間がかかることが多くなったためです。
そこで、「最初はやっぱり本だね。」と思い、以下の技術本を購入しました。
プロフェッショナルWebプログラミング Vue.js
この本はVueの基礎をToDoリストアプリを作成して覚えていく感じで、自分にピッタリだなと思っていたのと、
最終章で「Nuxt.js+microCMS+Netlifyでの静的サイト構築」という最新技術の内容もあったため購入しました。笑
実際に最終章をやってみると、今までのスキルを活用でき且つ現代のフロントエンド技術でサイト構築ができました。
この技術を応用したいと思ったのと、自分のポートフォリにできるようなものを考えた結果、
ありきたりですがブログサイトを構築しようと決めました。
最近では、本サイトのような構成、いわゆるJamstackでコーポレートサイトを構築することも増えて来ているため、今後のキャリア、転職にも活かせると考えました。
【クラウドワークス様】コーポレートサイトにmicroCMSを導入いただきました
ヘッドレスCMS「microCMS」を使ったJAMstack構成でコーポレートサイトをリニューアルした話
技術選定
上記で話した通りなのですが、購入した本からの応用ということで、Jamstack構成で、
- 静的サイトジェネレーター：Nuxt.js
- ヘッドレスCMS：microCMS
- ホスティング：Netlify
のようにしました。
Nuxt.js
構築してみた感じですが、静的サイトなのでまずページ表示・遷移が早いというのがあります。
静的サイト生成もコマンド一つでできるのと、ページで使用するボタンやリンクなどはコンポーネントとして管理できるので、保守・運用がしやすいと思っています。
microCMS
次に、コンテンツ管理としてmicroCMSを使用していますが、これも使い勝手がよいです。
日本製なので、日本語ドキュメントがありますし、microCMSのブログで実例を紹介していたりするので、不明点なくすすめることができました。
（APIの取得などにはちょっと時間がかかりましたが。。）
Netlify
最後にホスティングですが、静的サイトなので通常のレンタルサーバーにファイルをFTPアップでもよかったのですが、今回のスキルアップにはそぐわないのと、githubでソースを管理していこうと思っていたので、Netlifyを使用しました。
Netlifyのwebhookを使用することで、編集内容をgithubのmasterブランチにプッシュすると、
Netlify側で自動的に静的サイトジェネレーターのコマンドが走り、本番公開までしてくれます。
感動でした。笑
今回レンタルサーバーにファイルをFTPアップでは、上記の自動本番公開は実現できなかったので、
Netlifyを選んで良かったと思います。
次回
今回は自身のスキルセットと技術選定について書いていきました。
次回は、実際にどのようにサイトを構築していったかを書いていこうと思いますので、
次回も楽しみにしてください！
それでは次回もゆたしく〜〜
