如果你需要某个 action,不必自己写复杂的脚本,直接引用他人写好的 action 即可,整个持续集成部署过程,就变成了一个 actions 的组合。...3.自动部署 通过 VuePress 将 Markdown 文件生成静态网站,为了方便手动构建,我写了一个 Shell 脚本: #!...# 脚本出错立即退出 set -e # 生成静态文件,目录为 vuepress-docs/.vuepress/dist npm run docs:build rm -rf docs mv vuepress-docs...因为我经常需要修改书籍内容,为了提高构建部署的效率,我将上述手动操作的过程通过 Github Actions 完成,实现自动化构建部署。...我的工作流需要做如下几件事情: 拉取仓库 安装 Node.js,因为 VuePress 是基于 Node.js 实现的。 执行 npm install 安装 VuePress 和相关插件。
动态 Web 服务各种类型的 Web 应用,提供默认域名、自定义域名、HTTPS 和 CDN 加速等功能,提升 Web 应用的性能和安全性,此外还提供基于 Git 的工作流、DevOps 流程和加速开发部署流程...VuePress :VuePress 是一个以 Markdown 为中心的静态网站生成器。.../.cache docs/.vuepress/.temp dist 部署项目 1.将代码上传到远程仓库 2.访问 Web 应用托管 控制台,新建应用 从Git仓库导入,授权自己的 git 账号 [新建应用...] 3.选择要导入的项目,然后进行配置 [配置命令] 4.部署成功后,在应用详情页,可以看到项目域名 [应用详情] 5.访问域名就可以看到下图页面 [项目页面] 6.可以到应用设置中,添加自己的域名 [...随后将会触发 Web 应用托管的自动构建及部署。
前言 正常我们利用 Vuepress 搭建一个文档博客之后,往往都是通过如下步骤来部署一篇博客: 首先写文章; 写完文章之后生成静态文件,这里一般使用的是 npm run build 命令,但也有使用...gh-pages 分支,因为 main 分支存放的一般是源码,而 gh-pages 分支则用来存放生成的静态文件 FOLDER: docs/.vuepress/dist # vuepress...如果是绿色的,说明自动部署成功了,如果是红色,那就说明部署失败。这个时候我们可以点进去看看部署失败的日志信息。...我这里错误的大体意思就是说我 Vuepress 项目下的的 dist 目录不存在,而解决方法则是在 Vuepress 的配置文件中的 dist 设置为 docs/.vuepress/dist 即可。...总结 以上就是关于 Vuepress + Github Actions 实现自动部署的所有内容了,如果对你有所帮助,那就帮忙点赞关注吧! 最后,贴出我的博客地址,可以去看看效果!
动态 Web 服务各种类型的 Web 应用,提供默认域名、自定义域名、HTTPS 和 CDN 加速等功能,提升 Web 应用的性能和安全性,此外还提供基于 Git 的工作流、DevOps 流程和加速开发部署流程...VuePress :VuePress 是一个以 Markdown 为中心的静态网站生成器。.../.cache docs/.vuepress/.temp dist 部署流程 1.将代码上传到远程仓库 2.访问 Web 应用托管 控制台,新建应用 从Git仓库导入,授权自己的 git 账号 3.选择要导入的项目...,然后进行配置 4.部署成功后,在应用详情页,可以看到项目域名 5.访问域名就可以看到下图页面 6.可以到应用设置中,添加自己的域名 修改代码后,提交至远程 Git 仓库。...随后将会触发 Web 应用托管的自动构建及部署。
vuepress是一款十分优秀简洁的文档生成器,可以根据目录下的md文档自动生成对应的html文件,界面简洁大方。...每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。本文将介绍如何在CentOS7环境下部署vuepress。...{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 创建.vuepress目录...mkdir .vuepress cd .vuepress 创建config.js,这是vuepress的全局配置文件,大部分属性在这里设置。...dev # 构建,此时会将md文档转化成html文件存储在docs/.vuepress/dist目录 vuepress build 六、调试部署 此时静态网页已经生成在了**docs/.vuepress
VuePress教程之部署到Github Action 本文阅读重点 < 1 VuePress教程之部署到Github Action 1.1 主题的选取:vdoing主题 1.2...安装vdoing主题 1.3 本地部署 1.4 使用Github Action部署 1.5 分享我的 ci.yml配置文件 最近geekzl打算尝试一下VuePress,据说如果用来做文档体验会很不错...主题的选取:vdoing主题 在网上找了一圈vuepress主题,其中vdoing主题让人眼前一亮,就它了。...install # develop npm run dev # or yarn dev 本地部署 本地部署,是基于Shell脚本的。.../deploy.sh即可~ 使用Github Action部署 按作者给的文档 GitHub Actions 实现自动部署静态博客 进行操作 用代码仓库 https://github.com/dbdgs
1.项目初始化 yarn init # npm init 2.安装依赖 将 VuePress 安装为本地依赖 我们已经不再推荐全局安装 VuePress yarn add -D vuepress # npm...{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 4....安装主题 vuepress-theme-reco yarn add vuepress-theme-reco # npm install vuepress-theme-reco --save-dev ...5.创建.vuepress 文件夹并创建 config.js 配置文件 mkdir docs/.vuepress && touch docs/.vuepress/config.js 编辑 config.js...- title: 高性能 details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
第一次使用 VuePress 去部署 Github page,折腾的时间比较长,总结一下坑点。...我的场景: 采用https://.github.io/的形式 自定义二级域名 Travis CI 自动部署 访问地址:https://snippet.noxxxx.com...文档即仓库 我的仓库中只有在根目录下的项目介绍 README.md 和 VuePress 的整个工程。...按照 VuePress 的文档我需要配置 .vuepress/config.js下配置 base: /snippet/, 但是如果你配置了自定义域名,这一步就不需要配置!.../public/CNAME 下写你的域名,VuePress 构建后,CNAME 文件会自动回到根目录。
VuePress 安装vuepress前,请确保你的 Node.js 版本 >= 8 全局安装 # 安装 yarn global add vuepress 或者:npm install -g vuepress...> README.md # 开始写作 vuepress dev . # 构建静态文件 vuepress build ....注意 :vuepress dev .和vuepress build .后面的.。...在现有项目中安装 # 将 vuepress 作为一个本地依赖安装 yarn add -D vuepress 或者:npm install -D vuepress # 新建一个 docs 文件夹 mkdir...VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 对象: module.exports = { title: 'VuePress
由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载性能,并且对 SEO 友好。...部署 以下指南假设你将文档放置在项目的 docs 目录中,并使用默认的编译输出位置。 GitHub 页面 将 .vuepress/config.js 中的 base 设置为你的仓库名称。...例如,如果你的仓库是 https://github.com/foo/bar ,则已部署的页面将在 https://foo.github.io/bar 上可用。...在你的项目中,运行: # 构建 vuepress build docs # 导航到构建输出目录 cd docs/.vuepress/dist git init git add -A git commit...gh-page 分支 将 / 替换为你的信息 git push -f git@github.com:/.git master:gh-pages 你可以在 CI 设置中运行此脚本以启用每次推送时的自动部署
创建项目 # 创建项目目录 mkdir vuepress-starter && cd vuepress-starter # 新建一个 markdown 文件 echo '# Hello VuePress...> README.md # 开始写作 vuepress dev . # 构建静态文件 vuepress build ....部署 在部署之前你需要先注册腾讯云账号,到云开发控制台,创建环境、选择按量付费、网站托管、开启静态网站服务,如果用过小程序云开发,可以使用小程序账号快速登入。...1.登入 cloudbase login 2.进入静态文件目录 cd .vuepress 3.部署文件 # 将 dist 目录下的所有文件部署到根目录 cloudbase hosting:deploy...dist -e envId 4.查看静态网站域名和状态 cloudbase hosting:detail -e envId 5.在浏览器打开静态网站域名,就可以看到 云开发部署的 VuePress 网站了
❞ 效果图 使用技术 VuePress + vuepress-theme-reco VuePress简介 VuePress文档地址 简洁至上:以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作...init 3.将 VuePress 安装为本地依赖 yarn add -D vuepress # npm install -D vuepress ❝官方不推荐全局安装 VuePress ❞ 4.创建你的第一篇文档...10:00:00 # 时间 sidebar: 'auto' # 侧边栏 categories: # 分类 - java tags: # 标签 - vue author: 默存 # 作者 --- 部署...Gitee&GitHub 一、部署 ❝这里使用Gitee作为列子,毕竟国内的速度快。。。...❞ 2.提交代码至创建的仓库(typ1805) 3.部署Gitee Pages 部署 二、浏览访问 https://typ1805.gitee.io 三、更新问题 Gitee Pages 个人版不支持提交自动更新
# 插件 # 插件整理 vuepress-plugin-mermaidjs (opens new window) 流程图、时序图、类图、状态图 ...... vuepress-plugin-baidu-autopush...(opens new window) 百度推送 vuepress-plugin-thirdparty-search (opens new window) 第三方搜索链接 vuepress-plugin-one-click-copy...(opens new window) 代码块复制按钮 vuepress-plugin-zooming (opens new window) 放大图片 vuepress-plugin-comment...Valine方式加入评论 | Valine-Admin (opens new window) 加入邮箱通知 # 插件使用方法 加入插件包 yarn add -D vuepress-plugin-xxx...# npm install -D vuepress-plugin-xxx 使用插件包 module.exports = { plugins: [ [ 'vuepress-plugin-xxx
作为本地依赖安装让你可以使用持续集成工具,或者一些其他服务(比如 Netlify)来帮助你在每次提交代码时自动部署。...之后运行yarn docs:dev访问localhost:8080 也可看见初始页面 部署页面到 GitHub Pages 编写package.json脚本命令 { "scripts": {...' EchoWheel UI', description: '一套为开发者学习准备的基于 Vue 2.0 的移动端和 PC 端组件库', } 之后在根目录创建一个deploy.sh文件,方便编译部署文档...gh-pages git push origin master:gh-pages cd - 关键步骤是git remote添加远程仓库, 如果远程已经有gh-pages(GitHub会自动将此分支代码部署到.../deploy.sh即可正确部署 注意: macos用户需要在运行脚本加权限,执行chmod +x deploy.sh 之后在github 页面的settings里就可以看到页面链接了 主页配置
VuePress 使用 安装 # 全局安装VuePress npm install -D vuepress 本地新建文件夹>vuepress vuepress/新建docs文件夹 vuepress/...创建文件 在docs/README.md中添加代码 # my first vuepress 在package.json中添加代码 { "scripts": { "dev": "vuepress...dev docs", "build": "vuepress build docs" } } 在vuepress中启动命令 npm run dev 启动成功后打开看到以下页面说明vuepress...但是缺点太多了,自己部署服务器环境,装mysql,写后台,写数据库,再写前端...这下来搞得头皮发麻,成果还不尽理想,最关键的是服务器最便宜一年也好好几百。。...现在用github加vuepress,理论上来说,域名是永久可以访问的,这样一个在线文档或博客(根据你自己的配置喜好),并且vuepress也是基于vue的单页应用,访问速度及用户浏览反馈还是很棒的!
项目场景:博客系统(vuepress)部署采用自动部署文档的Github工作流。...问题描述工作流运行过程产生错误"The process ‘/usr/bin/git’ failed with exit code 128 ❌",导致部署失败。...commit/usr/bin/chmod -R +rw /home/runner/work/javadirection.github.io/javadirection.github.io/docs/.vuepress...q -av --checksum --progress /home/runner/work/javadirection.github.io/javadirection.github.io/docs/.vuepress
分享一个VuePress知识管理&博客 主题 官方文档:https://doc.xugaoyi.com/ github:https://github.com/xugaoyi/vuepress-theme-vdoing
# 用Vuepress重构博客 原本使用typecho作为博客系统,最近服务器快到期了,调研了一下发现vuepress还不错,所以把博客迁移到了vuepress # 前期准备 一个备案的域名 github
VuePress 是社区广受好评的文档插件,不少的项目都开始使用 VuePress 来构建团队的文档、产品的官网。现在,你也可以在云开发上托管你的 VuePress 文档啦!...创建一个云开发环境 完成了本地的 Vuepress 建设,接下来我们来创建一个云开发环境,用来部署 VuePresss 。...接下来,就可以进入到最后一个环节,上传部署 VuePress 了。 部署 VuePress 接下来,我们来构建,并部署 VuePress。...image.png 访问 点击设置,进入设置页面,可以找到默认的的域名,点击域名,就可以看到你刚刚部署的环境啦。...image.png 部署以后是这样的 image.png One More Thing 只需简单的几步,你就可以轻松实现将 VuePress 部署到云开发上,无需再忍受 Github Pages 的龟速啦
超详细动手搭建一个Vuepress站点及开启PWA与自动部署 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了。 记得最后一定要看注意事项!...Vuepress介绍 官网:https://vuepress.vuejs.org/ 类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。...-D vuepress 全局安装vuepress yarn global add vuepress # 或者 npm install -g vuepress 新建一个docs文件夹 mkdir docs...manifest.json ['link', { rel: 'manifest', href: '/manifest.json' }], ], serviceWorker: true, } 部署上线...构建与自动部署 用gitHub的pages或者coding的pages都可以,也可以搭建在自己的服务器上。
领取专属 10元无门槛券
手把手带您无忧上云