FastAPIでDocusaurus風サイトを構築：ステップ2 - Markdownのレンダリング

前の記事では、FastAPIサービスをセットアップし、Jinja2を使用して動的なHTMLテンプレートをレンダリングしました。

しかし、他のドキュメンテーションサイトツールを使用したことがあるなら、それらのほとんどは手書きのHTMLではなく、Markdownで記述し、それをHTMLコンテンツの生成に使用していたことをご存知でしょう。

この記事では、この機能を正確に実装します。ローカルの.mdファイルを読み込み、HTMLに解析し、Webテンプレートに注入します。

ステップ1：Markdown解析ライブラリのインストール

MarkdownテキストをHTML文字列に変換するツールが必要です。このための一般的なライブラリはpython-markdownです。

以下のコマンドを実行してインストールしてください。

慣例により、すべてのソースドキュメントは新しいdocs/フォルダに保存します。

まず、プロジェクトのルートディレクトリにdocsフォルダを作成し、その中にhello.mdファイルを作成します。

更新されたプロジェクト構造：

docs/hello.mdを編集：

この新しいファイルを開き、後でテストできるようにMarkdownコンテンツを記述します。

前回の記事で作成したtemplates/index.htmlはホームページです。ここでは、このMarkdownファイルのコンテンツを表示するための専用テンプレートが必要です。

templates/フォルダにdoc.htmlという名前の新しいファイルを作成します。

@@CODE_BLOCK4@@

{{ content | safe }}はJinja2に「このcontent変数の内容は安全なHTMLです。直接レンダリングしてください。エスケープしないでください。」と伝えます。

次に、main.pyを修正して、Markdownファイル用の新しいルートを追加しましょう。たとえば、/docs/helloです。

これは次のアクションを実行します。

main.pyを開いて、以下のように修正します。

@@CODE_BLOCK5@@

uvicorn main:app --reloadを実行してサーバーを起動します。

ブラウザでこのURLにアクセスしてください：http://127.0.0.1:8000/docs/hello

docs/hello.mdの内容がHTMLページとして正常にレンダリングされているはずです！

ドキュメンテーションサイトは皆が訪問するためのものなので、ローカルで実行するだけでは不十分です。次に、オンラインでデプロイしましょう。

簡単なデプロイオプションはLeapcellを使用することです。Leapcellは、FastAPIを含むさまざまな言語やフレームワークのプロジェクトをホストできるWebアプリホスティングプラットフォームです。

以下の手順に従います。

1.ウェブサイトでアカウントを登録します。

2.プロジェクトをGitHubにコミットします。手順についてはGitHubの公式ドキュメントを参照してください。Leapcellは後でGitHubリポジトリからコードを取得します。

3.Leapcellページで「Create Service」をクリックします。

4.FastAPIリポジトリを選択すると、Leapcellが必要な構成を自動入力しているのが表示されます。

5.下部にある「Submit」をクリックしてデプロイします。デプロイはすぐに完了し、デプロイホームページに戻ります。ここでLeapcellがドメインを提供していることがわかります。これはブログのオンラインアドレスです。

この記事で、ドキュメンテーションサイトの最もコアな機能である動的なMarkdown-to-HTML変換を実装しました。

hello.mdのPythonコードブロックに気づいたかもしれません。正しくコードとしてレンダリングされましたが、プレーンで色がなく、読みにくいです。

これは明らかにドキュメンテーションサイトに期待される体験ではありません。

次の記事では、この問題を解決します。レンダリングされたMarkdownコードブロックに構文ハイライトを追加します。

Xでフォローする：@LeapcellJapan

関連記事：