# VuePress

TIP

VuePress
※記事執筆時点でversion1.5.2です。

Vue.jsによる静的サイトジェネレーターです。似たものにGatsbyや、Hugo、Jekyll、Next、Nuxtなどがあります。
Vue.jsでwebページを作成するフレームワークとなると、Nuxtが有名だと思いますが、VuePressはドキュメントサイトや、ブログサイトを簡単に作れることが特徴です。
markdownによる記事作成がサポートされており、記事が書きやすい構造になってます。

プラグインやテーマもそこそこ充実しており、概ねブログサイトとして実現したい機能はカバーされているように感じます。
Vue.jsで書かれているので、Vue.jsさえ書ければ自分自身でテーマをカスタマイズしたり、プラグインを作成することもできます。

# VuePress事始め

terminalを立ち上げて、

yarn create vuepress [directoryName]
1

とコマンドを叩くと、ドキュメントサイトを作るかブログサイトを作るか聞かれます。今回はブログサイトを作りたいのでブログサイトを選択。

? Select the boilerplate type
  docs            - Create a documentation project with VuePress.
❯ blog
1
2
3

project名とかauthor、email情報は適当に書いて、ひたすらEnter。すると骨組みが生成されます。
yarn devで立ち上げてlocalhost:8080にアクセスすることでページを確認できます。

# テーマ適用

デフォルトテーマも素敵なのですが、meteorlxyというテーマを適用したいので追加します。

yarn add vuepress vuepress-theme-meteorlxy
1

.vuepress/config.jsに記述してあるthemeを書き換えることでテーマを変更します。

module.exports = {
  ...
  theme: 'meteorlxy',
  ...
}
1
2
3
4
5

yarn devで立ち上げてlocalhost:8080にアクセスすることでページを確認できます。meteorlxyを適応した見た目はこんな感じです。
image

meteorlxyは中国圏で作られたものらしく、日本語フォントが適用されていません。一部の漢字が簡体字(繁体字かも)で表示されてしまうので、日本語フォントを適用させます。
.vuepress/styles/index.stylにfont-familyの設定を記述することで設定できます。

body
  font-family "Helvetica","Arial","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","メイリオ","Meiryo","MS Pゴシック","MS PGothic"
1
2

いまいちfont-familyの好設定がわかってないので、ぐぐってオススメとされていたfont-familyを適用してます。こだわりたい場合はwebフォントなどを利用して見た目を良くしてもいいかもしれません。
このほか、config.jsに設定を記述することでmeteorlxyテーマに沿った設定をします。
meteorlxyの作者が設定ファイルを公開してくれているので参考に進めると楽ちんです→.vuepress/config.js
私はこんな感じで設定しました。

クリックしてconfig.jsを展開する

module.exports = {
  // title of website
  title: 'むにえる牧場',
  // description of website
  description: 'じゃれみーのブログ。プログラミング系が多いです。',
  // language of website
  locales: {
    '/': {
      lang: 'ja',
    },
  },
  // head information of website
  head: [
    // need favicon
    ['meta', { name: 'og:title', content: 'むにえる牧場' }],
    ['meta', { name: 'og:url', content: 'https://meuniere.dev/' }],
    ['meta', { name: 'og:type', content: 'website' }],
    ['meta', { name: 'og:description', content: 'じゃれみーのブログ。プログラミング系が多いです。' }],
    ['meta', { name: 'og:image', content: 'https://meuniere.dev/avatars/jalepoke_512.png' }]
  ],
  // markdown config
  markdown: {
    lineNumbers: true,
    linkfy: true,
  },
  // theme to use
  theme: 'meteorlxy', // OR shortcut: @vuepress/blog
  themeConfig: {
    // language of this theme
    lang: 'ja-JP',
    // personal information
    personalInfo: {
      nickname: 'jalemy',
      description: 'software engineer<br />I depend on the game🎮',
      email: 'jalemy.xps@gmail.com',
      location: 'Tokyo, Japan',
      avatar: 'https://meuniere.dev/avatars/jalepoke_512.png',
      sns: {
        // github account and link
        github: {
          account: 'jalemy',
          link: 'https://github.com/jalemy',
        },
        // twitter account and link
        twitter: {
          account: 'Dhj_NF',
          link: 'https://twitter.com/Dhj_NF',
        },
        // instagram account and link
        // instagram: {
        //   account: '',
        //   link: '',
        // },
      },
    },
    // header config
    header: {
      background: {
        // use random pattern
        useGeo: true,
      },
      // show title in the header or not
      showTitle: true,
    },
    // footer config
    footer: {
      // show 'Powered by VuePress' or not
      poweredBy: true,
      // show the theme
      poweredByTheme: true,
    },
    // info card config
    infoCard: {
      // the background of the info card's header
      headerBackground: {
        // use random pattern
        useGeo: true
      }
    },
    // show the last updated time of posts
    lastUpdated: true,
    // enable smooth scrolling or not
    smoothScroll: true,
    // pagination config
    pagination: {
      perPage: 5,
    },
    // comment config(vssue)
    comments: {
      platform: 'github',
      owner: 'jalemy',
      repo: 'xxx',
      clientId: 'xxx',
      clientSecret: 'xxx',
      autoCreateIssue: process.env.NODE_ENV !== 'development',
    },
    // the content of navbar links
    nav: [
      { text: 'Home', link: '/', exact: true },
      { text: 'Posts', link: '/posts/', exact: false },
    ],
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

meteorlxyのサンプルにはないですが、headプロパティに追加で情報を記述することでOG情報の設定ができます。今回はとりあえずタイトルとか、サイト画像とか、一般的なものだけ設定しました。
VuePressconfig.jsでいろいろな設定を管理できるようになっているのでわかりやすくて良いです。

# Vssueによるコメント機能の追加

今回利用しているテーマのmeteorlxyには同作者のVssueプラグインが同梱されてます。
GitHubのissueと連携してコメント機能を追加する素敵なプラグインです。
Vssue

VuePressは静的サイトジェネレーターであり、サーバーサイド機能を持たないため、コメント機能のようなDBを介する機能が実現できません。
そこで外部サイトにコメント情報を残して、ページ表示時にコメントを取得→コメントを表示というアプローチです。
Vssueの他には、Disqusというwebサービスや、Netlify Formsというwebサービスが有名処かと思います。

# Vssueの設定

まずVssueを利用するためにはpublicなGitHub Repositoryが必要になります。
このブログではこちらのRepositoryをコメント用のRepositoryにしています。
ブログのリソースを配置しているRepositoryでコメントも管理できる方が楽に思えるのですが、そうなるとブログのソースコードもpublicにしなければなりません。API keyのようなものを設定してる場合、それらも後悔することになってしまいます。
ということでコメント用のRepositoryを立ち上げる構成にしました。ブログリソース用のRepositoryはprivateで存在してます。

コメント用のpublicなRepositoryを作ったら、GitHub > Settings > OAuth AppsよりAPI Keyとなるものを生成します。
New OAuth AppからApplication nameとか、Homepage URLとかフォームを埋めていくだけです。
進めると、Client IDとClient Secretが表示されるので、控えておきます。
そしてこれらを.vuepress/config.jsに追加します。

module.exports = {
  ...
  // comment config(vssue)
    comments: {
      platform: 'github',
      owner: 'jalemy',
      repo: 'meuniere-comments',
      clientId: 'xxx',
      clientSecret: 'xxx',
      autoCreateIssue: process.env.NODE_ENV !== 'development',
    },
  ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13

ownerとかrepoは適宜自身のものに変更してください。
この設定をするだけでコメント機能が追加されます。めちゃくちゃ便利です。作者様ありがたや……

# Netlifyへのdeploy

Netlifyは本当に簡単な操作でbuild→deploy→hostingを実現してくれます。もう全部これでいいんじゃないかなってレベルです。

  1. Netlifydでアカウントを作成する
  2. New Site from Gitからブログ用のRepositoryを選択する
  3. Build Commandにyarn buildを設定する
  4. Publish directoryにblog/.vuepress/distを設定する

これだけでGitHubのRepositoryにpushしたらbuild→deploy→hostingを勝手にやってくれます。
独自ドメインの設定などは割愛……

WARNING

※はてなブックマークで回ってきて知ったのですが、日本からの接続だとレイテンシが高いという問題があるそうです。構成するのが楽なので使ってますが、速度を気にする場合はFirebase HostingなどのHostingサービスを使った方が良さそうです。

出典元: anatooのブログ: Netlifyが日本からだと遅い

# おわりに

VuePressで個人ブログを新しく作ったので備忘録を兼ねて記事を書いてみました。
少々つまずく部分もありましたが、欲しい機能が揃っていて満足しています。markdownで記事を書ける点がサイコーです。

  • GitHubで管理しているので、リソース管理という面で安心
  • 皆大好きmarkdownで記事が書ける
  • markdownファイルさえあれば、将来的にシステムを移行することもできる

とか、このあたりが気に入ってる点です。
そのうちGitHub Actionsでtextlintを挟むようにして、新しく記事を投稿するときはPRを出す→textlintで自動的に校正をする→問題なかったらmasterにmergeして公開みたいな形を取ろうと思ってます。
テーマもそれなりに数多く公開されているので、気に入るテーマを選んで使ってみるのも良いかなーと思います。
GitHub Topics - VuePress Theme List