読者です 読者をやめる 読者になる 読者になる

シロクマは冬眠したい

デザインのこと、買ったもののレビューとか書きます

【とても簡単】GistとRawGitで自作CDNできた

はてなブログのCSS編集画面って使いにくくないですか?

どうにかして便利にできないかなと思っていました。DropboxやGoogleドライブでCDNっぽくできるそうですが、表示速度がかなり遅くなると言っている記事を見かけたのでどうしようか迷っていました。そこで、こちらの記事で( GitHub上のファイルをCDNとして参照する - Qiita )GitHubやGistでCDNを作れるらしいとあったので試してみました。

私はGistしか使ったことがないので、今回はGistを使ってCDNを作った方法を説明します。

GitHubのアカウントを作る

gist.github.com

GitHubのアカウントを持っている人は省略してください。

アカウントがなくてもGistを使うことはできますが、保存した後に編集ができないのでアカウントを作成した方がいいと思います。

CDNにするためのファイルを作る

ログインしたら下の画像の通りファイルを作って保存します。

私はファイル名のところに拡張子をつけ忘れているのに気づかずに、小一時間戸惑っていました。私のようにアホな間違いをする人は少ないかと思いますが、拡張子をつけ忘れないように気をつけてくださいね。

f:id:hatarakitakunaingo:20170107221255p:plain

保存できたら、Rawボタンをクリックし、表示されたURLをコピーします。

f:id:hatarakitakunaingo:20170107221731p:plain

RawGitにコピペ

rawgit.com

RawGitを開き、先ほどコピーしたURLをペーストします。Use This URL in Productionの部分に表示されたものがCDNのURLです。

f:id:hatarakitakunaingo:20170107221910p:plain

これでheadに追加するなり@importするなりできますね!あのクソ狭いウィンドウからの解放じゃ^〜

おわりに

これでお手軽にはてなブログのCSSを編集できるようになりました!

はじめからもう少しCSSの編集ウィンドウが大きければいいのにな!