Nuxt.jsで静的サイトつくって最速でGithubPagesにあげる　〜ドラクエアプリ風ポートフォリオつくってたら平成が終わった〜

# TL;DR(要約)
 - Nuxt.js + GithubPages  を使ってポートフォリオを作りました
 - [ポートフォリオ](https://mitsudaman.github.io/)はこちら


# 自己紹介
個人的なプロジェクト「毎月サービスリリースで技術もノウハウもうっはうは祭り:fire:」をしています、ミツダマ(@mitudama)です。
1月の[時間割メーカー](https://qiita.com/mitsudaman/items/b30b5e905ff348bf35bc)、2月の[俳句メーカー](https://www.haiku-maker.site/)、3月の[究極の選択メーカー](https://www.choice-maker.site/)に引き続き、今回はポートフォリオをつくりました。
ノウハウうっはうはになったのでシェアします！

# 作ったポートフォリオ


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">あ…ありのまま 今起こった事を話すぜ！<br><br>おれは今風デザインでポートフォリオをつくったと思ったら…いつのまにかポケモンとドラクエを足して千で割ったような作品ができていた…<br><br>な…何を言っているのかわからねーと思うが　<br><br>おれも何をされたのかわからなかった…<a href="https://t.co/qRsov9yJVd">https://t.co/qRsov9yJVd</a></p>&mdash; ミツダマ@500円プログラマー (@mitudama) <a href="https://twitter.com/mitudama/status/1123233687858847746?ref_src=twsrc%5Etfw">2019年4月30日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


![portfolio.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314105/aae39d11-cbc3-cb75-039b-6dce1b06bf7a.gif)



#何で作ったか(ワイ記法)

ワイ「そろそろポートフォリオつくらななぁ」

ワイ「プログラマーのポートフォリオってどんなんがええんやろか?」

ワイ「デザイナーさんと違って見た目より動きとか機能重視の方がええんちゃうかな？」

ワイ「他の人のみたろ」

ワイ「@iwathiさんの[ポートフォリオ](https://iwathi.netlify.com/)最高やんけ！！」

ワイ「先っちょだけ真似るンゴ」

ワイ「せや！どうせなら今風のドラクエアプリにしたらええんちゃうか!」

ワイ「作ったったったwww」



# 使った技術と参考サイト

- [GithubPages](https://pages.github.com/)
    - 静的サイトのホスティングサービス
    - 無料 of 無料
    - yarn generate して生成されたdistディレクトリのアップ先

    


# 最速でポートフォリオを作るチュートリアル

## 環境構築
        vue init nuxt-community/starter-template front #front 部分は好きな名前で
        cd front
        npm install # Or yarn

        yarn dev


## フォントの設定

(1) ドット風フォントを[PixelMplus（ピクセル・エムプラス）](http://itouhiro.hatenablog.com/entry/20130602/font)からダウンロード

(2) *assets*配下に*fonts*フォルダを作成しフォントファイルを格納

(3) *fonts*フォルダに以下のcssファイルを作成


```css:font.css

@font-face {
  font-family: 'PixelMplus10-Regular';
  src: url('~@/assets/fonts/PixelMplus10-Regular.ttf') format('truetype');
}
```

(4) nuxt.config.jsに以下の記述を追加

```js:nuxt.config.js
module.exports = {
  /* 省略 */
  css: [
    '~/assets/fonts/font.css'
  ]
}
```

▼[Vue CLI v3.0でローカルにあるフォントを適用する](https://qiita.com/higeaaa/items/9999009c0d794dc34716)
▼[How to embed font to all page with nuxt js](https://stackoverflow.com/questions/51436344/how-to-embed-font-to-all-page-with-nuxt-js)



## Vueのコーディング
以下コピペでOKです！

```vue:index.vue


<template>
  <section class="container">
    <div>
      <div class="prof_row">
        <div
        class="prof"
        v-bind:class="{ active: isProfile1Active }"
        @click="clickProfile1">
            <img class="prof_img" width="200px" height="200px" src="https://pbs.twimg.com/profile_images/1113461275147657216/iWNX45ac_400x400.jpg" />
        </div>
        <div
        class="prof"
        v-bind:class="{ active: isProfile2Active }"
        @click="clickProfile2">
            <img class="prof_img" width="200px" height="200px" src="https://pbs.twimg.com/profile_images/1131395626447429633/-wZugD8U_400x400.jpg" />
        </div>
      </div>
      <div class="prof_row">
        <div
        class="prof"
        v-bind:class="{ active: isProfile3Active }"
        @click="clickProfile3">
            <img class="prof_img" width="200px" height="200px" src="https://pbs.twimg.com/media/D7qrMoKU0AAjW-V.jpg" />
        </div>
        <div
        class="prof"
        v-bind:class="{ active: isProfile4Active }"
        @click="clickProfile4">
            <img class="prof_img" width="200px" height="200px" src="https://pbs.twimg.com/media/D7rCM0IUYAArCdK.jpg" />
        </div>
      </div>
    </div>
    <div class="footer-fixed">
      <div class="balloon_area">
        <button
        v-if="!talkFlg && (isProfile1Active || isProfile2Active || isProfile3Active || isProfile4Active)"
        @click="commandTalk">
          <span>はなす</span>
        </button>
        <div
          v-if="talkFlg"
          @click="talkNext"
          class="command_context">
          {{activeComment[talkIndex]}}
        </div>
      </div>
    </div>
  </section>
</template>

<script>

export default {
  data () {
    return {
      isProfile1Active: false,
      isProfile2Active: false,
      isProfile3Active: false,
      isProfile4Active: false,
      talkFlg: false,
      comment1:["こんにちわ枝豆エンジニアです","フリーランスのwebエンジニアやってます","アイコンに負けず劣らずぶっ飛んだツイートに定評があります"],
      comment2:["こんにちわ郡山です","高卒ニートからエンジニアになりました","趣味で「間違った指導法で新人を潰す愚かな上司」を根絶やしにする活動をしています"],
      comment3:["こんにちわ新世界の神ことがっちょです","Dungeon Template LibraryというOSSを開発しています","禁断の魔術で母なる大地を創造しましょう"],
      comment4:["こんにちわなおとです","外資系大企業を捨てWebエンジニアになりました","伸び代しかありません"],
      activeComment: null,
      talkIndex:0,
    }
  },
  methods: {
    clickProfile1(){
      this.resetActive();
      this.isProfile1Active = true;
      this.activeComment = this.comment1;
    },
    clickProfile2(){
      this.resetActive();
      this.isProfile2Active = true;
      this.activeComment = this.comment2;
    },
    clickProfile3(){
      this.resetActive();
      this.isProfile3Active = true;
      this.activeComment = this.comment3;
    },
    clickProfile4(){
      this.resetActive();
      this.isProfile4Active = true;
      this.activeComment = this.comment4;
    },
    resetActive(){
      this.isProfile1Active = false;
      this.isProfile2Active = false;
      this.isProfile3Active = false;
      this.isProfile4Active = false;
      this.talkIndex=0;
      this.talkFlg=false;
    },
    commandTalk(){
      this.talkFlg = true;
    },
    talkNext() {
      if(this.activeComment.length == this.talkIndex+1){
        this.talkIndex=0;
        this.talkFlg=false;
      }else{
        this.talkIndex++
      }
    },
  }
}
</script>

<style>
body{
  font-family: 'PixelMplus10-Regular';
}
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 200px !important;
}

.prof_row{
  display: flex;
  margin-top:30px
}
.prof{
  padding: 20px;
}
.prof_img {
  border: 6px double #000;
  border-radius: 20px;
}

.active {
  position: relative;
  display: inline-block;
}

.active:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #000;
  animation: Flash1 1s infinite;
}

.balloon_area{
  width:500px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.7)!important;
  border: 2px solid white;
  border-radius: 1em;
}

.footer-fixed {
  display: flex!important;
  position: fixed;
  justify-content: center;
  bottom: 5px;
  left: 6px;
  width: 100%;
  z-index: 3;
}

button{
  font-family: 'PixelMplus10-Regular';
  width:200px;
  font-size:24px;
  font-weight:bold;
  display:block;
  text-align:center;
  padding:8px 0 10px;
  margin-left: 10px;
  margin-top: 10px;
  color:#fff;
  border-radius:5px;
  background-color: #424242;
}

.command_context{
  color: white;
  font-size: 1.3em;
  line-height: 30px;
  padding: 20px 0 0 20px;
  height: 100%;
  margin-bottom: 0px;
  text-align: left;
}
/* アニメーション */
@keyframes Flash1{
  50%{
    opacity: 0;
  }
}

</style>
```
以下の画面になればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314105/f7253de7-9384-56e9-b7fc-c6576dea8550.png)

キャラの圧が強い。




# Github Pages の環境設定


## リポジトリの作成

[公式サイト](https://pages.github.com/)にしたがって*username*.github.ioリポジトリを作成します

## 静的なWEBアプリケーションの生成

```
$ yarn generate
```

これでGitHub Pages のホスティングに必要なものが全て入った *dist* フォルダが作成されます

## Push
```
$cd dist

dist $ git init

dist $ git add --all

dist $ git commit -m "Initial commit"

dist $ git remote add origin https://github.com/[username]/[username].github.io.git

dist $ git push -u origin master
```
※2回目以降は`git push -f origin master`
(コードのバージョン管理用のリポジトリは別途用意してください)

##Github pages確認
https://*username*.github.io
にアクセスしてみて表示されていれば成功です！！

# 感想
以上、ざっとやれば30分でポートフォリオが完成します！
あとは各画像を押した時のコメント内容に時間を使いましょう。
僕はこれで2週間潰れました。

興味のある方はぜひ作って見てください〜！

# 最後に


Twitterにて画像提供頂いた[枝豆さん](https://twitter.com/ekuzodia_jp)、[郡山さん](https://twitter.com/obIiS11KGpxvVdM)、[がっちょさん](https://twitter.com/wanotaitei)、[なおとさん](https://twitter.com/190131start) ありがとうございました！！



ではまた来月〜:wave:

([Twitter](https://twitter.com/mitudama)もフォローよろしくです)