レガシーエンジニアがモダンなエンジニアになるべく試行錯誤している中の一つのチャレンジです。
最近Vue.js、Nuxt.jsの沼に引き込まれ猛烈に取り組んでいます。
今回は初めてポートフォリオサイトの作成にNuxt.jsを使ってみました。
完成版は以下です。（しょぼいですが、というか内容無いですが是非覗いてみてください。）
ということでさっそくプロジェクト作成～サイト公開までの流れを纏めていきます。
開発環境
このような開発環境で作業しました。
・MacBook Pro 10.13.4
・VsCode
プロジェクトの作成
適当にworkspaceのフォルダを作成してそこで以下のコマンドを実行します。
初めての私は公式サイトの通りにこのテンプレートを使用しました。
vue init nuxt-community/starter-template <project-name>
先ほど作成したworkspaceにいろんなソースが展開されると思うので
とりあえずパッケージのインストールを行います。
yarn
パッケージのインストールが完了したらもうサイトを見れる状態となるので、
以下のコマンドで起動してみます。
yarn dev
これだけでサイトができました！
なんか楽しいな（漠然と）とわくわくモードで手が止まりません。
ここまではNuxtの公式サイトの内容と変わりありません。
ヘッダーとフッターの作成
今回は1ページだけのページ遷移のないサイトにします。
CSSフレームワークの導入
導入するほど凝ったサイトになってないですが、勉強のためBulmaを使ってみました。
アイコンはFontAwesome5を利用します。
BulmaはNuxtコミュニティで公開されていますのでyarn addで追加します。
yarn add bulma
追加されたbulmaをnuxt.config.jsにcss設定に追加します。
modules: [
'@nuxtjs/bulma'
],
FontAwesome5のインストールとCSSへの設定を追加します。
yarn add @fortawesome/fontawesome-free-webfonts
css: [
'@fortawesome/fontawesome-free-webfonts',
'@fortawesome/fontawesome-free-webfonts/css/fa-brands.css',
'@fortawesome/fontawesome-free-webfonts/css/fa-regular.css',
'@fortawesome/fontawesome-free-webfonts/css/fa-solid.css',
],
共通レイアウトの定義
共通のレイアウトはlayouts ディレクトリにファイルをいれます。
ヘッダーとフッターをcomponentsとして作成します。
このフォルダの中に.vueファイルを作成
components
┣Header.vue
┗Footer.vue
ヘッダーのテンプレートとレイアウトを記載します。
<template>
<div class="main-back-img">
<section class="hero is-fullheight">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-white-ter">
_neekoko hoge hoge
</h1>
<h3 class="subtitle has-text-grey-lighter">
渋谷で働くWebエンジニア。猫とコーヒーがあればなんとかなります----->
</h3>
</div>
</div>
</section>
</div>
</template>
<style>
.main-back-img {
background-size: cover;
background-image: url('~/assets/back-img.jpg');
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
height: 600px;
}
.main-back-img::before{
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
}
.header-img {
border-radius: 50%
}
</style>
ヘッダーファイルが出来上がったら、defalut.vueで呼び出します。
デフォルトレイアウトで呼び出すことによってメインのレイアウトの拡張が簡単にできます。
レイアウトを作成するときは、必ず <nuxt/> コンポーネントを入れなければなりません。
<template>
<div>
<Header/>
<nuxt/>
</div>
</template>
<script>
import Header from '~/components/Header.vue'
export default {
components: {
Header
}
}
</script>
同じ要領でFooterも作成します。
この状態で画面で確認するとメインコンテンツはテンプレでヘッダーとフッターは自身で作成した
ものが適用されているかと思います。
作成したサイトの公開
メインコンテンツの内容は省略して公開方法について記載して行きます。
今回サイトの公開に利用したのはnetlifyです。
高機能なホスティングサービスですが詳細は公式を参照してください。
GitHubにリポジトリを作成
ローカルで開発していたプロジェクトをリモートにpushします。
netlifyでサイトの作成
New site from Gitボタンを押下するとサイトの作成ができます。
Build commandにはビルド時に実行されるコマンドを設定します。
yarn generate
Publish directoryには公開時のフォルダを設定します。
dist
ここまで設定が完了したら公開ボタンを押下しましょう。
数分したらサイトが公開できているかと思います。
その他
Nuxtではpwaが簡単に実装できるらしいので試してみました。
pwaする前のLighthouseの結果をエクスポートするの忘れてたので対応後のものだけ貼っときます。
pwaパッケージのインストール
yarn add @nuxtjs/pwa
モジュールの追記＆staticフォルダにアイコンの追加
modules: [
'@nuxtjs/bulma',
'@nuxtjs/pwa' /* ←を追加 */
],
staticフォルダにアイコンを追加します。（icon.png）
.gitignoreの編集
以下を追加します。
sw.*
これで完了です！簡単！！
再度GitHubにpushするとビルドとデプロイが行われます。
再度計測してみると以下のような結果でした。
まとめ
Nuxtを使ってサイト作成するミッションをクリアできました。
今回は簡単な静的サイトだったので次回はSSRさせてアプリケーションの作成にも挑戦してみたいです。
vueとnuxtイイね！！
お世話になったサイト
お世話になったサイトになります。大変分かりやすく記載されていて助かりました。
ありがとうございました。
・Nuxt tech book
・Nuxt.js+Firebase HostingのサイトをPWA化してLighthouseで(ほぼ)100点満点を目指す