LoginSignup
5
3

More than 3 years have passed since last update.

【Github リリース】Githubで静的サイトをリリースするまで

Last updated at Posted at 2020-04-05

Githubで静的サイトをリリースするまで

この記事では、GitとGithubを用いて、作成済みの静的サイトをリリースするまでの過程をご案内いたします!

それでは、張り切っていきましょう!

フロー
①Gitのダウンロード
②Githubのアカウント登録
 ーGithubにてレポジトリを作成
 ー作成済みのサイトデータをGitに登録
 ー作成した静的サイトをGithubにcommit&Push!
③GithubPagesを用いて、リリース設定
以上!

Gitのダウンロード

Gitとは、バージョン管理を行うツールです!
こちらを参考にしつつダウンロードをお願いします!

設定したユーザー名や、メールアドレスは覚えておいてくださいね!

Githubのアカウント登録

こちらを参考にしつつ、Githubの登録を行ってください!
Gitの登録の際に使用したユーザー名や、メールアドレスを用いて登録すればわかりやすいですね!

2段階認証はつけなくても大丈夫です!

Githubにてレポジトリを作成

Githubのホーム画面の左上に「New」のボタンがあるかと思います!
そのボタンをクリックしてみましょう!
スクリーンショット 2020-04-05 15.45.13.png

そうすると、以下のような画面が出てくると思うので、
スクリーンショット 2020-04-05 15.48.51.png
repository nameの部分に、「homepage」と入力ください!(任意の名前でも大丈夫です!)
Descriptionは、記入せず、
Publicを選択し、
チェックボックスにチェックはつけずに「Create repository」を押下してみましょう

するとこんな画面に遷移するかと思います
スクリーンショット 2020-04-05 15.53.46.png
いったん、このままおいておいてくださいこの画面の二行目のHTTPSのURLをコピーして、どこかにペーストしておいてください

作成済みのサイトデータをgitに登録

ターミナルで作成済みのディレクトリに移動していただき、ディレクトリをGitに登録します。

terminal
# デスクトップにある「homepage」フォルダをリリースしたいとき

> cd Desktop
> cd homepage
> git init #これにより、リポジトリを新規に作成できます
#Initialized empty Git repository in~~と表示されればOKです!

作成した静的サイトをGithubにcommit&Push!

上に続いて、

terminal
> git add -A #変更をステージング
> git commit -m "Initial Commit" #メッセージをつけてコミット
> git push (先ほどコピペしたURLを貼付) master

GithubPagesを用いて、リリース設定

そして、Githubのhomepageのレポジトリに再度アクセスして頂き、
下の画像のSettingsの部分を押下してください
スクリーンショット 2020-04-05 16.11.01.png
こんなページに遷移すると思いますので、
下スクロールしていって
スクリーンショット 2020-04-05 16.12.21.png
Github Pagesというセクションまで遷移します
スクリーンショット 2020-04-05 16.13.06.png
そこで、一つ目のメニューを押下して頂き、「master branch」を選択してください

選択すると、再度Settingsのページ最上部に移動しますので、またGithub Pagesのセクションまで遷移してください。
すると、URLが「Your site is published at ~」に表示されているかと思います。
スクリーンショット 2020-04-05 16.15.55.png
それがあなたのサイトの公開用URLです!!
そのURLさえクリックすれば誰でも、あなたの作成したWebsiteを見ることができます!
すばらですね!
あとは最初に表示したい画面のファイル名を最後につければ、完璧です!
例えば「homepage.html」を表示させたい方は、
「https://~.github.io/homepage/homepage.html」と打っていただければ、
望み通りの結果が得られると思います!👌

お疲れ様でした!!!!🎉

5
3
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
5
3