github.ioでiCAD html図面公開

1.はじめに
●html図面(iCAD 3D Browser)をサイトで公開したい
●レンタルサーバーは契約したくない
という方向けの記事です。
サンプルで公開した図面(https://dxmechadesign.github.io/html-test/)です。

2.githubアカウントの作成
・github公式サイト(https://github.com/join)にアクセスし、アカウントを作成しよう。

・入力後、アカウント作成ボタンを押すとメールアドレスにコードが届きます。
そのコードを次の画面に入力すれば、アカウント作成終了です!!!

3.リポジトリの作成
・作成したアカウントにログインしたら、画面左上のNEWをクリックします。

リポジトリ作成1

Repository nameに任意の名前をつけて、(今回は「html-test」としました。)
画面下のCreate repositoryをクリックします。

リポジトリ作成2

create a new fileをクリックするとコード編集画面が出てきます。
・ここへhtml図面からコードをコピーしてきます。(後述)

新規ファイル作成
コード編集画面

4.コードの移植
・出力したhtml図面からコードをコピーします。
ブラウザー右上「…」 → その他ツール → 開発者ツールを選択します。
(chromeの場合は「…」 → その他ツール → デベロッパーツール)

・ツリーの〇〇〇.htmlをクリックするとコードが表示されるので、そのコードをすべて選択しコピーします。

・githubへ戻り、以下の画像を参考に「index.html」を入力します。必ず「index.html」と入力してください。
・その下の欄に先ほどコピーしたコードを貼り付けたら、緑のボタン commit changes を押します。

・もう一度 commit changes を押します。

・Settings → Pages の Branchの項目が「None」になっているので、「main」に変更します。
・Saveボタンを押します。

・ブラウザーの更新をするとページ上部にリンクが出てきます。
※表示されるまで1,2分かかることもあります。

以上で終了です。
もちろん、パスワード設定済みのhtml図面でも公開可能です。挙動はローカルで開いた場合と同じです。

コメント