Quartoでウェブサイトを作りQuarto Pubで公開する

以前、簡単にウェブサイトを作成・公開・維持する方法として、QuartoとGitHub Pagesを使った方法を紹介しました。

今回は、Quartoが提供するQuarto Pubで公開する方法も紹介します。GitHubはなぜかGoogle検索にインデックス登録されない状態が続いていたので、全てQuarto Pubに乗り換えてみました。

Quarto: Markdownベースでウェブサイトを作成します。
Quarto Pub: Quartoで作ったコンテンツを自由に出版できるサービスです。

Quartoとは

Quartoとは、拡張Markdown形式データ（拡張子は.qmd）を作成し、それを基にpandocによってHTMLファイル、PDFファイルなど様々な形式に変換して文書を構築するアプリケーションです。Jupyter notebookのように、文書内でコードを実行しその結果を表示することもできます。

Quartoを使ったウェブサイト構築のメリットは以下の通り。

Markdownで比較的簡単に記述できる。HTMLを編集するのに比べて、更新がだいぶ楽。
ブログ形式のサイトも作成できる。
テンプレートでもそれなりのデザイン。

ツールのセットアップ

Quarto

QuartoウェブサイトのトップページからGet Startedボタンをクリックしてダウンロードサイトに飛びます。OSに合わせたバージョンをインストールします。

Visual Studio Code

Markdownの編集に使います。VS Codeウェブサイトからインストールします。VS Codeを立ち上げ、Quartoの拡張機能 (Extentions) でQuartを検索し、インストールします。

Quartoのダウンロードサイトでも手順を解説しているので参考にしてください。

Quarto Pub

Quarto Pubでアカウントを作成します。Sign Up for Quarto Pubをクリックしてアカウントを作成してください。

公開されるページのURLは、このとき登録したユーザー名と初回Publish時に設定するウェブサイト名を使って

https://<user name>.quarto.pub/<site name>

となります。

ウェブサイトの作成

テンプレートから作成

Quartoのウェブサイトテンプレートを使って作成を始めます。

ウェブサイト作成用のフォルダを用意します。
VS Codeを起動してCtrl-Shift-Pでコマンドパレットを開き、Quarto: Create Projectと入力します。
Website Projectを選択し、1.で作ったフォルダを選択してChoose Project Directoryを押します。
フォルダの中に、index.qmdや_qualt.ymlといったテンプレートファイル一式が作られます。

テンプレートの編集

テンプレートファイルを編集したり、新しいファイルを追加したりしてウェブサイトを作成します。ウェブサイト全体の設定は_quarto.ymlに記述します。初期状態では

project:
  type: website

website:
  title: "<website title>"
  navbar: #ページナビの設定
    left: #左詰め
      - href: index.qmd #1つめのリンク先
        text: Home #1つ目のリンク先のテキスト（設定しないとリンク先のタイトルが使われる）
      - about.qmd #2つ目のリンク先

format:
  html:
    theme: cosmo #ページデザイン
    css: styles.css #CSSファイル（使わないなら消してよい）
    toc: true #ページ内目次のON/OFF（ページごとの設定も可）

となっています。（コメントは筆者の追記）

詳しい作成方法については、Quatro > Websitesを参照してください。

プレビューとレンダリング

index.qmdなど作成・編集したファイルを開き、VS Code右上のPreviewボタンをクリックすると、ウェブサイトのプレビューを表示できます。Ctrl-Shift-Kでも可能です。

全ページをレンダリングする場合は、

> quarto render

を実行してください。レンダリングで作成されたファイルはデフォルトでは/docs/フォルダに置かれます。

ウェブサイトの公開

QurtoからのPublish

Webサイト一式をPublishする場合は、Webサイトのホームディレクトリで

> quarto publish quarto-pub

を実行するだけです。初回はブラウザが開き認証画面が表示されるので認証してください。

ターミナル上では

? Authorize (Y/n) » 
? Site name:  »

と聞かれるので入力してください。認証が終わるとWebサイト一式がレンダリングされます。以上で完了です。GitHubよりもさらに簡単ですね。

公開されるページのURLはユーザー名とサイト名を使って

https://<user name>.quarto.pub/<site name>

となります。<site name>の部分はQuarto Pubの管理ページ内で変更可能です。また、管理ページ内でDefault siteオプションにチェックを入れて保存すると、

https://<user name>.quarto.pub/

でも同じサイトにアクセスできるようになります。

ウェブサイトの更新

ウェブサイトのソースファイル（.qmdファイルなど）をVS Codeで編集した際も、

> quarto publish quarto-pub

を実行すればOKです。

更新部分だけをレンダリングしてアップロードする場合には、更新した.qmdファイルをCtrl-Shift-Kでプレビューし

> quarto publish quarto-pub --no-render

を実行することで、追加レンダリングなしでアップロードできます。