はてなブログのCSSの外部化を、GitHub Pagesを使って試してみました！
正直はてなブログのデザイン設定の、小さい編集ウィンドウは編集し辛いですよね……
ローカルでCSSが編集・更新ができるようになるので、楽ちん化を図るために試してみました！
リポジトリを新規作成
まずはGitHubにログインしましょう。
右上の＋マークから「New repository」を選択。
リポジトリの作成画面が開かれます。
Repository nameを、[自分のユーザ名].github.ioにする。
他は特に設定しなくてもOKです。
「Create repositoryボタン」を押します。
リポジトリにファイルを追加
Create repository後に表示される、リポジトリのURLをコピーします。
このURLからCloneして、ファイルをCommit→Pushしたりします。
ちなみに今回Pushしたのは
- index.html
index.htmlは、「だーみーぺーじ」という文字を表示するだけのHTML。 - contents-tester/contents-tester.css
contents-tester.cssは、はてなブログで適用するCSSファイルです。
複数何かを置く想定で、適用ページ用のフォルダ分けをしています。
さて、これで必要なファイルを追加することができました。
作ったページにアクセスします。
僕の場合、「https://liszwork.github.io/」。
ちゃんと出ましたね。
はてなブログでCSS読込設定
はてなブログの「ダッシュボード」を開きます。
設定→詳細設定と進み……
「headに要素を追加」に、先程GitHubにアップしたCSSを設定します。
追加する要素はコチラ。
<link type="text/css" rel="stylesheet" href="アップしたCSSのパス">
hrefに入るパスは、ぼくの場合は
https://liszwork.github.io/contents-tester/contents-tester.css
[GitHub PagesのURL]/[CSSのを入れているフォルダ名]/[CSSのファイル名]
です。
1番下にいって「変更するボタン」を押して更新が終われば完了！
操作確認
ブログを確認しましょう！
CSSがちゃんと適用されました。
Page Speed Insightsのスコア
Page Speed Insightsを見る感じ、速度とか点数とかは全然変わらなそう(めっちゃ悪いのはさておき)。
モバイルのスコア
モバイルのスコアを設定前後で比較したところ、大差はありませんでした。
| 項目 | 設定前 | 設定後 |
|---|---|---|
| スコア | 44 | 48 |
| コンテンツの初回イベント | 1.7s | 1.7s |
| 速度インデックス | 6.8s | 5.8s |
| インタラクティブになるまでの時間 | 15.9s | 15.7s |
| 意味のあるコンテンツの初回イベント | 1.9s | 1.7s |
| CPUの初回アイドル | 6.4s | 6.8s |
| 最大推定FID | 490ms | 510ms |
PCのスコア
モバイルのスコアを設定前後で比較したところ、コチラも大差はありませんでした。
| 項目 | 設定前 | 設定後 |
|---|---|---|
| スコア | 83 | 84 |
| コンテンツの初回イベント | 0.5s | 0.5s |
| 速度インデックス | 1.3s | 1.4s |
| インタラクティブになるまでの時間 | 3.6s | 3.5s |
| 意味のあるコンテンツの初回イベント | 0.5s | 0.5s |
| CPUの初回アイドル | 3.3s | 3.2s |
| 最大推定FID | 280ms | 200ms |
参考
コチラを参考にしました。ありがとうございました！
あとがき
はてなブログのCSS外部化をGitHub Pagesでしてみた！でした！
思ったより簡単でした！
というかGitHub Pagesめっちゃ便利じゃね？と、いまさらながら思いました(笑)
