RmdをGithubでwebサイトとして公開する方法3選

# 記事を書いたモチベ
R studioなどを使ってコードを実行しているとき、この内容をどこかにいい感じにまとめてほかの人に共有したいなーって思ったことありますよね？
Rmdファイルはhtmlやpdfに変換できますがそのファイルたちを共有する方法がなかなか難しいです。
webサイトとして公開できれば見やすい＆壊されないのではというところから始めました。

# 対象
- 複数の章(Rmdファイル)に分かれるようなナレッジを1つのサイトとして共有したい
- Rmdでの実行結果(tableやグラフ)もサイトに掲載したい
- mac/windowsユーザー
- R studioを使用可能

# 手法比較
早速ですが、この記事で紹介する3つの手法について下記にまとめます。
個人的にはquartoを使うのがおしゃれ、かつカスタマイズ性が高いです。

| 方法     | 利点                                                                                                     | 欠点                                                             |
| -------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| bookdown<br>bs4_book | 簡単に実装できる<br>見た目がきれい<br>情報量が少ない際に適する<br>コードチャンクの設定を一括で指定できる | 階層構造が少ないため情報量が多いと見にくい<br>header1が自動で別章になってしまう<br>コードブロックを折り畳めない |
| quarto   | 見た目がきれい<br>サイドバーを階層構造にできるため情報量が増えても問題ない<br>コードブロックを折り畳める<br>アイコンも設定可能 |              .Rmd→.qmdに変更する必要あり                                                    |


※あくまでもデフォルトの設定での比較となります
※github pagesにアップロードした時の挙動を比較しています

# bookdown
https://github.com/TKK314/Rmd_bookdown
## 見た目
![スクリーンショット 2024-05-24 17.35.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/ed4673ae-965c-7cf7-f105-d08d740e5485.png)
- シンプルでpaper likeなので見やすい
- sidebarはこれ以上階層を増やせないので章が多すぎると見にくくなってしまうことも

## 準備
bookdownというライブラリをインストールして、一度R studioを再起動してください。
以下のようにBuildというタブが追加されていればOKです
![スクリーンショット 2024-05-24 17.43.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/1452f74e-3e86-b5d3-0579-9210a35c87bb.png)

## 作成方法
1. R studioでNew Project＞New directory＞Book project using bookdown
1. 任意のフォルダに新規プロジェクトを作成する

