プログラミング？知らない僕が、Vercelで5分！自分のホームページを無料で公開できた話

プログラミング？知らない僕が、Vercelで5分！自分のホームページを無料で公開できた話

昨日の夜、ふと思い立って「自分のサイト」を作ってみたくなったんです。
別に何か特別なことをしたいわけじゃなくて、ただ「自分の名前が載ってるページがネットにあったら面白そうだな」くらいの、軽い気持ちだったんですよね。

僕はプログラミングとか、マジで全く知識がないんです。HTML？CSS？JavaScript？なにそれ美味しいの？ってレベル。
だから、正直「どうせ無理だろうな」って諦め半分だったんだけど、なんか最近、AIとかノーコード（コードを書かずに開発すること）とか、そういう話よく聞くじゃないですか。もしかしたら、僕みたいな素人でも何かできるんじゃないかなって、漠然と思ってたんです。

んで、ネットで「無料　ホームページ　公開」とかで適当に検索してみたんですよ。そしたら、なんか「Vercel」っていう名前をちらほら見かけるようになって。
最初は「バーセル？何それ？変な名前」くらいに思ってたんですけど、なんか「爆速デプロイ（Webサイトをインターネットに公開すること）」「初心者でも簡単」みたいなキーワードが目に入ってきて、これは試してみる価値あるかも、って思ったんです。

結果から言うと、本当に5分くらいで自分のサイトがネットに公開されちゃって、もう感動ですよ。
プログラミングの知識ゼロ、AIも使ってないのに、まさかこんな簡単にできるとは思いませんでした。
「プログラミング未経験だけど、自分で作ったサイトをネットに出してみたい！」って思ってる、まだ何もやったことない人には、僕の体験がきっと役立つはず。

この記事では、僕がVercelを使って無料で自分のホームページを公開するまでの手順を、僕みたいな素人目線で、スクショ代わりに短い説明を交えながら紹介していきますね。
マジで簡単なんで、騙されたと思って読んでみてください。

Vercelって何？って感じだったけど、とりあえず登録してみた

Vercelって、簡単に言うと「作ったWebサイトをインターネットに公開してくれるサービス」らしいです。
なんか、プログラマーさんがよく使うらしいんですけど、僕みたいな素人でも全然使えちゃいました。
しかも、無料プランがあるのが最高なんですよね。

まずはVercelのサイトにアクセスします。
https://vercel.com/

アクセスしたら、右上の「Sign Up」ってボタンを押します。
登録方法はいくつか選べたんですけど、僕はGitHub（ギットハブ）アカウントで登録しました。
GitHubっていうのは、プログラマーさんが自分のコードとかを公開したり、共同で開発したりするのに使うサービスなんですけど、別にプログラミングしなくてもアカウントだけ作っておけば、こういうサービスと連携する時に便利なんですよね。
もしGitHubアカウントがなかったら、先にGitHubのサイトで登録しちゃいましょう。メールアドレスとかで簡単に作れますよ。

GitHubアカウントは、Webサービスに登録する際の認証によく使われます。プログラミングをする予定がなくても、アカウントを持っておくと何かと便利です。

GitHubで登録すると、VercelがGitHubの情報を読み込む許可を求めてくるので、「Authorize Vercel」みたいなボタンを押して許可します。
これでVercelへの登録は完了です。拍子抜けするくらい簡単でした。

登録が終わると、Vercelのダッシュボード（管理画面）みたいなページに飛びます。
最初は何もプロジェクト（公開するWebサイトのこと）がない状態なので、真ん中に「New Project」ってデカいボタンがあるはずです。
とりあえず、この「New Project」ボタンを押してみます。

「テンプレートを選ぶ」って言われても…とりあえずこれ選んでみた

「New Project」を押すと、次に「Import Git Repository」とか「Start with a Template」とか、よくわからん選択肢が出てくるんですよね。
僕の場合、まだGitHubに何もリポジトリ（Webサイトのファイルとかをまとめておく場所）なんて作ってないし、「テンプレート」ってのが一番簡単そうだな、って直感で思いました。

