Nuxt.js でポートフォリオを作成して公開したので、その手順を書き残しておきます。また、SCSS の適用方法についても書いておきました。
＊参考
＊環境
- MacOS
- create-nuxt-app 2.9.2
- nuxt 2.8.1
- node-sass 4.12.0
- sass-loader 7.2.0
- reset-css 4.0.1
- @nuxtjs/style-resources 1.0.0
＊プロジェクト作成
npxをまだインストールしていない場合は、下記コマンドでインストールします。$ sudo npm install -g npx
Nuxtプロジェクトを作成します。
今回はプロジェクト名を
portfolio-appにしましたが、任意の名前を指定します。下記コマンドを実行後にいくつか質問されるので適宜答えます。$ npx create-nuxt-app portfolio-app
? Project name portfolio-app
? Project description My super Nuxt.js project
? Author name tominagamaya
? Choose the package manager Npm
? Choose UI framework Bulma
? Choose custom server framework Express
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools ESLint, Prettier
? Choose test framework Jest
? Choose rendering mode Single Page App
作成されたディレクトリに入り、アプリケーションを起動します。
$ cd portfolio-app/
$ npm run dev
＊Scssの適用
Sassを使えるようにするために、下記をインストールします。$ npm install --save-dev node-sass sass-loader reset-css @nuxtjs/style-resources
ページ共通で使うスタイルを SCSS ファイルに分割して定義します。
_variables.scssを新規作成し、色の定義を記述します。SCSS ではアンダーバーから始まるファイル名にする必要があります。<assets/scss/_variables.scss>
$color-black: #333;
$color-gray: #aaa;
$color-lightgray: #eee;
$color-blue: #3581ff;
$color-white: #fbfbfb;
ページ共通の背景やフォントを
_base.scssに定義します。背景色とフォントの色は、先程作成した_variables.scssで定義した変数を使っています。<assets/scss/_base.scss>
body {
color: $color-black;
background-color: $color-white;
font-size: 20px;
letter-spacing: 0.05em;
}
分割した SCSS ファイルを読み込むための
style.scssを作成します。importでは階層が異なるファイルも読み込むことができます。<assets/scss/style.scss>
@charset "utf-8";
@import '_variables';
@import '_base';
SCSS ファイルをコンポーネントから
importする方法でも使うことはできますが、各コンポーネントで毎回記述するのが面倒なので共通化したほうが便利です。SCSS ファイルを使えるようにするため
nuxt.config.jsに下記を追加します。style.scssと_variables.scssを読み込む設定を追加します。SCSS の変数はstyle.scssでインポートしただけだと認識できずエラーになったので、@nuxtjs/style-resourcesを使って読み込んでいます。<nuxt.config.js>
...
/*
** Global CSS
*/
css: ['reset-css', '@/assets/scss/style.scss'], // ←追加
...
/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/bulma',
'@nuxtjs/style-resources' // ←追加
],
styleResources: {
scss: ['~/assets/scss/_variables.scss'] // ←追加
},
...
＊メインページの拡張
Nuxt.js ではlayoutsディレクトリにdefault.vueの名前でファイルを作成すると、メインレイアウトを拡張することができます。下記はメインページにヘッダーとフッターを追加しています。また、コンポーネントで SCSS を使う場合は
<style />にlang="scss"を追加します。こうすることで、どこのファイルからでも SCSS で定義したスタイルを使うことができるようになります。<layouts/default.vue>
<template>
<div>
<Header />
<main class="contents">
<nuxt />
</main>
<Footer />
</div>
</template>
<script>
import Header from '~/components/common/Header'
import Footer from '~/components/common/Footer'
export default {
components: {
Header,
Footer
}
}
</script>
<style scoped lang="scss">
.contents {
max-width: 90%;
padding: 10px 40px 80px 40px;
margin: 0 auto;
}
</style>
また、
layoutsディレクトリにerror.vueの名前でファイルを作成すると、エラーページをカスタマイズすることができます。<layouts/error.vue>
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">ページが見つかりません</h1>
<h1 v-else>エラーが発生しました</h1>
<nuxt-link to="/">ホーム</nuxt-link>
</div>
</template>
＊Netlifyへデプロイ
ローカル環境での開発が終わったら公開します。無料でWebページを公開できるホスティングサービスとして Heroku や Firebase などがありますが、今回は Netlify を使いました。
Netlify は静的サイトのホスティングサービスで、GitHub との連携が可能で CI 機能が充実したり、無料でカスタムドメインや SSL の設定ができるといったことが特徴です。GitHub を使わなくても直接ファイルをドラッグアンドドロップする方法もあり、簡単に公開することができます。
使うにはアカウント登録が必要なので、Netlifyのサイトからサインアップをします。
下記コマンドを実行してアプリケーションをビルドすると、Nuxt が HTML などに出力されたものが
dictディレクトリとして作成されます。$ npm run generate
作成された
distディレクトリを Netlify ログイン後に表示される枠の中へドラッグアンドドロップします。
URL が生成されるのでクリックすると自分が作成した Web ページが表示されます。
更新したい場合は作成したサイトの
Deploysタブをクリックし、下のほうにある枠に新しいファイルをドラッグアンドドロップすると更新することができます。
＊所感
SCSS の変数が読み込まれなくて少しハマりました。色々試しましたがnuxt-sass-resources-loaderは Nuxt v2.4.0 にアップデートした際にサポートが終了したそうなので、今回の方法がベストのようです。Netlify は初めて使ったのですが、設定など不要だったこともあり数分でデプロイすることができて大変便利でした。CI 機能も使えるとのことなので、時間があるときに試してみたいと思います。
Sign up here with your email
ConversionConversion EmoticonEmoticon