上記の手順で作成すると自動的にRmdファイルや設定のために必要なファイル(_bookdown.ymlなど）が生成されます。
画像付きの詳細は[こちら](https://gedevan-aleksizde.github.io/rmarkdown-cookbook/bookdown.html)


## 設定
```_bookdown.yml
delete_merged_file: true
language:
  ui:
    chapter_name: "Chapter "
output_dir: docs #github pagesを使う上では必須
```
- delete_merged_file
    - trueにしておくことで、レンダリング時に自動で上書きされます
- chapter_name
    - 設定すると各Rmdファイルのheader1レベルのタイトルに自動で、その名前と通し番号が割り振られます
- output_dir
    - 出力先のディレクトリを指定します（デフォルトは_bookフォルダ）
    - github pagesではdocs配下のhtmlファイルを元にwebページを生成するため<font color = red>必須の設定です</font>


```_output.yml
bookdown::gitbook:
  css: style.css
  config:
    toc:
      before: |
        <li><a href="./">A Minimal Book Example</a></li>
      after: |
        <li><a href="https://github.com/rstudio/bookdown" target="blank">Published with bookdown</a></li>
    edit: https://github.com/USERNAME/REPO/edit/BRANCH/%s
    download: ["pdf", "epub"]

```
- beforeのところに記載した名前がタイトルになります
- デフォルトでは`bookdown:pdf_book`の設定項目がありますが、webサイト構築には必要ないので削除or放置でOK

## Build（Rmd→html）
以下のBuildボタンを押下する
![スクリーンショット 2024-05-24 17.43.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/bc9b61f1-1b26-ea81-464c-8be82e98b1ef.png)

docsフォルダの中に自動でhtmlファイルなどが生成される
![スクリーンショット 2024-05-24 17.46.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/6a094e36-158a-335e-5f7d-4cc4f84ff266.png)

## TIPS
### Rmdファイルを1フォルダ内にまとめたい
初期設定では、.Rprojと同じ場所に.Rmdファイルが生成されており、少しゴチャついて見える。

1. booksというフォルダに以下のファイルを移動させる
![スクリーンショット 2024-05-24 17.52.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/c463d97d-d420-9ec6-d87c-d54c6e83cbe4.png)
2. _bookdown.ymlのoutput_dirを`../docs`に変更する
2. Build時にBuildボタンではなく以下のコマンドをR consoleで実行する

    ```r
    rmarkdown::render_site(encoding = 'UTF-8', input = "books/")
    ```

# Github Pagesでの公開方法
1. settingsのpagesに移動する
![スクリーンショット 2024-05-24 17.58.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/37bede40-77cf-7476-588b-b16673094490.png)
2. branchをmainに設定し、/docs配下のデータをサイトに表示するよう設定する
![スクリーンショット 2024-05-24 17.59.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/30219d21-38d5-bbd8-2d11-669b9cd9672d.png)

# bs4_book
https://tkk314.github.io/Rmd_bs4book/

## 見た目
![スクリーンショット 2024-05-24 18.06.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/74b3953e-0c8c-8303-68c7-3ab288fc625d.png)
- 目次が左右に分割されている
- bookdownのオプションの一つであるためそれほどbookdownと機能は変わらない


## 作成方法
- bookdownとほぼ同様
- html book formatをbs4_bookにするだけ
![スクリーンショット 2024-05-24 18.04.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/ee9831b0-0a65-f4e9-6def-944c9c55d0b2.png)

## 設定
特筆すべきことは特にありません。
詳細は以下をご覧ください。

https://bookdown.org/yihui/bookdown/html.html#bs4-book

# Quarto
https://tkk314.github.io/Rmd_Quarto/

## 見た目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/1b9650de-0efb-be18-28fc-2f8dc51f4c99.png)

- 上部のバーやサイドバーを自由に設定できます
- サイドバーではネストの深さを自由に設定できるので情報量が多いページに適しています
- ロゴ画像も挿入可能
- コードが折りたためます


## 事前準備
詳細は下記の公式サイトをご覧ください
各種プラットホームで使用できるCLIツールが用意されています。
![スクリーンショット 2024-05-26 9.56.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/658b8a2e-91f2-4011-af82-07e50ab623de.png)

https://quarto.org/
## 作成方法
R studioでNew Project>New directory> Quarto Website
![スクリーンショット 2024-05-26 9.53.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2150464/9e0688e4-342b-fade-3ee8-cb0936d58bd3.png)

## 設定
```_quarto.yml
project:
  type: website
  output-dir: docs #github pagesで必須

website:
  title: "quarto" #サイト名入れる
  site-url: "" #トップページのURLを入れる
  page-navigation: true

  page-footer: #フッターの設定
    right: ""
    left:
      - icon: github
        href: "" #githubのリポジトリURLなどを入れる
      - icon: globe
        href: "" #公開しているサイトのURLなどを入れる
    background: "#AAB1B3"


  navbar: #上のバーに記載する内容の設定
    left:
      - href: index.qmd
        text: Home
      - about.qmd
  sidebar: #サイドバーに記載する内容の設定
    logo: "image/logo.png" #ロゴを設定可能
    pinned: true
    align: center
    style: "docked"
    search: true
    collapse-level: 1
    contents: #サイドバーのコンテンツ
      - text: "Home"
        file: index.qmd
      - text: "Contributors"
        file: contributors.qmd
      - section: "R" #ネストできる
        contents:
          - book/R/1.Create_DataSet.qmd

format:
  html:
    page-layout: article
    theme: zephyr #cosmo #sketchy #quartz #morph #lumen #sandstone #zephyr
    css: styles.css
    code_folding: hide #hide #true #false
    toc: true
    grid:
      sidebar-width: 250px
      body-width: 900px
      margin-width: 300px

editor: visual
```

- 上記は好みによるので必要な部分だけ設定してみてください
## Render(Qmd→html）
- terminalで`quarto preview`
    - プレビュー状態のWebサイトが自動で立ち上がります
    - qmdファイルなどを編集して保存すると自動で再レンダリングされて反映されます
- terminalで`quarot render`
    - GitHub公開用にhtmlファイルを生成します


## TIPS
### コード折り畳み関連
https://tkk314.github.io/Rmd_Quarto/create_dataset.html

### その他Quartoに特有のTIPS
https://tkk314.github.io/Rmd_Quarto/tips.html