使用 Github Pages 部署 VitePress

前言

自从用 VitePress 快速搭建博客系统以后,一直想部署在互联网上,然后去考察了阿里云和腾讯云,发现有点小贵。因为按照我的使用习惯,只是部署博客的话,有点小亏。

这几天在掘金闲逛的时候,看到这篇文章《Vuepress + GitHub Actions 实现博客自动部署!》,突然就想尝试一下,因为白嫖总是令人愉悦的。

实现

因为这篇博客已经写的很详细了,我就解释一下他每个步骤的作用。

1. 生成 Token

获取一些权限,包括对仓库的提交,删除,监听等

2. 设置 Secrets

用来给 Action 授权,来对项目做一些敏感操作。

3. 编写 Action

编写 yml 文件,来触发 Action

actions/checkout 拉取代码

JamesIves/github-pages-deploy-action 将打包文件部署到指定分支上

需要注意的是这篇文章是针对 VuePress 来写的,所以我们需要将打包文件路径修改一下

1FOLDER: docs/.vuepress/dist # vuepress 生成的静态文件存放的地方

改为

1FOLDER: docs/.vitepress/dist # vitepress 生成的静态文件存放的地方

到这一步基本上就没啥问题了,可以在 Settings 里面找到自己的 Pages 地址

项目地址 -> Settings -> Pages -> Visit site

点赞
收藏

评论区

加载中...

相关推荐

liunx服务器web环境搭建从0到1

前几天阿里云推出了新人优惠活动,许多小伙伴都参加了。阿都整理了搭建部署环境的这篇文章帮助同学们去高效的使用服务器。文章中的搭建步骤都是阿都这几年使用并整理的。希望可以帮助到大家。 前言   本文主要讲述搭建web部署环境【nginx、mysql、java】,一般搭建环境有两种方式,一种是从官网上下载文件安装包并上传到服务器【通过xftp】进行安装,另

一篇域名从购买到备案到解析的详细教程

前言在中,我们使用VuePress搭建了一个博客,在中,我们将代码部署到服务器上,最终的效果查看:。但是在文章中,我们并没有涉及域名相关的内容,此篇专门写一篇域名的详细教程。1.域名购买因为使用的是阿里云服务器,所以我们直接到注册一个:选择合适的域名,加入清单,下单购买,注意,购买域名需要实名信息,一路跟着指示操作即可。购买完后,我们可以在查看到

VuePress 博客优化之 last updated 最后更新时间如何设置

前言在中,我们使用VuePress搭建了一个博客,但是浏览最终搭建的站点:,我们会发现,在每篇文章的底部,并没有像VuePress官方文档那样,出现最后更新的时间:这篇我们来探究下如何实现最后更新时间。官方自带查阅VuePress的,我们可以知道,VuePress自带显示最后更新时间的插件,在默认主题下,无需安装本插件,因为VuePre

VuePress 博客优化之增加 Valine 评论功能

前言在中,我们使用VuePress搭建了一个博客,最终的效果查看:。本篇讲讲如何使用Valine快速的实现评论功能。主题内置因为我用的是vuepressthemereco主题,主题内置评论插件@vuepressreco/vuepressplugincomments,可以根据自己的喜好选择Valine或者Vssue。本篇讲讲使用Val

VuePress 博客优化之增加 Vssue 评论功能

前言在中,我们使用VuePress搭建了一个博客,最终的效果查看:。本篇讲讲如何使用Vssue快速的实现评论功能。主题内置因为我用的是vuepressthemereco主题,主题内置评论插件@vuepressreco/vuepressplugincomments,可以根据自己的喜好选择Valine或者Vssue。那我们来介绍下Vss

Vue+Koa2 前后端分离项目线上部署

!(https://oscimg.oschina.net/oscnet/8cd02e2f19154eca5b6bfd3ef4a0180af05.jpg)昨天尝试部署一个VueKoa2的前后端分离项目,没想到因为前端项目部署的问题,卡了一整天,今天才终于找到了问题所在,成功解决。这篇文章主要谈谈:线上部署项目的相关事宜