• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ by Proglus(プログラス)

プログラミング学習初心者のための情報メディア

本ページにプロモーションが含まれる場合があります

You are here: Home / プログラミング入門 / 【最新版】GitHub PagesでWebサイトを無料で公開しよう(初学者向け)

【最新版】GitHub PagesでWebサイトを無料で公開しよう(初学者向け)

2023-07-04 By プログラミング入門ナビ編集部

Tweet
このエントリーをはてなブックマークに追加
Pocket

目次

  • 1 概要
  • 2 GitHubアカウントの作成
    • 2.1 GitHubのページへアクセス
    • 2.2 メールアドレスを入力
    • 2.3 パスワードを入力
    • 2.4 ユーザーを入力
    • 2.5 ロボットではないか検証
    • 2.6 コードを入力
    • 2.7 トップページに戻る
  • 3 新規リポジトリ作成
    • 3.1 リポジトリの作成画を開く
    • 3.2 新規リポジトリ作成
  • 4 ファイルのアップロード
    • 4.1 アップロードのページ
    • 4.2 ファイルのアップロード
    • 4.3 確認
  • 5 ページの公開
    • 5.1 設定を開く
    • 5.2 GitHub Pagesの設定
    • 5.3 確認
  • 6 ページの削除
    • 6.1 設定を開く
    • 6.2 リポジトリを削除
  • 7 まとめ
  • 8 今すぐメルマガ登録!
  • 9 動画でプログラミング入門をしよう

概要

この記事では、無料でWebサイトの公開が可能なGitHub Pagesへ、GitHubのアカウント作成から、Webサイトの公開と削除するところまでを解説します。

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!」とProglus「新HTML入門」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

GitHubアカウントの作成

GitHubのページへアクセス

GitHubのページへアクセスし、「Sign up」をクリック。

メールアドレスを入力

登録するメールアドレスを入力し、「Continue」をクリック。

パスワードを入力

パスワードを入力し、「Continue」をクリック。

ユーザーを入力

任意のユーザ名を入力し、「Continue」をクリック。

「製品のアップデートやお知らせをメールで受け取りますか?」と質問があり、受け取りたい場合は入力欄に「y」、受け取りたくない場合は「n」を入力し、「Continue」をクリック。

ロボットではないか検証

ロボットではないかと尋ねられるので、「検証する」をクリック。


検証が終わったら、「Create account」をクリック。

コードを入力

登録したメールアドレス宛に確認用のコードが送信されるので、コードを入力。

登録完了できました。

トップページに戻る

左上のマークをクリックすると、ログインした状態で作成したアカウントのトップページが表示されます。

新規リポジトリ作成

リポジトリの作成画を開く

ログインした状態でGitHubのトップページ(https://github.com/)から、「+」のアイコンのボタンをクリック。

「New repository」をクリック。

新規リポジトリ作成

Repository nameにリポジトリの名前を入力します。
ここでは「my-site-repository」としておきます。

GitHubでソースファイルを管理する場合、自分だけが見れるPrivateと、ほかの人も見ることができるPublicがあります。
今回は外部へ公開するため、チェックボックスを「Public」としておきます。

一番下まで行き、「Create repository」をクリックすると、リポジトリが作成されます。

「my-site-repository」というリポジトリが作成されました。

ファイルのアップロード

アップロードのページ

作成したリポジトリのページから、「uploading an exsiting file」をクリックして、アップロードのページに移動します。

ファイルのアップロード

アップロードしたいファイルやフォルダを枠内へドラッグアンドドロップします。

アップロードが終わったら、「Commit changes」をクリックして保存します。

確認

リポジトリのページへ行くと、アップロードされていることが確認できます。

ページの公開

設定を開く

「Settings」をクリック。

GitHub Pagesの設定

左項目の「Pages」から、「None」で「main」をクリック。

「Save」をクリックして保存します。

保存すると、以下の画像のようにURLを取得できます。

確認

URLをクリックし、アップロードしたサイトが表示されればOKです。

作成したサイトが無事公開されました!

ページの削除

設定を開く

ページの公開でアクセスしたリポジトリのページから、「Settings」をクリックして一番下まで行き、「Danger Zone」の「Delete this repository」をクリックします。

リポジトリを削除

確認フォームに太字の「ユーザ名/リポジトリ名」を入力した後に下のボタンを押すと、リポジトリを削除してサイトを削除することができます。

まとめ

今回はGitHubのアカウントの作成から、作成物をWebサイトへ公開 / 削除 するところまでを解説しました。
ご不明点は、Udemy、Proglus(プログラス)内に設置したQ&Aコーナーにてお知らせください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus(プログラス)でプログラミングを学び、創れる人になろう!

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Tweet
このエントリーをはてなブックマークに追加
Pocket

Filed Under: プログラミング入門 Tagged With: GitHub, GitHub Pages, Udemy, Web開発

Primary Sidebar

Proglus(プログラス)

Twitter

Follow @programmingnavi Tweets by programmingnavi

最近の投稿

  • 【05/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • AWSのパブリックIPv4アドレス有料化について 2024/2より
  • 【CSS】Google Fontsの利用方法について解説します!新UIに対応2023年11月更新
  • 【SQL】XAMPPのMySQLがXAMPPがポートの競合で起動できない問題について解決方法を解説します!
  • 【Colab】–NOMAL– と表示されて、ショートカットキー(ctrl+c)でコピーができない場合の解決方法を解説します!

カテゴリー

  • AIの使い方
  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

AI AWS AWS Cloud9 Cloud9 CodeWing CSS Emmet GCP Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench node.js Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy Visual Studio Code Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習

アーカイブ

  • 2025年5月
  • 2024年1月
  • 2023年11月
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年5月
  • 2023年4月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2025 · programmingnavi.com ・About・プライバシーポリシー