VuePress+netlifyで技術ブログを立ち上げてみた

社内で調査・研究した技術情報を、公開・共有できる場所が欲しいと、スタッフからの熱い要望があったので、
静的コンテンツ作成ツール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: '[email protected]',
        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 PGothic"!important; 
}

config.jsに、以下を追加。

head: [
  ['link', { href: '/css/style.css', rel: 'stylesheet'}]
]

themeConfig: {}の外に追加します。

# 公開

netlifyを利用して公開します。

GitHubのリポジトリを指定して、ビルド用のコマンドと、公開するフォルダーを指定するだけで、簡単に公開できてしまいます。

ビルドコマンド： yarn build
公開フォルダ： dist

ビルド出来たら、サイト名をいい感じにして完成。
httpsでのアクセスもデフォルトでできます。

完成したブログ
https://dorasu-tech.netlify.com/

独自ドメインでの運用もできるが、ひとまずこのまま。