Netlifyで無料ホームページを公開する

2020/02/08

Git GitHub Netlify

t f B! P L

いよいよ最終目的に近づいてきました。Netlifyで無料ホームページを公開して、レンタルサーバー代110円を節約するというみみっちい目的です。

Netlifyに登録するに当たって、いろんなサイトを参照しましたが、やはりプログラマーの人たちが書いている文章は難しく、不安は消えません。

特に参考になったのは、あひるうさぎさんの、

NetlifyとGitHubでHello Worldを表示するまでの流れ

です。ありがとうございました。
おかげさまで、うまくいきました!

index.htmlを作成

まず、以前作った、自分のパソコンの「git-test」フォルダ(ローカルリポジトリ)の中に、index.htmlを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Netlifyで無料ホームページを公開!</title>
</head>
<body>
<h1>Netlifyで無料ホームページを公開!</h1>
<p>できたよ!</p>
</body>
</html>

こんなふうに適当に作って、保存します。これがサイトとして公開されることになります。
次に、Git Bashを起動して、

$ cd git-test

でgit-testディレクトリに移動。
そして、例の、

git add index.html
git commit -m "htmlファイルを作成"
git push

で、GitHubのリモートリポジトリに、index.htmlを送ってやります。
これで準備は終わりです。

Netlifyのサイトにアクセス

続いて、


にアクセスします。すると、


こんな恐ろしい英語のホームページが表示されます。
freeという文字に力づけられて、「Get started for free」をクリックします。



Welcomeに少し安堵しながら、GitHubをクリック。GitHubアカウントを使ってNetlifyのアカウントを作るよ、ということですね。


「Authrize netlify」をクリックすれば、Netlifyのアカウントが作成されるようです。
どういうことか今ひとつよくわからんな、と思いつつも、えいやっとクリックします。


こんなのが出てきてびびります。でも大丈夫。これは単なる説明です。「Gitでpushすれば簡単にサイトを公開できるよ」とお知らせしてくれているようです。「Next」です。


「無料で自動的にhttpsをつけてやるぞ」ということですね。「Next」です。


「ターミナル(例の黒い画面です)から離れることなく何でもできるぞ」と自慢してるようですね。「Finished」です。
すると、



となります。上の方を見ると、いつの間にかチームになっていますね。一人でやるのに。まあ、いいか。あまり文句を言ってはいけません。
さて、Gitを学んだ我らは堂々と、「New site from Git」をクリックします。


「GitHub」をクリックします。「公開するサイトのソースはGitHubにあるものを使うよ」と知らせしてやります。
すると、また認証を求められます。


Authorize Netlify by Netlify」をクリックします。


「Only select repositories」を選びます。「All repositories」はすべてのリポジトリをサイト化する場合かな。

「Only select repositories」を選択すると、「Select repositories」が出てくるので、それをクリック。GitHubのリポジトリが出てくるので、前に作った「git-test」リポジトリを選びます。そして、「Install」をクリックします。
すると、パスワードの確認が求められます。


何のパスワードだ、と少し不安になります。GitHubのパスワードを入力して、「Confirm password」をクリックします。すると、


GitHubのリポジトリがNetlify上に表示されます。クリックすると、


となります。上には、「Deploy settings」とあります。デプロイとは、ここではサイトの公開と考えればいいでしょう。
デプロイのセッティングということですが、特に何もしないで、「Deploy site」をクリックします。


なんと、これでサイトがもう作成されています。
左上のURLをクリックしてみましょう。


とページが表示されます。
すごい!
すごい!
すごい!
3行では足りません。

サイトを更新してみる

ローカルのリポジトリgit-testに戻って、そこにあるindex.htmlファイルを開きます。

<p>文章を追加してみたよ!</p> 

という一行を書き加えます。
Git Bashを起動し、

$ cd git-test
git add index.html
git commit -m "文章の追加"
git push  

と打ちます。
それから、先ほどのページをブラウザで更新してみると、


となっています。う~む、なんて簡単なんだ! 

まとめ

これで、GitとGitHubとNetlifyを使って無料でホームページを作成したり、更新したりできるようになりました。同じようにして、いくつもローカルリポジトリ(フォルダ)を作って、GitHubに置いておけば、どんどんサイトを作ることができます。

GitHubというのはサーバーのような役割をしていて、自分のパソコンからGitでpushしてデータをGitHubに送るのは、FTPソフトでサーバーにhtmlファイルなどを送るようなものだと考えればいいのでしょう。(大雑把すぎる?)FTPソフトより簡単な気もします。

長い間かかりましたが、作成できてよかった、よかった。

QooQ. Powered by Blogger.