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

ウェブの海

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

VuePressとは

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

現状こうなってます

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

まずはnpm

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

$ npm install -D vuepress

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

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

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

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

module.exports = {
  <!-- 省略 -->
  theme: 'blog-vuetify',
  themeConfig: {
    directories: [
      {
        id: 'post',
        dirname: '_posts',
        path: '/',
        itemPermalink: '/posts/:year-:month-:day-:slug',
      },
    ],
  },
  <!-- 省略 -->
}

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

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

乞うご期待。

タイトルとURLをコピーしました