Facebook Docusaurus 中文文档 发布网站

news/2024/4/27 9:12:08/文章来源:https://blog.csdn.net/weixin_34259159/article/details/88914256
此系列文章的应用示例已发布于 GitHub: docusaurus-docs-Zh_CN. 可以 Fork 帮助改进或 Star 关注更新. 欢迎 Star.

发布网站

你现在应该有一个在本地运行的网站。 一旦你将它定制为你喜欢样子,就是时候发布它了。 Docusaurus 生成一个静态 HTML 网站,准备好由您最喜爱的网络服务器或在线托管解决方案来提供服务。

构建静态 HTML 页面

要创建您的网站的静态版本,请在 website 的目录中运行以下脚本:

yarn run build # 或 `npm run build`

这将在 website 目录下生成 build 文件夹,其中包含 pages 中的所有文档和其他页面的 .html 文件。

托管静态 HTML 页面

此时,您可以抓取 website/build 文件夹中的所有文件,并将它们复制到您喜欢的 Web 服务器的“html”目录中。

例如,Apache 和 nginx 默认提供 /var/www/html 中的内容。 也就是说,选择一个 Web 服务器或提供商是不属于 Docusaurus 的范围。

使用 GitHub 页面

虽然选择 Web 服务器或主机不在 Docusaurus 的范围内,但 Docusaurus 的设计与开放源代码项目中最受欢迎的托管解决方案之一非常吻合:
GitHub Pages.

如果您已经在使用 GitHub 来托管您的项目,那么将您的 Docusaurus 站点部署到 GitHub Pages 是非常简单的。 你的代码库甚至不需要公开。

即使您的 repo 是私有的,发布到 gh-pages 分支的任何内容都将是 公开的。

大部分发布到 GitHub pages 的工作都是通过 publish-gh-pages 脚本自动完成的。 您只需确定脚本所需的一些参数的值即可。

siteConfig.js 中设置两个必需的参数:

  • organizationName: 拥有存储库的 GitHub 用户或组织。 在 Docusaurus 的情景下,这 GitHub 组织将是 "facebook"。
  • projectName: 您的项目的 GitHub 存储库的名称。 例如,Docusaurus 托管在 https://github.com/facebook/d...,所以在这种情景下我们的项目名称将是 "docusaurus"。
虽然我们建议在 siteConfig.js 中设置上面的内容,您也可以使用环境变量ORGANIZATION_NAMEPROJECT_NAME

其中一个必需的参数设置为环境变量:

  • GIT_USER: 具有提交访问权限的 GitHub 帐户的用户名。 对于你自己的仓库,这通常是你自己的 GitHub 用户名。

还有两个可选参数设置为环境变量:

  • USE_SSH: 如果设置为 true,则使用 SSH 代替 HTTPS 连接到 GitHub 仓库。 如果未设置此变量,则默认值是 HTTPS 。
  • CURRENT_BRANCH: 包含将部署的最新文档更改的分支。 通常情况下,分支是 master,但是除了 gh-pages 外,它可以是任何分支(默认或其他)。 如果没有设置这个变量,那么将使用当前的分支。
Docusaurus 还支持部署用户或组织站点。 只需将您的项目名称设置为 "_username_.github.io"(其中 username 是您在 GitHub 上的用户名或组织名称),发布脚本将自动将您的站点部署到 "master" 分支的根目录。

一旦获得了参数值信息,就可以继续运行发布脚本,确保您在各种参数占位符中插入了自己的值:

要直接从命令行运行脚本,可以使用以下方法,根据需要填写参数值。

GIT_USER=<GIT_USER> \CURRENT_BRANCH=master \USE_SSH=true \yarn run publish-gh-pages # 或 `npm run publish-gh-pages`
指定的 GIT_USER 必须具有对 organizationNameprojectName 组合中指定的存储库的访问权限。

您现在应该可以通过访问其 GitHub Pages 的 URL 来加载您的网站,这可能是 https://_username_.github.io/... ,或者如果您已经设置了自定义域名。 例如,Docusaurus 的自己的 GitHub 页面 URL 是 https://docusaurus.io(它也可以通过 https://docusaurus.io/ 访问),因为它是由 https://github.com/facebook/d... GitHub repo 的 gh-pages 分支提供的。我们强烈建议您阅读 GitHub Pages 文档 以了解更多关于这个托管解决方案的信息。

