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 [email protected] 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
  • # 通過圖片流來返回圖片 # 前言 之前寫了個圖片介面,然後做了個授權,但是光返回圖片地址雖然能適應大部分需求,但是考慮到有些人不想去處理返回值,也是做了個直接返回圖片流的介面。 # 介面展示 ## 返回指定寬度和高度圖片流 ![image](https://img2023.cnblogs.com/ ...
  • System.Speech是.NET框架的一部分,提供了語音識別和語音合成的功能。通過使用System.Speech命名空間中的類,開發人員可以在.NET應用程式中實現語音識別功能。 在本文中,我將演示如何使用 System.Speech.NET,這是開發語音應用程式比較牛逼的內庫。它適用於 .NE ...
  • 導航屬性 導航屬性是作為.NET ORM核心功能中的核心,在SqlSugar沒有支持導航屬性前,都說只是一個高級DbHelper, 經過3年的SqlSugar重構已經擁有了一套 非常成熟的導航屬性體系,本文不是重點講SqlSugar而是重點講導航屬性的作用,讓更多寫Sql人還未使用ORM的人瞭解到O ...
  • SM2是國家密碼管理局於2010年12月17日發佈的橢圓曲線公鑰密碼演算法。 產生背景: 隨著密碼技術和電腦技術的發展,目前常用的1024位RSA演算法面臨嚴重的安全威脅,我們國家密碼管理部門經過研究,決定採用SM2橢圓曲線演算法替換RSA演算法。 SM2演算法和RSA演算法都是公鑰密碼演算法,SM2演算法是一種 ...
  • # 使用c#實現23種常見的設計模式 設計模式通常分為三個主要類別: - 創建型模式 - 結構型模式 - 行為型模式。 這些模式是用於解決常見的對象導向設計問題的最佳實踐。 以下是23種常見的設計模式並且提供`c#代碼案例`: ## 創建型模式: ### 1. 單例模式(Singleton) ``` ...
  • ## 一:背景 ### 1. 講故事 在這麼多的案例分析中,往往會發現一些案例是卡死線上程的內核態棧上,但拿過來的dump都是用戶態模式下,所以無法看到內核態棧,這就比較麻煩,需要讓朋友通過其他方式生成一個藍屏的dump,這裡我們簡單彙總下。 ## 二:如何生成內核態dump ### 1. 案例代碼 ...
  • 有時候,我們為了方便,我們往往使用擴展函數的代碼方式創建很多GridView的操作功能,如在隨筆《在DevExpress中使用BandedGridView表格實現多行表頭的處理》中介紹過多行表頭的創建及綁定處理,在《基於DevExpress的GridControl實現的一些界面處理功能》也介紹了一些... ...
  • # 1、背景 在我們開發的過程中有這麼一種場景, `/projectA` 目錄是 `hadoopdeploy`用戶創建的,他對這個目錄有`wrx`許可權,同時這個目錄屬於`supergroup`,在這個組中的用戶也具有這個目錄的`wrx`許可權,對於其他人,不可訪問這個目錄。現在有這麼一個特殊的用戶`r ...
  • 基於java的倉庫管理系統設計與實現,可適用於出庫、入庫、庫存管理,基於java的出入庫管理,java出入庫管理系統,基於java的WMS倉庫管理系統,庫存物品管理系統。 ...
  • 清醒點[toc] # Java虛擬線程 > 翻譯自 screencapture-pradeesh-kumar-medium-an-era-of-virtual-threads-java ```mermaid flowchart LR introduction-->a(why thread)-->b( ...