Gridsomeでポートフォリオ作ってみた - ココアのお勉強ブログ

github.com unruffled-fermi-be1e3f.netlify.app

作った理由

就活でポートフォリオの提出がめちゃくちゃ多かったので作りました。

Vueはインターンシップで少しだけ触っていて、今回Markdownとかで書こうとかではないので別に使う必要はないけど、どうせなら何か知らないものも使ってみようと思ってVueのSSGフレームワークGridsomeを使ってみました。

Vue.jsのSSGフレームワークGridsomeはすごいぞ!! - Qiita

vuetifyを使った実装

vueでの開発はvuetifyを使うと楽なのでインストールしておきます。

$ npm install --save vuetify
$ npm install --save-dev webpack-node-externals

gridsome.server.jsを以下のように設定します。

const nodeExternals = require('webpack-node-externals');

module.exports = function (api) {
  api.chainWebpack((config, { isServer }) => {
    if (isServer) {
      config.externals([
        nodeExternals({
          allowlist: [/^vuetify/]
        })
      ])
    }
  })

  api.loadSource(({ addCollection }) => {
    // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
  })

  api.createPages(({ createPage }) => {
    // Use the Pages API here: https://gridsome.org/docs/pages-api/
  })
}

vuetifyの使い方は簡単で公式ドキュメントの実装でやりたいことと似ているものを探してそれを使います。 vuetifyjs.com

例えば今回では

をコピーしてきて、不要な部分や直したいところは微調整します。

タイムラインのところの実装はEducation.vueを見ると若干変えてはいますが、ほぼ一致していることが分かります。
gridsome-portfolio/Education.vue at master · SyogoShibuya/gridsome-portfolio · GitHub

こんな感じで高速で実装できます。

デプロイ

Netlifyというものを用います。新しくnetlify.tomlというファイルを作成し、以下のように記述します。

[build]
  publish = "dist"
  command = "gridsome build"

残りは以下のサイトのように書いたソースをGithubにあげ、NetlifyとGithubを連携させればデプロイ完了です。
Gridsomeを利用して簡単なサイトを作成しよう

感想

無料っていいね。