📌

GitHubPagesを使ってWebページを公開する

2022/10/25に公開約1,600字

ドメイン買ったりサーバー建てたり、ターミナルを使ってコマンドで環境構築したり…結構大変。独自ドメインではなく、試しに自分のサイト作りたい!って時に良さそうに思ったGithub pagesを使ってWebページを公開してみる。

## Github pagesとは?
Githubが提供している無料で公開できる、静的サイトのホスティングサービスのこと。
公式ドキュメントはこちら(GitHub Pages ドキュメント)です。

今回はターミナルを使ってコマンドを打たずに作成・更新できる、GitHub Desktopを使用した方法も記載しました。

手順

  1. ローカル環境にてwebページを作成
  2. GitHubのアカウントを作成
  3. GitHub Desktopをダウンロードして、ローカル環境で使用
  4. Githubで新しいリポジトリ(New repository)を作成
  5. 作成したリポジトリをOpen with GitHub Desktopを選択し、クローン(git clone)する
  6. ローカルにある「GitHub」ファイル内にあるリポジトリ名のファイルに作成したwebページをコピー&ペースト
  7. GitHub Desktopでcommitしてpush
  8. Githubでマスターブランチに設定
  9. 完了!

ローカル環境にてwebページを作成

index.htmlというファイルが1つあれば問題ありません。
ですが、今後も更新して使用していくならファイル構成も考えて

  • html
  • css
  • js

のファイルを用意するのが好ましいです。

GitHubのアカウントを作成

GitHub Pagesを使用するには、GitHubのリポジトリが必要です。
リポジトリを作成する為に、GitHubアカウントを作成しましょう。
GitHub公式サイトから「GitHubを登録」しましょう。

Githubで新しいリポジトリ(New repository)を作成

GitHubアカウントを作成したら、GitHub Pagesで使用するリポジトリを作成しましょう。

GitHub Desktopをダウンロードして、ローカル環境で使用

リポジトリを作成したら、GitHub Desktopをダウンロードし、使用できる状態にしましょう。

作成したリポジトリをOpen with GitHub Desktopを選択し、クローン(git clone)

GitHub Desktopが使用できるようになったら、一度GitHubの画面に戻リます。
作成したリポジトリのページを開き、Open with GitHub Desktopを選択し、クローン(git clone)するとローカルにあるGitHubフォルダー内に作成したリポジトリ名のファイルが作成されます。

ローカルにある「GitHub」ファイル内にあるリポジトリ名のファイルに作成したwebページをコピー&ペースト

作成されたリポジトリ名のファイルに、用意したwebページをコピー&ペーストしましょう。

GitHub Desktopでcommitしてpush

GitHub Desktopを見ると、変更された更新内容が確認できます。
変更内容に問題なければcommitしてpushしましょう。

Githubでマスターブランチに設定

Githubの画面に戻り、マスターブランチに設定しましょう。
指定されたURLを見ると、更新した内容がweb上に反映されます。

更新はGitHub Desktopでcommitしてpush

更新は、GitHub DesktopでcommitしてpushでOK!
ターミナルを使用し、コマンドで更新は下記をターミナルに入力してエンターを押すと更新される。

$ git add . 
$ git commit -m "comment" 
$ git push origin master

Discussion

ログインするとコメントできます