2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

GitHubを使って(git pushで)、Netlifyでサイトを公開する

Last updated at Posted at 2024-01-24

 webを検索すると、GitHubを使って(git pushで)、Netlifyでサイトを公開する記事はたくさんあります。しかし私は、git pusuは公式の方法でうまくいかず、Netlfyとの連携もうまくいかず、難渋しました。
 いくつかの記事を組み合わせて、何とか成功したので、備忘録を兼ねて記事にします。
 同じところでつまづいている方への、参考となればと思います。

おおまかな流れ

GitHubへのpush、Netlifyとの連携

手順

1. GitHubにリモートリポジトリを作る
2. Visual Studio Codeでローカルリポジトリを作成し、GitHubのリモートリポジトリへPushする。
3. NetlifyからGitHubリモートリポジトリへの連携

1. GitHubにリモートリポジトリを作る

【GitHubでの作業】 GitHubにリモートリポジトリを作る

① TOPページ、左側のTop Repositoriesにある「New」ボタン(またはRepositories画面右上の「New」ボタン)を押す。

GitHub トップ.png
又は、
GitHub リポジトリページ.png

② Repository nameのみ入力、一番下のCreate repositoryボタンを押してリポジトリを作成する。

※ Repository nameは今回「test」としています。
※ 公開はPublic, Privateのどちらでも可。
※ Initialize this repositoriy with: の Add a README file はチェックしない。

GitHub リポジトリ新規作成画面.png

下のような画面となれば作成は成功。「USER ID」は後程使用するのでコピーしてメモっておく。
GitHub リポジトリ新規作成直後.png

2. Visual Studio Codeでローカルリポジトリを作成し、GitHubのリモートリポジトリへPushする。

【VScode上での作業】

① Visual Studio Codeでディレクトリとファイルを作成

PCの適当な場所に新しいフォルダを作り、VScodeで開く
(例として「test」というファイルを作成しVSCodeで開いています)。
ターミナル画面を開く(Ctrl + @)。

VSCode 開くところ.png

ターミナルに、以下のコマンドを順次実行する。

ターミナル
mkdir github

(開いているディレクトリに「github」というディレクトリを作成する:この名前は何でもよいです。)

mkdir github.png

ターミナル
cd github

(「github」ディレクトリを開く〔移動する〕)

cd github.png

ターミナル
mkdir public

(開いているディレクトリ(github)に「public」というディレクトリを作成する:この名前は必ず「public」で作成してください。)

mkdir public.png

public内に、index.html、netlify.tomlを作成

(VSCodeの左側の上「+」をクリックして新規ファイル作成)

index.html、netlify.tomlを作成.png

以下の内容をコピぺする。

index.html
Hello World

index.htmlの中身.png

netlify.toml
[build]
  publish = "public/"

netlify.tomlの中身.png

保存する(Ctrl + S)。

② ローカルリポジトリを作成し、GitHubへpushする。

ターミナルに戻り、順次以下のコマンドを実行する。

ターミナル
git init

(ローカルリポジトリ作成)
git init.png

ファイル中身(git init後).png

ターミナル
git add .

(ローカルリポジトリのindex内にファイル内容が書き込まれる)
git add.png

ファイル中身(git add後).png

ターミナル
git commit -m "Initial commit"

(コミットする:ローカルリポジトリ内に登録される)

git commit -m Initial commit.png

ファイル中身(comit後).png

ここで、「Auther identity unknow」とメッセージが出る場合には、user.emailと、user.nameを登録する必要があります。
git commit のuser情報エラー.png
githubへuser情報登録.png

ターミナル
git remote add origin https://github.com/(USER ID)/test.git

(ローカルリポジトリと、リモートリポジトリを連携させる)

git remote add orgin https.png

ターミナル
git push origin master

("main"だとpush出来ない(下記のつまづきポイントに解説します)。"master"とすると、masterというbranchが形成され、そこにpushされる)
git push origin master.png
ファイル中身(push後).png

