githubでアップロードしたファイルを公開したい

webサイトを作るためのコーディングを行ったので、githubを使ってwebブラウザでurlを叩いたら開けるようにしたいです。
githubの会員登録を行って、リポジトリを作成して(名前:port)、その中にpcのローカルでエディターでコーディングしたhtmlやcssファイルをアップロードするところまでは出来ました。
そこから、公開するまでのやり方が分かりません。
「setting」からgithub pagesでmaster branchに変えてsaveボタンを押すと、

https://ユーザーID.github.io/port/

というURLが出てきたので、これが公開するためのURLかと思いますが、クリックしても「page not found」と表示されてしまい、アップロードしたファイルが再生されませんでした。

どこをどうすればクリックして表示出来るようになるのでしょうか？

stdio

2020/08/21 08:08

ごめんなさい。まず、gitのシステムをご存知ですか？

a-_.

2020/08/21 08:33

つい最近知り得て使い始めたものですので、回答者様からすると至らない質問かと思います。

行動規範の内容に同意します

回答1件

これ読んでください。
GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた - TipsNote

ディレクトリ構成: https://github.com/tipsnote/gh-pages-sample
GitHub Pagesでのデモページ: https://tipsnote.github.io/gh-pages-sample/

これが公開するためのURLかと思いますが、クリックしても「page not found」と表示されてしまい、アップロードしたファイルが再生されませんでした。

これは多分こうなんじゃないかな？の推測ですが、
HTMLのファイル名が「index.html」とは違う、別のファイル名なんじゃないですか？

慣習として/で終わるファイル名が指定されていないパスの場合、
そのディレクトリのindex.htmlを使うという風になっています。

https://ユーザーID.github.io/port/hogehoge.htmlという風にきっちりファイル名まで指定してあげるか、
ファイル名をindex.htmlに変更してあげてください。

投稿2020/08/21 09:00

miyabi-sun

総合スコア21203

a-_.

2020/08/21 09:31

ご回答有難うございます。編集したら公開すること自体は出来ました！まさに、このページみたいにクリックすれば作ったものが出てくるようにしたかったです。 https://tipsnote.github.io/gh-pages-sample/ あと、もう一つ気になっている点があります。上記の通り公開は出来たんですが、htmlファイルに別のフォルダ内のcssとかgifとかのファイルを参照するような作りをしていまして、その参照がされないまま(背景が白抜き)になってしまいました。その場合はそうすれば宜しいのでしょうか？

miyabi-sun

2020/08/21 10:13

これはファイルの配置方法によります。 `css/style.css`という風にcssフォルダ内のstyle.cssファイルという状態であれば下記の3択となります。絶対パス(ドメイン付き): `https://tipsnote.github.io/gh-pages-sample/css/style.css` 絶対パス(ドメイン省略): `/gh-pages-sample/css/style.css` index.htmlからの相対パス: `./css/style.css` この3つのどれかをhrefに指定して、 `<link rel="stylesheet" href="./css/style.css">`という風に記述する必要があります。注意しなければならないのは、 GitHub Pagesはサブディレクトリを切る形で実現しているので、絶対パスが`/gh-pages-sample/css/style.css`となります。なのでHTML作成者のベストプラクティスである`/css/style.css`のような表記ができません。どうしても嫌なら独自ドメインを取得して充てがう必要があります。

a-_.

2020/08/21 13:19 編集

行動規範の内容に同意します