プログラミング？知らない僕が、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を使えばこんなに簡単に公開までできちゃうんだなって。
なんか、インターネットがもっと身近に感じられるようになった瞬間でしたね。