VuePress自动化部署到GitHub服务器
文章目录
- 一、首先准备ssh
- 1.1 生成 ssh
- 1.2 把公钥配置到 GitHub
- 二、配置 VuePress
- 三、如何从GitHub服务器访问项目
- 四、发布到自定义记录值的域名
- 4.1 新增域名解析
- 4.2 修改我们的配置文件
- 4.3 修改 deploy.sh
- 五、自动化部署 暂未实现
- 5.1 新建 .travis.yml
- 5.2 更改默认推送位置
- 5.3 修改 package.json
- 5.4 登录 https://travis-ci.com/
在阅读这篇文章之前，我默认你已经安装了 Git,Node,并注册了GitHub
一、首先准备ssh
如果您的电脑已经配置好 GitHub 的 ssh 的话，可以跳过这一步。
1.1 生成 ssh
右击，选择 Git Bash Here
输入:
ssh-keygen
然后一路回车即可！
注意：命令没有空格，请直接复制
之后会在：C:\Users\用户名\.ssh\ 目录下生成两个文件：
私钥：id_rsa 必须要放在自己的电脑上
公钥：id_rsa.pub 放到 GitHub上。
1.2 把公钥配置到 GitHub
登陆 GitHub => Settings => SSH and GPG keys => New SSH key
然后直接把我们刚刚生成的 id_rsa.pub 文件打开，复制里边的全部内容，放到 Key 文本框内，标题随便起一个就是。
二、配置 VuePress
在 VuePress 项目的目录下，新建一个文件 deploy.sh
并在该文件中添加如下内容：
#!/usr/bin/env sh# 确保脚本抛出遇到的错误
set -e# 生成静态文件
npm run build# 进入生成的文件夹
cd docs/.vuepress/dist# 如果是发布到自定义域名
# echo 'www.example.com' > CNAMEgit init
git add -A
git commit -m 'deploy'# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 如果发布到 https://<USERNAME>.github.io/<REPO>
# 请把 penggang-home/blog-two.git 换成你的项目地址
git push -f git@github.com:penggang-home/blog-two.git master:gh-pagescd -
注意 这里我是发布到 GitHhub，所以我是直接push到我的 GitHub地址的，请把penggang-home/blog-two.git换成你的项目地址，不然你会部署失败！
关于该文件的其他详细配置，请移步官网。
接下来在我们的 package.json文件的插件部分，新增如下内容：
"scripts": {"dev":"vuepress dev docs","build":"vuepress build docs","deploy":"bash deploy.sh"
},
接下来,npm run deploy 即可推送到GitHub。
注意： 请使用 Git Bash Here 工具，windows 自带的 cmd 不认识 Shell命令。
接下来去 GitHub 查看分支，如果有 gh-pages分支，则说明推送成功。
三、如何从GitHub服务器访问项目
第一步：
往下拉找到 GitHub Pages :
蓝色链接就是你的访问地址！
你也可以自定义域名，就是下边的 Custom domain。
四、发布到自定义记录值的域名
比如说我有一个项目是在 penggang-home/blog-two下：
通过GitHub Pages 服务，我们拿到了一个链接 http://pengsir.top/blog-two/，通过这个在线链接，我们能正常访问我们的项目，
但是我们不太喜欢这个链接怎么办呢？ 答案是：自定义域名
通过自定义记录值的域名，我们能实现通过 http://blog.pengsir.top/ 访问我们博客，是不是很棒，那还等什么，赶快开始吧！
4.1 新增域名解析
我们需要在域名供应商处新增一个，CNAME类型的域名域名解析。
这里以 腾讯云 为例：
主机记录就是域名前缀,假设你的记录值是 blog ，我的域名是 pengsir.top,那么等下你就只能通过 blog.pengsir.top来访问，
记录类型固定的是 ：CNAME
记录值就是你的GitHub地址
4.2 修改我们的配置文件
把 config.js的base属性给去掉（注释掉）
4.3 修改 deploy.sh
注意这里你的域名前缀 blog要和 刚才新增的记录值一致！
接下来就是见证奇迹的时刻，打开 GitHub!
点此访问：彭先生的主页
五、自动化部署 暂未实现
5.1 新建 .travis.yml
- 在项目的根目录创建一个名为 .travis.yml 的文件；
并添加如下内容：
language: node_js
node_js:- lts/*
install:- npm ci # yarn install
script:- npm run docs:build # yarn docs:build- npm run cname
deploy:provider: pagesskip_cleanup: truelocal_dir: docs/.vuepress/dist# 在 GitHub 中生成，用于允许 Travis 向你的仓库推送代码。在 Travis 的项目设置页面github_token: $GITHUB_TOKEN进行配置，设置为 secure variablekeep_history: trueon:branch: master
5.2 更改默认推送位置
默认的话会推送到 GitHub Pages 上，我们需要把他修改为推送到自定义域名
因此，在项目根目录下，创建 cname.sh,并添加如下内容
# cname.sh#!/user/bin/env shset -eecho 'blog.pengsir.top' > docs/.vuepress/dist/CNAME
注意: blog.pengsir.top 是自定义域名，根据自己的域名来改。
5.3 修改 package.json
新增一个:
"scripts": {"cname":"bash cname.sh"},
5.4 登录 https://travis-ci.com/
Dashboard => 找到你需要部署的项目，点击 Trigger a build
VuePress自动化部署到GitHub服务器相关推荐
- vue自动化部署linux,GitHub+Vue自动化构建部署
GitHub+Vue自动化构建 懒是第一生产力,写Vue都知道,写完了想在服务器上跑,就得npm run build,然后将生成的dist目录下的文件放到web目录下,但是每次都这样搞好像很麻烦,然后 ...
- WDS 自动化部署安装 win2008 服务器实验
掌握Windows2008WDS(Windows部署服务)的配置.SIM(系统 映像管理器)及常用WindowsPE工具的使用,能结合上述功能完成客 户端系统(VISTA)或服务器端系统(Win200 ...
- linux dns 自动识别,Linux 自动化部署DNS服务器
#!/bin/bash #该脚本用于自动化部署主DNS服务器与从DNS服务器 #作者:雨中落叶 #博客:https://www.cnblogs.com/yuzly/ echo "****** ...
- 机房软件管理服务器及系统软件,高校机房软件自动化部署管理系统的设计及实现...
摘要: 随着我国高等学校计算机教育的飞速发展,计算机作为一种重要的信息化工具受到越来越大的重视,计算机在各个学科中也发挥着越来越重要的作用.现在计算机在高校中是公共必修课,而且开设了更多的计算机应用专 ...
- 20分钟一键自动化部署10台集群规模实战（隆重分享）
特别隆重分享此内容给所有关心,支持老男孩的所有朋友和学员! 博文内容介绍: 本视频精彩纷呈,无比震撼,不看会后悔,特别是初中级运维,会感受很多! 本内容来自老男孩教育,20期学生的期中架构实战分享讲解 ...
- 使用GitLab CI和Docker进行容器应用自动化部署
容器 Docker 越来越受开发者和运维人员的喜爱,更是作为实践 DevOps 的一个中要工具.同时 Gitlab 提供了免费的代码管理服务,其 gitlab-ci 更是提供了强大的自动化 CI/CD ...
- 有人滥用 GitHub Actions在 GitHub 服务器挖掘密币，且正在蔓延
聚焦源代码安全,网罗国内外最新资讯! 编译:奇安信代码卫士团队 目前,GitHub Actions 正被攻击者滥用发动自动化攻击,在 GitHub 服务器上挖掘密币.攻击者只需提起 Pull Req ...
- 实现前端项目自动化部署（webpack+nodejs）
前言: 一般来说,我们前端是不需要关心部署的事情的,只需要把打包后的文件直接丢给后台去部署就可以了.但是呢,如果频繁修改一点东西就要叫后台进行部署,这样后台会很烦(毕竟人家还有其他工作嘛),我们也会很 ...
- 《阿里云服务器搭建》------实现Jenkins和github之间自动化部署Java web项目
本系列教程的搭建环境为阿里云服务器,其他服务器可作为参考. 本文主要讲述实现Jenkins和github之间自动化部署项目 在浏览器中打开我们的jenkins页面.(http://ip:80/jenk ...
最新文章
- hive中array嵌套map以及行转列的使用
- Acronis移动方案(四)
- 线程池之FixedThreadPool学习
- mysql内置多个数据存储引擎_一个mysql数据库，既有myisam存储引擎，又有innodb存储引擎，参数如...
- Ceph BlueFS
- wxWidgets：wxMemoryInputStream类用法
- .NET6之MiniAPI(十七)：缓存
- webpack查缺补漏
- 移动端滚动不流畅问题
- Android 下拉刷新库，这一个就够了！
- chrome developer tool 调试技巧2
- no symbol version section for versioned symbol `memcpy@GLIBC_2.4'
- 进程间通信-消息机制
- android rom签名服务器,【精选】android_ROM分解定制签名教程.pdf
- 显示虚拟按钮Menu键
- 7行代码让B站崩溃3小时，竟因“一个诡计多端的0”
- [HTML/CSS]Flex 布局中space-evenly 的兼容性
- android 1.5 app,萌新编程app
- Anaconda创建环境中途退出后重新创建出错
- VS2005 编译环境，解决 Runtime Error(运行时错误): R6034。