Vitepressつかってみた2

ちょっと引っかかったところ

vitepressのバージョンが参考にした記事より上がっていていくつか引っかかった。基本的なディレクトリ構造は同じだが、.vitepress/theme/config.jsのままやろうとするとESM file関係のエラーがでる。よくわからんけどconfig.mjsに名前を変えたら治った。なんか副作用を出すjsはmjsみたいに名前を変えるんじゃないかな。他のjsファイルもリネームしといた。

RSSは元のスクリプトだとatom1という規格を使っていたが、時刻処理のエラーが出てたのでrss2に変えてみたら動いた。

ちょっとややこしかったのがURLのRewritingまわりで、参考記事のままでdevサーバを立ち上げて確認するとちゃんと動いているのが、buildしてpreviewすると動かなくなる。一応issue#3062に上がってるけど開発者がバグじゃないとかいうてて直される気配もなく謎。自前で定義したexport default createContentLoader内でpageのurlとrewritingをマッチするようにしたら動いた。

posts.data.mjsconfig.mjsPostTitle.vue


import { createContentLoader } from 'vitepress'

export default createContentLoader('content/posts/**/*.md', {
    includeSrc: false,
    transform(rawData) {
        return rawData
            .filter(page => page.frontmatter.title != "Posts") //ここもいじった
            .sort((a, b) => {
                // date DESC
                return +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
            })
            .map(page => {
                page.relativePath = page.url.replace(/^\/content\/posts\/[0-9]+\/[0-9]+\//g, 'posts/') + ".md";
                page.url = page.url.replace(/^\/posts\/[0-9]+\/[0-9]+\//g, '/posts/').replace(/index$/g, '');
                return page;
            })
    }
})

...//省略
rewrites: {
    'posts/(.*)/(.*)/:name/(.*)': 'posts/:name/index.md'
  },
...

vue

<script setup>
import { useData } from 'vitepress'
import moment from 'moment';
import { ref, watchEffect } from 'vue';

const { frontmatter } = useData()
const date = ref('')

watchEffect(() => {
    date.value = moment(frontmatter.value.date).format('YYYY-MM-DD');
});
</script>

<template>
    <div class="vp-doc">
        <p>
            <span>📆 {{ date }}</span>
        </p>
        <h1>{{ frontmatter.title }}</h1>
        <p>
            <a v-for="tag in frontmatter.tags" :href="'/tags/' + encodeURIComponent(tag.replaceAll(' ', '')) + '/'"> #{{ tag
            }} </a>
        </p>
    </div>
</template>

ページ遷移するときにヘッダの日付が更新されずに前のページの日付のままになっていた。これはPostTitle.vueのスクリプトが一度しか実行されないので、const dateが更新されないからそうなる。watchEffectなるものを使えば動的に変えてくれるっぽい。

とりあえず引っかかったところで思い当たるのはこのあたり。こういうエラーに取り組むと文法とかなんとなくわかってくるよね。

ホスティングの話

最初はHerokuとGoogle DNSでええかなーとか思ったけど、静的なブログをHerokuに上げるのは牛刀割鶏な気がした。いくらGithub studentでHeroku２年分使えるとはいえもったいない。

正直自分所有のドメインもいらんしshitpostを公開できればいいので、それにフォーカスしたサービスをさがしたらNetlify（ねっとりファイ）を見つけた。Misskeyでよくかまってくれる人のブログがこのサービスを使ってた。

Githubと連携してmasterが更新されたら自動でビルドしてデプロイしてくれるらしい。gitの勉強にもなるしこれは便利。無料枠だと通信量とかビルド時間に制限があるっぽいけど、多分そこまで問題にならない。使用感は実際に使ってみてある程度したら書いてみようかな。

実際にやってみた

まずはGithubにリポジトリを作り、そこにVitepressのファイルをpushする。その後NetlifyにログインしてGithubと連携させる。あとはビルドコマンドとデプロイ先を設定するだけ。とくに設定するものは少なく、ビルドコマンドのvitepress buildとサイトの最適化後の./vitepress/distを指定しただけでデプロイできた。あとはmasterにpushするだけで自動でデプロイしてくれる。

最初は適当なドメインに設定されるけど、https://*.netlify.appの部分は他とかぶらなければ変更できる。

これだけ。しばらく様子見してみる。

Vitepressつかってみた2

ちょっと引っかかったところ ​

ホスティングの話 ​

実際にやってみた ​

Other posts

ちょっと引っかかったところ

ホスティングの話

実際にやってみた