拯救懒癌文档君 - VuePress + Travis CI + Github Pages 自动线上生成文档

栏目: 服务器 · 发布时间: 6年前

内容简介:上周发了一片作为懒癌晚期患者,我克服重重阻力,还是决定分享一下懒到极致后连打包都不愿意操作的办法。1.Github 创建项目,本地创建切换到 docs 分支,通过 VuePress 构建文档项目(写一些文档),上传至 Github。

上周发了一片 《究竟什么是前端脚手架?》 ,我在后面留言:

拯救懒癌文档君 - VuePress + Travis CI + Github Pages 自动线上生成文档

作为懒癌晚期患者,我克服重重阻力,还是决定分享一下懒到极致后连打包都不愿意操作的办法。

整体思路

1.Github 创建项目,本地创建切换到 docs 分支,通过 VuePress 构建文档项目(写一些文档),上传至 Github。

2.Travis CI 自动 clone 后安装依赖、编译、上传至 Github master 分支。

3.通过 GitHub Pages 功能将 master 分支上的内容展示在 web 上。

相关资料:

创建项目

1.使用 VuePress 初始化项目,只说几点,文档写的十分详细。

  • 依赖安装在 devDependencies。
  • package.json script 写运行和打包脚本,"serve": "vuepress dev docs","build": "vuepress build docs"。(这里按照自己习惯,后面做持续集成要用)
  • 创建 docs 文件夹,把所有 markdown 文档存放在这里。
  • docs/.vuepress/config.js 可以做大量配置。

2.使用 Github 创建项目 [name].github.io,例如我的文档是 codexu.github.io,关联到本地。

为什么用 [name].github.io ?

因为在这个项目下,可以直接使用 https://[name].github.io/ 域名,短小精悍~

3.通过 git checkout -b docs 切换到 docs 分支,docs 分支存放文档源码,master 分支存放打包好的 HTML 等文件。

为什么使用 master 分支存放打包后的文件?

因为在 [name].github.io 项目下没得选,你也可以换个其他仓库,就可以避免这个问题。

4.写一些文档,做一下简单的配置,先别急着提交到 Github。

通过 Travis CI 做自动化打包及部署

1.在根目录下创建 .travis.yml 文件,并写入一些内容:

language: node_js
node_js:
    - 10
cache: yarn
install:
    - yarn
script:
    - yarn build
after_success:
    - cd docs/.vuepress/dist
    - git init
    - git config --global user.name "${U_NAME}"
    - git config --global user.email "${U_EMAIL}"
    - git add -A
    - git commit -m 'deploy'
    - git push --quiet --force "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}
复制代码
"${***}"

2.这时候可以 push 到 Github 了,因为没有 .travis.yml Travis CI 是不会理你的项目的,同时将默认分支改为 docs。

拯救懒癌文档君 - VuePress + Travis CI + Github Pages 自动线上生成文档

3.Github 增加一个 Personal access tokens,位置在 Settings / Developer settings

拯救懒癌文档君 - VuePress + Travis CI + Github Pages 自动线上生成文档
  • Note 随意填,填 travis-ci 就行。
  • 除了 delete_repo 权限都打勾就行。

4.进入Travis CI,使用 Github 登陆, 进入dashboard,此时应该可以看到你刚创建的项目。

拯救懒癌文档君 - VuePress + Travis CI + Github Pages 自动线上生成文档

5.启动进入这个项目,右上角 More options 点击 setting,配置环境变量。

拯救懒癌文档君 - VuePress + Travis CI + Github Pages 自动线上生成文档
https://

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

一本书读懂大数据

一本书读懂大数据

黄颖 / 吉林出版集团有限责任公司 / 2014-12-1

进入大数据时代,让数据开口说话将成为司空见惯的事情,书中将从大数据时代的前因后果讲起,全面分析大数据时代的特征、企业实践的案例、大数据的发展方向、未来的机遇和挑战等内容,展现一个客观立体、自由开放的大数据时代。一起来看看 《一本书读懂大数据》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具