Docusaurus 設定方法 Site Metadata - なんとなくのブログ

Site metadata

f:id:treehitsuji:20210824123358p:plain

上記に詳しい説明がありますが、以下の設定が必須のようです。

title

文字列で設定、WEBサイトとして設定した場合のタイトル、HTMLのヘッダー<head>: 文書メタデータ (ヘッダー) 要素の<title>に設定される。
さらに、useDocusaurusContext()でReact内部にも持ち込める。

設定例

module.exports = {
  title: 'おれおれサイト',
};

サイトヘッダー

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Docusaurus">
    <title>おれおれサイト</title>
    <link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="おれおれサイト Blog RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="おれおれサイト Blog Atom Feed">
    <script defer src="/runtime~main.js"></script><script defer src="/main.js"></script><link href="/styles.css" rel="stylesheet">
  </head>};

JSX

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
      </div>
    </header>
  );
}

url

文字列で設定、WEBサイトとして設定した場合のトップレベルとなるホスト名、
たとえはhttps://facebook.github.io とかhttps://facebook.github.io/metro/　とかの場合、青色の部分を設定

設定例

module.exports = {
  url: 'https://docusaurus.io',
};

baseUrl

文字列で設定、WEBサイトとして設定した場合のホスト名+パスとなる部分たとえはhttps://facebook.github.ioの場合は / を設定
https://facebook.github.io/metro/　とかの場合、濃い青色の部分を設定 metro/
決まりとして最後はスラッシュ/で終えなければいけないようです。

設定例

module.exports = {
  baseUrl: '/',
};

module.exports = {
  baseUrl: 'metro/',
};