はてなブログを使っていると「グローバルメニュー追加したい」「スマホ版をもう少し見やすくしたい」などなど、カスタマイズをしたくなる場面が多々出てきます。
はてなブログの編集画面では「デザイン」からHTML/CSS/javaScriptの編集ができますが、パーツ毎に入力欄が分かれているうえ履歴管理はされていません。
ちょっと試すくらいならいいのですが、色々なカスタマイズを積み上げていくうちにコードは長くなり、いつ何のために変更したものなのかわかりにくくなってきます。
そこで、GitHubが無料ユーザーでもプライベートリポジトリを使えるようになったのを機に、カスタマイズ履歴をきちんと管理してみることにしました。
GitHubでカスタマイズ履歴を管理する
はてなブログ編集画面の入力欄
はてなブログのカスタマイズに使える入力欄はこれだけあります。カスタマイズによってどこに何を書いたかややこしくなってきますね…
設定
- headに要素を追加
デザイン
- PC版
- ヘッダ
- タイトル下
- 記事
- 記事上
- 記事下
- サイドバー
- （任意のカスタム追加要素）
- フッタ
- デザインCSS
- ヘッダ
- スマホ版
- ヘッダ
- タイトル下（PRO）
- 記事
- 記事上
- 記事下
- フッタ
- ページャ下（PRO）
- フッタ（PRO）
- ヘッダ
GitHubに管理用リポジトリを作る
GitHubアカウントやリポジトリ作成方法はググればいくらでも出てくるので割愛します。
hatena-blogというプライベートリポジトリを作成し、以下のような構成でコードを管理しました。編集画面との対応関係がわかるようにしています。
- hatena-blog
- head
- head.html
- pc
- header
- under-title.html
- article
- over-article.html
- under-article.html
- sidebar
- ranking.html
- sponsorlink.html
- twitter.html
- footer
- footer.html
- css
- main.css
- header
- sp
- header
- under-title.html
- footer
- footer.html
- header
- head
カスタマイズする毎にコミット
初回は各入力欄の最新状態を反映した上記コードをコミットし、以降はカスタマイズをする度に差分をコミットしていきます。
コミットコメントには、参考にしたブログURLを添えるようにしています。
ブランチ運用は今のところdevelopのみ使っています。複雑なことをする場合は別途ブランチを切るかもしれませんが、ひとまず先人の知恵を拝借しているだけなのでdevelopで充分かと。
これで変更履歴を追ったり、カスタマイズが不要になった場合にすぐ元に戻せるようになりました。
直接外部から読み込めないの？→できます！
これでコードの履歴管理はできるようになったものの、ブログ編集画面の入力欄から手動でコピペしてコミットというちょっとした面倒くささがあります。
twitter.comGitHubのプライベートリポジトリが無料でも使えるようになったから、ブログのカスタマイズ部分（CSSとか）のバックアップ用リポジトリを作ってみた。これならちゃんと差分も管理できてわかりやすい。
— みるく（💉②済） 👧6歳👶1歳 (@3865oiseau_bleu) 2019年3月20日
今ははてなの編集画面で編集したものをコピペしてcommitしてるけど、直接やれたら楽だよなぁ。
いっそのこと、リポジトリ上でコミットするだけでブログ側にも反映されたら楽なんだけどな…そう思って調べてみると実際にしている事例がちらほら。
GitHubPagesを使う方法がよさそうです。なるほど、これなら管理画面側の細々分かれたパーツにとらわれず外部CSS/JavaScriptの変更で済みますね。
ゆくゆくはこっちのやり方に変えていきたいです。