您可以在任何希望更新文档时运行该命令,并将更改部署到您的网站。 对于文档很少更改的站点,手动运行脚本可能没问题,记住手动部署更改也不是太麻烦。

当然,您可以通过持续集成(CI)自动执行发布过程。

使用持续集成实现自动化部署

持续集成(CI)服务通常用于在新提交签入源代码控制时执行例行任务。 这些任务可以是运行单元测试和集成测试的任意组合,自动构建,将包发布到 NPM,是的,将更改部署到您的网站。 你所需要做的就是自动部署你的网站,只要你的文档被更新,就调用 publish-gh-pages 脚本。 在下一节中,我们将介绍如何使用 Circle CI 这个流行的持续集成服务提供商。

使用 Circle CI

如果您已经为您的项目使用了 Circle CI,则只需将 Circle 配置为在发布步骤中运行 publish-gh-pages 脚本,就可以启用自动部署。

  1. 确保设置为 GIT_USER 的 GitHub 账户拥有对包含文档的 repo 的 write 访问权限,方法是在 repo 中勾选 Settings | Collaborators & teams
  2. GIT_USER 的身份登录到 GitHub。
  3. 转到 https://github.com/settings/t... 获取 GIT_USER 并生成一个新的 个人访问令牌,通过 repo 访问范围授予它完全控制私有存储库的权限。 将此令牌存放在安全的地方,确保不与任何人分享。 这个令牌可以用来代替你的 GitHub 密码来代表你的 GitHub 动作。
  4. 打开您的 Circle CI 仪表板,并导航到您的存储库的设置页面,然后选择 "Environment variables"。 该 URL 看起来像 https://circleci.com/gh/ORG/R...,其中 "ORG/REPO" 应该替换为您自己的 GitHub org/repo。
  5. 创建一个名为 "GITHUB_TOKEN" 的新环境变量,使用新生成的访问令牌作为值。
  6. 打开你的 circle.yml 文件,在 machine: 部分下添加以下内容,告诉 Circle 使用相对较新版本的 node 和 npm,如果可以,用 yarn 替换 npm:
machine:node:version: 6.11.2npm:version: 3.10.10
  1. 然后,将以下行添加到 deployment: 部分。 如果您没有 deployment: 部分,则可以将其添加到文件末尾。
deployment:website:branch: mastercommands:- git config --global user.email "<GITHUB_USERNAME>@users.noreply.github.com"- git config --global user.name "<YOUR_NAME>"- echo "machine github.com login <GITHUB_USERNAME> password $GITHUB_TOKEN" > ~/.netrc- cd website && npm install && GIT_USER=<GIT_USER> npm run publish-gh-pages

确保 <GIT_USER> 替换为将用于发布文档的 GitHub 帐户的实际用户名。

不要$ GITHUB_TOKEN 的实际值放在 circle.yml 中。 我们已经在步骤 3 中将其作为环境变量进行配置。

如果你想为你的 GitHub repo 连接使用 SSH,你可以设置 USE_SSH=true。 所以上面的命令看起来像这样:cd website && npm install && GIT_USER=<GIT_USER> USE_SSH=true npm run publish-gh-pages.

与手动运行 publish-gh-pages 脚本不同的是,当脚本在 Circle 环境中运行时,CURRENT_BRANCH 的值已经被定义为 CircleCI 中的一个环境变量,并且会被脚本自动获取。

现在,无论何时一个新的提交出现在 master 中,Circle CI 都会运行您的测试套件,如果一切通过,您的网站将通过 publish-gh-pages 脚本进行部署。

如果您更愿意使用部署密钥而不是个人访问令牌,则可以从 Circle CI instructions 添加 read/write 部署密钥。

提示 & 技巧

当使用 Circle CI 初始部署到 gh-pages 分支时,您可能会注意到,由于缺少测试,提交给 gh-pages 分支触发的一些作业无法成功运行。 您可以通过创建具有以下内容的基本 Circle CI 配置轻松解决此问题:

