vue.jsのフレームワークであるnuxt.jsを使用し、ポートフォリオサイトを作成したハナシ。

# WEB制作

2020.08.15

要約

いままでWordPressサイトを多く作ってきたが、新しい技術に触れたく、
vue.jsのフレームワークであるnuxt.jsを使用し、ポートフォリオサイトを作成した。

参考:wordpressのポートフォリオサイト

筆者の技術レベル

制作会社:2年
独学プログラミング:2年
javascriptは主にjQueryを使用していたため、vanilla JSはあまり得意じゃない。

NUXT + Netlify + エックスサーバー + microCMS で作るポートフォリオサイト

脱 WordPressへ

先述したが、いままでは自らのポートフォリ~企業サイトまでWordPressを使用し作成してきた。
ただWordPressだとどうしてもサイトスピードが改善できなかったので、これを機に新しいことに取り組むことに。

NUXT + Netlify

そこで目を付けたのが、「Angular」「Vue.js」「React」の3つ。
いろいろ調査し日本度ドキュメントが豊富でアジア圏で人気を誇る「Vue.js」を使用することにした。
なんてことを考えていると東京コロナのサイトが話題になった。

参考:https://stopcovid19.metro.tokyo.lg.jp/
github:https://github.com/tokyo-metropolitan-gov/covid19

調べてみるとこのサイトがNUXT + Netlify で作成されていることを知り、どうせなら真似することに。

microCMSでブログを作成

どうせなら技術ブログもこちらに移転することに。
そこで候補にしたのが、ヘッドレスCMSの「Contentful」と「microCMS」。
参考サイトが多いのは「Contentful」だが、国産で日本語の管理画面があるという理由で「microCMS」に決定。
「microCMS」はサポートが良く、とても助かった。

エックスサーバーのサブドメインに紐づける

ドメインはすでに「https://progblog-web.com/」をエックスサーバーで契約しているので、サブドメインを作成し「Netlify」と紐づけて完了。
結果的に本サイトの公開は実質無料に。

作ってみた感想は

初めてのことが多く苦労も多かったが、作り終えた今は「NUXT」の便利さが身に染みている。
ただサイトを作成し納品完了する案件では使用できないので、やっぱり運用のことを考えるとWordPressは便利。
「GIT」「github」の知識がなく苦労したのでこれからは活用し、勉強していきたい。

今後はhttps://nuxt.progblog-web.com/でブログを更新していく。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~