ここで、「Authentication(認証)」を聞かれた場合、認証を行います。
認証を、ブラウザーで行うか、Codeで行うか聞かれます。
(スクショ取るの忘れました)
私は ブラウザーで行う を選択しました。しばらくすると、以下の画面が表示されます。
Authentication(認証).png
Authentication(認証)VSC.png

3. NetlifyからGitHubリモートリポジトリへの連携

【Netlifyでの作業】

Sites画面の右上「Add new site」ボタンを押すとプルダウンがあり、「Inport an existing project」をクリック。

Netlify new site作成01.png

Let's deploy your project. の画面では、
「Deploy with GitHub」をクリック

Let's deploy your project.png

GitHubのリポジトリ一覧が表示、連携させたいリポジトリをクリックして選択
Netlify リポジトリ選択.png

Team、Branch to deploy は自動に入力されている
(自分の場合は、Teamは「(Team名)」、Branch to deployは「master」 と初めから入っている。)
(※Build commandには何も入力しない:下記のつまづきポイントで解説)
Publish directoryに「public/」(VSCodeで作成したフォルダ名)と入力(必ず後ろに「/」を付ける)。
一番下の「Deploy (リポジトリ名)」ボタンをクリック。

Let's deploy your project02.png

つまづきポイント(試してうまくいかなかったところ、ハマったところ)

【つまづき1】 初めに試したこと(間違いだらけ)

リモートリポジトリ作成
Add a RESDME file にチェックしてリポジトリを作成。
GitHub リポジトリ新規作成画面 README fileチェック.png

本文(上記)の1.②の時と異なり、「main」というブランチが自動に作成され、その中にREADMEファイルが作成される。

GitHub リポジトリ新規作成 README fileチェックした場合.png

VSCodeでローカルリポジトリ作成
 PC上に作成したフォルダを開き、中にファルダ(github)を作り、その中にindex.htmlファイルを作成。
開いている場所は大元ファイル(test)のまま、公式サイトの案内通り(…or create a new repository on the command line)にターミナルにコマンドを入力。

echo "# test" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/(user name)/test.git
git push -u origin main

git push -u origin main とすると、下のエラーが出たので、
push エラー01.png

https://qiita.com/Ayumu-y/items/7fb229f624d458ddacd1
を参考に、

git fetch origin
git reset --hard origin/main

とコマンド入力。
その後、再度 git push -u origin main を入力すると、下のメッセージが出るので、push出来ていると思いきや、出来ていない(無反応)。
push エラー02.png

この「main」ブランチが曲者。
GitHubへpush時に「main」ブランチがあるからといって、
git push origin main とコマンド入力してもpush出来ない。
git push origin master とコマンド入力すれば、「master」というブランチがmainの下に新たに形成され、そこにpushされる(mainというブランチは残る)。しかしpushすら出来ない時もある。

【つまづき2】

 今度は、 開いている場所を下のフォルダ(githubフォルダ)とし、公式サイトの案内通り(…or create a new repository on the command line)にターミナルにコマンドを入力。
 下の様にうまくいった様なメッセージが出るので、push出来ていると思いきや、出来ていない(無反応)。
push エラー03.png

【つまづき3】

NetlifyとGitHubのリモートリポジトリを連携させるところの設定

 Build commandに、コマンドを入力してはならない!
 参考とするwebサイトには「npm run build」「yarn build」とあるが、Buildに失敗する。

 エラーの要因が分からず、ChatGPTにそのまま放り込んでみたところ様々な解決策の回答が得られたが、順次試すも全て失敗。

【つまづき4】

Publish directoryにフォルダ名を入力する時、「/」を付け忘れると、Buildでエラーが出る。
「public/」はOK、「public」ではだめ。

参考にしたサイト

https://qiita.com/suin/items/743fe6252ad8af425c5e
https://qiita.com/thinkalot/items/b3c2e9060f46f5d4ea46
https://qiita.com/shozzy/items/dadea4181d6219d2d326
https://qiita.com/Ayumu-y/items/7fb229f624d458ddacd1

2
2
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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?