セットアップ

まずは、使用するツールのセットアップをしつつ、ウェブサイトの作成から公開までの一連の流れを把握します。

1 ツールのインストール

ウェブサイトを公開する準備から始めたいと思います。今回はGitHub Pagesというサービスを使って、無料で公開します。

1.1 Visual Studio Code

ウェブサイトを作成するために使用するVisual Studio Code (VS code) をインストールします。

  • 普段、RStudioを使用している人はそちらを使っても構いません。

左下の設定ボタンをクリックし、Themesから好みのテーマを選んでください。

Settingsを適当に変更します。

  • Editor: Word Wrapをonにします。
  • Editor: Font Sizeを見やすい大きさにします。

1.2 GitHub

GitHubでアカウントを作成します。アカウント名はウェブサイトのURLになるので、それを念頭に置いて決めてください。

GitHubのリポジトリを作成します。GitHub Pagesでウェブサイトを公開するためには、<username>.github.ioという名前のリポジトリを作成する必要があります。

  • 例えば、GitHubアカウント名がshohe-doiであれば、shohei-doi.github.ioというリポジトリ名にします。また、URLはhttps://shohei-doi.github.io/となります。

1.3 Git (optional)

GitHubで直接、手動でウェブサイトのファイルをアップロードする場合はこのセクションと次のセクションは飛ばしてください。

VS Codeを経由してGitHubでウェブサイトを公開するために、OSに合わせてGitをインストールします。

  • インストール方法はいろいろあるようなので、調べてください。
  • VS codeをデフォルトに設定しておきましょう。
  • ユーザーネームとメールアドレスの登録まで行ってください。
git config --global user.name "ユーザー名"
git config --global user.email "メールアドレス"

1.4 VS codeとGitHubの連携 (optional)

Source Control（二股に分かれているひもみたいなボタン）からClone Repositoryをクリックします。

Clone from GitHubをクリックし、GitHubと連携し、先ほど作成したリポジトリを選択します。

Enterを押して、ウェブサイト用のフォルダを保存したいフォルダを選択します。

  • 例えば、Documentというフォルダを選択すると、その中に<username>.github.ioというフォルダが作成されます。

1.5 Quarto

自分のOSに合ったQuartoをインストールします。

また、VS CodeのExtentionsを押して、拡張機能としてのQuartoをインストールします。

2 ウェブサイトの作成

2.1 初期設定

ウェブサイトの雛形を作成します。

  • Ctrl-Shift-Pを押して、quartoと入力します。
  • Create Projectを選択します。
  • Website Projectを選択します。
  • 作成したフォルダ<username>.github.ioを選択します。
  • /を入力してEnterを押します。

うまくいっていると、index.qmdをはじめとするファイルが作成されています。

_quarto.ymlというファイルを開きます。

  • このyamlファイルはウェブサイト全体の設定を記述するものです。
project:
  type: website
1  output-dir: docs
1
この行を追記します。後にGitHubで公開する際のおまじないです。
yamlの注意点

_quarto.ymlや後述するyamlヘッダーでは、インデントとコロンのあとのスペースが重要です。これらを間違えると上手く動かないので気をつけてください。

about.qmdとstyles.cssというファイルを削除します。また、_quarto.ymlからも削除します。

website:
  title: "..."
  navbar:
    left:
      - index.qmd
1      - about.qmd
1
これを削除する。

2.2 レンダリング

index.qmdファイルを開き、右上のPreviewというボタンをクリックします。

  • index.qmdは一番最初に表示されるウェブサイトです。

\(\leadsto\)うまく行けば、右側に生成されたウェブサイトが表示されます。

2.3 Google Analytics (optional)

Google Analyticsとはウェブサイトへのアクセスなどを解析するサービスです。

  • Google Analyticsのアカウントを作成します。
  • プロパティを作成します。
    • 設定は適当で構いません。
  • プラットフォームでウェブを選択します。
    • URLはhttps://<username>.github.ioに、ストリーム名は適当に決めます。
  • 測定IDをコピーし、_quarto.ymlを開きます。
website:
  title: "..."
1  google-analytics: "G-..."
1
この行を追記します。

そのうち、測定が開始されます。

  • researchmapも測定できます。

3 ウェブサイトの公開

3.1 手動でアップロード

GitHubでウェブサイトのリポジトリを開き、docsフォルダごとアップロードします。

3.2 VS Code上でアップロード (optional)

ファイルを修正するたびにSource Controlをクリックして、次の作業を行います。

  • Changesの横の+ボタンをクリックして、変更を”add”します。
    • “add”したファイルを戻す場合は-ボタンをクリックします。
  • 上部のMessageに変更内容を簡単に記載し（半角英数字）、Commitをクリックします。

\(\leadsto\)これにより、変更内容がリポジトリに記録されます。

ウェブサイトを公開する場合は、pushを行います（次回からSync Changesというボタンでも可能）。

  • 初回はGitHubとの連携の許可を求められるかもしれません。

3.3 GitHub Pagesの設定

最後に、GitHubでリポジトリのページに飛び、SettingsのPagesでBranchをmasterのdocsに設定します。

少し、時間が経つとYour site is live at...と表示されますので、公開されたウェブサイトにアクセスします。

  • 最初の一回だけでOK。
  • https://<username>.github.ioでもアクセスできることを確認しましょう。

4 次回以降の手順

今後は、VS Codeで

  1. .qmdファイルを編集
  2. Reloadで変更を確認
  3. Previewでウェブサイトを作成
  4. add & commitで変更を保存
  5. pushで公開

という手順になります。