# Circle CI 2.0 Config File
# 这个配置文件将阻止测试在 gh-pages 分支上运行。
version: 2
jobs:build:machine: truebranches:ignore: gh-pagessteps:-run: echo "Skipping tests on gh-pages branch"

将这个文件保存为 config.yml,并将其放在 website/assets 文件夹内的 .circleci 文件夹中。

此系列文章的应用示例已发布于 GitHub: docusaurus-docs-Zh_CN. 可以 Fork 帮助改进或 Star 关注更新. 欢迎 Star.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_786824.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php异步调试和线上调试网站程序的方法

2019独角兽企业重金招聘Python工程师标准>>> 当碰到一个网站需要不间断运行&#xff0c;但又需要调试该网站的程序错误的时候&#xff0c;该如何办呢&#xff1f;是靠经验一点点猜测&#xff0c;还是直接打印错误信息让其在页面输出&#xff1f; 下面分享一种方法同…

河南建设厅网站群系统建设展新章

随着中央政府网站的改版革新后&#xff0c;全国各地的省市县都在突破创新&#xff0c;包括政府门户以为的各大委办局也在改变&#xff0c;从先前的长篇幅页面到现在的一屏展示信息小版面&#xff0c;这已经是颠覆式的改变了。当然不是这些年来中国式政府网站展现形式不好而是信…

完全用ajax开始的feedou的网站问题

一直对ajax的异步加载效果很喜欢&#xff0c;早在2000年的时候我们就在项目中使用ajax技术&#xff0c;只不过当时不叫ajax&#xff0c;只是javascript的脚本程序罢了&#xff0c;而且只是在很局部的地方用到它&#xff0c;例如组织目录的树型结构等&#xff0c;当时从没想过完…

用python和karrigell做网站.第一篇

从今天起,和大家一起学习用python/karrigell做网站.对于能搜到这篇文章的兄弟,一定是对karrigell是什么有大致的了解了,但是如果不知道也没关系.这个单词虽然很复杂,而且金山词霸不知道该怎么解释,但实际上的意思却很简单.karrigell,一个支持用python开发web程序的框架,说的再明…

已取消网页导航_企业网站建设中能提高用户体验的导航设计方法

网站导航设计是网站中一个很重要的因素&#xff0c;一个合理的导航设计不但利于搜索引擎优化&#xff0c;还对提升用户体验至关重要&#xff0c;迅速了解自己所处的位置&#xff0c;这对提高用户的转化率十分有用。在网站建设中做好各类导航设计对网站后期的优化推广十分有利。…

为什么要把网站的URL做成伪静态?

为什么80%的码农都做不了架构师&#xff1f;>>> 伪静态就是动态网页通过重写URL的方法实现去掉动态网页的参数&#xff0c;但在实际的网页目录中并没有必要实现存在重写的页面。伪静态有2种生成方式&#xff0c;一是框架型伪静态&#xff1b;二是利用组件把asp的后…

写一个简单的网站文件管理器

一时不知道从何说起了&#xff0c;网站文件管理器满天飞的&#xff0c;所以&#xff0c;纯粹是闲的蛋疼&#xff0c;才会做这个&#xff0c;对于我来说&#xff0c;这就是打游戏。 1.仿win7界面 2.仿win7操作 3.上传&#xff0c;下载&#xff0c;分享文件&#xff0c;这么说起来…

大型网站技术架构(六)网站的伸缩性架构

2019独角兽企业重金招聘Python工程师标准>>> 网站系统的伸缩性架构最重要的技术手段就是使用服务器集群功能&#xff0c;通过不断地向集群中添加服务器来增强整个集群的处理能力。“伸”即网站的规模和服务器的规模总是在不断扩大。 1、网站架构的伸缩性设计 网站的…

推荐16个下载超酷脚本的热门网站

2019独角兽企业重金招聘Python工程师标准>>> 编者按&#xff1a;如果你是脚本代码初学者&#xff0c;这16个网站上不仅有出色的案例&#xff0c;其中有些网站还有社区&#xff0c;可供你学习提高&#xff1b;如果你已是脚本代码巧匠&#xff0c;不妨把你的出色脚本放…

寄存在node.tpl.php中的seo

