1
0

Github Pagesでwebサイトを公開する方法

Last updated at Posted at 2023-10-28

Github Pagesとは

Github Pagesとは、GithubのリポジトリからHTML,CSS,Javascriptファイルを直接取得し、webページを無料で公開できるサービスです。

手順

1. Githubにリポジトリを作成する

  Newボタンをクリックする

スクリーンショット 2023-10-27 20.35.19.png

リポジトリ名を入力する。今回はtestというリポジトリを作成します
    ↓
Public(公開)を選択する
    ↓
Create repositoryをクリックする
    ↓
リモートリポジトリ作成完了です

スクリーンショット 2023-10-27 21.08.17.png

2. ローカルでファイル作成(index.html)して、リモートリポジトリにpushする

  • まず最初に先ほど作成したリポジトリを開き、URLをコピーしておく

スクリーンショット 2023-10-27 22.22.45.png

 
vscodeでターミナルを開き、作業ディレクトリに移動します
   ↓
ターミナルにて、git clone (コピーしたURL)を入力する
   ↓
cd testでtestファイルに移動する
   ↓
サイトで公開するindex.htmlファイルを作成する
git add index.html
git commit -m "index.htmlを作成"
git push origin mainを順番に入力する

これでリモートリポジトリに反映完了

image.png

3. GithubPagesの設定

testリポジトリを開き、右上にあるsettingsをクリックする

スクリーンショット 2023-10-28 9.42.47.png

pagesをクリック

スクリーンショット 2023-10-28 9.49.11.png
Branchをmainにする

スクリーンショット 2023-10-28 10.16.23.png

saveを押して完了です

しばらく待ってリロードすると、このような画面が表示されたらサイト公開完了です。
visit siteをクリックする

スクリーンショット 2023-10-28 10.29.33.png

表示できました。これでGithub Pagesの設定完了です
スクリーンショット 2023-10-28 10.35.38.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0