Nuxt+Netlify+Vuetify+Contentfulでエンジニア向け複業メディアサイト作りました

2019年05月06日(月) 18:28

【更新:2020年02月14日(金) 08:32】


エンジニア向け複業メディアサイト作りました

私がエンジニアとして複業を始めてから2年ほど経ちましたが、複業を始められた事が自分の中で非常に良い経験となったので
もっと多くの方に複業の良さを知ってほしいと思い、当サイト(https://fukugyou.dev)を作りました。
このサイトでは複業(副業)に関する情報をポータル的にまとめて提供したり、私自身の経験や考え等も発信しながら
複業について様々な情報を提供していければと思います。

このようなメディアサイトを始めるにはWordpressやはてぶ等を使えば簡単に始められると思いますが
それだと個人的になかなかモチベーションが上がらず、、
最近使っているNuxtを使用してゼロから自分で作ったほうが楽しそうだったので
GWのまとまった時間を使って開発しました。

またこのサイトはエンジニア向けに情報を発信するという意味も込めてドメインはdevを使っています。
(devドメインはGoogleが提供している開発者向けのドメインです。)


Nuxt+Netlify+Vuetify+Contentful

個人的にはNuxtを使った開発が非常に楽しかったので、このサイトもNuxtをベースに以下技術を使って開発しています。

Nuxt.js

Nuxt.jsはVue.jsアプリケーションを作成するフレームワークです。SSR(サーバサイドレンダリング)もできたりする非常に高機能なフレームワークですが、単純なSPAサイトの作成にも使えるフレームワークです。
Nuxtを使うとディレクトリ構造やルーティング、Vuex等の書き方が決まっており、複数人で開発するときや個人で開発するときでも
ある程度統一されたアプリケーションを開発する事ができるのも大きなメリットだと思います。

Netlify

Netlifyは静的なサイトを超高速で提供できるホスティングのWebサービスです。同じようなサービスでGitHub PagesやFirebase Hostingなどありますが。Netlifyは非常に簡単にかつ便利な機能があってとても良いです。
GitHubと連携して自動デプロイができたり、ブランチごとに確認用の環境が良いできたり、プルリクの際にも確認の環境ができたりと非常に便利です。
もちろん無料プランでも一定のリクエストは問題なく捌けるので、個人で静的サイトを作成する場合にはとてもおすすめです。

Vuetify

VuetifyはVue.jsをベースに構築されたUIフレームワークです。非常に多くのコンポーネントが提供されており、かつデザインも洗練されているため私のようなデザイン力のない方でもある程度綺麗なサイトを作る事ができると思います。
同じようなフレームワークにBootstrapやBluma等ありますがVuetifyも非常に使いやすく、おすすめです。

Contentful

ContentfulはヘッドレスCMSでAPIベースのCMSライブラリです。自由にブログの型が作成できたり、管理画面も用意されているので非常に便利です。色々な言語もサポートしているのでwebアプリケーションだけでなく様々なアプリケーションから使えます。
Wordpressと違ってフロント側のUIは提供されていないので、APIベースで投稿内容を取得し、デザインは各個人で作っていくというスタイルです。
色々なサービスとの連携が可能で、Netlifyとも非常に相性がよいです。例えばContentfulで記事を投稿したらNetlifyのwebhookを利用してNetlifyを自動でデプロイもできたりします。

これら技術はドキュメントも多くあったので非常に開発しやすかったです。
以下参考にさせて頂きました。




最後に

複業を解禁している企業も年々増えている事もあり、今後は今以上に複業を始める人が増えていくと思います。
特にエンジニアの方であれば、既にある程度のスキルを持っている場合が多いので複業を始めやすい環境にいると思います。
これから複業を始めようとしている方も、既に複業を始めている方にも有益な情報が提供できるように
今後も色々な情報を発信していきたいと思います。


複業 副業 Nuxt Netlify Vuetify Contentful エンジニア メディアサイト