Vuepress 快速部署到 GitHub 即刻访问

714 阅读2分钟
原文链接: www.jianshu.com
登录 注册写文章 首页下载APP

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
评论2 赞3 3赞4赞 赞赏