Help us understand the problem. What is going on with this article?

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

こんにちは、フリーランス/フロントエンドデベロッパーの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:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした