1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめてのGitHub Pages

Posted at

GitHub pagesとは

GitHub Pagesは、GitHub上のリポジトリからHTML、CSS、JavaScriptファイルを直接取得し、必要に応じてビルドプロセスで実行してウェブサイトを公開する静的サイトホスティングサービスです。GitHub Pagesサイトの例は、GitHub Pagesサンプルコレクションでご覧いただけます。

引用元:GitHub公式

要するに、無料でwebサービスを公開できるというGitHubの機能の1つ
便利ですな〜

手順

手順については下記のprogate様を参考にさせていただきました。
参考:Progate

  1. アカウントの作成

  2. リポジトリの作成

  3. ファイルのアップロード

  4. webページの公開

それぞれ解説していきます!

アカウントの作成

まずは、GitHubにて無料のアカウントを作成しましょう!
すでにGitHubのアカウントをお持ちの方はログインしてください。

https://github.com/

リポジトリの作成

リポジトリを作成する前にリポジトリについて参考記事を掲載します。

リポジトリは、GitHub の最も基本的な要素です。 これは、コード、ファイル、各ファイルのリビジョン履歴を格納できる場所です。 リポジトリは、複数のコラボレーターが参加することができ、公開用またはプライベートのいずれかにできます。

引用元:GitHub公式

最も核となる要素でwebページやwebアプリケーション等を、GitHubで管理するための箱のようなものと捉えるとわかりやすいかもしれません。

右上のプラスアイコン「+」をクリックし、New repositoryを選択してください。
以下のリンクからリポジトリを作成することができます。
https://github.com/new

Repository nameの入力欄に任意の文字を入力しましょう。
このリポジトリ名によって公開するwebページのURLが変わってきます。
https://アカウント名.github.io/リポジトリ名のような感じになります )

Qiita

注意点
webページを公開するのでpraivateではなく publicで公開してください

(僕はこれに気づかず、pushできなかったので本当に注意してください)

ファイルのアップロード

GitHub Pagesで公開したいファイルを作成したリポジトリ内にアップロードしましょう。

HTML/CSS/JavaScriptファイルをそれぞれアップロードすればOKです。
(本記事はHTML/CSS/JavaScriptの扱い方に関する記事ではないため詳細は割愛します)

webページの公開

該当のリポジトリ内にファイルをアップロードできたらいよいよ公開です。

リポジトリ画面の右上にあるSettingsをクリックします。

スクリーンショット 2025-09-24 15.32.02.png

Settings画面の左側メニューにあるPagesをクリックします。

スクリーンショット 2025-09-24 15.32.37.png

Branch部分を任意のブランチ(基本的にはmainブランチだと思います)に変更して、saveをクリックします。
スクリーンショット 2025-09-24 15.34.31.png

以上で操作は完了になります。
問題なく操作されていればVisit site表記になります。こちらをクリックして頂くとGitHub Pagesを使って公開したwebページを見ることができますスクリーンショット 2025-09-24 15.33.19.png

URLをクリックするとWebページが公開されていて感動しましたw
やっぱ俺面白いわと思いますw
スクリーンショット 2025-09-24 15.50.11.png

感想

Happiness Chainでは実務を想定し、freeのbootstrap templateを
GitHub Pagesを使って
公開する課題になっております。(Git、GitHubも使用)
めっちゃ勉強になりました!!
https://jota96131.github.io/resume/
(自分がGitHub Pagesを使って公開したwebページを掲載します)

git、GitHubに苦手なイメージがありましたが自分が理解していないことに気づき
もっとたくさん勉強しようと思いました!
これからも、勉強を楽しみます✨

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?