AREA

創作ログ

【※更新済み・非推奨】gistでHTMLファイルをウェブサイトとして公開する

2018/4/20追記:
求めていた方法がGithub Pagesだったことが判明したため、
そちらの方法で制作し直しました。

後でGitHub Pagesの記事も投稿します。
GitHub Pagesによるサイトのサンプル↓
nekoarea.github.io



三毛猫です。ブログの更新が止まっておりましたが元気です。
UTAU動画制作シリーズはPCがぶっ壊れたりして完結させてませんでしたが、
もう完成するのでちゃんと終わらせようと思います。

この記事も例によって自分用メモなので、GitHub自体の説明は省略させていただきます。

gistって?

ブログに埋め込みたいコードとかちょっとしたファイルを共有するのに便利なGitHubの機能。
無料でもprivateなgistを作ることが可能です。(リンクが分かればprivateのgistでも見られます)

gistを利用してサイトを公開する

簡単に必要最低限の手順をまとめていきます。
PHPも使えないことはないみたいですが、簡易的なサイトを気軽に公開したいだけなので今回は使いません。
PHPに関しては私が調べてもわからなかっただけなので、もし使えないようならすいません)

1.HTMLファイルをアップロード

f:id:hkarea:20180326222530p:plain
右上のNew Gistからgistを作成する。
公開したいHTMLファイルをアップロードまたはコピペして、ファイル名に.htmlを付けて保存する。
public gistとして保存すると自分のgist一覧に公開されます。

2.CSSファイルをアップロード

f:id:hkarea:20180326222705p:plain
1.と同様にcssファイルをアップロードする。

3.HTMLファイルにCSSを読み込む

作成したCSSのgistの右上のRawを押し、表示されたRawファイルのURLをコピーする。


cartman0.hatenablog.com
こちらの記事を参考に、先程のURLを書き換える。

取得した物
https://gist.githubusercontent.com/username/xxx/raw/xxx/style.css
書き換えたもの
https://rawgit.com/username/xxx/raw/xxx/style.css

このリンクをスタイルシートとしてHTMLに適用する。

<!--HTML内に記述-->
<link rel="stylesheet" href="https://rawgit.com/username/xxx/raw/xxx/style.css">

4.公開用のリンクを取得する

CSSと同様にHTMLファイルのURLを取得する。

qiita.com
こちらの記事を参考に、先程のURLを書き換える。

取得した物
https://gist.githubusercontent.com/username/xxx/raw/xxx/index.html
書き換えたもの
https://gist.githack.com/username/xxx/raw/xxx/index.html


このリンクを公開することでHTMLファイルがウェブサイトとして公開できます。
ただ、更新したりするとリンクが変わるようなので更新状況は反映されません。


次回は画像の読み込みとフォントの読み込みをやりたい。

おまけ


gistを色々いじっていたらGitHubに垢BAN食らいました。
表示されたフォームから英語で
「原因わからないんですけどBANされたので対応はよ(要約)」
と連絡したら、軽快なメールと共に速やかに解除されました。

割とよくあることみたいです。