トップ画像
Nuxt.js+Netlifyを使って初心者でもできるwebサイト構築

執筆者: 小石こは

最終更新: 9/18/2021

こんにちは.初めまして.小石こはです.

#ショート記事週間3日目(のっかりました)

今回は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


Webサイトのデザインを考える

Webサイトのデザインを考えていきましょう.
以下のような案がでました.

が,暗すぎると指摘され,自分でもそう思ったので,
最終的に以下のデザインに決定しました.
(このサイトのデザインを少し参考にしました.)

もろもろの準備

次はIDE(統合開発環境)でプロジェクトディレクトリを開きましょう.今回はWebStormを使用していきます.
WebStormのインストールはこちら→ https://www.jetbrains.com/ja-jp/webstorm/

Nuxt.jsで作ったプロジェクトのディレクトリ構造は以下のようになっています.(今回の例ではプロジェクト名をkohaにしています)

まずはnuxt.config.jsを編集していきます.
以下のような記述を追加してください.

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


Google Fontを使用しています.
Google Fontはこちら→ https://fonts.google.com/
また,画像を使用したいので,プロジェクト名のディレクトリの下にassetsというディレクトリをつくり,その中に画像を入れていきます.

次に,componentsのディレクトリの中にSidebar.vueというファイルを作ります.

Vueファイルの中身をつくっていく

では,Sidebar.vueの中身を書いていきましょう.
Sidebar.vueの中身は以下の通りです.(ロゴはこのサイトを使用しました.)

<template>
  <div class="back">
    <div class="menu">
      <div class="toTitle">
        <img src="~/assets/logoN.png" alt="ロゴ"/>
      </div>
      <ul>
        <li>PROFILE</li>
        <li>WORKS</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      name: 'Sidebar',
    }
  },
}
</script>

<style scoped>
.back {
  position: relative;
  background-color: #f5f5f5;
}

.menu {
  position: absolute;
  background-color: #2e8b57;
  width: 230px;
  height: 640px;
  left: 65px;
}

.toTitle {
  width: 200px;
  height: 20px;
}

ul {
  list-style: none;
  padding-top: 170px;
  padding-right: 68px;
  text-align: right;
}

li {
  padding: 15px;
  font-size: 25px;
  font-family: 'Geo', sans-serif;
  color: #f5f5f5;
}

li:hover {
  letter-spacing: 5px;
  opacity: 0.8;
}

</style>	

また,pagesディレクトリの中にあるindex.vueの中身は以下の通りです.

<template>
  <div class="back">
    <Sidebar/>
    <div class="image"></div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      title: 'index',
    }
  },
}
</script>

<style>
.back {
  position: relative;
  background-color: #f5f5f5;
}

.image {
  position: absolute;
  width: 1174px;
  height: 783px;
  top: 80px;
  left: 245px;
  background-image: url('~/assets/my.png');
}


</style>

WebStormのターミナルで以下のコマンドを実行して,ローカルホストに接続してうまくいっているか確認してみましょう.

npm run dev

このあといろいろと調整しますが,とりあえずこれで完成です!
では,ビルドをするために以下のコマンドを実行しましょう.(このコマンドでdistディレクトリがつくられます)

npm run generate

次に以下のコマンドを実行し,ローカルサーバーが立ち上がるので,うまくできたか確認しましょう.

npm run start


GitHubのリポジトリにあげる

次はGitHubのリポジトリにあげるために,WebStorm上でCommitしましょう.
Commitできたら,GitHubのWebサイト上で新しいリポジトリをつくります.
新たなリポジトリを作ったときに表示されるGitHubのガイドに沿って,WebStormのターミナルで以下のコマンドを実行します.

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


Netlifyにデプロイする

いよいよ終盤です.
Netlifyにデプロイしていきましょう.
Netlifyはこちら→ https://www.netlify.com/

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

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

以下の画像のように,「Published」と表示されれば成功です!
緑色のURLで全世界にWebサイトが公開されています.


以上です.簡単にWebサイトが構築できるので,みんな気軽に作ってみよう!
ありがとうございました.

取得に失敗しました

2019年度 入部

GitHub