はてなブログ:外部ファイルを読み込み可能にホスティング ~Github Pagesで jsファイル、cssファイル

はてなブログでも外部ファイルを使いたい

出典：GitHub Japan

はてなブログでは画像しかアップロードできない

例えば、cssファイルやjavascriptなどをインポートしたい時、はてなブログでは直接デザインcssに書き込むか、htmlタグ内に書いてしまうかしかありません。

なぜならはてなブログでは画像ファイル以外のアップロードができないからです。

これではひたすらにごちゃごちゃして編集も管理もなあなあになってしまいます。

これは別のホスティングサービスを使用するしかありません。

やりたいのはbootstrap などのcdnみたいな感じのものを自分で作ることです。
(例)

<link rel="stylesheet" type="text/css" href="https://..../..../hoge.css">

真っ先に思いついたGoogle Drive

2016年の8月以降、使えません
wedges.hatenablog.com

一番手軽なのに残念。

Githubアカウント

そういえばこれをホスティング代わりに使ったことあるな、と思ったけど設定とかだいぶ忘れていた。

git自体、特定のコマンドしか使わず、さらに特定の状況下でしか使わないため未だに不安に思ってる。

将来の自分のためにも丁寧に書いて絶対に忘れないようにしたい。地味にミスが多かった。

Githubでホスティングさせる手順

Githubアカウントを作成

これは無料でできます。登録自体は難しくないです。
github.com

New Organizationを作成

矢印のプラスみたいなやつを押すとプルダウンでメニューが表示されます。

そこにNew Organizationというやつがあるのでそいつを選択します。名前はどうするかとか聞かれますが、好きなやつでいいと思います。

Invite memberとかは特に何もしなくて大丈夫です。

New repository

次にNew repositoryを作成します。

これも特に悩まずに好きな名前をつけたらいいと思います。

わかりやすいように"filename" + .ioとioをつけておけばいいかなぐらいです。
descriptionも特にあってもなくてもいいです。

gitコマンド使用・アップロード

Git - Downloads：ここからgitコマンドはインストールできます。windowsは別の場所かも。

矢印で刺されているhttps:~~~.gitまでの文章をコピーします。

git clone https:~~~.git

これでレポジトリを一旦、自分のPCに落とせました。

New repositoryで名前をつけたフォルダがダウンロードされたはずなのでそこに今回アップロードしたいファイルを全部入れます。

そしてカレントディレクトリをレポジトリのディレクトリまで移動させてpushしていきます。

git add "今回追加したいファイルやフォルダ"
git commit -m "first commit"
git push

確認するためのコマンドとかあるけど必要に迫られたら覚えていくと思います。

URLを編集・設定を有効化する

Edit

Editの部分を選択し、今回アップロードしたファイルを呼び出すときのURLを決めます。

好きな名前.github.ioなどと打てば良いと思われます。

自分のユーザー名やorganaization名にするとmaster branchからでしかpublishできないとか書かれていてなんかめんどくさそうです。

避けておいたほうがいいかも。

(例)username.github.ioやorganization.github.io

Github Pages設定を有効化する

画像の矢印で刺されている方のSettingsを押します。他にもSettingsのボタンはいくつかあるので気をつけてください。

下の方にGithub Pagesの設定があり、そこをいじります。

最終チェック

ここにあるURLを押します。たぶん404ページになると思うので、このURLに/repository_nameを追加してください。

repository_nameは自分でつけたレポジトリの名前です。

これでアップロードしたフォルダのところにアクセスができるようになったのでディレクトリ移動をURLでおこなってください。

ホスティングは終了です。