为什么80%的码农都做不了架构师&#xff1f;>>> if($page ! 0){//首先判断是否为节点单页而非文章列表页&#xff1b;$keys $info NULL;$info substr(filter_xss($node->content[body][#value], array()), 0, 240);$info preg_replace(([\r\n]), , $info);//…

XMPP相关网站

2019独角兽企业重金招聘Python工程师标准>>> 整理了下收藏夹&#xff0c;还有部分未整理... XMPP Standards Foundation Jabber/XMPP中文翻译计划看协议时可以参考&#xff0c;建议看英文&#xff0c;翻译的部分内容不大准确 XMPP Technologies Overview XMPP S…

网站投票程序

早前几个朋友需要帮忙投票&#xff0c;而现在的投票网站都基本上有个限制&#xff1a;一个ip一天只能头一次票。从网络上搜索到破解方法有两种&#xff1a;1、使用拨号网络接入&#xff0c;每次拨号成功后会自动分配ip&#xff1b;2、固定ip接入&#xff0c;可以采用代理方式&a…

目前开发网站用什么编码比较好?utf-8还是gb2312 ?

我们一般通俗的理解为&#xff1a;utf-8是世界性通用代码&#xff0c;也完美的支持中文编码&#xff0c;如果我们做的网站能让国外用户正常的访问&#xff0c;就最好用utf-8。GB2312属于中文编码&#xff0c;主要针对国内用户使用&#xff0c;如果国外用户访问GB2312编码的网站…

帮助查看本地表单元素样子的网站 - Native Form Elements

为什么80%的码农都做不了架构师&#xff1f;>>> 日期&#xff1a;2013-4-20 来源&#xff1a;GBin1.com 如果你想查看某个表单组建在特定浏览器或者操作系统上的长相的话&#xff0c;这个工具网站 - Native Form Elements 肯定能够帮你忙&#xff01; 它没有任何…

PPTV枯木难支,视频网站如何随波逐流

聚力传媒&#xff08;以下称“PPTV网站”&#xff09;是全球华人领先的、规模最大、拥有巨大影响力的视频媒体。而就在近日&#xff0c;PPTV已确认被阿里巴巴和湖南卫视耗资4亿美元收购&#xff0c;除了不疼不痒的细枝末节&#xff0c;交易基本完成&#xff0c;PPTV妥妥的缴了枪…

如何为网站标题添加logo图片

作为一名运维工程师,是应该具备一些前端的技能,比如html , css等 如何设置网页的图标,让网站看起来更加美观, 前言 对于网站 favicon.ico 图标的大小&#xff0c;建议大家选择 16x16 或者 32x32&#xff0c;再大也是完全没有必要的。效果不见涨&#xff0c;还可能会影响网站加…

24个最精彩的网站设计

每个网站设计者都有他自己的风格。通常他们的喜好和他们的想法都会在设计者的设计中表现出来。 颜色可以影响我们的行为、情感和心灵。事实上&#xff0c;颜色通常用做治疗精神病和其他精神上的行为能力的人。然而&#xff0c;当谈到网页设计&#xff0c;许多设计师会忽视有着神…

分享45个海量免费电子书下载网站

随着网络和信息技术的快速发展&#xff0c;电子书越来越流行。以Amazon Kindle为代表的电子书阅读器的出现改变了人们传统的阅读方式&#xff0c;如同iPod改变人们听音乐一样。如今&#xff0c;很多网上书店也推出了电子书商品&#xff0c;相比传统的纸质书&#xff0c;电子书便…

IIS日志-网站运维的好帮手

阅读目录 开始IIS日志包含了哪些信息IIS日志的配置如何分析IIS日志推荐的IIS日志分析方法IIS日志中的异常记录再谈 scwin32status64寻找性能问题寻找可改进的目标程序架构对IIS日志分析过程的影响对于一个需要长期维护的网站来说&#xff0c;如何让网站长久稳定运行是件很有意义…

分享32个超棒的实用移动网站(mobile website)布局设计

日期&#xff1a;2012-4-16 来源&#xff1a;GBin1.com 移动互联现在已经成为了互联网的新贵&#xff0c;我们不得不考虑如何更好的设计移动互联网。过去5到10年中基本上没有开发设计人员为移动设备设计UI。而到现在几乎每个人都使用智能手机来浏览互联网了。现在是大家认真考…