ゆるりとねっと。

ヲタクなワーママのゆるゆる雑記ブログ

はてなブログのカスタマイズ履歴(HTML/CSS/JavaScript)をGitHubで管理する

はてなブログを使っていると「グローバルメニュー追加したい」「スマホ版をもう少し見やすくしたい」などなど、カスタマイズをしたくなる場面が多々出てきます。

はてなブログの編集画面では「デザイン」から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
    • sp
      • header
        • under-title.html
      • footer
        • footer.html

カスタマイズする毎にコミット

初回は各入力欄の最新状態を反映した上記コードをコミットし、以降はカスタマイズをする度に差分をコミットしていきます。

f:id:tomo-sankaku:20191102120544j:plain:w300
最終更新日の表記を修正したコミット

コミットコメントには、参考にしたブログURLを添えるようにしています。

f:id:tomo-sankaku:20191102120646j:plain:w300
コミットログの一部

ブランチ運用は今のところdevelopのみ使っています。複雑なことをする場合は別途ブランチを切るかもしれませんが、ひとまず先人の知恵を拝借しているだけなのでdevelopで充分かと。

これで変更履歴を追ったり、カスタマイズが不要になった場合にすぐ元に戻せるようになりました。

直接外部から読み込めないの?→できます!

これでコードの履歴管理はできるようになったものの、ブログ編集画面の入力欄から手動でコピペしてコミットというちょっとした面倒くささがあります。

twitter.com

いっそのこと、リポジトリ上でコミットするだけでブログ側にも反映されたら楽なんだけどな…そう思って調べてみると実際にしている事例がちらほら。

neos21.hatenablog.com

GitHubPagesを使う方法がよさそうです。なるほど、これなら管理画面側の細々分かれたパーツにとらわれず外部CSS/JavaScriptの変更で済みますね。

ゆくゆくはこっちのやり方に変えていきたいです。