当前位置: 首页 > Web前端 > JavaScript

Day75-100Docusaurus+GitHubPages+GithubActions自动部署博客

时间:2023-03-27 12:55:53 JavaScript

(1)需求我想建立自己的博客站点。(二)方案一、idea手动打包后,可以发布到GitHubPages;GithubActions实现CICD提交代码的自动部署;2.使用的技术是DocusaurusMarkdownGitHubPagesGithubTokenGithubActions3。手动安装实现步骤安装步骤Docusaurus官网有https://www.docusaurus.cn/doc...(1)安装脚手架npxcreate-docusaurus@latestmy-websiteclassic安装完成后项目目录如下:my-网站├──博客│├──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│└──页面│├──styles.module.css│└──index.js├──static│└──img├──docusaurus.config.js├──package.json├──README.md├──sidebars.js└──yarn.lock目录说明:/blog/-包含博客的Markdown文件。如果您关闭了博客,则可以删除该目录。您还可以通过设置路径参数来更改此目录的名称。可以在博客功能指南docs/docs/-包含文档的Markdown文件中找到更多详细信息。侧边栏中文档的顺序可以在sidebars.js中自定义。如果您关闭了文档,则可以删除此目录。您还可以通过设置路径参数来更改此目录的名称。可以在文档功能指南/src/中找到更多详细信息-非文档文件,例如独立页面或自定义React组件。您不必严格遵守将非文档文件放在这里,但将它们集中在此目录中可以更轻松地管理,以防您需要进行一些格式验证或处理/src/pages-此目录中的任何扩展名为JSX/TSX/MDX将被转换为网站的单独页面。更多详细信息可以在单独的页面指南/static/-静态文件目录中找到。这里的所有内容都将被复制到最终构建目录的根目录中/docusaurus.config.js-包含站点配置的配置文件。相当于Docusaurus1/package.json中的siteConfig.js文件——Docusaurus网站也是一个React应用。你可以在/sidebars.js中安装和使用你想要的任何npm包-在生成文档时使用这个文件来指定侧边栏中文档的顺序(2)本地启动命令cdmy-websitenpmrunstart(3)配置这四个文件不会错的。url:'https://iguoxing.github.io',baseUrl:'/iguoxing/',organizationName:'iguoxing',//通常是你的GitHuborg/用户名.projectName:'iguoxing.github.io',//通常是你的repo名称。(4)本地打包npmrunbuild(5)手动发布命令GIT_USER=iguoxingUSE_SSH=trueyarndeploy4、自动化部分实现步骤(1)新建gh-pages支持(2)根目录.github/workflows/documentation.yml文件文件配置如下#Copyright2022zhaoguoxing##LicensedundertheApacheLicense,Version2.0(the"License");#除非遵守许可证,否则您不得使用此文件。#您可以获得一份许可证位于##http://www.apache.org/licenses/LICENSE-2.0##除非适用法律要求或书面同意,否则根据许可证分发的软件#按“原样”分发,#没有任何明示或暗示的保证或条件。#请参阅许可证以了解特定语言的管理权限和#许可证下的限制。名称:部署ArdenGithub页面:推送:分支机构:-mainjobs:build-and-deploy:runs-on:ubuntu-lateststeps:-name:Checkout使用:actions/checkout@mainwith:persist-credentials:false-name:InstallandBuildrun:|npminstallnpmrun-scriptbuild-name:Deploy使用:JamesIves/github-pages-deploy-action@releases/v3with:ACCESS_TOKEN:${{secrets.ACCESS_TOKEN}}BRANCH:gh-pagesFOLDER:buildBUILD_SCRIPT:npminstall&&npmrunbuild(3)配置GitHubAccessTokenhttps://docs.github.com/cn/au...(4)提交代码后即可实现。这是我实现的效果;https://iguoxing.github.io/ig...5.记录我的几个问题(1)【DocusaurusError】运行gitpush命令失败。您使用的GitHub用户帐户是否具有对存储库的推送访问权限?OrganizationName使用GitHub用户名;(2)此工作流程尚未运行。修改分支名称为主要参考链接https://juejin.cn/post/693684...写在学习路上的遗言中,经常懈怠《有想学技术需要监督的同学嘛~》https://mp.weixin.qq.com/s/飞...