ポートフォリオサイトを作ろう!【第1回 Nuxt+Netlify で環境構築編】
※この記事について
現在Nuxt+Netlify+Contentfulでポートフォリオサイトを構築しており、その連載記事となります。
連載記事はマガジンにまとめています。こちらをご覧ください。
ポートフォリオサイト作成チャレンジ中です。最近はVueに興味があったのですが、
『Nuxt.js利用すると便利だよ』
と教えてもらったのでそれならばやってみようかなと思いNuxt+Netlifyでチャレンジしてみることにしました。
プロジェクトの作成
まずはプロジェクトのフォルダを作成します。今回は『port』というフォルダを作りました。
vue init nuxt-community/starter-template port
※上記「port」の部分はご自分のフォルダ名に変更してください。
すると、下記3点を聞かれます。
*Project name*
*Project description*
*Author*
こちらはそのままEnterキーを押してもらって大丈夫です。
こちられで『port』フォルダが作成されます。作成したportフォルダに移動し、下記コマンド実行します。
次に、パッケージのインストールを行います。
yarn
こちらでサイトは見れる状態になります。以下のコマンドで起動します。
yarn dev
ちょっと驚きなのですが、これでサイトが見れるようになります。下記のように表示されますので
READY Listening on http://localhost:3000
表示されたURLをブラウザで開きます。(3000の部分は異なる可能性あります。)すると、かきのような画面が表示されます。
表示されれば完成です。早いし簡単!
フォルダをGitHubにプッシュする
次に、ローカルのフォルダをGitHubにプッシュします。Netlify利用のためにGitHubにアップすることが必須だからです。
(厳密にはGitHub出なくても良いですが、ここではGitHubを利用します。)
レポジトリの作成
まずはGItHubのマイページに移動し、「Repositories」タブをクリックします。その次に「New」ボタンをクリックします。
すると、レポジトリ作成画面が表示されるので、「Repository name」に記入し「Create repository」をクリックします。
これでレポジトリが作成されました。
ローカルファイルをGitHubにアップロード
アップロードするフォルダに移動し(今回の場合は「port」フォルダ)、下記実行します。
git init
ファイルをコミットします。
git add .
git commit -m "Initial Commit"
先ほど作成したレポジトリをリモートに指定します。
git remote add origin https://github.com/アカウント名/レポジトリ名
「アカウント名」にはあなたのGitHubアカウント名、「レポジトリ名」は先ほど作成したレポジトリ名を記入します。
最後にプシュして完成です。
git push -u origin master
これでGitHubにファイルがアップされました。
Netlifyの設定
次にNetlifyの設定に移ります。まずはNetlifyのサイトを開きます。
ログインしてマイページに行くと、「New site from Git」というボタンがあります。
こちらをクリックします。
「Create a new site」という画面が表示されます。
今回は「GitHub」で設定するので「GitHub」を選択します。
GitHubと連携画面が表示されるので、連携します。
すると、連携するレポジトリが表示されるので、先ほど作成したレポジトリを選択します。
すると、下記デプロイ設定の画面が表示されます。
今回は
Branch to deploy は「master」のまま
Build command には「yarn generate」
Publish directory には「dist」
を記入します。
記入したら「Deploy site」をクリックします。
すると、下記画面が表示されます。
「Site deploy in progress」ということでしばらく待ちます。ドキドキや。。。
しばらく待つと、下記画面に変わります。
うまくデプロイできたようです!表示されているURLをクリックしますと。。。
↑のように、ローカルの時と同じ画面が表示されます!
と、いうことで【Nuxt+Netlify で環境構築編】は完成です。これからNuxtのファイルをいじって色々変えていきたいと思います!
最終的には下記のようなサイトにする予定。
(手書きで汚くてもアップして行くストロングスタイル)
おまけ
おまけ1:Bulmaの導入
CSSフレームワーク、Bulmaもついでに導入して見ました。
下記実行します。
yarn add bulma
追加されたbulmaを追加するため、nuxt.config.jsに下記追記します。
(追記場所は、 「head: { }」内です。)
modules: [
'@nuxtjs/bulma'
],
おまけ2:vue-markdownの導入
記事をMarkdown出かけるように、vue-markdownを導入しました。
yarn add vue-markdown
これでMarkdownでの記載が可能となります。
マークダウン サンプル↓
<vue-markdown>
# マークダウンで記載します。
- 欲しいページ
- 自己紹介ページ
- 制作実績
- 仕事内容
- お問い合わせ
- note
</vue-markdown>
<script>
import VueMarkdown from 'vue-markdown'
export default {
transition: 'slide-left',
components: {
VueMarkdown
}
}
</script>
表示サンプル↓
以上です。
参考サイト
下記サイトを参考にさせていただきました!ありがとうございました!
読んでいただきありがとうございます。