ウェブサイトを作る

ウェブサイトを作るには色々な方法があります。

簡単な方法では既存のブログスペースなどを利用すればよいですが、広告を表示したくないなどあれば、有料プランを検討すると思います。また、自前でレンタルサーバを申し込んで、そこにWordPress等を設置してページを作る手段もあります。今回は、細かいレベルでサイトのカスタマイズができつつ、一方でHtmlやCSSやJavaScriptを1から書きたくない、また、サイトの更新を簡単に行えるようにしたいという要件で、サイトの構築方法を考えていました。

その中で、東京都の新型コロナウィルス対策サイトがモダンなフレームワークで作られているという記事を見て、 Nuxt.js と Netlify を利用してウェブサイトを構築してみました。本サイトはこれで作られています。

GitとNuxt.jsを導入する

まず、Gitのインストールと初期設定をします。こちらを参考にしました。

Nuxt.jsはnode.jsのモジュール管理システムであるnpmを利用してインストールします。そのため、まずはこちらからNode.jsをインストールします。 Node.jsをインストールするのnpmが使用できるようになります。

Nuxt.jsをインストールします。こちらを参考にしました。

プロジェクトの初期設定でUIのフレームワークを選択します。フレームワークごとの特徴はこちらが詳しいです。今回はマテリアルデザインが特徴なVutify.jsを使用しました。

マテリアルデザインとは

Googleのガイドラインがベースですが英語ですのでこちらの記事が参考になります。

NetlifyとGitHubの連携をする

こちらの記事を参考に進めました。

Create a new site

Build options and deploy

Basic build Settings の「BuildCommand」は以下を入力します

nuxt generate

DeployしたらNetlifyから送られたURLにアクセスして、デフォルトのページができていることを確認します。

独自のドメインを取得している場合は、Netlifyの設定でドメインを指定できます。こちらの記事が参考になりました。

ドメイン名でアクセスしてデフォルトページが出ることを確認

なお、VSCodeだと、ページを編集やGitへのcommit + pushなどが統合的にできて便利です。

Google Analyticsを導入する

Google Analyticsを導入するとページアクセスの状況が確認できます。Nuxt.jsへの導入方法はこちらを参考にします。なお、Google Analyticsはリアルタイム以外の情報はその日の24時に更新されるようです。