5分鐘站點生成神器——Docusaurus

来源:https://www.cnblogs.com/helong-123/archive/2022/05/11/16258928.html
-Advertisement-
Play Games

為什麼要使用Docusaurus Docusaurus 是 Facebook 專門為開源項目開發者提供的一款易於維護的靜態網站創建工具,使用 Markdown 即可更新網站。構建一個帶有主頁、文檔、API、幫助以及博客頁面的靜態網站,只需5分鐘。 Docusaurus 是一個靜態站點生成器。它構建了 ...


為什麼要使用Docusaurus

Docusaurus 是 Facebook 專門為開源項目開發者提供的一款易於維護的靜態網站創建工具,使用 Markdown 即可更新網站。構建一個帶有主頁、文檔、API、幫助以及博客頁面的靜態網站,只需5分鐘。

Docusaurus 是一個靜態站點生成器。它構建了一個具有快速客戶端導航的單頁應用程式,利用React的全部功能使您的站點具有交互性。它提供開箱即用的文檔功能,但可用於創建任何類型的網站(個人網站、產品、博客、營銷登錄頁面等)。

通過本教程中,你將從頭開始構建自己的應用,分別使用Docusaurus CLI 和 雲開發平臺

Docusaurus-CLI 快速搭建項目

一、搭建本地開發環境

  • Docusaurus 需要 Node.js版本 >= 14 或以上(可以通過運行檢查node -v)。您可以使用nvm在安裝的單台機器上管理多個 Node 版本。安裝 Node.js 時,建議您選中所有與依賴項相關的覆選框。

  • npm 包管理器 因為我們通常都會使用Docusaurus 提供的腳手架搭建項目結構,所以要下載並安裝 npm 包。本指南使用 npm 客戶端命令行界面,該界面預設安裝在 Node.js。要檢查你是否安裝了 npm 客戶端,請在終端視窗中運行 npm -v 。

  • Docusaurus 本質上是一組 npm包。

二、創建新的初始應用

  • 安裝 Docusaurus 最簡單的方法是使用命令行工具來幫助您搭建 Docusaurus 骨架網站。您可以在新的空存儲庫或現有存儲庫中的任何位置運行此命令,它將創建一個包含腳手架文件的新目錄。
npx create-docusaurus@latest my-website classic
  • 新建完成後,指定文件夾的目錄如下:
my-website
├── blog
│   ├── 2019-05-28-hola.md
│   ├── 2019-05-29-hello-world.md
│   └── 2020-05-30-welcome.md
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   └── mdx.md
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

三、啟動應用伺服器

進入工作區目錄,並啟動這個應用。

cd my-website
npm run start

npm run start 命令會構建本應用、啟動開發伺服器、監聽源文件,並且當那些文件發生變化時重新構建本應用,

也會打開瀏覽器,並訪問 http://localhost:3000/

你會發現本應用正運行在瀏覽器中。

參考文獻:https://docusaurus.io/

雲平臺一鍵部署Docusaurus

一、創建環境

想要一鍵部署Docusaurus,需要以下賬號和服務:

file

二、創建Docusaurus應用

file

  • 雲資源訪問授權。如果您之前沒有使用過雲開發平臺,會出現雲資源授權管理的選項,往下拉出現直至同意授權的字樣,點擊「同意授權」後出現授權成功,點擊進入「下一步」。

file

  • 綁定Github賬號。授權完成後選擇來源倉庫為Github,按照提示點擊去綁定,綁定GitHub帳號,登錄後並點擊Authorize Aliyunworkben允許雲開發平臺構建、發佈你的GitHub代碼為可訪問的網站。

file

  • 選擇fork好的“Docusaurus”代碼倉庫。選擇第一步中的代碼倉庫,主幹分支,並點擊下一步。主幹分支一般指的是代碼的master或main等分支。

file

填寫基本信息,完成創建。填寫基本信息並點擊「完成」。成功後進入到應用詳情和部署界面。

file

三、在日常環境部署

  • 一鍵進行應用部署。在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署,部署狀態變成綠色已部署以後可以點擊訪問部署網站查看效果。

file

  • 訪問Docusaurus網站。日常環境的測試功能變數名稱也是可以訪問的,點擊訪問已部署網站按鈕會出現一個彈出,點擊彈出上的立即訪問就能夠訪問已經部署好的站點了。在部署完成後,可以繼續本地編碼,並將代碼push到應用的“基本信息”中對應的代碼倉庫內。

file

多端應用一鍵上雲

現如今身處在隨時會到來新狀況的大環境下,做好自己便是在不安中樹立了一顆屹立不倒的松樹。作為開發者們每天都要面臨新的代碼、應用,保持隨時學習的狀態和能力也可讓自己多一份安穩。阿裡云云開發平臺的初衷是為每一位開發者提供免費、便捷的雲上研發工作平臺,通過學習與實操演練兩種模式,從入門到精通快速上手Serverless和雲開發技術。0門檻全雲端開發、隨時隨地線上協同、業界領先Serverless架構、行業應用一件初始化等特性也通過每次的實踐伴隨著你、我。

雲原生應用、主機應用部署、前端應用部署三大板塊的提供,供開發者們找到最合適自己神器,令開發工作事半功倍。其中滿足IoT語音技能、小程式、H5應用等開發者低門檻應用開發的需求;也支持代碼編譯部署到ECS主機伺服器的場景,幫助用戶管理傳統主機應用的能力;讓前後端應用能夠更高效地協同。平臺將持續與開發者一起共同成長,幫忙開發者更好、更快以及更低成本的開發,多端的應用更加快速的上雲。

file

【特別活動】雲開發2周年,0門檻部署上線4款熱門游戲,游戲暢玩還有AirPods耳機、筋膜槍等8種獎品任你挑啦,立即參與:https://workbench.aliyun.com/activities/bday


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 來源:編碼磚家 鏈接:cnblogs.com/xiaoyangjia/p/11267191.html 背景 最近頻繁出現慢SQL告警,執行時間最長的竟然高達5分鐘。導出日誌後分析,主要原因竟然是沒有命中索引和沒有分頁處理 。 其實這是非常低級的錯誤,我不禁後背一涼,團隊成員的技術水平亟待提高啊。改造 ...
  • 實現一個雷達掃描圖。 源代碼在TK_King/雷達 (gitee.com),自行下載就好了 製作思路 繪製圓形(或者稱之輪) 繪製分割線 繪製掃描範圍 添加掃描點 具體實現 首先我們使用自定義的控制項。你可以使用vs自動添加,也可以手動創建類。註意手動創建時要創建Themes/Generic.xaml ...
  • ODT文檔格式一種開放文檔格式(OpenDocument Text)。通常,ODT格式的文件可以使用LibreOffice Writer、MS Word或其他一些文檔編輯器來打開。我們在處理文檔時,可通過格式轉換的方式,將ODT轉為其他格式,或者將其他格式轉為ODT,來獲取目標文檔。本文,以C#及V ...
  • 背景: 先上個圖,看一下效果: SSO英文全稱Single Sign On(單點登錄)。SSO是在多個應用系統中,用戶只需要登錄一次就可以訪問所有相互信任的應用系統。它包括可以將這次主要的登錄映射到其他應用中用於同一個用戶的登錄的機制。 它是目前比較流行的企業業務整合的解決方案之一。(本段內容來自百 ...
  • 垃圾回收(GC)是托管語言必備的技術之一。GC 的性能是影響托管語言性能的關鍵。我們的 .NET 既能寫桌面程式 (WINFROM , WPF) 又能寫 web 程式 (ASP.NET CORE),甚至還能寫移動端程式。。。不同使用場景的程式對 GC 的風格也有不同的要求,比如桌面程式更註重界面的響 ...
  • rpm資源包下載 在一些內網或區域網環境中,無法通過 yum install xxx 進行程式包的下載安裝。 需要從具有外網環境的電腦上下載離線程式包,拷貝至內網環境中手動安裝。 方法一:使用 yum 下載 yum --downloadonly --downloaddir=/home/package ...
  • 1.第一個shell vi first.sh !/bin/bash 作者:Arya 編寫時間:2022-04-22 功能:this is my first blog! echo "this is my first shell!" 2.crond服務 以守護進程方式在無需人工干預的情況下來處理著一系列 ...
  • https://www.cnblogs.com/yeungchie/ XFCE是一款輕量級 Linux 桌面,當前版本已經將所有部件從 GTK2 更新到 GTK3,從D-Dbus Glib更新到GDBus,大部分組件支持Object Introspection(簡稱 GI,用於產生與解析 C 程式庫 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...