docusaurus を使用して Web サイトを構築し、github にデプロイします

Docusaurus は本質的にはnpm パッケージのセットです 。Node.js  v16.14 以降 ( node -v コマンドを実行してバージョン番号を確認できます)。

1. コマンド ライン ツールを使用して、Docusaurus を迅速かつ簡単にインストールし、Web サイト フレームワークを構築します。すぐに開始するには、クラシック テンプレートを使用します。テンプレート ファイルを含む新しいディレクトリが作成されます。

npx create-docusaurus@latest my-website classic

--typescript オプションを使用して、テンプレートの TypeScript バリアントを使用することもできます 。詳細については、Typescript のサポートを参照してください 。

npx create-docusaurus@latest my-website classic --typescript

2. インストールが成功したらプロジェクトを実行します。デフォルトでは、ブラウザは http://localhost:3000 で新しいウィンドウを自動的に開きます。

npm run start 或者 yarn start

3. 構築する

Docusaurus は、最新の静的 Web ページ ジェネレーターです。他の人がアクセスできるようにするには、Web サイトを静的コンテンツとして生成し、Web サーバーにアップロードする必要があります。サイトを構築するには、次のコマンドを使用します。

npm run build 或者 yarn run build

ディレクトリが生成され 、 GitHub Pages、Vercel、Netlifyなど の静的 Web ホスティング サービスbuild にアップロードできます。 

4. Github を例に挙げます。Github Pages にデプロイします。

(1) ローカルウェアハウスの作成とgithub上にリモートウェアハウスを作成

          通常、名前は自分のものです: xxx(アカウント名).github.io、「作成」をクリックします。

(2) ローカルウェアハウスまたは新規ウェアハウスとgithubウェアハウス間の接続を確立する

        注：ローカル倉庫とリモート倉庫を接続する際の注意点

// 这里不使main分支，直接改为gh-pages
git branch -M gh-pages
git push -u origin gh-pages

(3) docusaurusでダウンロードしたテンプレート内docusaurus.config.js文件配置 

module.exports = {
  // ...
  url: 'https://cfgjfy.github.io', // 你的网站URL（刚所创建的github仓库名）
  baseUrl: '/',
  projectName: 'cfgjfy.github.io', // 刚所创建的github仓库名
  organizationName: 'cfgjfy', // github账户名
  deploymentBranch: 'gh-pages', // 部署到的分支名
  // ...
};

(4) 導入

     git bash に次のコマンドを入力します

GIT_USER='github账户名' yarn deploy

注: 上記のコマンドを実行すると、クローン作成、構築、送信が 1 つのステップで完了します。手動でビルド コマンドを実行してから、それをホスティング サービスにデプロイする方がはるかに便利です。

(5) 倉庫の設定→ページをクリックします。

静的 Web ページには、上記の URL からアクセスできます。

Web サイトのコンテンツの具体的な構成については、ここでは詳しく説明しません。公式 Web サイトを参照してください。

はじめに | ドキュサウルス