Verwenden Sie docusaurus, um eine Website zu erstellen und sie auf Github bereitzustellen

Docusaurus besteht im Wesentlichen aus einer Reihe von  NPM-Paketen . Node.js  v16.14 oder höher (Sie können  node -v den Befehl ausführen, um die Versionsnummer zu überprüfen).

1. Verwenden Sie Befehlszeilentools, um Docusaurus schnell und einfach zu installieren und ein Website-Framework zu erstellen. Verwenden Sie die klassische Vorlage, um schnell loszulegen. Es wird ein neues Verzeichnis mit Vorlagendateien erstellt:

npx create-docusaurus@latest my-website classic

Sie können auch  --typescript die Option nutzen, die TypeScript-Variante der Vorlage zu verwenden. Weitere Informationen finden Sie  unter Typescript-Unterstützung .

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

2. Führen Sie das Projekt nach erfolgreicher Installation aus. Standardmäßig öffnet der Browser automatisch ein neues Fenster unter http://localhost:3000.

npm run start 或者 yarn start

3. Bauen

Docusaurus ist ein moderner Generator für statische Webseiten. Wir müssen die Website als statischen Inhalt generieren und auf den Webserver hochladen, bevor andere darauf zugreifen können. Verwenden Sie zum Erstellen der Site die folgenden Befehle:

npm run build 或者 yarn run build

Es wird ein Verzeichnis generiert  , das dann auf  statische Webhosting-Dienste wie GitHub Pages , Vercel , Netlifybuild usw.  hochgeladen werden kann. 

4. Nehmen Sie Github als Beispiel: Stellen Sie es auf Github-Seiten bereit

(1) Erstellen Sie ein lokales Lager und ein Remote-Lager auf Github

          Der Name ist im Allgemeinen Ihr eigener: xxx(Kontoname).github.io, klicken Sie auf Erstellen

(2) Stellen Sie eine Verbindung zwischen dem lokalen Lager oder dem neuen Lager und dem Github-Lager her

        Hinweis: Punkte, die beim Herstellen einer Verbindung zwischen dem lokalen Lager und dem Remote-Lager zu beachten sind

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

(3) In der von docusaurus heruntergeladenen Vorlagedocusaurus.config.js文件配置 

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

(4) Bereitstellung

     Geben Sie den folgenden Befehl in Git Bash ein

GIT_USER='github账户名' yarn deploy

Hinweis: Führen Sie den obigen Befehl aus, um das Klonen, Erstellen und Senden in einem Schritt abzuschließen. Für uns ist es viel bequemer, den Build-Befehl manuell auszuführen und ihn dann auf einem Hosting-Dienst bereitzustellen.

(5) Klicken Sie auf die Einstellung----->Seiten des Lagers

Auf statische Webseiten kann über die oben genannte URL zugegriffen werden.

Auf die spezifische Konfiguration des Website-Inhalts werde ich hier nicht näher eingehen, Sie können die offizielle Website sehen:

Einleitung | Docusaurus