7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ポートフォリオサイトを作成する②Nuxt+Contentful+gitlab+Netlifyで公開

Posted at

こんにちは、フリーランス/フロントエンドデベロッパーのHiromiです。

#TL;DR
前回ペライチのページを作成してから、かなり時間が経ってしまいましたが
やっとポートフォリオサイトが本公開できました!

https://webiscuit.jp/
コメント 2020-01-31 123913.jpg

#使用した技術

  • JavaScriptフレームワークは、Nuxt.js
  • CMSは、Contentful
  • ホスティングおよびフォーム機能は、Netlify
  • CSSフレームワークは、tailwindcss
  • アニメーションは一部でanimejs
  • バージョン管理は、gitlab
    をそれぞれ使用して、完全に静的ページ(Jamstackの概念)で作成しました

#それぞれ選定した理由や感想
基本的には、受託案件ではすぐに使えないだろうなぁという技術を積極的に導入しました。

##JSフレームワーク / Nuxt.js
https://ja.nuxtjs.org/
今回は静的ページとして作成する予定だったので、静的サイトジェネレーターとして使用しました。

Nuxt自体は案件でも今までも使用したりしてきてますが、小規模のソロ案件が多かったので
今回、あえてコンポーネントを分けたりしっかり作ってみたので、学びが多かったです。

また元々ここ2~3年ほどは特に指定がない場合や小規模案件などでは
PostCSSとPugで制作してきており、今回もそうしています。
Nuxt(Vue)ではどちらもすぐ導入出来るので、ソース書く度に愛が膨らみます(笑)

##ヘッドレスCMS / Contentful
https://www.contentful.com/
元々自前のJSONファイルで実装していた実績やプロフィールなどを
せっかくなのでJamstack導入しとこうと途中、Contentfulに入れてみました。
他社サービスも検討しましたが、私のポートフォリオ規模であればContentfulで十分かなと。

CMSの比較はこちらの記事がわかりやすく、選定時に参考にしました。
JAMstack Tools and The Spectrum of Classification | CSS-Tricks

今後ブログページを作成しようかなと思っているのですが
そっちはContentfulでもありですが、せっかくなのでREST APIあたりでやろうと思っています。

##ホスティング・フォーム機能 / Netlify
https://www.netlify.com/
ペライチポートフォリオから引き続きNetlify使用です。

時々サーバー速度がぐっと落ちるのが若干気になるのですが、
Netlify Formsが楽すぎるので、一旦は続投です(とはいえ実装時は苦戦しましたが><w

#雑感
せっかく自分で自由にできるから、とデザインから自力で行い
普段の受託案件では導入しづらい技術を積極的に取り入れました。

どうしても仕事のほうが優先になってしまったのもあり、かなり時間かかりましたが
1サイトでいろいろと学習しつつ楽しく導入出来ました。
まだまだそれぞれ改善の余地はあるとは思いますが、概ね満足です:relaxed:

7
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?