Quartoでウェブサイトをつくってみた

自己紹介

• 氏名: 伊東宏樹
• 勤務先: 森林総合研究所北海道支所
• 共訳書:
  • BUGSで学ぶ階層モデリング入門—個体群のベイズ解析—
  • 生態学のための階層モデリング—RとBUGSによる分布・個体数量・種の豊かさの統計解析—

Quartoとは

• RStudio以外でも使える（例: Emacs）

インストール

RStudioから使う

ウェブサイトの作成

メニューから File > New Project…

設定

それぞれに設定項目がある。

サイトの設定

_quarto.yaml

project:
  type: website
  
website:
  title: "テストサイト"
  navbar: left:
    - href: index.qmd
      text: Home
    - about.qmd
    
format:
  html:
    theme: cosmo
    css: styles.css
    toc: true
    
editor: visual

詳細はQuarto公式ドキュメントを参照

• Website Navigation

• Website Tools

ページごとの設定

• YAMLヘッダで設定

• 例: lang: jaとすると、パーツを日本語化できる¹。

---
title: "テストサイト"
lang: ja
---

トップページの作成

index.qmdの例

---
title: "ホーム"
lang: ja
---

これは Quarto ウェブサイトです。

Quarto ウェブサイトについては <https://quarto.org/docs/websites> をご覧ください。

![シマエナガ](images/P3054939.jpeg)

Render

HTMLファイルを生成

レンダリング結果

Rコード

R Markdown同様にRコードを挿入・実行できる。

Quarto独自の機能として、‘#|’ の後にチャンクオプションを書ける。

```{r}
#| label: plot
#| fig-width: 6
#| fig-height: 3
library(ggplot2)
ggplot(data = iris) +
  geom_point(mapping = aes(x = Sepal.Length, y = Sepal.Width,
                           colour = Species))
```

数式

R Markdownと同じ。

$で囲むとインライン数式: $x^2$ → \(x^2\)

$$で囲むと別行立て数式:

$$
\Pr(x\mid\mu,\sigma) =
\frac{1}{\sqrt{2\pi}\sigma}\exp\left(-\frac{(x-\mu)^2}{2\sigma^2}\right)
$$

\[ \Pr(x \mid \mu, \sigma) = \frac{1}{\sqrt{2\pi}\sigma}\exp\left(-\frac{(x - \mu)^2}{2\sigma^2}\right) \]

Blogを（後付けで）追加

参考: Adding a blog to your existing Quarto website

• Blog記事を格納するディレクトリposts/を追加する。

• 設定ファイルposts/_metadata.ymlを追加する（任意）。ここではfreeze: trueを設定。

# options apply to all posts in this folder

# freeze computational output
freeze: true

Listingページposts.qmdを追加する。内容は以下のYAMLヘッダ。

---
title: "Blog"
lang: ja
listing:
  contents: posts    # 記事格納ディレクトリ
  sort: "date desc"  # 順番
  type: default      # リスティングスタイル
  categories: true   # カテゴリーの使用
---

_quarto.yml のwebsiteの項目にposts.qmdを追加

website:
  title: "テストサイト"
  navbar: left:
    - href: index.qmd
      text: Home
    - about.qmd
    - posts.qmd    # <- 追加

Blog記事の追加

postsの下にディレクトリ作成、その下にindex.qmdというファイル名でQuartoドキュメント作成。

---
title: "テスト"
lang: ja
date: "2024-02-17"
categories: [Test, R]
---

テストです。

```{r}
#| label: plot
library(ggplot2)
ggplot(data = iris) +
  geom_point(aes(x = Sepal.Length, y = Sepal.Width,
                 colour = Species))
```

ディレクトリ構造（例）

_quarto.yml
_site/             <- レンダリングされたページは_site以下に生成
   ...
about.qmd
images/
   ...
index.qmd
posts/             <- Blog用ディレクトリ
   _metadata.yml
   2024-02-17-test/   <- Blog記事
      index.qmd
   2024-02-18-test2/  <- Blog記事
      index.qmd
   ...
posts.qmd
styles.css

Render

記事のHTMLファイルを生成

Listingページ

生成されたListingページ

Blog記事

生成されたBlog記事

RSS Feedの追加

_quarto.ymlのwebsiteにsite-urlとdescriptionを追加する。

website:
  title: "テストサイト"
  site-url: https://example.com  # ←追加
  description: "test blog"       # ←追加

Blogリスティングページ（この例ではposts.qmd）のlistingにfeed: trueを追加する。

listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  feed: true       # ←追加

実際に作成したウェブサイト

https://ito4303.sakura.ne.jp (とりあえず形だけ)

おわりに

詳細な設定などは、Quartoの公式ドキュメント(Creating a Website)などを参照してください。