PR

無料で始める! GitHub Pagesで作る学生向けポートフォリオサイト

サーバとhtml, css, js ファイルのイメージ図 Web開発
記事内に広告が含まれています。
スポンサーリンク

 この記事では,結論から先にお伝えします!

学生が就活を目的にポートフォリオサイトを作成し,Webに公開する場合,その公開先は「GitHub Pages」がオススメです.

その理由と,他にオススメの公開先(レンタルサーバ 等)を以下で詳しくご紹介しますので,ぜひ最後までご覧ください.

スポンサーリンク
スポンサーリンク

GitHub Pages をオススメする理由

 ポートフォリオのデプロイ(公開)先として,GitHub Pages をオススメする理由は,以下の6つです.


基本的に無料でサービスを利用できること
・エンジニアを目指す学生にとって,親和性が高いこと
・デプロイ先として権威(ホスティングサービスの確固たる運営・利用実績)があること
・追加料金無し(無料)でSSLが使えること
・ホスティングサービスによる広告が表示されないこと
・Webサイトのバージョン管理ができること

親和性の高さ

 エンジニアをはじめとする広義でのIT業界を志望する学生であれば,既にGitHubアカウントを持っているという人も多いかと思います.既にアカウントを持っており,普段から使い慣れている人であれば,比較的簡単にGitHub PagesでWebページをデプロイすることができます.

信頼と実績のあるデプロイ先

 国内外の各企業が無償で提供するホスティングサービス(レンタルサーバ)は,いくつか存在しますが,長年にわたり多くのユーザから利用されてきた実績があり,これからもサービスを継続してくれる可能性が高いものは限られています.

 その中でもGitHub Pagesは,長年の実績と多くの人から信頼を寄せられているサービスであり,GitHub自体がアプリ開発のインフラ的存在であることから,これからもサービスを継続してくれる可能性が高いと言えそうです.

注意

GitHub Pages は、オンライン ビジネス、eコマース サイト、主に商取引の円滑化またはサービスとしての商用ソフトウェア (SaaS) の提供のどちらかを目的とする、その他の Web サイトを運営するための無料の Web ホスティング サービスとしての使用を意図したものではなく、またそのような使用を許可するものでもありません。

GitHub Pages について – GitHub Docs

 GitHub Pages には上記のような記述があり,厳密に言えば,「他の無償ホスティングサービスとGitHub Pagesを同列に扱うことは適当でない」と解されます.後述しますが,利用用途については制限があり,特にGitHub Pages上で公開されているWebサイトを通した機密情報のやり取りについては,厳禁となっています.

 あくまでも利用用途としては,個人のポートフォリオサイトや非商用の簡易的なWebサイト(Webアプリケーション)程度に留めておくのが無難です.

無料でSSLを利用できる

 前述の通り,無料のホスティングサービスはいくつかありますが,その中で追加料金無し(無料)でSSLを利用できるサービスは,仮に共有SSLを含めたとしても,極めて稀です.
一方,GitHub Pagesであれば標準状態でSSLが有効になっており,追加料金も必要ありません.
他のサービスとは,大きく差をつけています.

Webサイトのバージョン管理ができる

 GitHub Pages ならではの特徴になりますが,Webサイトのバージョン管理ができるというのも他のサービスには無いポイントです.
GitHubでは,リポジトリ(レポジトリ)と呼ばれるプロジェクト単位でソースコードのバージョンを管理していますが,このリポジトリにあるソースをデプロイするため,実質的にWebサイトのバージョンを管理することができます.

 旧バージョンのサイトに差し戻す,前回からの変更点を可視化 するといった操作を簡単に行うことができ,特にソースコードの変更点については他者も閲覧することができます.(Public リポジトリにしている場合)

スポンサーリンク

GitHub Pagesにデプロイ(公開)する方法

 ここからは実践編ということで,いよいよGitHub Pagesにデプロイする具体的な手順について説明します.

デプロイに関する注意点

 GitHub Pagesのデプロイに際しては,いくつかの注意点や制限があります.トラブルを避けるために,必ず公式ドキュメントを確認しておきましょう.以下は,公式ドキュメントからの抜粋です.

・PHPやPython等のサーバサイド言語には対応していない.
・無料版では,Publicリポジトリのみデプロイ可
・サイトサイズ,デプロイ時間,帯域制限などがある.
・機密情報(パスワード,カード番号 等)のやり取り,有害なコンテンツの禁止
・商用利用の禁止

 一般的なポートフォリオサイトであれば,上記の項目に抵触する可能性は低いかと思いますが,注意が必要です.特に,バックエンドの処理(CRUDや認証 等)を伴うWebアプリをデプロイしたい場合は,他のサービスを検討する必要があります.

デプロイの手順

GitHub Pages でWebページを公開する手順
  • Step1
    GitHub アカウントの作成

    GitHubアカウントを持っていない場合は,サインアップを行ってください.

  • Step2
    リポジトリの作成

    自分の好きな名前でリポジトリを作成してください.リポジトリの名称は,URLの一部になります.

  • Step3
    Commit・Push

    ローカルで作成したソースをGitHubにPushします.

  • Step4
    公開設定

    リポジトリ -> Settings -> Pages から公開設定を行います.

  • Step5
    完了

    ソースのPushと公開設定が完了したら,自動でビルド・デプロイされます.

リポジトリの作成

 前述の通り,リポジトリの名称はURLの一部になります.
例えば,「site」という名前でリポジトリを作成した場合,URLは「https://自分のGitHubアカウント名.github.io/site/」といった要領です.

また,「自分のGitHubアカウント名.github.io」という名前でリポジトリを作成した場合,URLは「https://自分のGitHubアカウント名.github.io/」となり,TLDの後ろには何も付きません.

以上の規則を踏まえると,

・ポートフォリオメインサイト(自己紹介,Works紹介):「自分のGitHubアカウント名.github.io」

・各Works:任意のリポジトリ名

このようなリポジトリの付け方がオススメです.
(同じアカウントの中に,同じ名前を持つリポジトリを複数作成することはできません.)

公開設定

 リポジトリ -> Settings -> Pagesの順に移動し,ブランチ名とドキュメントルートを選択し,「Save」ボタンを押して完了です.

スポンサーリンク

番外編

 前述の通り,GitHub Pagesは無償で利用可能なWebデプロイ先として,非常に有力な候補ですが,同時に制限や厳格な禁止事項も存在します.前述の注意事項やその他の制限事項に抵触する場合は,他のデプロイ先を検討する必要があります.

サーバサイドの処理を伴う場合

 PHPやRuby,Pythonなどのサーバサイド言語を使ったWebサイト(Webアプリケーション)を公開する場合,これらの言語に対応したホスティングサービスを利用する必要があります.
また,データベースを使ったCRUD処理を伴うプログラムの場合,MySQLやPostgreSQLが必須になります.

 ここでは,サーバサイドの処理に対応したホスティングサービスをいくつかご紹介します.

BaaS

 BaaSとは,Backend as a Serviceの略であり,バックエンド(サーバサイド)の処理を提供するクラウドサービスのことを指します.有名なサービスとしては,FirebaseSupabase 等が挙げられます.

 料金体系としては,一定の無料利用可能枠とそれを超過した分の従量課金プランが用意されている場合が多いようです.
デプロイするプロジェクトの数や想定されるリソース消費量(≒ アクセス数)などをもとに,サービスを選定する必要があります.

LAMP対応のレンタルサーバ

 いわゆるLAMP環境(Linux+Apache+MySQL+PHP/Perl/Ruby/Python)が整備されたレンタルサーバを借りるというのも一つの方法です.

 こちらは,無料プランと月額制の有料プランのサービスが存在します.ただし,無料プランの場合はディスク容量,データベース作成可能数が少なく,SSLを導入できない(導入可能であったとしても追加料金が発生する),ホスティングサービスの広告が表示されるなど,様々な制約を受けることになります.

 用途に応じて,適切なサービス・プランを選択することが重要です.また,有料のレンタルサーバであれば商用利用が認められているケースが多く,前述の注意事項に記載している商用利用の問題もクリアできます.
注)無料のレンタルサーバでも商用利用が一部認められている場合があります.有償・無償を問わず,各サービスの利用規約を確認することが重要です.

スポンサーリンク
スポンサーリンク
Web開発
シェアする
しばをフォローする
タイトルとURLをコピーしました