ポートフォリオサイトをNuxt + Netlifyに移行しました

WordPessで作成していた私のポートフォリオサイトをNuxt JSで作り変えてみました。デザインや内容はそのままで、管理体制を変えた感じですね。Nuxtに移行した理由や悩んだところをまとめてみます。

↑私が10年以上利用している会計ソフト！

移行を決めた理由

元々私のポートフォリオサイトは、まだ私が学生だった頃にWordPressの勉強用に作ったものです。その後何度かリデザインしながら公開していました。ブログなどはつけておらず、制作物の紹介を投稿記事として扱っていました。ただ、制作物は更新する頻度も高くはなく、WordPressでなくてもいい気がしてきていました。また、WordPressやPHPのバージョンを上げるたびにエラーを出すプラグインの対応に疲れてきていたところでした…。

そんな中出会ったのがGatsbyやNuxtといった静的サイトジェネレーターです。英語では Static Site Generators と呼ばれ、SSG と省略されています。

静的サイトジェネレーターは文字通り静的ファイル、つまりHTMLファイルを生成します。WordPressのような従来のCMSではデータベースをもとにサーバーでHTMLを生成して返していました。それに対して静的サイトジェネレーターではビルド時にすべてのHTMLを生成します。サーバーレスで公開でき、レスポンスが早く、セキュリティーリスクも低くなることが期待できます。

以前からVueやReactの勉強していたこともあり、静的サイトジェネレーターを使って多言語サイトを作ってみようと思い立ちました。

悩んだところ

NuxtかGatsbyか


一口に静的サイトジェネレーターと言ってもかなりの種類があります。まずはどれが人気なのかあれこれ調査。私が扱える言語がJavaScriptとPHPくらいなので、Next.js、Gatsby、Nuxtあたりかなぁと絞り込みました。その中でも静的サイトジェネレーターとしてのリファレンスが多そうなGatsbyとNuxtのどちらかにしようと決めました。

どっちがいいかなんて実際に使ってみないとわからない！ということで、同じポートフォリオサイトをGatsbyとNuxtの両方で作っていくことに。まったく同じものを作ることで構造や作っていく過程での違いが明確になります。

簡単に書き方の違いを紹介：

Gatsby（React）

JSXという記法でJavaScriptの中にHTMLを組み込んでいくイメージ。

import * as React from 'react'

const IndexHeader = () => {
  return (
    <header>
      <h1 className="message">Hello Gatsby!</h1>
    </header>
  )
}

export default IndexHeader

Nuxt（Vue）

template の中にコンポーネントの内容、script にJavaScriptでの指示、style にCSSを記述。役割分担がされている単一ファイルコンポーネントという書き方。

<template>
  <header>
    <h1 class="message">Hello Nuxt!</h1>
  </header>
</template>

<script>
export default {
  name: 'IndexHeader',
}
</script>

<style>
  .message {
    color: #0bd;
  }
</style>

JavaScriptをゴリゴリ書いてきた方にはReactの書き方が、HTML/CSSベースのデザイナーさんはVueの書き方の方がなじみやすいかも？

結局JSXに慣れなかった＋単一ファイルコンポーネントが便利だなーということで、Nuxtに決定！

Jamstackにする必要性？

「静的サイトジェネレーターならAPIと連携させてJamstackっしょ！」意気揚々とContentfulと連携させて開発していましたが、前述のとおり私のポートフォリオサイトの更新頻度は高くありません。お知らせ欄なんかもないので、そもそもContentful自体必要じゃないのでは…と思い始めました。もうほぼほぼ完成していたところで、必要のない機能を取捨選択。多言語化はi18nに託し、作成していたContentfulとの連携コードは別ブランチにポイ！コンテンツ内容はJSONファイルで管理することにしました。コードもシンプル！

GitHub PagesかNetlifyか


ビルドしたファイルはGitHub PagesやNetlifyで無料で公開できます。プッシュするだけなので、サーバーレスって本当に楽ちん。どちらも機能的には十分なのですが、Netlifyはコード非公開（Private）でも公開できるのでNetlifyに決定（コードはなんだか恥ずかしくて見せられないよ！）。ただしアクセス上限などはあるので、様子を見ながら有料プランも検討中です。

コンタクトフォームはどうしよう？

WordPressではコンタクトフォーム用のプラグインもたくさんあったので、ずっと利用してきましたが、WordPressじゃない場合はどうするかな…と悩みました。外部サービスを使うかーと探していたところ、Netlifyではフォーム機能が無料で利用できるではないですか！

しかもシンプルなものなら form タグに netlify と加えるだけ！すごい！採用！

ただしNuxtの場合は以下のhiddenインプットが必要なので要注意（ハマったところ）：

<input type="hidden" name="form-name" value="contact">

ひとまず公開

コンタクトフォームが動いたので公開…としましたが、まだまだ実装していないもの、調整が必要なものはたくさん残ったままです。OGP、スタイルの調整…などなど。ただ完璧を目指していたらいつまでたっても公開できないので、ひとまず公開！

Lighthouseでのスコアもいい感じに上がりました。


Before


After

感想

以前のポートフォリオサイトはWordPressの勉強用に作ったものでしたが、今回はNuxtのいい勉強になりました。やっぱり実働サイトを作るのが一番身につきますね。初めて触るような技術も多かったので、なんだか初めてWordPressでサイトを作った時のような純粋な感動をたくさん得られました。Webサイト制作楽しい！

また、とりあえず公開することを目指して作ってきたので、今後は上記調整点を含め、よりよいコードを試行錯誤してみようと思います。

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください！もちろん無料です！ :)