push-to-hatenablogを使い，はてなブログへの投稿記事をGitHubで管理したら最高だった！

GitHub Actions

1. 背景

ブログを書く時，私の場合「Visual Studio Code（以降 VS Code）」で書いて「はてなブログ」へコピペで投稿する．といった手順を踏んでいます．

記事を書く時は「VS Code」に集中したい． commit時はtextlintを走らせて投稿記事をリポジトリで管理したい．

という想いはあれど怠けていたので，解消すべく実現しました． 今回は「push-to-hatenablog」を導入して「GitHub」と「はてなブログ」を連携する方法を紹介していきます．

2. 前提条件

以下が導入済み．

  • Docker
  • VS Code（お気に入りのIDEで問題ないです）
  • GitHubアカウント

3. push-to-hatenablog

github.com

なんと，はてなブログ連携用の環境を公開してくれております． こちらを使うとリポジトリへpushした際に「GitHub Actions」が走ります．push.yml内を見てるとblogsyncと連動し，masterブランチと別ブランチの差分を見て記事の更新を自動で行うようになっています．便利すぎる．
blogsyncについてはこちら．

github.com

4. 設定していこう

4.1. GitHubにブログ管理用のリポジトリを作成する

privateのリポジトリを作成します．この時点ではファイルを追加する必要はないです．

4.2. push-to-hatenablogをダウンロードする

cloneでも問題ないのですが，ここではダウンロードします． ダウンロードしたpush-to-hatenablog-master.zipを解凍し，フォルダをリネームして配置します．このフォルダ配下がリポジトリ管理対象となります．

4.3. blogsync.example.yamlを修正する

解凍したフォルダ内にblogsync.example.yamlというファイルがあるので，blogsync.yamlへリネームし，以下の内容で変更します．

[ブログのドメイン]:
  username: [user name]
  password: [AtomPubのAPI KEY]
default:
  local_root: entries

上記の「password」については，「はてなブログ」の管理ページにて「設定->詳細設定->AtomPubのAPIキー」で確認出来ます．

4.4. GitHubでSecretを作成

「GitHub Actions」で機密情報を保護するためにSecretを使います．push.ymlファイルを見るとこの中でSecretを使用しています．Creating and storing encrypted secretsのページへ飛ぶと説明がありますが，以下の画面からSecretの登録が可能です．

New secretのボタンを押すとNameとValueの入力項目が表示されるので下表の通りDOMAINとBSYのSecretを1つずつ作成します．

Name Value
DOMAIN ブログのドメイン
BSY 
[ブログのドメイン]:\n
 username: [ユーザ名]\n
   password: [AtomPubのAPIキー]\n
default:\n
 local_root: entries

4.5. GitHubのリポジトリへpushする

ここまで設定出来たら，コマンドを叩いてブログ記事をpullしていきましょう．

❯❯❯ docker-compose run go blogsync pull [ブログのドメイン]

これでブログの記事が以下のように取得出来ます．

記事が全て取得出来たのでmasterブランチへpushしていきますが，まずは.gitignoreを先に追加しましょう．

❯❯❯ git init
❯❯❯ git add .gitignore
❯❯❯ git commit -m ".gitignore file add."
❯❯❯ git remote add origin https://github.com/[user]/[your repository name].git
❯❯❯ git push -u origin master

.gitignoreをpushしたら，あとは残りのファイルを全てpushしましょう．

❯❯❯ git add -A
❯❯❯ git commit -m "add all file."
❯❯❯ git push

これでmasterブランチはOKですが，記事の更新にはmasterブランチと別ブランチの差分が必要ですので，別ブランチを作成して作業ブランチを切り替えます．

# お好きなブランチ名でOKです
❯❯❯ git branch blog
❯❯❯ git switch blog

ここまで行えば後は記事を書いていくだけです．

5. 新規記事の下書きを追加する

draftという記事タイトルを持つ下書き記事を投稿します．

❯❯❯ docker-compose run go blogsync post --title=draft --draft [ドメイン名] < draft.md

これで下書きが「はてなブログ」へ投稿され，ローカルではentries/[ドメイン名]/entry/YYYY/MM/DD/HHmmss.mdが作成されます．このファイルを「VS Code」上で編集していき，リポジトリへpushしていく事で記事の更新が可能となります．なんて便利なんだっ！ 余談ですが，lint-stagedとhuskyを導入しているとcommit時に文章校正が出来ます．

husky > pre-commit (node v12.18.2)
✔ Preparing...
⚠ Running tasks...
  ❯ Running tasks for *.md
    ✖ textlint [FAILED]
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up... 

✖ textlint:

   18:12  error  一文に二回以上利用されている助詞 "に" がみつかりました。  ja-technical-writing/no-doubled-joshi
  129:33  error  文末が"．"で終わっていません。                            ja-technical-writing/ja-no-mixed-period

✖ 2 problems (2 errors, 0 warnings)

6. 気を付ける点

画像追加時は「はてなブログ」上へファイルアップロードが必要なため，以下手順を踏む必要があります．（他に良い方法があるかは不明）

※この方法だとリンク挿入時の形式もコピペ出来るので楽です

7. まとめ

「push-to-hatenablog」はとても強力なツールでした． 「VS Code」で集中して記事を書けるようになり，「GitHub」のリポジトリで投稿記事を管理することも，commit時にtextlintを走らせ，Typoを減らす事も出来ました．
画像追加時には少々手間がかかるもののmergeをする機会もあり，気を付けないと間違った記事を更新する可能性があるので，Git学習の一貫だと思えば特に苦はないです． 共同で記事を書いている方は「GitHub Actions」のタイミングを変更して「reviewdog」と組み合わせる．というのも面白そうですね．

8. 参考

github.com

github.com

はてなブログ記事のGitHub管理環境「push-to-hatenablog」のセットアップと使い方