Vuepress 快速部署到 GitHub 即刻访问
Nic_Y关注赞赏支持Vuepress 快速部署到 GitHub 即刻访问
Vuepress 快速部署到 GitHub 即刻访问
环境
vuepress 版本 1.0.0
准备我们的 vuepress 网站
首先你应该先创建一个 Vuepress 项目
首先我们需要创建一个文件夹
文件夹.png
在文件夹内,打开 cmd 或 PowerShell
//会在文件夹内构建vuepress的整体结构
yarn create vuepress
vuepress提供两种模板.png 这里我们以docs为例
构建vuepress成功.png
会让我们填一些信息,邮件、名字、描述什么的,这里我什么都不填
vuepress为我们创建的目录.png
执行
//安装所需依赖
yarn
然后我们去GitHub创建一个仓库
仓库名必须是你的GitHub名
仓库名必须是你的GitHub名
仓库名必须是你的GitHub名
仓库名必须以.github.io结尾
GitHub昵称.png 创建一个git仓库.png 创建成功.png回到vuepress来,在package.json中增加以下代码
"scripts": {
"docs:build": "vuepress build docs",//新增
"deploy": "bash deploy.sh"//新增
}
与package.json同级新建一个deploy.sh文件 在文件中写下面这段代码
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io 填写你刚刚创建的仓库地址
git push -f https://github.com/NicCraver/niccraver.github.io.git master
cd -
package.json.png deploy.sh.png
最后我们通过gitbash执行
yarn deploy
gitbash.png gitbash2.png
打包后的文件会自动上传到GitHub上
打开niccraver.github.io/
项目就部署到GitHub上了
部署成功.png
推荐阅读更多精彩内容
- VuePress + github pages + Travis CI 教程 介绍 VuePress 由两部分组成:一部分是支持用 Vue 开发主题的极简静态网站生成器,另一个部分是为书写技术... 7revor阅读 495评论 0 赞 2
- js基础(7) 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在... 萌妹撒阅读 382评论 0 赞 1
- git and github 什么是git版本管理控制工具(vcs) 1.分布式版本控制 2.多个开发人员协调工作 3.有效监听谁做的修改 4.... Daryl_Z阅读 76评论 1 赞 2
- 最快用vuepress+github搭建一个博客 vuepress是vue提供的一个文档页生成工具,虽然官方还没有实现博客适配,但是现在可以通过一些小配置文件的修改... Mizuka阅读 3,949评论 0 赞 7
- Hexo + GitHub Pages 搭建博客的教程 转载http://www.cnblogs.com/bxm0927/p/6927340.html 大概流程: 1. ... 阿de牧阅读 3,877评论 7 赞 32