Packaging for Launch — Deploy to Vercel
In this chapter, you will learn how to package a locally developed blog project and deploy it to the internet for free, obtaining a public access link.
Build the production bundle
During development, runnpm run dev, Vite starts a local development server with hot module replacement support.
What you need for deployment isthe optimized and minified production bundle.。
$ npm run build
After execution, the following is generated in the project root directorydist/folder:
dist/ ├── index.html # 入口 HTML ├── assets/ │ ├── index-Df3aBc9x.js # 打包压缩后的 JS │ ├── index-Gh7jKl2m.css # 提取并压缩后的 CSS │ └── ... ├── posts.json # public 目录文件原样复制 └── favicon.svg # 静态资源
Key changes:
- Filenames include a hash (the hash changes when content changes, used for browser cache control)
- Code is minified and tree-shaken (removes unused code)
- The contents of the public/ directory are copied as-is to the root directory
To preview the build result: run
npx vite preview, which starts a local server in production mode to simulate the live environment.
Push the project to GitHub
Step 1: Create a GitHub repository
On GitHub, click + → New repository, and fill in:
- Repository name：react-blog-app
- Set it to Public (for free deployment)
- Do not check Initialize with README
Step 2: Initialize Git and push
$ cd blog-app $ git init $ git add . $ git commit -m "初始化 React 博客项目" $ git branch -M main $ git remote add origin https://github.com/你的用户名/react-blog-app.git $ git push -u origin main
Before pushing, make sure
.gitignorecontainsnode_modulesanddist. node_modules should not be uploaded (it can be restored via npm install), and dist is automatically generated by the build platform.
Vercel deployment
Vercelis currently the most popular front-end deployment platform, with zero-config support for React/Vite projects.
Deployment steps
- Visitvercel.com, log in with your GitHub account
- Click "New Project" → Import Git Repository → select react-blog-app
- Vercel automatically detects Vite + React and fills in the configuration automatically
- Click "Deploy" and wait a few dozen seconds
- After successful deployment, you get a link such as:
https://react-blog-app.vercel.app
| Configuration item | Value | Description |
|---|---|---|
| Framework Preset | Vite | Auto-detection |
| Build Command | npm run build | Auto-detection |
| Output Directory | dist | Auto-detection |
Automatic deployment
From then on, every timegit push, Vercel automatically: pulls the code → npm install → npm run build → deploys to production.
The entire process is fully automatic: push and it goes live.
Custom domain (optional)
- Vercel project Dashboard → Settings → Domains
- Enter your domain (e.g., blog.example.com)
- Add a CNAME record at your DNS provider pointing to
cname.vercel-dns.com - Wait for DNS to take effect; Vercel automatically applies for an SSL certificate
Next learning directions
| Learning direction | Who it's for | Recommended starting point |
|---|---|---|
| TypeScript + React | Want to write more rigorous, large-scale projects | Add TypeScript to the project, starting with Props and Hook types |
| Next.js | Need SEO, SSR, and full-stack capabilities | A React-based full-stack framework where files are routes |
| React Query (TanStack Query) | Need more powerful data fetching management | Caching, automatic re-fetching, optimistic updates |
| State management library | Application state logic is very complex | Zustand (lightweight), Redux Toolkit (heavyweight) |
| Component library | Quickly build admin dashboards | Ant Design、MUI、shadcn/ui |
React vs Vue3 Full-stack Roadmap Comparison
| Direction | React ecosystem | Vue3 ecosystem |
|---|---|---|
| Full-stack framework | Next.js | Nuxt.js |
| Type system | TypeScript (better native support) | TypeScript |
| State management (lightweight) | Zustand | Pinia |
| Data fetching | React Query | VueUse / TanStack Query |
| Mobile | React Native | — (Weex has been discontinued) |
Other extensionsYou have completed the most important step — building a real project completely with React. Whether you later move on to TypeScript or Next.js, you are adding a new dimension on top of what you already have. React's way of thinking (state-driven views, componentization, one-way data flow) will play a role in every project you build afterward.