18
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

はじめてのGitHub Pages

Last updated at Posted at 2023-02-28

GitHub Pagesとは

GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。

引用元:GitHub公式

要するに、無料でwebページを公開できるというGitHubの1つの機能です。
GitHub Pagesサイトの例は、下記リンクにリポジトリが置いてあるので、見てみると面白いかもしれません。

使い方

①GitHubのアカウント作成

まずはGitHubのアカウントを作成する必要があるので、無料でアカウントを作成しましょう。
https://github.com/

すでにGitHubのアカウントを持っている方は、ログインしてください。

②GitHubにてリポジトリの作成

GitHub Pagesでwebページを公開するには、リポジトリを作成する必要があります。
リポジトリとは、webページやwebアプリケーション等を、GitHubで管理するための箱のようなものです。

以下リンクからリポジトリを作成しましょう。
(右上の+アイコンをクリック → New repositoryをクリックしても同じ画面に行けます)
https://github.com/new

Repository nameの部分に任意のリポジトリ名を入力しましょう。

このリポジトリ名は、後ほど公開するwebページのURLになります。
https://アカウント名.github.io/リポジトリ名のような感じになる)

なお、webページを公開するので、PrivateではなくPublicで作成してください。
pages_1.png

③表示したいファイルの追加

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

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

④GitHub Pagesの公開

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

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

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

Branch部分を任意のブランチ(基本的にはmainブランチだと思います)に変更して、saveをクリックします。
pages_4.png

上記操作で完了です。
しばらくすると、Visit siteと表示されるので、そちらをクリックするとGitHub Pagesを使って公開したwebページを見ることができます。
pages_5.png

お疲れ様でした。

とても手軽に静的なページを公開できるので、便利だなと思います。
サクッと試したい時などにぜひお試しください。

参考資料

18
16
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
18
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?