あぱれる男子のつぶやき

プログラミングを奮闘中

【超初心者向け】GitHubを使ってみる③ ~Netlifyで公開してみよう~

Github

www.appatwi.com

www.appatwi.com



さて、前回まででGitHubにpushできたので、今回はそのファイルを公開する方法を見ていきます。

これは本当に簡単なのでサクッと終わらせましょう!

GitHubリポジトリを公開する

公開するには

ホスティングサービスについて

今回の例でいくと、今のままではHTMLファイルを公開して見ることはできません。
確認できるのは自分のPCだけですよね。

これをインターネットを通じて他のユーザーにも見てもらいたい!というときにそのファイルを一般公開するために使われるものが、ホスティングサービスです。

詳しくはこの記事が分かりやすいです。

e-words.jp


このときにお名前ドットコムなどでドメインを買って、Xサーバーなどのレンタルサーバーで契約して、、、

となるとお金がかかってしまいますよね。
作ったものを確認してみたいだけなのにいちいち面倒くさいな、と思います。

そんなときに便利なのが、Netifyです。

私も以前作った制作物を動画で公開したときにTwitterで教えていただいて初めて知りました。

shotaさんには感謝です。

Netlifyでできること

Netlifyはサンフランシスコをベースとするクラウドコンピューティングの企業である。静的ウェブサイトのためのホスティングサービス(英語版)とサーバーレスのバックエンドサービスを提供している。
(Wikipediaより)

ようは作ったものをすぐに公開できるサービスで、無料と有料があるのですが、無料でもめちゃくちゃ使える!!

そして、これが今回の記事のポイントなんですが、NetlifyはGitHubと連携できるので、公開までがすぐにできます。

最初の記事で5分でできますと書きましたが本当にそのとおりなんです。


自分の制作物にURLが即座に割り当てられ、すぐに無料で公開できる。

最高ですね。では、使い方をさっそく見ていきましょう。


Netlifyで公開する方法

まずはアカウントを作成しましょう。

Netlifyはコチラから ↓
https://www.netlify.com/


Get started for freeを押します。

f:id:mmmouh8845:20200117162035p:plain


一番上のGitHubを押しましょう。

f:id:mmmouh8845:20200117162156p:plain


これがGithubのアカウントがあると非常に便利で、ログインすれば勝手に紐付けてくれます。

Githubの方のメールアドレスとパスワードを入れましょう。

f:id:mmmouh8845:20200117162414p:plain


ログインできるとこのような画面になるので、New site from Gitを選択。

f:id:mmmouh8845:20200117162845p:plain


GitHubを選択。

f:id:mmmouh8845:20200117163015p:plain


前回pushしたindex.htmlのみが入ったsample-siteのリポジトリを選択します。

f:id:mmmouh8845:20200117163435p:plain


最後は無視してOKです。ビルド設定などですので、関係ないです!
一番下のDeploy siteを押せば終了です。

f:id:mmmouh8845:20200117163842p:plain


できましたね。後はお好みでサイトの名前を変更できるので、このSite settingsから

f:id:mmmouh8845:20200117164100p:plain


Change site nameを選択して、名前を変えてあげればOKです。

f:id:mmmouh8845:20200117164407p:plain


無事、公開できているようです。

f:id:mmmouh8845:20200117164817p:plain


スマホでも見れます。

f:id:mmmouh8845:20200117165110p:plain



これで終了です!

おわりに

Netlifyめちゃ便利ですよね。これを教えてもらってからGitHubを使って公開できるようになるまで長かった、、

自力でやろうとして無駄に時間がかかったり、頑張って作ったサイトのHTML/CSSデータも消してしまったりと、紆余曲折がありました。

そんな私のようなドジを踏んでほしくないので、本当に初心者向けに①~③まで記事を通してわかりやすく書いてきたつもりです。

少しでもこの記事がお役に立てればと思います。



それでは。



今回、3つの記事を書く上で参考になった記事をまとめておきます。

qiita.com

qiita.com

qiita.com

gootablog.com

qiita.com

www.sejuku.net