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

jQueryのeachメソッドの使い方

jQueryでは複数の要素に対して繰り返し処理を行う場合にeach()を使うことができます。そのeach()を使いこなしたていきたいので今回しっかりまとめていきます! eachメソッドって何? そもそ

フロントエンド

2020.06.10

JavaScriptのデータ型について

JavaScriptのオブジェクトについて勉強していくとデータ型について出てきたので一度ブログにまとめて整理していこうと思います。 データ型 データ型は大きく分けると、プリミティブ型(基本形)とオブジ

フロントエンド

2020.09.22

フォーム作成の備忘録

今回は、HTMLとCSSでは結構難しい分類にはいるフォームのコーディングを自分の復習がてらまとめていこうと思います。フォームの表示がちゃんとできるようにということをまとめていくので実際に入力された内容

フロントエンド

2020.03.31

jQueryのanimate関数について

今回は、jQueryの学習の続きということでanimate()についてまとめていきます。 animate関数とは? まず、animate関数とは何なのかについてです。animate関数はjQueryで

フロントエンド

2020.04.17

profile

kobayashi kent

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