Here is a quick and simple guide to deploy any web app to Vercel (previously known as Zeit).
The Flow
- Using Docusaurus which makes it easy to maintain Open Source documentation websites.
- Vercel account
- Deploy the web app with Vercel
Assumption
- I'll assume that you already have a web app in place, if not then create a new web app which acts as a documentation website.
Step 1: Getting started
In order to create a web-app with Docusaurus
- Create a directory and navigate inside to the directory.
- Run
npx docusaurus-init
. This will create a web project in the following structure
<directory-name>
├── Dockerfile
├── docker-compose.yml
├── docs
│ ├── doc1.md
│ ├── doc2.md
│ ├── doc3.md
│ ├── exampledoc4.md
│ └── exampledoc5.md
└── website
├── README.md
├── blog
│ ├── 2016-03-11-blog-post.md
│ ├── 2017-04-10-blog-post-two.md
│ ├── 2017-09-25-testing-rss.md
│ ├── 2017-09-26-adding-rss.md
│ └── 2017-10-24-new-version-1.0.0.md
├── core
│ └── Footer.js
├── package.json
├── pages
│ └── en
│ ├── help.js
│ ├── index.js
│ └── users.js
├── sidebars.json
├── siteConfig.js
├── static
│ ├── css
│ │ └── custom.css
│ └── img
│ ├── favicon.ico
│ ├── oss_logo.png
│ ├── undraw_code_review.svg
│ ├── undraw_monitor.svg
│ ├── undraw_note_list.svg
│ ├── undraw_online.svg
│ ├── undraw_open_source.svg
│ ├── undraw_operating_system.svg
│ ├── undraw_react.svg
│ ├── undraw_tweetstorm.svg
│ └── undraw_youtube_tutorial.svg
└── yarn.lock
Navigate to
website
folder inside theroot directory
.Run
yarn start
ornpm start
. This should bring up the server and launches the web app onlocalhost:3000
. Example website should be up and running.
Step 2: Building
- Considering all the changes are done, now is the time to build the app. This can be done by using
yarn build
ornpm build
. -
vercel
in your fav terminal to log in.
- You will then receive an email, verify that and you are now logged in.
Step 3: Deploying
- Navigate to
/build/<website-name>
-
vercel
to finally start deploying - Follow the simple on-screen instructions to deploy it.
Step 4: Chill out and enjoy
Since you have deployed your web-app, its time to enjoy and start exploring something else.
Reply in the comments if you enjoy this read or any suggestions to improve.
Top comments (0)