资讯专栏INFORMATION COLUMN

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

william / 1124人阅读

摘要:自动后安装依赖编译上传至分支。通过功能将分支上的内容展示在上。使用创建项目,例如我的文档是,关联到本地。启动进入这个项目,右上角点击,配置环境变量。是通过上面第三部拿到的。

作者:codexu

_

整体思路

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

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

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

相关资料:

我的文档看下效果:https://codexu.github.io/

我的文档远吗:https://github.com/codexu/codexu.github.io

VuePress中文文档(1.x):https://v1.vuepress.vuejs.org/zh/

Travis CI:https://travis-ci.org

创建项目

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}

language: 语言选择 node_js,我们前端还有的选吗?

node_js: node版本,这块也许是越高越快?

cache: yarn 缓存,能使你构建速度更快...吧。

install: 安装依赖的包管理工具,使用 yarn 比 npm 快的多。

script: 一切就绪之后通过 yarn install 安装依赖。

after_success: 安装结束后,我们做一些打包和 push 到 Github 的指令。

环境变量 "${***}" 这块后面会提到。

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

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

Note 随意填,填 travis-ci 就行。

除了 delete_repo 权限都打勾就行。

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

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

GH_REF: 项目地址(github.com/[name]/[name].github.io.git)注意去掉 https://

GH_TOKEN: tocken 是通过上面第三部拿到的。

P_BRANCH: 要上传的分支,这里我们要传到 master。

U_EMAIL: 你的 Github 邮箱。

U_NAME: 你的 Github 用户名。

开启 GitHub Pages

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106887.html

相关文章

  • 使用 TypeScript 编写一个完善包含测试、文档和持续集成的库

    摘要:单元测试一个合格的库应该包含完整的单元测试。是的支持版,和是一样的,它能够直接运行为后缀的单元测试文件。在目录下加入然后执行即可看到单元测试结果。 这篇文章主要是讲述如何使用 TypeScript 编写一个完善,包含测试、文档、持续集成的库,涵盖了编写整个库所需要的技术和工具,主要涵盖: 项目目录骨架 TypeScript 配置 使用 jest 单元测试 使用 vuepress 编写...

    lingdududu 评论0 收藏0
  • InkPaper 最佳实践——使用 Travis CI 自动部署 Ink 博客到 GitHub pa

    摘要:使用可以解决自动构建和自动部署的问题这样能让我们更加专注书写。当仓库激活服务,当你的博客有新的修改提交到的时候,会通知。在里为对应的仓库添加,用于后续使用这样可以将通过生成的静态博客源文件推送到分支。 showImg(https://segmentfault.com/img/bVMhse?w=800&h=300); 简介 纸小墨(InkPaper)是一个GO语言编写的开源静态博客构建工...

    zhunjiee 评论0 收藏0
  • 前言 已经有阮一峰老师的持续集成服务 Travis CI 教程,为什么还要写这篇文章? 原因有二: 文章内容有些过时 文章覆盖度不够,有些实践细节没写出来 由于以上原因,纵然可以笔者很快在Github集成Travis CI并成功构建,但在发布时却踩了一些坑,折腾一波才终于发布成功。故写下此文,旨在补充更多的细节,帮助他人少走弯路。 正文 免费购买Travis CI应用 点击 https:/...

    novo 评论0 收藏0
  • Hexo博客迁移之旅(Coding到腾讯云COS)+ Travis CI持续集成

    摘要:博客从迁移到腾讯云最近的服务一直不稳定,这两天访问还出现,重新部署也无法解决。码云自定义域名收费,只好迁移到腾讯云上了。不会配置的可以参考官方示例直接就发布到腾讯云上了,访问速度相当快,对也好。 Hexo博客从Coding迁移到腾讯云COS 最近coding的Pages 服务一直不稳定,这两天访问还出现404,重新部署也无法解决。国内访问GitHub Pages 不是很快,而且百度S...

    blastz 评论0 收藏0
  • Hexo博客迁移之旅(Coding到腾讯云COS)+ Travis CI持续集成

    摘要:博客从迁移到腾讯云最近的服务一直不稳定,这两天访问还出现,重新部署也无法解决。码云自定义域名收费,只好迁移到腾讯云上了。不会配置的可以参考官方示例直接就发布到腾讯云上了,访问速度相当快,对也好。 Hexo博客从Coding迁移到腾讯云COS 最近coding的Pages 服务一直不稳定,这两天访问还出现404,重新部署也无法解决。国内访问GitHub Pages 不是很快,而且百度S...

    _ang 评论0 收藏0

发表评论

0条评论

william

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<