草庐IT

5分钟站点生成神器——Docusaurus

萌褚 2023-03-28 原文

涓轰粈涔堣浣跨敤Docusaurus

Docusaurus 鏄?Facebook 涓撻棬涓哄紑婧愰」鐩紑鍙戣€呮彁渚涚殑涓€娆炬槗浜庣淮鎶ょ殑闈欐€佺綉绔欏垱寤哄伐鍏凤紝浣跨敤 Markdown 鍗冲彲鏇存柊缃戠珯銆傛瀯寤轰竴涓甫鏈変富椤点€佹枃妗c€丄PI銆佸府鍔╀互鍙婂崥瀹㈤〉闈㈢殑闈欐€佺綉绔欙紝鍙渶5鍒嗛挓銆?/p>

Docusaurus 鏄竴涓潤鎬佺珯鐐圭敓鎴愬櫒銆傚畠鏋勫缓浜嗕竴涓叿鏈夊揩閫熷鎴风瀵艰埅鐨勫崟椤靛簲鐢ㄧ▼搴忥紝鍒╃敤React鐨勫叏閮ㄥ姛鑳戒娇鎮ㄧ殑绔欑偣鍏锋湁浜や簰鎬с€傚畠鎻愪緵寮€绠卞嵆鐢ㄧ殑鏂囨。鍔熻兘锛屼絾鍙敤浜庡垱寤轰换浣曠被鍨嬬殑缃戠珯锛堜釜浜虹綉绔欍€佷骇鍝併€佸崥瀹€佽惀閿€鐧诲綍椤甸潰绛夛級銆?/p>

閫氳繃鏈暀绋嬩腑锛屼綘灏嗕粠澶村紑濮嬫瀯寤鸿嚜宸辩殑搴旂敤锛屽垎鍒娇鐢―ocusaurus CLI 鍜?浜戝紑鍙戝钩鍙?/p>

Docusaurus-CLI 蹇€熸惌寤洪」鐩?/h2>

涓€銆佹惌寤烘湰鍦板紑鍙戠幆澧?/h3>
  • Docusaurus 闇€瑕?Node.js鐗堟湰 >= 14 鎴栦互涓婏紙鍙互閫氳繃杩愯妫€鏌ode -v锛夈€傛偍鍙互浣跨敤nvm鍦ㄥ畨瑁呯殑鍗曞彴鏈哄櫒涓婄鐞嗗涓?Node 鐗堟湰銆傚畨瑁?Node.js 鏃讹紝寤鸿鎮ㄩ€変腑鎵€鏈変笌渚濊禆椤圭浉鍏崇殑澶嶉€夋銆?/li>
  • npm 鍖呯鐞嗗櫒 鍥犱负鎴戜滑閫氬父閮戒細浣跨敤Docusaurus 鎻愪緵鐨勮剼鎵嬫灦鎼缓椤圭洰缁撴瀯锛屾墍浠ヨ涓嬭浇骞跺畨瑁?npm 鍖呫€傛湰鎸囧崡浣跨敤 npm 瀹㈡埛绔懡浠よ鐣岄潰锛岃鐣岄潰榛樿瀹夎鍦?Node.js銆傝妫€鏌ヤ綘鏄惁瀹夎浜?npm 瀹㈡埛绔紝璇峰湪缁堢绐楀彛涓繍琛?npm -v 銆?/li>
  • Docusaurus 鏈川涓婃槸涓€缁?npm鍖呫€?/li>

浜屻€佸垱寤烘柊鐨勫垵濮嬪簲鐢?/h3>
  • 瀹夎 Docusaurus 鏈€绠€鍗曠殑鏂规硶鏄娇鐢ㄥ懡浠よ宸ュ叿鏉ュ府鍔╂偍鎼缓 Docusaurus 楠ㄦ灦缃戠珯銆傛偍鍙互鍦ㄦ柊鐨勭┖瀛樺偍搴撴垨鐜版湁瀛樺偍搴撲腑鐨勪换浣曚綅缃繍琛屾鍛戒护锛屽畠灏嗗垱寤轰竴涓寘鍚剼鎵嬫灦鏂囦欢鐨勬柊鐩綍銆?/li>
npx create-docusaurus@latest my-website classic
  • 鏂板缓瀹屾垚鍚庯紝鎸囧畾鏂囦欢澶圭殑鐩綍濡備笅锛?/li>
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

涓夈€佸惎鍔ㄥ簲鐢ㄦ湇鍔″櫒

杩涘叆宸ヤ綔鍖虹洰褰曪紝骞跺惎鍔ㄨ繖涓簲鐢ㄣ€?/p>

cd my-website
npm run start

