Docusaurus 一鍵快速部署個人博客

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

一 、通過雲開發平臺快速創建初始化應用 1.創建相關應用模版請參考鏈接:5分鐘站點生成神器——Docusaurus 2.完成創建後就可以在github中查看到新增的Docusaurus倉庫 二 、 本地編寫個人博客 1.將應用模版克隆到本地 ● 首先假定你已經安裝了Git、node,沒有安裝請移步n ...


一 、通過雲開發平臺快速創建初始化應用

1.創建相關應用模版請參考鏈接:5分鐘站點生成神器——Docusaurus

2.完成創建後就可以在github中查看到新增的Docusaurus倉庫

截屏2022-04-22 下午3.36.35.png

二 、 本地編寫個人博客

1.將應用模版克隆到本地

● 首先假定你已經安裝了Git、node,沒有安裝請移步node官網進行安裝。克隆項目:

git clone + 項目地址

● 進入項目文件

cd Docusaurus

● 切換到feature/1.0.0 分支上

git checkout feature/1.0.0

● 安裝依賴包

npm install

● 啟動服務

npm run start

這裡打開瀏覽器3000埠,並出現預設頁面。

2.項目結構

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
├── package.json
├── src
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── styles.module.css
│       └── index.js
├── static
│   └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

  • /blog/ - 裡面就是寫博客文章的,都是 markdown 文件。
  • /docs/ - 裡面就是寫文檔的,也都是 markdown 文件。
  • /src/ - 源代碼文件夾,裡面有一個 css 文件夾,然後它裡邊有個 custom.css 裡面是寫自定義的 css 代碼的。
  • /src/pages - 裡邊放一些自定義的頁面,使用 react 語法來寫。
  • /static/ - 放靜態資源文件,這些文件會出現在最後打包出來的靜態網站裡面,在它的根目錄下邊,它下邊的 img 文件夾是放靜態圖片的。
  • /docusaurus.config.js - 這個是配置這個站點的。
  • /package.json - node.js 的工程配置文件。
  • /sidebar.js - 配置文檔頁面側邊欄,只有文檔頁面才有,用它來定義文檔的目錄結構。
    另外呢,也可以自己創建一個 theme 文件夾,裡邊可以定義一些組件用來替換預設主題裡面的一些組件。

3.配置為博客模式

docusaurus 預設是文檔風格的主頁,要是把它改成一個博客形式的,需要做一點點的配置。打開它的配置文件,docusaurus.config.js 。把 presets 這個配置改成如下所示:

presets: [
  [
    "@docusaurus/preset-classic",
    {
      // docs: {
      //   sidebarPath: require.resolve('./sidebars.js'),
      //   editUrl:
      //     'https://github.com/facebook/docusaurus/edit/master/website/',
      // },
      blog: {
        path: "./blog",
        routeBasePath: "/"
      }
      // 省略其它代碼
    }
  ]
];

如果不用文檔的話,就把 docs 這個刪除或者註釋了,然後加上 blog ,裡邊添加:

  • path 屬性,它的值為”./blog”,也就是指向 blog 的文件夾。
  • routeBasePath 屬性,這個是訪問這個博客的路徑,設置成/斜杠就是預設網站的首頁。
    然後把 src/pages 下邊 index.js 的改成別的名字或者是給刪除,這樣的話他就不會同時匹配這兩個文件了。

頂部導航的 docs 如果要去掉的話,可以找到 navBar 這個配置項,把 links 中的有關 docs 的這段刪掉:

{ to: "docs/doc1", label: "Docs", position: "left" }

4.發表第一篇博客

寫博客就是在 blog 裡邊創建一個 markdown 文件。標題開始部分是一個日期格式。Docusaurus 會自動把這個日期解析成咱們這個博客的發表日期,後邊跟著這個文件的名字,可以起個有意義的,比如說是博客的標題的英文,例如項目里的 Welcome 博客:

2019-05-30-welcome.md

文件,裡面第一段就是配置這個博客的一些基本信息:

---
id: welcome
title: Welcome
author: Yangshun Tay
author_title: Front End Engineer @ Facebook
author_url: https://github.com/yangshun
author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
tags: [facebook, hello, docusaurus]
---
  • id - 訪問這個博客的 URL。
  • title - 標題。
  • author - 作者。
  • author_title - 就是作者簡短的自我介紹,職位之類的。
  • author_image_url - 頭像。
  • tags - 博客標簽, 是個數組形式。
    如果文章太長想只展示一部分的話,可以加上:
<!--truncate-->

這個註釋就可以了,它會把它後邊的內容隱藏,然後顯示一個閱讀更多鏈接。這樣第一個博客就完成了。

三 、 雲端一鍵部署上線應用

1.上傳代碼

git add .
git commit -m '添加你的註釋'
git push

2.在日常環境部署

一鍵進行應用部署。在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署,部署狀態變成綠色已部署以後可以點擊訪問部署網站查看效果。
截屏2022-04-22 下午3.59.39.png

