🙂

Nuxt.js+Netlifyでwebサイトを構築した備忘録

2022/03/27に公開

Netlify

Nuxt

tech

※この記事は，OUCRCへ投稿した記事(https://oucrc.net/articles/5epogqmu2lk)を再構したものです．

概要

Nuxt.jsとNetlifyを使用して自身のポートフォリオWebサイトをつくりました．この記事は，Node.jsのインストールから実際にサイトを公開するまでの流れを備忘録として残すためのものです．対象読者としては初心者の方を想定しています．

Node.jsをインストールする

Nuxt.jsを使用するためには，Node.jsが必要となります．
Node.jsはこちらからインストールできます．→ https://nodejs.org/ja/download/
Node.jsをインストールできたら，プロンプトで以下のコマンドを使って，Node.jsが正常にインストールできており，使用可能になっているか確認します．

node.exe --version
npm -version

以上の2つのコマンドを実行し，現在のバージョンが表示されればOKです．

Nuxt.jsでプロジェクトを始める

npmコマンドが正常に使用できることを確認できれば，プロジェクトを作成したいディレクトリに移動し，以下のコマンドでNuxt.jsのプロジェクトを作成します．

npx create-nuxt-app (プロジェクト名)

すると以下のようにいろいろと聞かれるので，適当に答えます．

create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in (プロジェクト名)
? Project name: (プロジェクト名)
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA)
? Linting tools:
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript), Depend
abot (For auto-updating dependencies, GitHub only)
? What is your GitHub username? (GitHubのusername)
? Version control system: Git


🎉  Successfully created project (プロジェクト名)


  To get started:


        cd (プロジェクト名)
        npm run dev


  To build & start for production:


        cd (プロジェクト名)
        npm run build
        npm run start

Google Fontの導入

Google Fontはこちら→ https://fonts.google.com/
Google Fontを導入するにはnuxt.config.jsを編集し，以下の記述を追加します．

export default{
  head:{
    link:[
      {rel:"stylesheet", href:"https://fonts.googleapis.com/css2?family=Geo&display=swap"}
    ],
  },
  target:'static',
}

画像を使用したいときは

画像を使用したいときは，プロジェクト名のディレクトリの下にassetsというディレクトリをつくり，その中に画像を入れるます．

ロゴを使いたいけれど自分では思いつかないとき

このサイトが便利でした．
https://hatchful.shopify.com/ja/

プレビューしたいとき

エディタのターミナル（エディタじゃなくても大丈夫ですが）で以下のコマンドを実行して，ローカルホストに接続すればプレビューを確認できます．

npm run dev

ビルドする

ビルドするには以下のコマンドを実行します．（このコマンドでdistディレクトリが作成されます）

npm run generate

次に以下のコマンドを実行し，ローカルサーバーを立ち上げることでビルドするサイトが意図したとおりのものになっているか確認できます．

npm run start

プロジェクトをGitHubのリポジトリにあげる

プロジェクトをcommitします．
commitが完了したらGitHubのWebサイト上で新しいリポジトリを作成します．
新たなリポジトリを作成したときに表示されるGitHubのガイドに沿って以下のコマンドを実行します．

git remote add origin https://github.com/(GitHubのaccount name)/(リポジトリ名).git
git branch -M main
git push -u origin main

Netlifyにデプロイする

Netlifyはこちら→ https://www.netlify.com/

Netlifyのダッシュボードで「New site from Git」というボタンをクリックします．

Continuous DeploymentでGitHubを選択します．先ほど作成したリポジトリを選択し，各項目は以下のように設定し，「Deploy site」のボタンを押します．

以下の画像のように「Published」と表示されれば成功です．
画像上の緑色のURLで全世界にWebサイトが公開されている状況になりました．

以上です．

おまけ：Webサイトのデザイン

2021年6月に公開したときのデザイン↓

デザインの参考元(https://tsudaken.jp/)

概要