npm run start 鍛戒护浼氭瀯寤烘湰搴旂敤銆佸惎鍔ㄥ紑鍙戞湇鍔″櫒銆佺洃鍚簮鏂囦欢锛屽苟涓斿綋閭d簺鏂囦欢鍙戠敓鍙樺寲鏃堕噸鏂版瀯寤烘湰搴旂敤锛?/p>

涔熶細鎵撳紑娴忚鍣紝骞惰闂?http://localhost:3000/ 銆?/p>

浣犱細鍙戠幇鏈簲鐢ㄦ杩愯鍦ㄦ祻瑙堝櫒涓€?/p>

鍙傝€冩枃鐚細https://docusaurus.io/

浜戝钩鍙颁竴閿儴缃睤ocusaurus

涓€銆佸垱寤虹幆澧?/h3>

鎯宠涓€閿儴缃睤ocusaurus锛岄渶瑕佷互涓嬭处鍙峰拰鏈嶅姟锛?/p>

  • Github璐﹀彿 (https://github.com/)锛?/li>
  • 闃块噷浜戣处鍙凤紝骞朵娇鐢ㄩ樋閲屼簯璐﹀彿鐧诲綍浜戝紑鍙戝钩鍙?(https://workbench.aliyun.com/)锛屼负淇濊瘉鏈€濂界殑浣跨敤浣撻獙锛岃浣跨敤Chrome娴忚鍣ㄣ€傚紑閫歄SS鏈嶅姟銆?/li>
  • 鏈紑閫氶樋閲屼簯OSS鐨勭敤鎴凤紝鐐瑰嚮閾炬帴 (https://workbench.aliyun.com/product/open?code=oss)寮€閫歄SS鏈嶅姟銆侽SS寮€閫氬厤璐癸紝鏈変竴瀹氱殑鍏嶈垂棰濆害锛岃秴杩囬搴︿箣鍚庢寜閲忎粯璐广€?/li>
file

浜屻€佸垱寤篋ocusaurus搴旂敤

  • 鍒涘缓鍓嶇搴旂敤銆傛墦寮€蹇€熷紑濮?https://workbench.aliyun.com/app锛屾壘鍒?Docusaurus 鐐瑰嚮鍒涘缓銆屽垱寤哄簲鐢ㄣ€嶆寜閽€?/li>
file
  • 浜戣祫婧愯闂巿鏉冦€傚鏋滄偍涔嬪墠娌℃湁浣跨敤杩囦簯寮€鍙戝钩鍙帮紝浼氬嚭鐜颁簯璧勬簮鎺堟潈绠$悊鐨勯€夐」锛屽線涓嬫媺鍑虹幇鐩磋嚦鍚屾剰鎺堟潈鐨勫瓧鏍凤紝鐐瑰嚮銆屽悓鎰忔巿鏉冦€嶅悗鍑虹幇鎺堟潈鎴愬姛锛岀偣鍑昏繘鍏ャ€屼笅涓€姝ャ€嶃€?/li>
file
  • 缁戝畾Github璐﹀彿銆傛巿鏉冨畬鎴愬悗閫夋嫨鏉ユ簮浠撳簱涓篏ithub锛屾寜鐓ф彁绀虹偣鍑诲幓缁戝畾锛岀粦瀹欸itHub甯愬彿锛岀櫥褰曞悗骞剁偣鍑籄uthorize Aliyunworkben鍏佽浜戝紑鍙戝钩鍙版瀯寤恒€佸彂甯冧綘鐨凣itHub浠g爜涓哄彲璁块棶鐨勭綉绔欍€?/li>
file
  • 閫夋嫨fork濂界殑鈥淒ocusaurus鈥濅唬鐮佷粨搴撱€傞€夋嫨绗竴姝ヤ腑鐨勪唬鐮佷粨搴擄紝涓诲共鍒嗘敮锛屽苟鐐瑰嚮涓嬩竴姝ャ€備富骞插垎鏀竴鑸寚鐨勬槸浠g爜鐨刴aster鎴杕ain绛夊垎鏀€?/li>
file

濉啓鍩烘湰淇℃伅锛屽畬鎴愬垱寤恒€傚~鍐欏熀鏈俊鎭苟鐐瑰嚮銆屽畬鎴愩€嶃€傛垚鍔熷悗杩涘叆鍒板簲鐢ㄨ鎯呭拰閮ㄧ讲鐣岄潰銆?/p>

file

涓夈€佸湪鏃ュ父鐜閮ㄧ讲

  • 涓€閿繘琛屽簲鐢ㄩ儴缃层€傚湪搴旂敤璇︽儏椤甸潰鐐瑰嚮鏃ュ父鐜鐨勩€岄儴缃层€嶆寜閽繘琛屼竴閿儴缃诧紝閮ㄧ讲鐘舵€佸彉鎴愮豢鑹插凡閮ㄧ讲浠ュ悗鍙互鐐瑰嚮璁块棶閮ㄧ讲缃戠珯鏌ョ湅鏁堟灉銆?/li>
file
  • 璁块棶Docusaurus缃戠珯銆傛棩甯哥幆澧冪殑娴嬭瘯鍩熷悕涔熸槸鍙互璁块棶鐨勶紝鐐瑰嚮璁块棶宸查儴缃茬綉绔欐寜閽細鍑虹幇涓€涓脊鍑猴紝鐐瑰嚮寮瑰嚭涓婄殑绔嬪嵆璁块棶灏辫兘澶熻闂凡缁忛儴缃插ソ鐨勭珯鐐逛簡銆傚湪閮ㄧ讲瀹屾垚鍚庯紝鍙互缁х画鏈湴缂栫爜锛屽苟灏嗕唬鐮乸ush鍒板簲鐢ㄧ殑鈥滃熀鏈俊鎭€濅腑瀵瑰簲鐨勪唬鐮佷粨搴撳唴銆?/li>
file

澶氱搴旂敤涓€閿笂浜?/h2>

鐜板浠婅韩澶勫湪闅忔椂浼氬埌鏉ユ柊鐘跺喌鐨勫ぇ鐜涓嬶紝鍋氬ソ鑷繁渚挎槸鍦ㄤ笉瀹変腑鏍戠珛浜嗕竴棰楀惫绔嬩笉鍊掔殑鏉炬爲銆備綔涓哄紑鍙戣€呬滑姣忓ぉ閮借闈复鏂扮殑浠g爜銆佸簲鐢紝淇濇寔闅忔椂瀛︿範鐨勭姸鎬佸拰鑳藉姏涔熷彲璁╄嚜宸卞涓€浠藉畨绋炽€傞樋閲屼簯浜戝紑鍙戝钩鍙扮殑鍒濊》鏄负姣忎竴浣嶅紑鍙戣€呮彁渚涘厤璐广€佷究鎹风殑浜戜笂鐮斿彂宸ヤ綔骞冲彴锛岄€氳繃瀛︿範涓庡疄鎿嶆紨缁冧袱绉嶆ā寮忥紝浠庡叆闂ㄥ埌绮鹃€氬揩閫熶笂鎵婼erverless鍜屼簯寮€鍙戞妧鏈€?闂ㄦ鍏ㄤ簯绔紑鍙戙€侀殢鏃堕殢鍦板湪绾垮崗鍚屻€佷笟鐣岄鍏圫erverless鏋舵瀯銆佽涓氬簲鐢ㄤ竴浠跺垵濮嬪寲绛夌壒鎬т篃閫氳繃姣忔鐨勫疄璺典即闅忕潃浣犮€佹垜銆?/p>

浜戝師鐢熷簲鐢ㄣ€佷富鏈哄簲鐢ㄩ儴缃层€佸墠绔簲鐢ㄩ儴缃蹭笁澶ф澘鍧楃殑鎻愪緵锛屼緵寮€鍙戣€呬滑鎵惧埌鏈€鍚堥€傝嚜宸辩鍣紝浠ゅ紑鍙戝伐浣滀簨鍗婂姛鍊嶃€傚叾涓弧瓒矷oT璇煶鎶€鑳姐€佸皬绋嬪簭銆丠5搴旂敤绛夊紑鍙戣€呬綆闂ㄦ搴旂敤寮€鍙戠殑闇€姹傦紱涔熸敮鎸佷唬鐮佺紪璇戦儴缃插埌ECS涓绘満鏈嶅姟鍣ㄧ殑鍦烘櫙锛屽府鍔╃敤鎴风鐞嗕紶缁熶富鏈哄簲鐢ㄧ殑鑳藉姏锛涜鍓嶅悗绔簲鐢ㄨ兘澶熸洿楂樻晥鍦板崗鍚屻€傚钩鍙板皢鎸佺画涓庡紑鍙戣€呬竴璧峰叡鍚屾垚闀匡紝甯繖寮€鍙戣€呮洿濂姐€佹洿蹇互鍙婃洿浣庢垚鏈殑寮€鍙戯紝澶氱鐨勫簲鐢ㄦ洿鍔犲揩閫熺殑涓婁簯銆?/p>

file

銆愮壒鍒椿鍔ㄣ€戜簯寮€鍙?鍛ㄥ勾锛?闂ㄦ閮ㄧ讲涓婄嚎4娆剧儹闂ㄦ父鎴忥紝娓告垙鐣呯帺杩樻湁AirPods鑰虫満銆佺瓔鑶滄灙绛?绉嶅鍝佷换浣犳寫鍟︼紝绔嬪嵆鍙備笌锛?a href="https://links.jianshu.com/go?to=https%3A%2F%2Fworkbench.aliyun.com%2Factivities%2Fbday" target="_blank">https://workbench.aliyun.com/activities/bday

有关5分钟站点生成神器——Docusaurus的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案? - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  3. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件,并创建一个临时验证的url以发送给同事。(理想情况下,这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针,它似乎不符合这个标准,但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  4. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手,所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格,我想要的三列是:公司名称、公司描述和Logo。对于名称,我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串,然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列? 最佳答案 对于“文本”数

  5. ruby-on-rails - 如何生成传递一些自定义参数的 `link_to` URL? - 2

    我正在使用RubyonRails3.0.9,我想生成一个传递一些自定义参数的link_toURL。也就是说,有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的?如果我想通过传递一些

  6. ruby-on-rails - 如何在 Rails 3 中创建自定义脚手架生成器? - 2

    有这些railscast。http://railscasts.com/episodes/218-making-generators-in-rails-3有了这个,你就会知道如何创建样式表和脚手架生成器。http://railscasts.com/episodes/216-generators-in-rails-3通过这个,您可以了解如何添加一些文件来修改脚手架View。我想把两者结合起来。我想创建一个生成器,它也可以创建脚手架View。有点像RyanBates漂亮的生成器或web_app_themegem(https://github.com/pilu/web-app-theme)。我

  7. 报告回顾丨模型进化狂飙,DetectGPT能否识别最新模型生成结果? - 2

    导读语言模型给我们的生产生活带来了极大便利,但同时不少人也利用他们从事作弊工作。如何规避这些难辨真伪的文字所产生的负面影响也成为一大难题。在3月9日智源Live第33期活动「DetectGPT:判断文本是否为机器生成的工具」中,主讲人Eric为我们讲解了DetectGPT工作背后的思路——一种基于概率曲率检测的用于检测模型生成文本的工具,它可以帮助我们更好地分辨文章的来源和可信度,对保护信息真实、防止欺诈等方面具有重要意义。本次报告主要围绕其功能,实现和效果等展开。(文末点击“阅读原文”,查看活动回放。)Ericmitchell斯坦福大学计算机系四年级博士生,由ChelseaFinn和Chri

  8. python - 帮我找到合适的 ruby​​/python 解析器生成器 - 2

    我使用的第一个解析器生成器是Parse::RecDescent,它的指南/教程很棒,但它最有用的功能是它的调试工具,特别是tracing功能(通过将$RD_TRACE设置为1来激活)。我正在寻找可以帮助您调试其规则的解析器生成器。问题是,它必须用python或ruby​​编写,并且具有详细模式/跟踪模式或非常有用的调试技术。有人知道这样的解析器生成器吗?编辑:当我说调试时,我并不是指调试python或ruby​​。我指的是调试解析器生成器,查看它在每一步都在做什么,查看它正在读取的每个字符,它试图匹配的规则。希望你明白这一点。赏金编辑:要赢得赏金,请展示一个解析器生成器框架,并说明它的

  9. ruby - 如何为 pbcopy 生成富文本链接 - 2

    我一直在玩一个脚本,它在Chrome中获取选定的文本并在Google中查找它,提供四个最佳选择,然后粘贴相关链接。它以不同的格式粘贴,具体取决于当前在Chrome中打开的页面-DokuWiki打开的DokuWiki格式,普通网站的HTML,我想要我的WordPress所见即所得编辑器的富文本。我尝试使用pbpaste-Preferrtf来查看没有其他样式的富文本链接在粘贴板上的样子,但它仍然输出纯文本。在文本编辑中保存文件并进行试验后,我想出了以下内容text=%q|{\rtf1{\field{\*\fldinst{HYPERLINK"URL"}}{\fldrsltTEXT}}}|te

  10. Ruby 等同于 Sphinx 文档生成器? - 2

    Ruby有一些不错的文档生成器,例如Yard、rDoc,甚至Glyph。问题是Sphinx可以做网站、PDF、epub、LaTex等。它在重组文本中完成所有这些事情。在Ruby世界中有替​​代方案吗?也许是程序的组合?如果我也能使用Markdown就更好了。 最佳答案 自1.0版以来,Sphinx有了“域”的概念,它是从Python和/或C以外的语言标记代码实体(如方法调用、对象、函数等)的方法。有一个rubydomain,所以你可以只使用Sphinx本身。您唯一会缺少的(我认为)是Sphinx使用autodoc从源代码自动创建文档

随机推荐