はじめに
ブログが作りたいと思っていました。
でもWordPressやはてなブログなどの既存のもの以外で構築したいという思いがありました。
なんか方法はないかなーと思って Vue.js ブログ でググると公式がサポートしてくれていました…さすが…。
ということで構築したので 公開 しておきます。
ちなみに作ったブログは こちら です。
導入手順
1.プロジェクトをクローン
console
git clone https://github.com/tosite0345/vue-blog.git
cd vue-blog
npm i
2.ButterCMSでユーザー作成
ButterCMS からユーザー作成を行います。
なお公開後に所定の手順を踏めばフリープランが有効になるみたいなので、私もそのうち切り替えていきたいと思います。
3.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>
4.ビルド
bash
npm run dev
終わりに
ちょうどやってみたかったことがドンピシャでやれたのでモチベ高く開発ができました。
いろいろと修正したいところはたくさんあるので、まだまだ開発は進めていく予定です。