编程技术

vuepress同时自动部署到Github和Coding

# VuePress

非常简洁的一个静态生成，以 Markdown 为中心的项目结构。基于Vue的驱动，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。

  • VuePress可以做说明文档、博客等等。

  • 更多的内容参考其它文章

# Github和Coding

面向开源及私有软件项目的托管平台。

我们刚好需要用到他们的Pages服务-快速部署你的静态网页

# Travis CI

Travis-CI是一个开源的持续构建项目，能够测试和部署；Travis-CI会同步你在GitHub上托管的项目，每当你Commit Push之后，就会在几分钟内开始按照你的要求测试部署你的项目。

  • 本次文章的重点

# 使用Travis CI部署vuepress到Github

  • 在Vuepress的根目录插件一个.travis.yml文件，代码如下：
language: node_js   #使用node.js
node_js:            #是否固定node.js的版本
  - lts/*
install:
  - yarn            #使用yarn执行
cache:
  directories:
    - node_modules  #一些vueoress的主题，插件都是在这个目录上的
script:
  - yarn build      #脚本根据根目录package.json文件上的脚本目录。我这里的build对应着"vuepress build blog"的部署
deploy:
  committer_from_gh: true  
  provider: pages               #分支gh-gages
  skip-cleanup: true
  local_dir: dist               #根据生成静态内容放在根目录还是.vuepress/dist里。不懂的先本地远行yarn build注意你自己的脚本是不是这个。然后看下生成的静态内容在什么地方。我的在根目录直接输入dist
  github-token: $GITHUB_TOKEN   #这里的$GITHUB_TOKEN是在Travis CI设置的变量。稍后在下面说明；
  fqdn: 803344.xyz              #这个是部署的时候在github设置里自动添加上域名，SSl你可以在github打勾
  keep-history: true
  on:
    branch: master
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# $GITHUB_TOKEN个人访问令牌

写到一半了说，我的github项目是这样的：

  • 仓库名：blog 随意名字

  • 主分支：master

  • blog分支： gh-gages

进入github官网,右上角倒数第二个Settings -> Developer settings -> Developer settings -> 生成新令牌；名字随便，通常只需要勾选repo，我为了方便就全部勾选了

  • 然后确认生成，复制好令牌：789f7b3e50ff2d29e43b6221cb60e5c3998cf2c8

  • 到Travis CI添加变量。先把blog勾选上->点击仓库名进去->看第二图设置变量->第三图成功添加

已经结束完成自动部署到github了，如果你还需要一些脚本可以在.travis.yml设置，通常我是在package.json添加然后在.travis.yml使用一个yaren abc

# 同时自动部署到Github和Coding

通常我们写文档主要是面向国内用户，使用github会有点被墙的难受。这么我们就继续添加一个类似github的Coding。已被腾讯收购，国内访问比github好点吧。

  • 没有套路还是直接上代码
language: node_js
node_js:
  - lts/*
install:
  - yarn
cache:
  directories:
    - node_modules
script:
  - yarn build

after_script:
    - cd dist
    - git init
    - git config --global user.name "Mr.Wu"    #gh-pages显示发布的名字
    - git config --global user.email "1570875683@qq.com"
    - git add .
    - git commit -m "第 $TRAVIS_BUILD_NUMBER 次上传更新我的文档"
    # Github 
    - git push --force --quiet "https://${GITHUB_TOKEN}@github.com/guugg/blog.git" master:gh-pages
                # Coding 
    - git push --force --quiet "https://guhua:${CODING_TOKEN}@git.coding.net/guhua/guhua.coding.me.git" master:master
    - git tag v0.0.$TRAVIS_BUILD_NUMBER -a -m "由TravisCI自动标记$TRAVIS_BUILD_NUMBER次"
    # Github
    - git push --quiet "https://${GITHUB_TOKEN}@github.com/guugg/blog.git" master:gh-pages --tags
                # Coding
    - git push --quiet "https://guhua:${CODING_TOKEN}@git.coding.net/guhua/guhua.coding.me.git" master:master --tags

branches:
  only: 
    - master

env:
 global:
   # Github Pages
   - GH_REF: github.com/guugg/blog.git
   # Coding Pages
   - CO_REF: git.coding.net/guhua/guhua.coding.me.git
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

Github说明：${GITHUB_TOKEN} master:gh-pages

${GITHUB_TOKEN} 令牌的变量，就是刚才在Travis-CI设置的变量

master:gh-pages 把静态文件部署在gh-pages分支上

Coding说明：${CODING_TOKEN} master:master

${CODING_TOKEN} 也是令牌的变量，等下在怎么申请这个变量

master:master Coding 我就直接使用master了

  • 注意：需要在${CODING_TOKEN}这个变量前面加上你的账户名。
git.coding.net/guhua/guhua.coding.me.git
//还有Coding的链接需要注意，我在Coding官网创建的仓库名为guhua.Coding.me。
//所以才是git.coding.net/guhua/guhua.coding.me.git
//它可以跟github一样的，具体的各位自行测试吧
1
2
3
4

# Coding令牌

# 大功告成

转载声明，修改一下，查看是不是会清除域名

# 后面留个注明

    # Github 博客
    - git push --force --quiet "https://${GITHUB_TOKEN}@github.com/guugg/hello.git" master:gh-pages
    #      腾讯  Coding 博客
    - git push --force --quiet "https://guhua:${CODING_TOKEN}@git.coding.net/guhua/blog.git" master:master
    - git tag v0.0.$TRAVIS_BUILD_NUMBER -a -m "由TravisCI自动标记$TRAVIS_BUILD_NUMBER次"
    # Github 博客
    - git push --quiet "https://${GITHUB_TOKEN}@github.com/guugg/hello.git" master:gh-pages --tags
    #      腾讯 Coding 博客
    - git push --quiet "https://guhua:${CODING_TOKEN}@git.coding.net/guhua/blog.git" master:master --tags

            ###这里给大家一个警告，腾讯coding仓库链接是这样的https://用户名:环境变量@git.coding.net/用户名/仓库名.git
branches:
  only: 
    - master

env:
 global:
   # 如果仓库名变更只需要修.git前面的仓库名。github.com/用户名/这里是不需要变更的。比如仓库名为（<用户名>.github.io）这么就是github.com/guugg/<用户名>.github.io.git
   - GH_REF: github.com/guugg/hello.git
   # 腾讯的Coding设置原理跟github是一样的。只是前面的git.coding.net不一样。
   - CO_REF: git.coding.net/guhua/blog.git
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21