Help us understand the problem. What is going on with this article?

GitHub で超簡単に静的サイトをホスティングする!

More than 1 year has passed since last update.

tl;dr

  • github では簡単に静的サイトをホスティングすることができます。
  • ここでは gh-pages というブランチを切ることによるホスティング ではない やり方を紹介します。
    • もちろん、ブランチいるほうのやり方でもできます。
  • 備忘録にでもしていただければ...

対象者

  • git を使い始めて間もないけど、だいたい仕組みぐらいはわかってきたなーっていう人。
  • ホスティングは知っている
    • けど、gh-pagesっていうブランチ切ってやってた
    • ほかの方法知らない
    • gh-pages ブランチいちいち切るのも...

Step1.

github で新しいリポジトリを作成します。

新しいリポジトリを作成

Step2.

テスト用のファイルを作成したいと思います。

ディレクトリ構造

page-hosting フォルダを作成

:open_file_folder: page-hosting :page_facing_up: index.html
:file_folder: css :page_facing_up: style.css
:file_folder: js :page_facing_up: common.js

githubからファイルをダウンロードする:
GitHub - lemon2003/page-hosting

またはclone:
https://github.com/lemon2003/page-hosting.git

Step3.

作成したファイルを、リモートリポジトリにプッシュしたいと思います。
1. git init で初期化
2. git add --all ですべてのファイルをステージング
3. git commit -m "commit comment" でコミット
4. git remote add origin リモートURL でリモートを追加
5. git push -u origin mastermaster ブランチにプッシュ

bash - リモートリポジトリにプッシュ

bash
User@DESKTOP MINGW64 /e/page-hosting (master)
$ git init
Initialized empty Git repository in E:/page-hosting/.git/

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git add --all

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git commit -m "first commit"
[master (root-commit) d5e7519] first commit
 3 files changed, 110 insertions(+)
 create mode 100644 css/style.css
 create mode 100644 index.html
 create mode 100644 js/common.js

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git remote add origin https://github.com/[ユーザーid]/page-hosting.git

User@DESKTOP MINGW64 /e/page-hosting (master)
$ git push -u origin master
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 4 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (7/7), 1.61 KiB | 411.00 KiB/s, done.
Total 7 (delta 0), reused 0 (delta 0)
remote:
remote: Create a pull request for 'master' on GitHub by visiting:
remote:      https://github.com/[ユーザーid]/page-hosting/pull/new/master
remote:
To https://github.com/[ユーザーid]/page-hosting.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

Step4.

いよいよホスティングの設定 :gear: をしたいと思います。

  1. Settings タブをクリック
  2. GitHub Pages グループ
    • Source : master branch に設定
  3. Save をクリック

1. Settings タブをクリック

`Settings` タブ

2. Source : master branch に設定 & Save をクリック

`Source` : `master branch` に設定 & `Save` をクリック

Step5.

準備は完了しました!
実際にアクセスしてみましょう。

URL: https://[アカウントid].github.io/[リポジトリ名]/
([アカウントid][リポジトリ名] はご自身のものに。)

表示結果

GitHub Static Page Hosting Test!

表示結果

終わりに

githubを使えば、簡単に、サーバーを自分で用意せず、静的サイトをホスティングすることもできます。
(もちろんバージョン管理もしながら。)
使いこなせば、独自ドメインの追加もできるので、何かしら便利だと思います。

lemon2003
The Coder (雑魚ーダー) フロントエンドメイン Qrunch: https://lemon2003.qrunch.io/
https://resume.id/lemon2003
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした