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
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...