gihyo.jpのMisskey連載第3回: VuePressを用いた静的サイト生成入門

概要

2023-03-22に公開された「gihyo.jpのMisskey連載第2回: MisskeyにおけるNest.jsを使ったDI | GNU social JP」に続く、3回目の連載「VuePressを用いた静的サイト生成入門 | gihyo.jp」が公開されたので紹介します。

2023-05-15の以下の投稿で告知されていました。

2023-05-15T01:31:35.164Z

k_taka‮🔖‭|[email protected]

今回のMisskey & Webテクノロジー最前線は「VuePressを用いた静的サイト生成入門」。執筆は @syuilo さんです。
今回はMisskeyオフィシャルサイトであるMisskey Hubでも使用している、静的サイトジェネレーターVuePressについて紹介しています。 https://gihyo.jp/article/2023/05/misskey-03

静的

Misskeyの公式サイト「Misskey Hub」の作成に使用している静的サイトジェネレーターのVuePressの紹介でした。

動的なサイトとは、閲覧者ごとに内容をサーバーで生成するWebサイトです。同じURLでも閲覧者ごとに違う表示になります。

一方、静的サイト (static site) というのは、Webサイトの全コンテンツが固定で決まっていてそれを配信するだけのサイトです。ブログやWikiなど、誰が見ても同じ内容のものが典型的な静的なサイトです。

静的サイトだと、アクセス時にコンテンツを生成する必要がなく、コンテンツをキャッシュすることもでき、配信速度を向上でき、運営コストも抑えられます。GitHubで管理すれば、GitHub Pagesを使ってそのままサイト公開もできるそうです。

VuePress

VuePressは静的サイトの作成を行うソフトウェア (Static Site Generator, SSG) の一つです。VuePressを使うことで、Markdown/自動目次生成/全文検索/多言語対応/Vueコンポーネントの埋込などが簡単に行え、テーマでデザインの手間が省けて、プラグイン機能があって自由に拡張できるそうです。

VuePressのプロジェクトをGitHubのリポジトリ―として管理すれば、GitHub Pagesを利用してゼロコストでサイトを公開できます。さらに、GitHub Actionsを使うと、コミット時に自動でVuePressのビルドを実行して、GitHub Pagesに反映できるそうです。

Misskey Hubでもこの技術スタック（VuePress + GitHub Pages + GitHub Actions）で管理されているとのことです。

結論

Misskey連載第3回でVuePressの話でした。Misskey公式サイトでの仕様技術の話でした。

閲覧者ごとに表示内容を変更する必要がないサイトでは、SSGは有効でしょう。DBやアプリケーションサーバーが不要で、Webサーバーだけでいいというのは簡単かもしれません。ただ、それでも最低限Webサーバーは必要です。GitHub Pagesも稼働にWebサーバーを使っています。

私は静的サイトジェネレーターをよくわかっていなくて、会員サイト、コメント機能とか、後々追加することを考えると、動的サイトの方が受けが広い印象を持っています。静的サイトでできることは動的サイトなら100 %可能ですが、逆はできないと思います。

また、GitHubがそもそも不自由なサービスで問題もあります。私は個人的にはあまり積極的に使いません。

作成するサイトの性質、今後の機能、運営コストなどを総合的に考えて検討すればよいでしょう。ツールうんぬんよりかは、何をしたいか、そちらのほうが大事かもしれません。