GitHub PagesとNetlifyでポートフォリオを公開してみた

2020年09月09日

フロントエンド

今回は無料で静的サイトを公開できるGitHub PagesとNetlifyでポートフォリオを公開してみたので手順やメリットなどについてまとめていこうと思います。下記のURLが公開したポートフォリオです。

GitHub Pages https://koke05.github.io/kokeportfolio/

Netlify https://kokeportfolio.netlify.app/

GitHub PagesとNetlifyについて

まずGitHub PagesとNetlifyについてまとめていきます。

GitHub Pagesについて

GitHubのリポジトリからサイトのHTMLなどを取得してウェブサイトを公開できる静的サイトホスティングサービスです。SSL/HTTPS を無料で利用できます。自分で取得したドメインも使えるみたいですね。

GitHubでサイトのアップロードができるのでFileZillaなどのFTPクライアントソフトは必要ないです。GitHubでpushした内容がそのままサイトに反映されるのでアップロードの手間がないので便利ですね。

Github Pagesは静的サイトをホスティングするサービスなのでWordPressなどのCMSを導入してデーターベースを使用するサイトは公開できません。あらかじめ用意されているテンプレートも利用できるみたいです。

Netlifyについて

こちらも静的サイトをホスティングできるサービスです。もちろんSSL/HTTPS を無料で利用でき、自分で取得したドメインも使えます。

GitHubやBitbucketなどGit のホスティングサービスと連携して自動でサイトを更新できます。GitHub Pagesと同じくアップロードする手間が省けます。

基本的なことは両方そこまで変わらない感じですかね。

GitHub PagesとNetlifyの違い

ここまできてお互いの違いがあまりわからないと思いますので軽くGitHub PagesとNetlifyの違いをまとめていきます。基本的にGitHub Pagesが簡単で手軽に利用できて、Netlifyが高機能で色々できるといった感じです。

GitHubを使っているなら簡単にできます。あとで手順は詳しく説明しますが少し設定するだけであっさりサイトとして表示させることができます。ただ静的サイトジェネレーターなどを使ってブログなどを制作したときには jekyll以外だとプラグインを入れたりなど少し手間がいるようですね。

NetlifyはGitHubだけでなくGitLab、Bitbucketとも連携して、自動デプロイできます。他のサービスを使っている場合はこちらの方がいいですね。また静的サイトジェネレーターで作っていてもある程度デフォルトで何もプラグインなど入れなくてもサイトをビルドしてくれます。

あと個人的にはサイトを公開するまでの流れもとてもわかりやすく、UIも今どきな感じでかなり使いやすいなと感じましたね。全部英語なんですけどなんとなくでわかるのは良かったです。

GitHub pagesとNetlifyの使い方

では、使うための手順を紹介していきます。

GitHub pagesの使い方

まずはGitHub pagesの使い方からまとめていきます。

まず、自分の公開したいサイトのリポジトリを作成しましょう。すでにGitHubでリポジトリを作成しバージョン管理している人は新たに作成する必要はありません。リポジトリの作成はGitHub pagesを使いたいという人は分かっていると思うので説明しません。

リポジトリを作成したらsettingのページにいきそのまま下にスクロールしていくと下から2番目あたりにGitHub pagesという項目があると思います。その中の一番上にsorceという項目があります。そこに情報を入力して公開するといった感じですね。そこのBranchは基本的にmasterを選択すれば問題ないはずです。私は一人でGitHubを使っているとそもそもブランチを分けて使うことがないので選択肢がそもそもmasterしかありませんでした。その横にある/rootと/docsが選択できるものは/rootは全てのファイルを公開するという感じで/docsがdocsフォルダ内にあるファイルのみサイトとして公開するといった違いがあります。サイトとして公開させたくないファイルがある場合、公開したいファイルのみdocsフォルダに入れておき、/docsを選択すれば公開したいファイルだけがサイトとして表示されます。

ここまできたら最後にsaveというボタンを押して上部に出てくるURLにアクセスして特に問題なかったらOKです。ちなみに独自ドメインを設定する場合はCustom domainという項目に自分のドメインを設定してください。独自ドメインを設定しない場合はURLがhttps://GitHubのユーザー名.github.io/リポジトリ名/になります。

これでGitHub pagesに公開できます。GitHubを使っているならかなり簡単だと思います。

Netlifyの使い方

続いてNetlifyの使い方をまとめていきます。

Netlifyのサイトにいき、まずは会員登録しましょう。使っているGitのホスティングサービスと連携して登録できるので連携して登録しましょう。

トップページの右側にNew site from Gitというボタンがあるのでそこから新規作成ができます。次の画面でGithubを選択します。選択すると自分のリポジトリの一覧が出てくるので、公開したいリポジトリを選びます。

次にデプロイの設定です。GitHub pagesと同じようにブランチを選択します。静的サイトジェネレーターを使っている場合にビルドコマンドが必要になってきますが、ここでそれも設定していきます。ここまできたらDeploy siteをクリックして特にエラーが出なければ公開完了です。

2つのサービスともにサイトの公開を簡単にできるのですごいですね。

まとめ

今回は、GitHub pagesとNetlifyについてまとめてみました。ここまで簡単に静的サイトをホスティングできて、無料なのがすごいですね。いつものサーバーにアップロードしてサイトを公開していくのもいいですが、簡単にできますしいつもとは違うやり方でやってみるというのも大事なのかなと思いますので、是非有効活用していきたいです。

Pocket

related

Sassの環境を整える

今回は、何となく避けてきたSassを勉強しようとふと思ったのでブログにまとめていきます。学校の授業で少し触ったのですがほとんど覚えていませんので時間もありますので覚えていこうと思います。 Sassとは

フロントエンド

2020.05.03

EJSを使ってサイトをコーディングする

今回は、ポートフォリオのコーディングで使ったEJSについてまとめていきます。EJSを使っていくための環境構築やEJSのメリットなどまとめていこうと思います。 EJSとは? そもそもEJSって何?という

フロントエンド

2020.08.27

よく使うjQueryメソッド備忘録

結構jQueryを触っていてこのメソッドどうやって書くんだっけと、ついど忘れしてしまうときがあって、いちいちそのためにググってというのもめんどくさいので、備忘録としてここにまとめておきます。今後もなに

フロントエンド

2020.07.09

jQueryでよくあるフェードインを作る

今回は、jQueryとCSSアニメーションを組み合わせて、Webサイトでよく使われているようなスクロールしていくと要素がフェードインするのを作っていこうと思います。 スクロールしたら表示されるようにす

フロントエンド

2020.06.28

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き