SappoRoR11.qmd

---
title: "Quartoでウェブサイトをつくってみた"
subtitle: "SappoRo.R #11"
author: "伊東宏樹"
date: 2024-02-17
format:
  revealjs:
    theme: [default, custom.scss]
editor: visual
self-contained: true
---

## 自己紹介

-   氏名: 伊東宏樹
-   勤務先: 森林総合研究所北海道支所
-   共訳書:
    -   [[BUGSで学ぶ階層モデリング入門---個体群のベイズ解析---](https://www.hanmoto.com/bd/isbn/9784320057807)]{style="font-size: 95%"}
    -   [[生態学のための階層モデリング---RとBUGSによる分布・個体数量・種の豊かさの統計解析---](https://www.hanmoto.com/bd/isbn/9784320058149)]{style="font-size: 95%"}

## Quartoとは

::: {style="margin-top: 2em; padding-right: 1em;"}
[公式サイト](https://quarto.org/)いわく:

-   An open-source scientific and technical publishing system

-   Quarto is a multi-language, next generation version of R Markdown from Posit

    -   Rのほか、Python、Julia、Observableに対応
:::

------------------------------------------------------------------------

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

![](figures/emacs_quarto-mode.png){fig-alt="Emacs: quarto-mode"}

## インストール

::: {style="margin-top: 2em;"}
-   RやRstudioとは別にインストールする必要がある。

-   インストーラーは、quarto.orgの[Get Started](https://quarto.org/docs/get-started/)または[ダウンロードページ](https://quarto.org/docs/download/)にて入手可能。
:::

## RStudioから使う

![](figures/RStudio-File_Quarto.png){fig-alt="RStudio: File -> New File -> Quarto Document..."}

## ウェブサイトの作成

メニューから File \> New Project...

![](figures/Create_Project.png)

------------------------------------------------------------------------

![](figures/Project_Type.png)

------------------------------------------------------------------------

![](figures/Create_Quarto_Website.png)

## 設定

::: {style="margin-top: 2em;"}
-   サイトの設定

-   ページごとの設定
:::

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

## サイトの設定

\_quarto.yaml

``` 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](https://quarto.org/docs/websites/website-navigation.html)

-   [Website Tools](https://quarto.org/docs/websites/website-tools.html)

## ページごとの設定

-   YAMLヘッダで設定

-   例: `lang: ja`とすると、パーツを日本語化できる[^1]。

[^1]: レンダリング時に警告がでたりするが。

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

## トップページの作成

`index.qmd`の例

``` {style="border: 1px solid gray; padding: 5px;"}
---
title: "ホーム"
lang: ja
---

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

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

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

## Render

HTMLファイルを生成

![](figures/Render.png)

## レンダリング結果

![](figures/toppage.png)

## 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))
```

<!-- ![](figures/ggplot2.png) -->

------------------------------------------------------------------------

```{r}
#| label: plot_real
#| echo: true
#| 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)
$$

```{=html}
<!--
macOSのGoogle Chromeで数式の表示が乱れる場合は、数式で右クリック-> Math Settings -> Math Rendererで、Common HTMLを選択する。

Qiita: macOS Ventura (v13.1) の Chrome (108/109) で Qiita の数式が崩れて見える件
https://qiita.com/yoya/items/c54f401a9cb78930f9c8
-->
```
## Blogを（後付けで）追加

参考: [Adding a blog to your existing Quarto website](https://samanthacsik.github.io/posts/2022-10-24-quarto-blogs/)

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

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

``` yaml
# options apply to all posts in this folder

# freeze computational output
freeze: true
```

------------------------------------------------------------------------

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

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

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

``` yaml
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))
```
````

## ディレクトリ構造（例）

``` {style="border: 1px solid gray; padding: 5px;"}
_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ファイルを生成

![](figures/Render2.png)

## Listingページ

生成されたListingページ

![](figures/blog_listing.png)

## Blog記事

生成されたBlog記事

![](figures/blog_page.png)

## RSS Feedの追加

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

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

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

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

::: {style="padding-top: 0.5em; font-size: 60%;"}
公式ドキュメントの説明: <https://quarto.org/docs/websites/website-blog.html#rss-feed>
:::

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

[https://ito4303.sakura.ne.jp](https://ito4303.sakura.ne.jp){.uri target="_blank"} (とりあえず形だけ)

![](figures/website.png)

## おわりに

詳細な設定などは、Quartoの公式ドキュメント([Creating a Website](https://quarto.org/docs/websites/))などを参照してください。

::: {style="text-align: center; margin-top: 1em; font-size: 128px;"}
🥳
:::