menu search

GitLab CI 自动编译

Aug 4, 2016

在上一篇文章中我提到了 GitLab 有提供免费的在线编译服务。同时,官方还非常贴心的给流行的开源静态博客生成器做好了适配,只需Fork仓库,然后修改下配置文件即可。

本文就用 Hexo 来做个示范。

非常没有技术含量的教程

  1. 注册一个 GitLab 账号
  2. Fork 这个仓库
  3. 出现 “The project was successfully forked.” 后点击上方的 Pipelines → Run pipeline → Create pipeline
  4. 编译完毕后,打开 https://用户名.gitlab.io/hexo/
  5. 好了。

其他

  • 每次对仓库的文件做修改的时候都会自动编译 项目地址可以去 右上角齿轮 → Edit Project → Rename repository 修改
  • 同时也得修改 Hexo 的 _config.yml 文件第16行

你以为这就完了?

有自动编译,当然得想出些花样来玩。(上面那个教程其实是拿来凑字数的)

Github X GitLab

目前网上的在线Markdown编辑器,例如 StackEditDillinger,都只支持发布到 Github 仓库。不过我想出了个曲线救国的方法:在Github写文章,然后同步到Gitlab,接着由后者自动编译。

配置Webhook

Token & ID

  1. Gitlab 仓库右上角齿轮 → Triggers → Add Trigger
  2. Github 仓库 Settings → Webhooks & services → Add webhook
  3. Payload URL 为: https://gitlab.com/api/v3/projects/{{ID}}/trigger/builds?token={{token}}&ref=master {{ID}} 和 {{token}} 需要替换成自己的,参考左图。
  4. Content type 默认,Secret 留空,点击Add Webhook

现在只要在Github添加/修改任何文件,Gitlab就会开始编译。不过在那之前,我们需要让它在编译的时候自动从Github仓库下载文章。

修改.gitlab-ci.yml

image: node:4.2.2
pages:
  cache:
    paths:
    - node_modules/
  script:
  - mkdir -p source
  - cd source
  - git init
  - git remote add origin https://github.com/CaiJimmy/Blog
  - git pull origin master
  - rm -rf .git
  - npm install hexo-cli -g
  - npm install
  - hexo deploy
  artifacts:
    paths:
    - public
  only:
  - master

上面是我在用的配置文件,简单说明下: - 创建 source 文件夹并在里面启动git - 从 GitHub Clone - 然后删除 .git 文件夹 - 安装 Hexo & 编译

以后把文章放到 Github 仓库的 _posts 文件夹即可。

GitLab X Dropbox

其实我一开始是想做出类似Farbox的效果。不过结果不是很理想,放出来给各位参考下。

需要

  • IFTTT
  • Dropbox 账号 & 一个共享文件夹

.gitlab-ci.yml

image: node:4.2.2

pages:
  cache:
    paths:
    - node_modules/
  before_script:
  - apt-get update
  - apt-get install p7zip-full
  - mkdir -p source
  - cd source
  - wget {{Dropbox shared link}} -O Blog.zip
  - 7z x Blog.zip
  - rm Blog.zip
  script:
  - npm install hexo-cli -g
  - npm install
  - hexo deploy
  artifacts:
    paths:
    - public
  only:
  - master

Dropbox下载ZIP的时候有个坑,就是里面会包含一个 “/” 文件夹,导致 unzip 无法成功解压。7z 可以成功解压。

步骤

  1. Dropbox 创建一个文件夹,点击共享,权限为只查看
  2. 链接类似: https://www.dropbox.com/sh/p2q1/AgxBKWA68yha?dl=0
  3. 把尾部的 “dl=0” 改成 “dl=1”
  4. 替换 .gitlab-ci.yml 里的 {{Dropbox shared link}}

与第一章节一样,文章需要放到 你创建的文件夹/_posts 里 嗯,现在Gitlab在编译的时候就会下载那个文件夹里面的内容了。

如何让Dropbox启动编译

我本想使用 Dropbox 提供的 Webhook 来触发,但是多次测试后都没成功。(上传/修改文件都没有反应)

最后没办法了才决定用 IFTTT。

  1. Dropbox → 事件(侧边栏) → 右上角把 “全部” 改成放文章的文件夹 → 点击旁边的 RSS 图标 → 复制地址
  2. IFTTT 配置如下: If new feed item, then make a web request(Maker)
  3. Feed URL 填第一步获取到的
  4. Request URL 参考第一章节Github Webhook Payload URL

注意,只会在添加/删除/重命名文件的时候触发,修改内容似乎不会。 嗯,在Dropbox文件夹随便丢点东西进去看看能不能触发。

GitLab X Hostker

GitLab Page 似乎在国内访问有点问题,所以我想在它编译过后部署到一个另一个空间,这里用 Hostker 举栗子。 - 修改 .gitlab-ci.yml,在 - npm install hexo-cli -g 后面加:

- npm install hexo-deployer-git — save
- git config — global user.email “[email protected]”
- git config — global user.name “GitLab CI”
- git clone {{Git地址}} .deploy_git

第一步的命令在保存的时候请注意对齐,对齐,对齐。重要的事情说三遍。

邮箱和名字可以随便写,{{Git地址}} 修改成自己的。(因为Hostker只有master分支,所以我没有注明)

坑,大坑

一开始忘记使用 git clone ,导致Hostker上的commit记录和Gitlab CI上的对不上,就强行合并了,于是代码就错乱了:

合并冲突

换主题的时候CSS也会被强行合并…画面太美(当时没保存截图)

最后

iKirby, [02.08.16 17:57]

🌚用了medium 拖放传图不用在意大小

iKirby, [02.08.16 17:57]

迁移时候就傻逼了

iKirby, [02.08.16 17:57]

传图一时爽

说的好,我选择用Medium

Comments

edit x send markdown image
paragraph comment heart