VuePressでブログを作り直しました

結局デプロイ先がレンサバになりました。
いいだか悪いんだか。

VuePressとは

VuePressとは、Vueで書かれたSSG(静的サイトジェネレーター)です。
どっちかというと技術者向けなかんじが否めないですね。

現状こうなってます

まだ調整中の部分がありますが、ひとまずレンサバに置きました。

まずはnpm

Node.jsは10以上であることを確認し、ローカルに任意のフォルダを作成して、

1
$ npm install -D vuepress

それから、今回テーマを入れました。
公式のもともとのものをカスタマイズしようとも思ったのですが、今回はテーマを入れるというステップも踏んでみたかったので、vuepress-theme-blog-vuetifyをnpmしました。

vuepress-theme-blog-vuetifyの特徴とわたしなりの使い方

外見をカスタマイズする際は、 scss で変数を上書きします。
.vuepress/styles/variables.scss
というファイルを作成し、ベースのカラーなぞをカスタマイズすることができます。

また、スラッグをカスタマイズしたい方は、config.jsを、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
<!-- 省略 -->
theme: 'blog-vuetify',
themeConfig: {
directories: [
{
id: 'post',
dirname: '_posts',
path: '/',
itemPermalink: '/posts/:year-:month-:day-:slug',
},
],
},
<!-- 省略 -->
}

ポイントは、themeConfigの中に書かないと反映されない点です。
(かなしいかな、VuePressの公式どおりthemeConfigの外に書くと無視されます)

今後もカスタマイズしていきます

乞うご期待。