「HTMLとCSSは勉強したけど、公開の仕方が分からない…」そんな悩みは、Netlifyを使えば解決できます。しかも今回はGitHubのアカウントすら必要ありません。

そもそもNetlifyって何？

「ネットリファイ」と読みます。「net（ネット）」+「-ify（〜化する）」で、「ウェブに（サイトを）展開する」というニュアンスの造語です。

Netlifyも、Vercelと同じ「ホスティングサービス」のひとつです。難しく言うとよく分からなくなりますが、今は「作ったサイトをネットに置いてくれるサービス」とだけ覚えておけばOKです。Netlifyの一番の特徴は、サイトのフォルダをブラウザにドラッグ&ドロップするだけで公開できる点。GitHubアカウントも、コマンド入力も必要ありません。

Netlify無料プランでできること 独自のURLで公開できる（例：xxxx.netlify.app） 広告なし 表示が高速 フォルダをドラッグ&ドロップするだけで即公開 更新したい時も、また同じフォルダをドラッグ&ドロップするだけ

就活用のポートフォリオサイトなら、この無料プランで十分すぎるほどです。

就活ポートフォリオならNetlifyで十分

「HTMLとCSSを勉強したはいいけど、作ったポートフォリオってどこで公開するの？」

そんな疑問を持った方に朗報です。実質タダで公開できます。

その方法が Vercel（バーセル） を使うことです。この記事では、HTML/CSSを学びたての方に向けて、Vercelでポートフォリオを公開する方法をわかりやすく解説します。

そもそもVercelって何？

VercelはWebサイトを無料でインターネットに公開できるサービスです。

難しく言うと「ホスティングサービス」と呼ばれます。でも今は「サイトをネットに載せてくれるサービス」とだけ覚えておけばOKです。

Vercel無料プラン（Hobby）でできること 独自ドメイン接続も無料 xxxx.vercel.app のURLがもらえる GitHubと連携してpushするだけで自動更新 HTML / CSS / JSだけのサイトも全然OK Next.js、Reactなどのフレームワークにも対応

「GitHubと連携してpushするだけで自動更新」というのがポイントです。ファイルをFTPでアップロードしなくていいんです。

就活ポートフォリオならVercelで十分

「無料の

GitHubとは？

GitHubは、コードを保存・共有できるサービスです。ファイルの変更履歴を自動で記録し、過去の状態に戻すこともできます。コードのやり取りや添削にも便利なツールです。

準備するもの GitHubアカウント（無料、メールアドレスがあればOK） Visual Studio Code（無料のコードエディタ） GitHub Desktop（推奨・無料、Git操作が簡単になります） GitHubアカウント作成方法 GitHub公式サイトにアクセス 「Sign up（サインアップ）」から登録 メール認証後、ログインして準備完了 リポジトリ（課題提出用の箱）の作成 GitHubにログイン 右上の「＋」→「New repository」をクリック 以下を設定 Repository name：課題名（例：lp-cafe） Public：公開設定 Add a README：リポジトリの説明を入れたいならチェックを入れると便利 「Create repository」をクリック VS Codeとの連携方法（初心者向け：GitHub Desktop使用） GitHub Desktopをインストール GitHubアカウントでログイン 「C

GitとGitHubは名前が似ていてややこしいですが、別物 です。Git：開発プロジェクトのバージョンを管理していて、その共有ファイルの情報が格納されています。GitHub：Github、Gitlabは、Gitを公開する（「ホストする」といいます）場所、Gitリポジトリが集まっている場所です。ネット上でリポジトリを管理できます。

アカウント作成

上記アドレスもしくは「Github」と検索してアカウントを作成し、ログインhttps://github.com/

新規プロジェクト作成 New : 左上のボタン Create a new repository（もしくは右上にある+をクリックしてnew repository） Repository name > Create repositoryRepository name : お好きな名前を入力----Public : 公開Private : 非公開

その他チェックボックスは気にしなくて大丈夫です。軽く補足説明を書いておきます。Add a README file : 説明書を追加するかどうかAdd .gitignore : gitの管理の対象にしてほしくないファイルを書いていくことができるChoose a license : ラ

Gitは、過去のデータに戻ったり、派生してデータを修正できたりします。

Gitを使うことでいつでもプログラムの更新を記録しておくことができ、コミット(更新を保存)をすることによって途中までの記録を残すことができます。一昨日の記録に戻りたいとなったときには、その記録に戻ることも可能です。

Gitを使い共通のファイルのバージョンを管理することによってそれぞれのローカルのパソコンに独立した環境を作ることができ、またその共通ファイルの更新を簡単にできます。そうすることによって、お互いを干渉することなく開発を進めていくことができます。

まとめると...

過去どんな変更をしたか確認できます 過去の状態にいつでも戻せます 他の人とコードを共有できます 環境構築

macOS：

まずHomebrewをインストールします。https://brew.sh/index_ja上記リンクの「インストール」のコードをコピーしてターミナルで実行して下さい。

パスワードを求められたらPCを立ち上げる際に入力するパスワードを入力して下さい。(ただこの時入力出来ていても画面には出力されてないので注意して下さい。)

Homebrewのインストールが