VuepressとNetlifyでブログを無課金爆速リリース

## 概要
本記事は、AIブログ「ゆるディープ」を立ち上げた技術関連のお話です。

https://yurudeep.com/

Macで環境構築したため、Macでのパッケージ管理はhomebrewで行いました。主な必要知識としては、Node.js、Vue.js、yarnなどです。GitHubにコードを上げられる状態であればなおよしです。

部分部分のチュートリアルな話は色々検索したら出てくるのですが、実際デプロイするところまでの流れを書いてくれている記事をあまり見つけられなかったので、整理してみることにしました。

## ざっくりしたリリースまでの流れ

1. MacでのNode.js環境構築（[homebrewを用いてNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)）
1. Node.jsのパッケージマネージャー、npmあるいはyarnのインストール
1. Vue.jsのインストール
    1. ```npm install vue```あるいは```yarn install vue```
1. Vuepressのインストール
    1. ```yarn add -D vuepress```（yarnの場合）
1. サイトを作る（テーマもいろいろ）
    1. ```yarn dev```
1. ローカル環境でビルド
    1. ```yarn build```
1. GitHubにコードを上げる（VScode使うと楽）
1. NetlifyでGitHubと連携、リポジトリからコードを読み込めるようにする
1. ローカル環境でビルド
    1. ```yarn build```
1. GitHubを更新すれば、自動的にサイトは更新される

<br>

## 背景

### 技術の選定理由

私はnpmとyarn両方入れているのですが、yarnの方がビルド時間などが短いためyarnを使っています。npmを使う場合は```yarn```に当たるコマンドの部分を```npm run```に置き換えてください。

簡単に無料でブログを立てる方法としては、Netlifyを使う以外にもGitHub padeを使う方法があるのですが、こちらはGitHubのリポジトリをパブリック、つまりは誰でも見れる状態にしておかないといけないため、同じGitHubを使う中でもプライベートリポジトリでサイトを立てられるNetlifyを使用することにしました。

<br>
<br>

ビルドに関してはNetlifyのサービスを利用すれば自動で行えるので、そこも自動化したい場合は、月300分以上のビルドをしない、あるいは課金してもいい場合はNetflyのサービスでビルドするといいと思います。

私の場合は完全に無料で行いたかったので、ビルドはローカルで行うことにしました。

<br>

### Netlifyにデプロイする

Netlifyで静的サイトのデプロイをするチュートリアルが[Qiita](https://qiita.com/sugo/items/2ee64887d682b0dae635)にありましたので、実際に立ち上げる場合はそちらで試してみてから行うといいと思われます。

実際行った流れは、distファイルにビルドして、GitHubにアップロードしたdistファイルをNetlifyから読み取れるようにするという感じです。

<br>

### ビルド設定の変更

ビルドの設定（package.jsonファイル）のコードの"scripts"の部分を以下のようにdistファイル出力に変更する。

```
~略
"scripts": {
    "dev": "vuepress dev . --open --host \"localhost\"",
    "build": "vuepress build . --dest dist"
  },
~略
```

```"vuepress dev . --open --host \"localhost\"",```に関しては、yarn導入時は```yarn dev```コマンド、それ以外は```npm run dev```（npm導入時）あるいは```vue run dev```を実行するとローカルホストで自動的に立ち上がる設定です。

```"build": "vuepress build . --dest dist"```に関しては、（devと似たようなコマンドなので詳細は省きますが、yarnの場合だと）```yarn build```でそのプロジェクトのホームディレクトリに新たにdistファイルとしてビルドしたサイトを出力できる設定です。

<br>
<br>

ビルドされたdistファイルをGitHubに上げ、Netlifyからそのファイルを読み込むように設定すれば、GitHubを更新すれば自動的にNetlifyも更新できるようになります。

<br>


## 詳細手順

1. [公式サイト](https://www.netlify.com/)に登録

```sign up```をクリックします。

2. 連携するサービスで登録するといいでしょう。私の場合はGitHubで登録して、そのまま連携しました。他のサービスでも構いません。

3. GitHubからアップロードする際には以下の①をクリックします。zipファイルからアップロードする際は以下の②にzipファイルをドラッグ＆ドロップすればアップロードできます。今回は詳しく説明しないので、知りたい方は[ZIP ファイルのアップロード](https://cr-vue.mio3io.com/tutorials/netlify.html#%E3%83%93%E3%83%AB%E3%83%89%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E5%9C%A7%E7%B8%AE)をご確認ください。

4. GitHubからアップロードする体で話を進めますが、GitHubのボタンをクリックして、連携を進めます。

5. 最後に、ローカルでビルドしたdistファイルを参照するよう、Publish directoryを```dist/```にしデプロイします。ローカルでビルドしない場合は、build commandを```npm run build```だとか自分のビルドコマンドに設定すれば、Netlifyによる自動ビルドでビルドの手間は節約できます。（利用時間によっては有料になります）

<br>


## まとめ

以上、Vuepressで無料ホスティングサービスNetlifyを使ったブログ立ち上げの手法についてのお話でした。とりあえず概観を見渡せるような記事を書いたつもりですが、後々更新しやすい環境をすでに手に入れているので、より詳しくできそうならアップデートしていきたいと思います。

このテーマの適用のさせ方についても、また記事に起こしたいと思います。

それではここまで読んでいただき、ありがとうございました！


## 参考リンク

[homebrewを用いてNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)

[Vue.jsについての基礎](https://qiita.com/watataku8911/items/26f2ce546fcd562e4b46)

[VuePress 1.xでブログを作ってみる](https://qiita.com/youdie/items/88df59a3ebaf47e3d992)

[VuePress入門](https://www.nxworld.net/hello-vuepress.html)

[Netlifyで静的サイトのホスティングをする](https://qiita.com/sugo/items/2ee64887d682b0dae635)

[超便利ホスティングサービスNetlify](https://qiita.com/niihara_megumu/items/db8c53f0f5de9f377976)

[ZIP ファイルのアップロード](https://cr-vue.mio3io.com/tutorials/netlify.html#%E3%83%93%E3%83%AB%E3%83%89%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E5%9C%A7%E7%B8%AE)

<post-shares />