Help us understand the problem. What is going on with this article?

GitHub 上のマークダウンを Travis CI 経由で Qiita に記事として投稿する

More than 1 year has passed since last update.

先日英語で書かれた GitHub 上のドキュメントを日本語訳しました。

https://qiita.com/miya0001/items/8fff46c201bf9eaeba4a

この場合、翻訳作業そのものは GitHub でやったほうが効率がいい一方で、多くの人に見てもらうには Qiita がいいなと思いまして、当初は README.md をコピペして Qiita に投稿しました。

ところが翻訳の対象となる英語のドキュメントの方がすごくアクティブに更新されていて、コピペをいちいちやってると大変だし、いまにぶっ壊しそうだったので、GitHub への push をトリガーにして Qiita 上の記事を自動更新するようにしました。

.travis.yml を準備

まず、.travis.ymltravis init コマンド等々の方法で準備して、Travis CI 上でリポジトリを有効化しましょう。

travis コマンドがない場合は gem install travis でインストールしておきましょう。便利ですよ。

https://github.com/travis-ci/travis.rb

Qiita の API トークンを取得

まず Qiita の個人用アクセストークンというものを取得してください。

https://qiita.com/settings/applications

Qiita に投稿するためのスクリプトを準備

今回は、以下の npm モジュールを使用したので、それらをインストール。

$ npm install bluebird isomorphic-fetch qiita-js -g

qiita-js 以外の2つは、qiita-js のドキュメント上のサンプルがそうなってたので入れただけで、あんま必要性はわかっていません。

https://github.com/increments/qiita-js

次にデプロイ用のスクリプトを以下のような感じで準備します。

global.Promise = require('bluebird');
require('isomorphic-fetch');

const fs = require( 'fs' );
const Qiita = require( 'qiita-js' );

if ( "false" !== process.env.TRAVIS_PULL_REQUEST ) {
  console.log( 'Thanks for contribution. :)' );
  process.exit();
}

// set your token
Qiita.setToken( process.env.QIITA_TOKEN );
Qiita.setEndpoint( 'https://qiita.com' );

fs.readFile( 'README.md', 'utf8', ( err, readme ) => {
  Qiita.Resources.Item.update_item( process.env.QIITA_POST_ID, {
    title: process.env.QIITA_POST_TITLE,
    body: readme,
    private: false,
  } ).then( function( res ) {
    console.log( res );
  } )
} );

このスクリプトでは以下の環境変数を使っています。

  • QIITA_TOKEN - 個人用アクセストークン
  • QIITA_POST_ID - 更新したい記事の ID
  • QIITA_POST_TITLE 更新したい記事のタイトル

これらの環境変数は、.travis.yml 側で定義しますので、多くの場合スクリプトはコピペでいいはず。

今回のユースケースでは、既存の記事を更新するのが目的なので、既存の記事の ID 及びタイトルはあらかじめ確認しておいてください。
(タイトル省略したいんですが、省略するとエラーになってしまいます。。。)

package.json に登録

npm run deploy で Qiita にデプロイできるように、以下のように package.json に記述しました。

  "scripts": {
    "deploy": "node deploy/deploy.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

depoloy/deploy.js という部分は、先ほど作ったデプロイ用のスクリプトへのパスです。

.travis.yml に環境変数を追加

まず、先ほど取得した Qiita の個人用アクセストークンを暗号化して .travis.yml に追加します。

$ travis encrypt QIITA=xxxx --add

次に、更新したい記事の ID とタイトルも環境変数として追加します。

env:
  global:
    - QIITA_POST_ID: 8fff46c201bf9eaeba4a
    - QIITA_POST_TITLE: "フロントエンドチェックリスト(日本語訳)"

あと、以下のような感じで、先ほどのスクリプトが自動発火するように記述します。

script: ls -al README.md
after_success: npm run deploy

さらに、masterブランチ以外で発火しないようにしておきましょう。じゃないと記事が意図せず書き換わってしまいます。

branches:
  only:
  - master

以上、トータルでの .travis.yml のサンプルは以下の通りです。

language: node_js
node_js:
- 6
branches:
  only:
  - master
before_script:
- npm install
script: ls -al README.md
after_success: npm run deploy
env:
  global:
    - QIITA_POST_ID: 8fff46c201bf9eaeba4a
    - QIITA_POST_TITLE: "フロントエンドチェックリスト(日本語訳)"
    - secure: xxxx

ローカルでの動作テスト

ローカルで動作テストを行うには、以下のように環境変数を定義してコマンドを実行してください。

$ export QIITA_TOKEN=xxxx
$ export QIITA_POST_ID=xxxx
$ export QIITA_POST_TITLE=xxxx
$ npm run deploy

非公開の記事を先に作っておいて、その記事の ID に対して動作確認をすると安心です。

環境変数の定義がめんどくさい場合は、direnv が超便利です。

https://github.com/direnv/direnv

miya0001
Geolonia という会社で地図を作ってます。以前は WordPress の WP-CLI のコミッターをしたりしてました。
https://blog.geolonia.com/
tilecloud
地図専用クラウドサービスを提供するスタートアップ
https://geolonia.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした