Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[原创]VuePress教程之部署到Github Action

[原创]VuePress教程之部署到Github Action

作者头像
极客中心
发布于 2021-01-21 07:53:36
发布于 2021-01-21 07:53:36
3K00
代码可运行
举报
文章被收录于专栏:极客中心极客中心
运行总次数:0
代码可运行

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,据说如果用来做文档体验会很不错,外观和Gitbook有点相似,好处是代码层面具有较大的自由度,也可以顺便加强vue的学习。

主题的选取:vdoing主题

在网上找了一圈vuepress主题,其中vdoing主题让人眼前一亮,就它了。

安装vdoing主题

比如,我打算把代码放在D:\Coding\GitHub下,而我为这点代码创建了代码仓库https://github.com/dbdgs/dbdgs.github.io。于是我打开了git bash, 执行如下的命令:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
cd 'D:\Coding\GitHub'

接下来,按vdoing主题的ReadMe进行如下操作:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# clone the project
git clone https://github.com/xugaoyi/vuepress-theme-vdoing.git

# enter the project directory
cd vuepress-theme-vdoing

# install dependency
npm install # or yarn install

# develop
npm run dev # or yarn dev

本地部署

本地部署,是基于Shell脚本的。

由于我的github账号下已经有一个 yanglr.github.io的仓库了,于是我打算创建一个Organization (dbdgs),

此外,由于是最近才创建的仓库,我的主分支是 main 分支,而不是master,github官方最近有调整。

将build from对应的分支改为gh-pages

我们以vdoing主题的代码仓库中的deploy.sh为基础,根据自己的情况进行一定修改,我这边的代码如下:

deploy.sh

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# Set CNAME for "gh-pages" branch
echo 'dbdgs.cn' > CNAME  # 改成你要绑定的域名

msg='deploy'
githubUrl=git@github.com:dbdgs/dbdgs.github.io  # 按你的代码仓库信息进行修改

git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 推送到github

cd - # 退回开始所在目录
rm -rf docs/.vuepress/dist

注: 这段代码中的 git push -f $githubUrl master:gh-pages # 推送到github, 其中的master我试着改成main,发现无效,就改回master了,本地执行这个bash脚本是可以的,只是github action运行时无效。另外,main分支下不要加CNAME文件。

当改完代码后,在git bash中执行 ./deploy.sh即可~

使用Github Action部署

  1. 按作者给的文档 GitHub Actions 实现自动部署静态博客 进行操作
  2. 用代码仓库 https://github.com/dbdgs/dbdgs.github.io 的创建人账户创建 Access Token,并记录最后生成的值 **************************************** (40位,含字母和数字)。
  1. 给代码仓库 https://github.com/dbdgs/dbdgs.github.io 加一个名字为ACCESS_TOKEN的secret值

需要注意的是:这一步中给Access Token设置的值需要和第二步得到的token值一致,否则会出现下面的问题:

本地 deploy.bash 脚本可以正常 push 代码,但运行 github action 时会出现以下错误:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/dbdgs/dbdgs.github.io/'
npm ERR! code ELIFECYCLE
npm ERR! errno 128
npm ERR! theme-vdoing-blog@1.0.0 deploy: `bash deploy.sh`
npm ERR! Exit status 128
npm ERR! 
npm ERR! Failed at the theme-vdoing-blog@1.0.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2020-11-24T15_38_27_493Z-debug.log
Error: Process completed with exit code 128.

解决方法已经说过了,就是给第3步中Access Token设置的值需要和第二步得到的token值一致

分享我的 ci.yml配置文件

除了上一部分中的解决办法以外,还有其他更简单的办法,就是基于现成的Github Action来使用。

比如,我的vuepress项目给Github Action用的yaml文件如下:

https://github.com/dbdgs/dbdgs.github.io/blob/main/.github/workflows/ci.yml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
name: CI

