Merge pull request #8 from vvakame/from-pr-38

blog post from '今日試したことを爆速でブログ化するツールのご紹介'

source/_posts/2019-06-03-pr-to-blog.md

@@ -0,0 +1,180 @@
+---
+title: 今日試したことを爆速でブログ化するツールのご紹介
+date: "2019-06-03 16:43:18"
+tags: ["GitHub"]
+---
+
+Source: [今日試したことを爆速でブログ化するツールのご紹介](https://github.com/vvakame/til/pull/38)
+
+![vvakame](https://github.com/vvakame.png?size=64) vvakame -2019-06-03 03:25:20
+
+## TL;DL
+
+* pull request をブログ記事に変換するツール作った
+* GitHub Actionsで動くようにした
+* このブログ記事もこのツールで書かれました
+
+## Motivation
+
+ブログを書いたほうがいいのはわかっている。
+しかし、ブログを書くのは面倒くさい…。
+一回やってわかってしまったことをわざわざまとめ直す必要、ある？
+
+もちろん、書く意義はわかっている。
+調べただけでまとめなかったら検索に引っかかってこないし、そうすると知見が共有されないし、シェアもされにくい。
+一方、自分がわかってしまったら、それでもういいのではないか？と考えてしまうのも事実としてある。
+
+僕が調べたり試したりしたことはだいたい https://github.com/vvakame/til に置かれている。
+3日でだいたいのことを忘れる脳みそなので、Q毎(3ヶ月！)の振り返りができるよう、週報を書いている。
+[GitHubのアクティビティをリスト化するツール](https://github.com/vvakame/til/tree/a3385ae623be2a80488b5b902d260b3ad11165c8/graphql/fetch-github-activities)を作ってやったことをリスト化しているため、調査したことについてもmaster直pushをやめてpull requestを経由するようになった。
+
+つまり、試行錯誤の過程をちゃんとpull requestにメモしておけば、それを元に調査記事が1本書けるのでは？？
+
+## How is it works?
+
+pull requestがmergeされたら、そこに書かれている内容をmarkdown化してブログ記事化する。
+Twitterに意見をバーーっと書いて、ツイートのembed機能で記事に貼り付けてブログ記事をでっちあげるのと発想としては同じだ。
+
+僕の[今のブログ](https://blog.vvaka.me/)は https://github.com/vvakame/vvakame-blog で管理されていて、 https://hexo.io/ + https://www.netlify.com/ が使われている。
+なので、新しい記事を作りたかったらhexoの作法に従ってmarkdownや画像を配置し、それをpull requestにして、僕がチェックして、mergeするだけでよい。はず。
+
+
+---
+
+2019-06-03 04:37:15
+
+## Implementations
+
+https://github.com/vvakame/github-actions にActionを置いてあります。
+pull request を markdown に変換するやつと、markdownをpull requestに変換するやつです。
+
+これを活用し、 `.github/main.workflow` に次のような内容のファイルを置くと動きます。
+
+```hcl
+workflow "make blog post" {
+  resolves = [
+    "blog to slack",
+  ]
+  on = "pull_request"
+}
+
+action "filter PR merged" {
+  uses = "actions/bin/filter@master"
+  args = "merged true"
+}
+
+action "pr2md" {
+  uses = "vvakame/github-actions/pr-to-md@master"
+  secrets = ["GITHUB_TOKEN"]
+  needs = ["filter PR merged"]
+}
+
+action "md2blog" {
+  uses = "vvakame/github-actions/md-to-blogpost@master"
+  args = ["--owner", "vvakame", "--name", "vvakame-blog", "--timezone", "Asia/Tokyo", "result.md"]
+  secrets = ["BLOG_REPO_GITHUB_TOKEN"]
+  needs = ["pr2md"]
+}
+
+action "blog to slack" {
+  uses = "Ilshidur/action-slack@master"
+  args = "PR merged!: {{ EVENT_PAYLOAD.pull_request.html_url }}"
+  secrets = ["SLACK_WEBHOOK"]
+  needs = ["md2blog"]
+}
+```
+
+実用上、 `@master` の部分はちゃんとコミットハッシュに置き換えたほうがよい気がしますね。
+
+これを実際に動かすと、pull requestが作成され、mergeしたpull requestのURLがSlackに通知されます。
+新たに作成されたpull requestのURLを出すのはめんどくさそうだったので妥協しました。
+動作させた時の様子を貼っておきます(デバッグのため余計な工程が入っているけど…
+
+![実際にGitHub Actionsが動作した時の様子](/images/eb365923e8bc28bf43d986938faa90b1.png)
+
+![Slackに通知が来た様子](/images/28ced46fc2142c6a76c81bd4d8cc37d7.png)
+
+
+---
+
+2019-06-03 07:05:51
+
+## Real world example
+
+[このPR](https://github.com/vvakame/til/pull/38)をmergeしたらブログのPRが https://github.com/vvakame/vvakame-blog/pull/8 に自動で作られる…はず！
+そしてそれをmergeすると https://blog.vvaka.me/2019/06/03/pr-to-blog/ にブログ記事があがる… はず！
+
+
+---
+
+2019-06-03 07:12:30
+
+## Details
+
+細かい仕様とかを少し書きます。
+
+大部分はGitHub Actionsに流れてくるイベントデータのJSONからデフォルト値を取得するので、設定をする必要はほぼありません。
+自分でテンプレートをカスタマイズしたい場合とかは適当に `args` を書き足してやれば変更できます。
+各アクションのREADME.mdを参照してください。
+
+* https://github.com/vvakame/github-actions/tree/master/pr-to-md
+* https://github.com/vvakame/github-actions/tree/master/md-to-blogpost
+
+ブログをPR化する方のアクションについて、ブログのリポジトリは通常別リポジトリのハズなので、デフォルトの `GITHUB_TOKEN` では権限が足りません。
+自分で適当な権限のあるPersonal Access Tokenを生成して `BLOG_REPO_GITHUB_TOKEN` にセットする必要があります。
+
+ブログのURL中の `/2019/06/03/pr-to-blog/` の `pr-to-blog` 部分はデフォルトではブランチ名を使うようになっているので、よさそうなブランチ名をつけるようにしましょう。
+
+文中の画像について、基本的には自分で貼り付けたものだろうと考え、自動的にダウンロードして適当にpull request中に混ぜ込みます。
+markdown中の `![alt](url)` が対象です。
+今のところ `<img>` タグについては書き換えを行いません。
+
+hexo以外のブログに対応させたい！とかがあったら適当に僕に聞いてください。
+
+
+---
+
+2019-06-03 07:14:35
+
+## Misc
+
+他の人と議論が発生した場合など、自分以外の人の発言も普通にブログ記事中に入ってきます。
+掲載許可を取るなり、descriptionに断り書きを書くなり、工夫したほうがいいかもしれません。
+
+以下、最近食べた美味しかったものスレとします。
+(コメントを書いた人は自動的にブログ記事化されます。)
+
+---
+
+![knsh14](https://github.com/knsh14.png?size=64) knsh14 -2019-06-03 07:17:34
+
+サッポロ一番
+
+---
+
+![vvakame](https://github.com/vvakame.png?size=64) vvakame -2019-06-03 07:20:51
+
+鶏そば十番156 麻布十番本店
+https://tabelog.com/tokyo/A1307/A130702/13168206/
+今日のお昼ご飯ここだったけど割と他では出会わないタイプの味で美味しかった。
+
+---
+
+![tjun](https://github.com/tjun.png?size=64) tjun -2019-06-03 07:24:19
+
+錫記雲吞麵のワンタン麺
+
+
+---
+
+![panpanini](https://github.com/panpanini.png?size=64) panpanini -2019-06-03 07:24:50
+
+https://yohobrewing.com/bokukimi-manten/ これ美味しかった
+
+---
+
+![mhidaka](https://github.com/mhidaka.png?size=64) mhidaka -2019-06-03 07:36:00
+
+銀だこには24個入りというパーティパックがある
+https://www.gindaco.com/menu/003
+疲れたときにみんなで食べると美味しい。一人で食べるのはおすすめしない