Skip to content

📆 2023-12-19

Vitepressつかってみた

#Vitepress #Initial setup

そもそも ​

ブログ的なものをやろうにもまったく Web 技術を知らない。数年前に Github-Pages で似たようなものを作ろうと思ったが、その頃はまだブラウザが何をやっているのかとか開発者目線の知識が全くなかった。

2023 年の頭辺りにイーロンが Twitter を買収したころが契機になった。Misskey というオープンソースで日本人が開発しているマイクロブログサービスにふれるようになってからなんとなくブラウザで何が起きてるか想像できるようになった。それと Julia 言語で UI を使える用にしたいとかぼんやり思っていたので、そこらへんのフロントエンドもちょっとずつかじった。 しかし Javascript とか一方にわからんけどまぁなんとかなるやろと思い色々調べてやってみることにした。

Vitepress ​

とにかく新しくて早いものが好きなので、どうせやるなら学ぶ価値のあるものを触ろうと思った。Web 技術に関してはしゅいろ氏のこの技術記事みて Vite なるものがあるんだなーとぼんやり考えてた。 https://gihyo.jp/article/2023/02/misskey-01

でもこれルーティングとかそこらへんをよしなにしてくれないっぽい。いろいろ調べたらテンプレートもほぼできててバックエンドもよしなにしてくれるVitepressが一番最短でshitpostできそうだと思いやってみることにした。(この業界では SPA は Single particle analysis じゃなくて Single Page Application なのか。)

巨人の肩に乗った ​

プログラムがどのディレクトリのファイルを読み込んだり関係を持っているのかはなんとなく読めばわかるが、Javascript は書けないのでいろいろブログを参考にして取っ掛かりを作ろうとした。

一番参考になったのはnshmura氏の記事(ありがとうございます)。Javascript の構文って Rust みたいだなーとか思ったり型なくてキモいなーとか原因不明で詳細を出してくれないエラーで数時間足を取られたが、なんとなく理解した。今後 WebAssembly したプログラムを上げたりしたいと考えてるので、Gallary つくったりブログデザインもその都度いじってみようかなー。

基本的に MarkDown 形式で書く。たまーに数式とか SVG の図を使いたい場合があるので、それ周りはまた調べたい。Typst.tsとか使ってうまくできないかな。

ためしの数式。他にも拡張 MD で色々機能があるっぽい。(https://vitepress.dev/guide/markdown#math-equations)

When a≠0, there are two solutions to (ax2+bx+c=0) and they are

x=−b±b2−4ac2a

Maxwell's equations:

equationdescription
∇⋅B→=0divergence of B→ is zero
∇×E→+1c∂B→∂t=0→curl of E→ is proportional to the rate of change of B→
∇×B→−1c∂E→∂t=4πcj→∇⋅E→=4πρwha?

ホスティングサービス ​

まだこれを書いてる時点では世の中に垂れ流しにしていなく、どこかのサーバにあげたり DNS 登録しないといけない。それと Github Action をつかって自動でデプロイしてくれるような構成にしたらshitpostしやすいと思うので、それも少し考えてやろうと思う。

それについてはまた別の記事で。

Released under the MIT License.