# (入門)vuepressとNetlifyを連携してテンプレートのブログをデプロイまで詳細に解説
目次
# 全体の流れ（方針）
公開までの大まかな流れは以下のような感じです。
1.vuepress のテーマ（テンプレート）のインストール
2.ディレクトリの整理およびプラグインの導入
3.githubにリポジトリを登録
4.Netlifyとgithub連携して公開
この流れを理解した上で今何をしているのか考えながらやります。
# 環境
環境は以下のようなものが必要です。
node.jsがインストールされている npmまたはyarnが使用できる
# vuepressのインストール
今回はmeteorlxyのテーマを導入します。 以下のコマンドを入力する。
yarn add -D vuepress vuepress-theme-meteorlxy
ｰDの意味はdevDependenciesのことで、
このコマンドで作られるpackage.jsonの中のdevDependenciesにこれらを追加するよ
という意味です。
# pachage.jsonの中身を変更
ではpackage.jsonが作成されるので、
サーバーが起動できるように（yarn dev yarn buildの実行ができるように）
package.jsonの中身にscriptsを書き加えます。
{
"devDependencies": {
"@vuepress/theme-blog": "^2.0.3",
"vuepress": "^1.2.0"
},
"scripts": {
"dev": "vuepress dev blog",
"build": "vuepress build blog"
}
}
これでビルドする準備を完了しました。
# ビルドしてみる
blogディレクトリを作成します。 作成後、ビルドすると.vuepressディレクトリができます。
mkdir blog
yarn build
#or
npm run build
# ディレクトリの構成を確認
以下のようにディレクトリを作成します
├── blog
│ ├── _posts
│ │ ├── 2019-12-17-1.md #example
│ │ ├── 2019-12-26-2.md #example
│ │ └── 2020-1-6-3.md #example
│ └── .vuepress
│ ├── `dist`
│ │ └── …
│ ├── `public`
│ │ ├── `img`
│ │ └── avater.png
│ └── config.js
│
└── package.json
･･
_postsの中に、.mdのファイルを作成することで記事を作成できます。
# config.jsの設定
.vuepress/config.jsを更新します。
// .vuepress/config.js
module.exports = {
// Title of your website
title: 'My Blog',
// Description of your website
description: 'This is my blog',
// Language of your website
locales: {
'/': {
lang: 'ja-JP',
},
},
// Theme to use
theme: 'meteorlxy',
// Theme config
themeConfig: {
// Language of this theme. See the [Theme Language] section below.
lang: 'ja-JP',
// Personal infomation (delete the fields if you don't have / don't want to display)
personalInfo: {
// Nickname
nickname: 'meteorlxy',
// Introduction of yourself
description: 'Happy Coding<br/>Happy Life',
// Email
email: 'meteor.lxy@foxmail.com',
// Your location
location: 'Xi\'an City, China',
// Your organization
organization: 'Xi\'an Jiao Tong University',
// Your avatar image
// Set to external link
avatar: 'https://www.meteorlxy.cn/assets/img/avatar.jpg',
// Or put into `.vuepress/public` directory. E.g. `.vuepress/public/img/avatar.jpg`
// avatar: '/img/avatar.jpg',
// Accounts of SNS
sns: {
// Github account and link
github: {
account: 'meteorlxy',
link: 'https://github.com/meteorlxy',
},
// Facebook account and link
facebook: {
account: 'meteorlxy.cn',
link: 'https://www.facebook.com/meteorlxy.cn',
},
// LinkedIn account and link
linkedin: {
account: 'meteorlxy',
link: 'http://www.linkedin.com/in/meteorlxy',
},
// Twitter account and link
twitter: {
account: 'meteorlxy_cn',
link: 'https://twitter.com/meteorlxy_cn',
},
// Sina Weibo account and link
weibo: {
account: '@焦炭君_Meteor',
link: 'https://weibo.com/u/2039655434',
},
// Zhihu account and link
zhihu: {
account: 'meteorlxy.cn',
link: 'https://www.zhihu.com/people/meteorlxy.cn',
},
// Douban account and link
douban: {
account: '159342708',
link: 'https://www.douban.com/people/159342708',
},
// Reddit account and link
reddit: {
account: 'meteorlxy',
link: 'https://www.reddit.com/user/meteorlxy',
},
// Medium account and link
medium: {
account: 'meteorlxy.cn',
link: 'https://medium.com/@meteorlxy.cn',
},
// Instagram account and link
instagram: {
account: 'meteorlxy.cn',
link: 'https://www.instagram.com/meteorlxy.cn',
},
// GitLab account and link
gitlab: {
account: 'meteorlxy',
link: 'https://gitlab.com/meteorlxy',
},
// Bitbucket account and link
bitbucket: {
account: 'meteorlxy',
link: 'https://bitbucket.org/meteorlxy',
},
// Docker Hub account and link
docker: {
account: 'meteorlxy',
link: 'https://hub.docker.com/u/meteorlxy',
},
},
},
// Header Config
header: {
// The background of the header. You can choose to use an image, or to use random pattern (geopattern)
background: {
// URL of the background image. If you set the URL, the random pattern will not be generated, and the `useGeo` will be ignored.
url: '/assets/img/bg.jpg',
// Use random pattern. If you set it to `false`, and you don't set the image URL, the background will be blank.
useGeo: true,
},
// show title in the header or not
showTitle: true,
},
// Show the last updated time of your posts
lastUpdated: true,
// The content of your navbar links
nav: [
{ text: 'Home', link: '/', exact: true },
{ text: 'Posts', link: '/posts/', exact: false },
],
// Comments config. See the [Posts Comments] section below.
comments: false,
// Pagination config
pagination: {
perPage: 5,
},
// Default Pages (Optional, the default value of all pages is `true`)
defaultPages: {
// Allow theme to add Home page (url: /)
home: true,
// Allow theme to add Posts page (url: /posts/)
posts: true,
},
},
}
meteorlxyの公式に導入ガイドがあるので、それを参考（少しいじって）にテーマを設定して行きます。 Theme Guide (opens new window) commentがうまく動かなったので、falseにしてあります。 今回はとりあえずデプロイまで行きたいので、 細かな中身の設定は下記の記事で解説したと思います。 また、別の方法でコメント機能は実装するも下記の記事で解説します。
では、_postsの中のmdファイルに、書き込みます。
---
title: ''
date: 2019-08-03
category: diary
tags:
- 日常
---
# Hello meteorlxy!
こんな感じでタグやカテゴリを追加できて便利！
ここでサーバーを起動して、再びビルドしてみます。
# develop
yarn dev
# build
yarn build
指定されたローカルホストにアクセスすると、 日本語入力が文字化けしてます。
ライブラリに直接変更を加えます。
上記のスタイル自体は./node_modules/vuepress-theme-meteorlxy/lib/styles/normalize.styl の中にある以下の部分を確認します。
body
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Heiti SC, Hiragino Sans GB, Microsoft YaHei, Dengxian, Simsun, sans-serif
public/css/style.cssを作成します。
body {
font-family: "Helvetica", "Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic"!important;
}
.vuepress/config.jsに読み込みます。
head: [
['link', { href: '/css/style.css', rel: 'stylesheet'}]
]
DANGER
直接ライブラリに書き込む下記方法では、デプロイの時にうまくいきません。
以下のように書き換えます。
body
font-family: "Helvetica", "Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic"!important;
この状態でビルドすれば、きれいな日本語表記になるはずです。
ではサーバーを起動するコマンドを実行します。 ctrl ＋ Cで停止できます。
# お問い合わせフォームを導入する
お問い合わせフォームには、Netlifyに用意されている方法もありますが、
一番簡単なグーグルフォームでお問い合わせフォームを作ります。
これについてはこの記事がわかりやすいので、参考にしてください。
ブログ運営｜お問い合わせフォームの設置方法と設置した事で何が得られるのか (opens new window)
この記事の方法で取得した、htmlコードをお問い合わせフォームが必要なところに合わせて、貼り付けてください。
# その1
htmlでページに直接貼る場合
<!-- <iframe src="googleformのリンク" width="640" height="673" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe> -->
# その2
mdで別のタブに表示させる場合
[お問い合わせ](gooleformのリンク)
# その3
ナブバーに設置する場合 .vuepress/config.jsのnavタグに記述を追加します。
// The content of your navbar links
nav: [
{ text: 'ホーム', link: '/', exact: true },
{ text: 'カテゴリ/タグ/単語から検索', link: '/posts/', exact: false },
{ text: 'お問い合わせ', link: 'googleformのリンク', exact: false },
],
このサイトではその3の方法を採用しています。
# リポジトリを作成
Netlifyではgithubに登録したものをデプロイするので、 githubのリモートリポジトリに登録する必要があります。 まず、ローカルリポジトリを作成します。 以下のコマンドを作業ディレクトリの中で実行します。
git init
git add .
git commit -m "first commit"
では続いて、github (opens new window)で新規のリポジトリを作成します。 priateで作成しましょう。（自分にしかみれない）
下記の画面の下のコードをコマンド入力して登録します。
git remote add origin リポジトリのurl
git branch -M main
git push -u origin main
これでgithubにリポジトリを登録できました。
# Netlifyでデプロイする
netlify (opens new window)にアクセスします。
GitHubとの連携を選択
githubのリポジトリから 先ほど作ったサイトのソースコードが含まれているリポジトリを選択。 GitHubとの連携を選択
Basic build settings で
baseUrl は何も記入しません。
Build commandをvuepress build blog
Publish directoryをblog
にセットしてください。
デプロイをして、site overview でpublishとなっていれば完了です。
# まとめと今後の方針
Vuepress とNetlifyを連携すれば、初心者でも簡単にサーバーいらずの無料で個人ブログが作ることができました。
プラグインがwordpressと比べると少なかったりするのが、あれですがvue.jsの勉強にもなるので勉強に触れてみるにはいいかもしれません。
今後の方針としては、独自ドメインを取得して、アドセンス審査に通れるようにvue.jsを中心に勉強して、有益な内容を発信します。
直近はvuepressをできることを増やしたいと思います。
# 参考
Qiitaの記事
VuePressのブログテーマ（@vuepress/theme-blog）を使ってみた (opens new window) VuePressで作ったblogに配布されているテーマを設定する (opens new window)
VuePressとnetlifyで手軽にblogをはじめる (opens new window)