Front Matter CMSとAstroを使えるようにするまでのメモ。

VSCodeにて、Front Matter CMSを動作させるための前提条件として、Astroおよびnpmのインストールが必要です。
Astroはソースからページを生成するためのフレームワークのことであり、サイト制作の作業フォルダに設置することになります。
npmはAstroを動作させるためのコマンドなので、作業に使うPCにインストールすることになります。

なお、今回OSはManjaro、そしてテキストエディタはVSCodeじゃなくてVSCodiumを使っていますが、VSCodiumでも問題なく動作しました。

まずnpmのインストール。
Manjaroの場合、node.jsは初めからインストール済みであり、npmはコマンドを叩かずとも、ソフトウェアの追加と削除から「npm」と検索するだけですぐ見つかります。

話題の最新フロントエンドフレームワーク「Astro」を使ってみた #React - Qiita

次にAstroのインストールをするため、任意のフォルダに移動して下記コマンドを実行します。

npm create astro@latest

いろいろと質問攻めに会いますが、プロジェクト名以外、基本的にはそのままエンターキーでOK。
プロジェクト名は生成されるフォルダ名と同一になるので、ランダムで選ばれる名前が気に入らない場合は変更しましょう。

インストールが終わったらそのままコンソール上で、生成されたフォルダにcdコマンドで移動して、下記コマンドを実行。

npm run dev

astroが起動するので、localhost:4321にアクセスするとプレビューが表示されます。
コンソール上でctrl+Cを押すと終了できます。

src/pages/index.astroファイルを編集すると、ブラウザをリロードせずとも、プレビューに表示されるページが即座に更新されているのがわかるはずです。

はじめてのAstro - ブログサイトを再構築する - MATSUKAZE.DESIGN

VScodeでAstroを設置したフォルダを開き、Front Matter CMSの初期設定を済ませます。
以降、テンプレートの作成方法などは上記サイトを参考に。


Themes | Astro

ある程度仕組みができたら、ここからテーマを探すのもあり。
というか自作するとどこかでボロが出そうなので、素直に頼るべきか。

JustGoodUI/dante-astro-theme: Dante, a single-author blog and portfolio theme for Astro.js.

当環境ではdanteにしました。まずGithub内にて指示されているとおり、指定のファイルをastroのフォルダに移動させます。
そのあとコンソールにてastroのフォルダに移動して、下記コマンドを実行すればOK。danteは下記プラグインがないと動かない。

npm install @astrojs/mdx
npm install @astrojs/sitemap

astropaperっていうテーマも良い見た目していたけど、うまく動作しなかった…。


mdファイル内の文章に改行を入れていても、実際にページを表示すると改行されていない問題が発生。
markdown正規の記法としては、文末にスペース2つを入れる改行という扱いになるらしいけど、そんなんいちいちめんどくさいし、そもそも文末のスペースはVScodeが勝手に消してしまいます…。

AstroのMarkdownで改行したとこにBRタグを入れる - ひげろぐ

そういうときは、上記サイトに従ってAstroにプラグインを入れると解決。その前にコンソールにて、下記コマンドを先に実行しておくこと。

npm install remark-breaks

Astro Docker環境作成 #JavaScript - Qiita

Docker版Astroもあった。
nodeのバージョンが指定されているけど、node:16.15.0-alpineじゃ今となっては古いので、node:latestに置き換えるべし。