「Start with a Template」のセクションを見ると、Next.jsとかReactとか、なんか難しそうな名前がいっぱい並んでるんですよ。
正直、どれを選んだらいいのか全くわからなかったんですけど、こういう時は一番シンプルそうなやつを選べば間違いない、って僕の経験則が囁きました。
そこで見つけたのが、「HTML/CSS/JS」っていうテンプレート。これなら僕でも名前の意味がわかる！って思って、これを選んでみました。

テンプレートを選ぶと、「Deploy」ボタンが出てくるので、それを押します。
すると、プロジェクト名とか、GitHubのリポジトリ名を入力する画面が出てきます。
プロジェクト名は、自分のサイトの名前とか、後で自分がわかりやすい名前にすればOKです。
例えば、「My First Website」とか「僕のホームページ」とか。
GitHubのリポジトリ名は、Vercelが自動で作ってくれるので、特に変更する必要はないです。

GitHubのリポジトリ名は、他の人と被るとエラーになる場合があります。Vercelが自動でユニークな名前を生成してくれるので、基本的にはそのまま進めて問題ありません。

ここで一つ、VercelがGitHubに新しいリポジトリを作ってくれるんですが、そのリポジトリにどんなファイルが入ってるのか、ちょっと見てみましょう。
僕が選んだ「HTML/CSS/JS」テンプレートは、こんな感じのシンプルな構成でした。

HTML/CSS/JSテンプレートのファイル構成

.
├── public
│   ├── index.html
│   └── style.css
└── vercel.json

中身も見てみます。public/index.htmlはこんな感じでした。

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>僕の初めてのホームページ</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これは僕の初めてのウェブサイトです。</p>
    <p>Vercelで簡単に公開できました！</p>
</body>
</html>

public/style.cssはこんな感じ。

/* public/style.css */
body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
}
h1 {
    color: #0070f3;
}

正直、このコードが何をしてるのか、全部はわかってないんだけど、なんとなく「文字を表示して、色を付けてるんだな」くらいは想像できますよね。
「Deploy」ボタンを押すと、VercelがGitHubにこのテンプレートのリポジトリを作成して、すぐにデプロイを開始してくれます。

まさかの5分で完了！？自分のサイトがネットに公開されてる…！

「Deploy」ボタンを押してからは、もうVercelにお任せ状態でした。
画面には、なんかビルド（Webサイトを公開できる形に準備する作業）が始まってるっぽいアニメーションが表示されてて、「おー、なんか動いてる動いてる」って感じで見てたんです。

そしたら、本当にあっという間。体感で1分も経ってないんじゃないかな。
画面が切り替わって、「Congratulations! Your new project has been successfully deployed.」みたいなメッセージが出てきたんです。
しかも、その下に「Visit」ってボタンと、なんかURLが表示されてるじゃないですか！

「え、もう終わり！？」って思わず声が出ちゃいましたね。
半信半疑でそのURLをクリックしてみたら……

自分のサイトが、ネットに公開されてるんですよ！

画面には「僕の初めてのホームページ」ってタイトルと、「ようこそ！」って文字がちゃんと表示されてて。
感動しましたね。マジで。
プログラミングの知識ゼロの僕が、本当に数分で自分のWebサイトを世界中に公開できちゃったんですから。

その時の僕のサイトのURLは、Vercelが自動で生成してくれた「https://xn----h8tp0dwc2v0bwdvdyd9hoe1e2b0fr532dgchc5flwkq41b1y8b.vercel.xn--app-ey3csmneh5dd0g8a2w5733d./?utm_source=qiita&utm_medium=social&utm_campaign=viralana-auto&utm_content=1166cd1a-7842-43cd-a28d-be026c6019b3
このURLを友達に教えてあげたら、「え、すごいじゃん！」って言ってもらえて、ちょっと鼻が高かったですね（笑）。

Vercelの無料プランでは、vercel.appのサブドメインが提供されます。カスタムドメイン（例: my-awesome-site.com）を使いたい場合は、別途設定が必要です。

デプロイの速さには本当に驚きました。
なんか、プログラミングってすごく大変なイメージがあったんですけど、Vercelを使えばこんなに簡単に公開までできちゃうんだなって。
なんか、インターネットがもっと身近に感じられるようになった瞬間でしたね。