Help us understand the problem. What is going on with this article?

【Netlify編】Nuxt.js + Contentful + NetlifyでSPAブログを自作する

More than 1 year has passed since last update.

はじめに

Nuxt.jsとContentfulとNetlifyでモダンな(?)SPAブログを作りました。こちら
何回かにわけて構築の記録を残しているシリーズの最終回です。
前回までつくったSPAブログをNetlifyにあげて公開していきます。

【シリーズの予定】
- まえがき編
- Nuxt.js編
- Contentful編
- Netlify編 ← この記事

事前準備

  • 独自ドメインを使用したい方は取得しておいてください
  • GitHubにリポジトリを作っておいてください(GitLabやBitbucketでも大丈夫です)

リポジトリの作成

まずはローカルリポジトリを作成し、GitHubにプッシュしていきます。
「そんなのもうやっとるわ!!」という方には失礼しました。どうぞ読み飛ばしてください。

まずは.gitignoreの修正から。ContentfulのAPIKeyを公開リポジトリにあげてしまうのはまずいので、設定ファイルを外しておきます。

.gitignore
# Nuxt generate
dist

+ # dotenv
+ .env

あとは初期化してプッシュまでですね。

$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin <GitHubリポジトリのURL>
$ git push origin master

Netlifyの設定

※2018年8月19日現在の設定方法となります
まずは公式サイトからユーザー登録しましょう。
「New site from Git」から新しいサイトを作成します。
サイト作成.png

GitプロバイダからGitHuBを選択し、リポジトリを選択します。

デプロイ用のブランチはこだわりがなければmasterでよいかと。
Build commandはnpm run generateです。これはNuxt.jsが静的サイトを作成するためのコマンドで、デフォルトだと/distディレクトリにファイルを吐いていきます。(ちなみにですが、yarnも使えました)
まだデプロイボタンは押さないでください!
コマンド設定.png

環境変数の設定

デプロイの前にShow advancedで環境変数の設定をする必要があります。
「show advanced」のボタンをクリックするとフォームが展開し、環境変数が設定できるようになります。
ここにgitignoreした.envから環境変数を持ってきて設定してください。こんな感じ。
キー設定.png

終わったら「Deploy site」をクリックしましょう!
しばらくすると「Getting started 1」が「Your site is deployed」に変わるので、そうなればOKです!
デプロイ完了.png

独自ドメインの設定

上記まででサイトは公開されましたが、今はNetlifyが割り振ったドメインが設定されています。
独自ドメインに変更していきましょう。
「Set up a custom domain」をクリックするとドメインの入力画面になりますので、持っている独自ドメインを入力してください。
(Netlify上でも買えるみたいですが、やったことないです)

次はDNSの設定です。Domainsの欄にある「Check DNS configuration」をクリック。
DNS設定.png

モーダルがでてくるので、「Set up Netlify DNS for <あなたのドメイン名>」に進んでください。
DNS設定②.png

ずんずん進んでいくと、ネームサーバーが出力されます。これをメモしましょう。
ネームサーバー.png

あとはドメイン取得先の管理サイトに戻ってネームサーバー情報を変更してあげます。
私はお名前.comで取得したのでこんな感じでした。
お名前.png

ネームサーバーの反映には24時間くらいかかることもあるので、気長に待ちましょう!

HTTPS化

超簡単です。HTTPSの欄から「Verify DNS configuration」をクリックするだけ。
Let's Encryptを通してHTTPS化できます。
こちらも数時間かかります。
HTTPS.png

完成

というわけで無事に公開できましたー!
あとはお好みでデザインをいじってみてください。
完成版.png

おわりに

何回かにわけてSPAブログの作り方を紹介していきました。
ブログサービスを使ってもいいですが、こういうのも面白いんじゃないでしょうか。
完成版のコードはGitHubで公開しておきます。
気が向いたらタグの付け方とかも追加解説するかもです。

ではではー。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした