Zenn
📑

静的サイトをVercelにデプロイする手順(初心者向け)

2024/04/18に公開
GitHub
HTML
Vercel
初心者向け
tech

初めに

最新の情報については、必ずVercel公式サイトをご確認ください。

内容

以下のようなファイル構造あるとします

/profile
  - index.html
  - index.css
index.html
index.css

これらをGithubに上げて、Vercelにデプロイし無料でサイトをホスティングする方法をご紹介します。

本題は以下になります

1. 静的ファイルをgithubに上げる

始めての方はこちらを参照してください

2. Vercelにサインアップ

サインアップを押下

Hobbyを選択し、自由にYour Nameを入力しContinue

Continue with Github押下しアカウントを連携

3. Vercelにデプロイする

始めての方はInstallを押下し連携を行って下さい

連携が成功したら、以下のようにgithubに上げたファイルが出てきます。
表示されましたら、Importを押下しデプロイを始めましょう。

ここからが慎重に操作を行いましょう

  1. Build and Output Settings を押下し、ドロップダウンが開きます。

  2. OVERRIDEのトグルを押下し、入力欄に.を入力します

  3. Deployを押下し、しばらくすると以下のように表示されます👏

    画像押下すると、デプロイされたサイトに遷移します👏👏👏

    https://easyweb-seven.vercel.app/

Discussion