はじめに

ブログが作りたいと思っていました。
でもWordPressやはてなブログなどの既存のもの以外で構築したいという思いがありました。
なんか方法はないかなーと思って Vue.js ブログ でググると公式がサポートしてくれていました…さすが…。
ということで構築したので公開しておきます。

ちなみに作ったブログは こちら です。

導入手順

１．プロジェクトをクローン

console

git clone https://github.com/tosite0345/vue-blog.git
cd vue-blog
npm i

２．ButterCMSでユーザー作成

ButterCMS からユーザー作成を行います。
なお公開後に所定の手順を踏めばフリープランが有効になるみたいなので、私もそのうち切り替えていきたいと思います。

３．Vue.js側で設定ファイル記述

APIキー設定

config/dev(prod).env.js

module.exports = {
  NODE_ENV       : '"production"',
  BUTTER_API_KEY : '"your ButterCMS API KEY"',
}

APIキーの場所はこちら。

ブログタイトル修正

/src/main.js

Vue.prototype.$BlogTitle = "your blog title"

metaタグ修正

ブログの説明などを修正します。

index.html

<head>
  <meta charset="utf-8">
  <meta name="description"      content="write your blog description.">
  <meta name="viewport"         content="width=device-width,initial-scale=1.0">
  <meta name="format-detection" content="telephone=no,address=no,email=no">
  <link rel="canonical"         href="url of your site.">
  <link rel="shortcut icon"     href="/static/favicon.ico" type="image/vnd.microsoft.icon">
  <link rel="icon"              href="/static/favicon.ico" type="image/vnd.microsoft.icon">
  <link rel="apple-touch-icon"  href="/static/favicon.ico" type="image/vnd.microsoft.icon">
  <link rel="stylesheet"        href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
  <title>your blog title</title>
  <style>.truncate { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; }</style>
</head>

４．ビルド

bash

npm run dev

終わりに

ちょうどやってみたかったことがドンピシャでやれたのでモチベ高く開発ができました。
いろいろと修正したいところはたくさんあるので、まだまだ開発は進めていく予定です。