副業でオンライン業務のお仕事を受けるにあたり、自分のスキルをわかりやすく伝えるためにポートフォリオサイトを公開しています。
このポートフォリオサイトですが、できれば無料で公開したい… と私と同じように考える方は多いと思いますので、私がGutHub Pagesを使って無料で公開した手順を本記事で紹介します。
ポートフォリオサイトを無料で公開する手段
ちなみに、他にも無料で公開する手段としては以下が考えられます。
私はもともとgit/GitHubを使っていたため、GutHub Pagesを選択しました。
などなど
他にもありますが、比較的使いやすそうなものをピックアップしました。
Notionは言わずと知れた？ドキュメント管理サービスですね。CarrdはWeb名刺サービスとして一部界隈で有名なようです。Google Sitesは名前の通り、Googleサービスとして無料で静的サイトが公開できる模様。
Notion, Carrd,Google Sitesはコーディングなしで公開できるため、ITスキルのアピールが不要な場合（写真のポートフォリオなど）によさそうです。
GitHub PagesやNetlifyは多少のITスキルが求められますね。
GitHub Pagesでポートフォリオサイトを公開するまでの流れ
GitHub Pages を使ってサイトを公開する流れは以下の5ステップです。
GitHubアカウントの作成
では、まずGitHubを利用するためのアカウントを作成しましょう。
GitHubとは
ソースコードを管理・共有できるWebプラットフォームです。一般的には関係者だけで共有して開発することが多いですが、今回のようにインターネット上で公開することもできます。
https://github.com にアクセスして、右上の 「Sign up」をクリック。
必要な項目を入力したら、「Create account」よりアカウントを作成できます。
（Googleアカウントでサインアップするのが楽かも）
「Dashboard」というページが表示されたらOKです。
リポジトリーの作成
GitHubが利用できるようになったら、今回ポートフォリオのコードを配置する「リポジトリー」を作成します。
Dashboardページの左上に「New」ボタンがあると思いますので、こちらをクリックしてください。
次に必要な項目を以下のように設定したら、「Create repository」ボタンをクリックします。
| 設定項目 | 設定値 |
| Repository name | リポジトリーの名前 ポートフォリオサイトにアクセスするためのリンクが以下になります https://yamada128.github.io/＜ここにRepository nameが反映される＞/ |
| Choose visibility | Public に設定してください これが Private だとポートフォリオサイトを公開できません |
以下のような画面が表示されると思いますので、「README」のリンクをクリックします。
「README.md」は特に編集する必要はありませんので、右上の「Commite changes…」をクリック。
次に、「⚙ Settings」タブをh幼児して、左メニューから「Pages」をクリックします。
「Build and Deployment」セクションの「Branch」で「main」を選択して、「save」ボタンをクリックしてください。
これでGitHub上の設定は完了です！
index.html の用意
リポジトリーに配置するソースコードを用意します。GitHub Pages でサイトを公開するには、ルートに index.html が配置されている必要があります
そもそも公開するポートフォリオに悩んでいるという方は、そういったご相談も承っていますのでこちらからご連絡ください。
リポジトリーにindex.htmlをアップロードする
ポートフォリオのコード（index.htmlなど）が用意できたら、これをGitHubのリポジトリーにアップロードします
「< > Code」をクリックして、「Add file」タブを表示し、「Upload files」をクリックしてアップロードするファイルを選択してください。
（必要に応じて、index.html以外のファイルもアップロードします）
アップロードするファイルを選択したあと、「Commite changes」ボタンをクリックすれば、ポートフォリオのアップロードも完了です！
ポートフォリオにアクセスする
アクセス用のURLは、「⚙ Settings」>「Pages」の画面から確認できます。
ページが表示されていればポートフォリオサイトの完成です！お疲れ様でした！
なお、ポートフォリオサイトを非公開にしたいときは、「⚙ Settings」>「Pages」で「Unpublish site」をクリックすることで、アクセスできないようになります。
ポートフォリオの作り方が分からない方
以下のような悩みがある方には、ポートフォリオの制作アドバイスも可能です。
- ポートフォリオの内容をどう考えればいいか分からない
- CSS/HTMLコードの書き方が分からない
- CSS/HTMLがうまく動かない
サンプルのお渡しもできますので、お気軽にご相談ください！
メールで問い合わせる
cw.yamada128@gmail.comLINEで相談する
公式LINEを開くまとめ
GitHub Pageを使って無料でポートフォリオサイトを公開する手順をご紹介してきました。
ポートフォリオサイトの内容については、私のサイトも参考にしていただければと思います。
コメント