3.配置自定義功能變數名稱線上上環境上線

● 配置線上環境自定義功能變數名稱。在功能開發驗證完成後要線上上環境進行部署,線上上環境的「部署配置」-「自定義功能變數名稱」中填寫自己的功能變數名稱。例如我們添加一個二級功能變數名稱 company.workbench.fun 來綁定我們部署的前端應用。然後複製自定義功能變數名稱下方的API網關地址對添加的二級功能變數名稱進行CNAME配置。
undefined
● 配置CNAME地址。複製好 API網關功能變數名稱地址後,來到你自己的功能變數名稱管理平臺(此示例中的功能變數名稱管理是阿裡雲的功能變數名稱管理控制台,請去自己的功能變數名稱控制台操作)。添加記錄的「記錄類型」選擇「CNAME」,在「主機記錄」中輸入你要創建的二級功能變數名稱,這裡我們輸入「company」,在「記錄值」中粘貼我們之前複製的 API網關功能變數名稱地址,「TTL」保留預設值或者設置一個你認為合適的值即可。
undefined
● 線上上環境部署上線。回到雲開發平臺的應用詳情頁面,按照部署的操作,點擊線上環境的「部署按鈕」,部署完成以後就在你自定義的功能變數名稱進行了上線。CNAME 生效之後,我們輸入 company.workbench.fun(示例網址) 可以打開部署的頁面。至此,如何部署一個應用到線上環境,如何綁定自己的功能變數名稱來訪問一個線上的應用就完成了,趕緊部署自己的應用到線上環境,用自己的功能變數名稱玩起來吧 ;)

截屏2022-04-22 下午4.06.06.png

一鍵創建Docusaurus應用模版鏈接 :https://workbench.aliyun.com/application/front/create?fromConfig=4&fromRepo=sol_github_4

參考文獻:https://blog.csdn.net/fengqiuzhihua/article/details/104683781

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


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

-Advertisement-
Play Games
更多相關文章
  • 一、問題描述 1、項目需求要求使用PHP8.1.*版本 2、運行程式發現驗證碼不生效報錯如下: 二、錯誤描述 1、報錯信息得出:從浮點(數字)到整數的隱式轉換將失去精度 三、解決流程 1、找到報錯文件位置 vendor\topthink\think-captcha\src\Captcha.php l ...
  • 桑基圖,它的核心是對不同點之間,通過線來連接。線的粗細代表流量的大小。很多工具都能實現桑基 圖,比如:Excel、tableau,我們今天要用 Pyecharts 來繪製。 因為沒有用戶行為路徑相關的公開數據,所以本次實現可視化是根據泰坦尼克號,其生存與遇難的人的 數據,來分析流向路徑。學會思路,你 ...
  • 一個工作3年的小伙子,去面試被問到Spring裡面的問題。 這個問題比較簡單,但是他卻沒有回答上來。 雖然他可以通過搜索引擎找到答案,但是如果沒有理解,下次面試還是不會! 這個面試題是: “Spring中的Bean,作用域有哪些?” 對於這個問題,看看普通人和高手的回答。 普通人: 嗯。。。。。。。 ...
  • 你是否有遇到過這樣的情況,在開發過程中需要比較兩列數據,但使用文本比對工具的話他是按行基準比對的,我還得對每列數據先進行排序,但排序又去哪裡排, 想到 excel 可以排序 , 折騰下來,特別麻煩, 不知道為啥這麼一個小工具都沒有人提供, 這裡 sanri-tools-maven 提供了這個小工具, ...
  • 半年前我開源了 DreamScene2 一個小而快並且功能強大的 Windows 動態桌面軟體。有很多的人喜歡,這使我有了繼續做開源的信心。這是我的第二個開源作品 ScreenshotEx 一個簡單易用的 Windows 截屏增強工具。 歡迎 Star 和 Fork https://github.c ...
  • 在項目中有一個需求是需要在區域網內跨PC遠程調用一個程式,並且要求有界面顯示,調查了一些資料,能實現遠程調用的.Net技術大概有PsExec、WMI、Schedule Task。 這三種方式都做了一個嘗試,結果發現PsExec、WMI都只能在進程列表中看到程式執行,卻無法顯示界面,無法執行程式中的管 ...
  • 本文先給出“win10找不到無線網路報錯”的通用解決方案,併在方案中介紹本次出現的“Windows無法自動將IP協議堆棧綁定到網路適配器”問題。 ...
  • 針對假如已經是安裝了redis,只是是單部署,需要把他切換成redis集群+哨兵模式,我因為偷懶,就寫了個腳本來執行,各位看官,請品~你品~你細品~ 首先準備個升級包,放到任意路徑,內容如下: 第一個文件不用管,第二個跟第四個,是把裡面的配置改好,如何配置請參考我之前寫的redis集群一, 然後是u ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...