# 在main分支发生push事件时触发,已由master改为main。
on: 
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2 # If you're using actions/checkout@v2 - must set persist-credentials to false in most cases for the deployment to work correctly.
        with:
          persist-credentials: false

      - name: Install and Build
        run: |
          yarn install
          yarn run build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: docs/.vuepress/dist # The folder the action should deploy.
          BUILD_SCRIPT: npm install && npm run build && cd docs/.vuepress/dist && echo 'dbdgs.cn' > CNAME && cd -

只需:

这次就酱紫咯,希望玩vuepress的小伙伴一切顺利哈~

5 / 5 ( 4 votes )

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-12-3 2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
github网站部署
如果你想记录生活、抒发情感、分享见解,这一切都离不开一个可以承载文字的平台,一个独立的、由自己掌控的平台,而 GitHub Pages 就是这么一个平台。
IT小马哥
2024/09/29
6830
github网站部署
VuePress 入门
本人刚用 VuePress 写完一个 UI 框架的文档:https://zyqq.github.io/wheel 确实很好用且自带PWA,访问速度飞快。特此总结使用方法。
EchoROne
2022/08/15
6250
VuePress 入门
手把手教你用vuepress搭建自己的网站(4)
如果您的仓库不是放置在根目录下(就是https://itclancode.github.io/blogcode/这种形式,而非https://itclancode.github.io/),则在config.js的基础配置中需要更改base的路径,它默认是指向根路径的,可以省略
itclanCoder
2020/10/28
1.3K1
手把手教你用vuepress搭建自己的网站(4)
使用vuepress+github page搭建网络收藏夹
在开发学习过程中总会遇到各种各样的问题,当时解决之后,如果没能做好笔记,过一段时间之后很容易遗忘。养成了做笔记的习惯之后,就期望有一个很好的平台来保存笔记。我尝试过博客园,有道云笔记,象印笔记,语雀笔记等。有的平台确实比较好用,但是每次写笔记要么在浏览器中找网址,要么在电脑里找软件,等待打开,无形中增加了自己做这件事的时间成本。有的时候可能只是需要记录一句话。最终我选择了Typora。简介。方便。下一步就是解决多平台同步的问题,github page是一个很好的选择。搭配vuepress做成可以在线阅读的笔记本。
codeniu
2022/02/25
7910
使用vuepress+github page搭建网络收藏夹
Gitee+VuePress搭建个人博客
首先说一下环境要求,既然是Gitee部署的话,Gitee的账号我们得有哈,Node环境咱也得有哈,最好是能有yarn的。这里就不过多的介绍Node和安装啦,比较简单。Git的基本操作咱也得会哈。
麋鹿大哥
2020/08/19
1.1K0
基于VuePress和github用搭建无服务器的博客、文档系统
最近想做一个项目介绍自己的一些项目和日常的文档,让文档有个属于自己的家,https://{你的域名} 使用gitbook之后,又看到了vuepress,感觉还是挺好用的。
星哥玩云
2022/05/27
5120
基于VuePress和github用搭建无服务器的博客、文档系统
Vuepress + GitHub Actions 实现博客自动部署!
正常我们利用 Vuepress 搭建一个文档博客之后,往往都是通过如下步骤来部署一篇博客:
村雨遥
2022/03/14
1.6K1
Vuepress + GitHub Actions 实现博客自动部署!
一篇教你代码同步 Github 和 Gitee
用 VuePress 搭建了博客并部署到 Github Pages,但由于 Github 的访问问题,我们可以选择把仓库部署到 Gitee 一份,利用 Gitee 的 Pages 服务再生成一份静态网站用于备用。
程序狗
2021/12/27
1.5K0
基于VuePress和github用搭建无服务器的博客、文档系统
最近想做一个项目介绍自己的一些项目和日常的文档,让文档有个属于自己的家,https://g.xgss.net 使用gitbook之后,又看到了vuepress,感觉还是挺好用的。
星哥玩云
2022/08/19
5240
基于VuePress和github用搭建无服务器的博客、文档系统
超详细动手搭建一个Vuepress站点及开启PWA与自动部署
类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。
庞小明
2019/05/25
8710
借助 VuePress 和 GitBook ,10 分钟即可免费部署你的静态博客网站
因为自己平时经常写博客,也有博客网站,所以 Leader 叫我做一个 CMS 的帮助中心的技术选型,CMS 的帮助中心的功能:是通过文章来教用户如何使用我们的项目。
夜尽天明
2019/12/19
2.2K0
借助 VuePress 和 GitBook ,10 分钟即可免费部署你的静态博客网站
使用VuePress2.X构建个人知识博客,并且用个人域名部署到GitHub Pages中
VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求,但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。官网:
星哥玩云
2025/06/29
1650
使用VuePress2.X构建个人知识博客,并且用个人域名部署到GitHub Pages中
超详细动手搭建一个Vuepress站点及开启PWA与自动部署
类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。
游魂
2018/05/23
2.5K0
试用Github Action CI/CD流程(创建一个React项目,并打包部署)
增加github aciton CI配置文件:内容大体是在虚拟环境checkout项目,build React项目,部署静态文件到代码仓库的gh-pages分支。
后端云
2022/03/22
8070
试用Github Action CI/CD流程(创建一个React项目,并打包部署)
从零开始搭建 VuePress 静态博客
# 环境准备 安装 Git 安装 Node.js ,版本 >=8.6 安装 Yarn 注册 GitHub 如果使用 Yarn 或者 Npm 下载慢,使用以下命令全局加速 $ yarn config set registry https://registry.npm.taobao.org $ npm config set registry https://registry.npm.taobao.org --global $ npm config set disturl https://npm.taob
cnguu
2020/10/12
7330
团队技术文档构建利器vuepress上手实践
最近在尝试一些项目技术文档搭建的工具,看到网上很多人推荐 gitbook,使用后总体感觉良好。无意中发现一款 Vue 驱动的静态站点生成工具 vuepress,看到官网和demo后立即被它的简约灵活所吸引。一个 vuepress 网站是一个由 Vue、Vue Router 和 Webpack 驱动的单页应用。在构建时,创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染对应的HTML。
CS逍遥剑仙
2019/10/12
2.6K0
💰手把手教你用VuePress如何快速搭建个人免费网站?
很多人只听过vue,没听过vuepress?它可是新的vue全家桶成员之一,尤雨溪大神于2018年发布。vuepress项目在github上的star数截止发文已经是18.6K了。很多前端程序员困扰没有自己的个人免费小网站,今天投资小达人手把手教你用vuepress快速创建自己的个人小网站,首先简单介绍一下vuepress是用于迅速搭建技术文档网站与个人博客,简单快捷,下面我们一起开启学习vuepress的学习之旅吧!在开启vuepress搭建网站之前,首先上链接:前端投资小达人
前端老鸟
2022/03/07
1.8K0
💰手把手教你用VuePress如何快速搭建个人免费网站?
自动化部署
打开 https://github.com/settings/tokens ,点击右上方 Generate new token,应该要输入你的密码。之后把 Note 起一个名字,比如 github-actions-deploy,然后把 repo 的候选框选中。最后点下面的绿色按钮,跳转页面后获得一个 key,这个 key 只会出现一次,先复制下来,一会要用。
用户4792657
2022/07/06
6640
VuePress搭建技术网站与个人博客
②. Docsify / Docute: 同样都是基于 Vue,然而它们都是完全的运行时驱动,因此对 SEO 不够友好
前端达人
2020/05/14
1.9K0
使用 Github Actions 自动部署 Angular 应用到 Github Pages
最近在学习 Angular,一些基础的语法也学习的差不多了,就在 github 上新建了一个代码仓库,准备用 ng-zorro 搭个后台应用的模板,方便自己以后写些小东西时可以直接使用。前端项目,最主要的还是能够实际看到,因此考虑找个地方部署,因为自己的博客是部署到 github page 上的,并且这个项目也只是一个静态网站,所以这里同样选择使用 github page
程序员宇说
2020/07/21
1.7K0
使用 Github Actions 自动部署 Angular 应用到 Github Pages
推荐阅读
相关推荐
github网站部署
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验