社内で調査・研究した技術情報を、公開・共有できる場所が欲しいと、スタッフからの熱い要望があったので、
静的コンテンツ作成ツールVuePressでブログを作成し、netlifyで公開してみた。
# VuePressとブログ用テーマをインストール
# 環境
Windows 10
>node -v
v11.9.0
>yarn -v
1.21.1
# インストール
こちらのブログテーマを使います。
Home | vuepress-theme-meteorlxy
>md my-blog
>cd my-blog
my-blog>yarn add -D vuepress vuepress-theme-meteorlxy
# とりあえず確認するための初期設定
src/.vuepress/config.js
作成
module.exports = {
title: 'DORASU Tech. BLOG',
description: 'DORASU技術チームのブログ',
locales: {
'/': {
lang: 'ja-JP',
},
},
// Theme to use
theme: 'meteorlxy',
themeConfig: {
lang: 'ja-JP',
personalInfo: {
// Nickname
nickname: 'DRASU Tech.',
description: 'チームDORASU技術部',
email: 'tech@dorasu.com',
avatar: 'https://www.meteorlxy.cn/assets/img/avatar.jpg',
sns: {
github: {
account: 'dorasu-tech',
link: 'https://github.com/dorasu-tech/',
},
facebook: {
account: 'DorasuCorp',
link: 'https://www.facebook.com/DorasuCorp',
},
twitter: {
account: '@DorasuCorp',
link: 'https://twitter.com/DorasuCorp',
},
},
},
header: {
background: {
useGeo: true,
},
showTitle: true,
},
footer: {
poweredBy: true,
poweredByTheme: true,
},
infoCard: {
headerBackground: {
useGeo: true,
},
},
lastUpdated: false,
nav: [
{ text: 'Home', link: '/', exact: true },
{ text: 'Posts', link: '/posts/', exact: false },
],
comments: false,
pagination: {
perPage: 5,
},
defaultPages: {
home: true,
posts: true,
},
},
}
最初の投稿作成
src/_posts/2019-01-21-hello-world.md
---
category: hello
tags:
- world
date: 2019-01-21
title: Hello, world!
vssue-title: Hello, world!
---
This is my first post.
The content above `more` is the excerpt, which will be displayed in the posts list.
<!-- more -->
The content below `more` will only be displayed when viewing this post, and will not be displayed in the posts list.
package.json
に、scriptフィールドを追加
{
"devDependencies": {
"vuepress": "^1.2.0",
"vuepress-theme-meteorlxy": "^1.7.1"
},
"scripts": {
"dev": "vuepress dev src",
"build": "vuepress build src --dest dist"
}
}
# とりあえず確認
my-blog>yarn dev
yarn run v1.21.1
warning package.json: No license field
$ vuepress dev src
wait Extracting site metadata...
tip Apply theme vuepress-theme-meteorlxy ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/last-updated (i.e. "@vuepress/plugin-last-updated") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @theme-meteorlxy/vuepress-plugin-blog ...
tip Apply plugin @vuepress/plugin-blog (meteorlxy modified version) ...
Compiled successfully in 183.78ms
success [17:41:49] Build cc6d9b finished in 184 ms! ( http://localhost:8080/ )
こんな感じになるので、http://localhost:8080/ をブラウザで確認。
# カスタマイズ
# フォント変更
中華フォントになっているので、日本語フォントに変更。
src/.vuepress/public/css/style.css
を以下の内容で作成。
body {
font-family: "Helvetica", "Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic"!important;
}
config.js
に、以下を追加。
head: [
['link', { href: '/css/style.css', rel: 'stylesheet'}]
]
themeConfig: {}の外に追加します。
# 公開
netlifyを利用して公開します。
GitHubのリポジトリを指定して、ビルド用のコマンドと、公開するフォルダーを指定するだけで、簡単に公開できてしまいます。
- ビルドコマンド:
yarn build
- 公開フォルダ:
dist
ビルド出来たら、サイト名をいい感じにして完成。
httpsでのアクセスもデフォルトでできます。
完成したブログ
https://dorasu-tech.netlify.com/
独自ドメインでの運用もできるが、ひとまずこのまま。
# 参考
- VuePressとnetlifyで手軽にblogをはじめる - Qiita
- VuePressで作ったblogに配布されているテーマを設定する - Qiita
- vuepress-theme-meteorlxy