#1 Build the website
Convert markdown or asciidoc content to html. The conversion can be automatic at the webserver, but requires keeping two systems in sync which can be difficult therefore, conversion is done on the development side.
Build the website
In terminal, go to the project root and type:
$ hugo -D --gc --forceSyncStatic --destination public --minify-D - render draft pages
--gc - run clean-up tasks
--forceSyncStatic - copy all files when static is changed
--destination public - this is the standard folder for a static website.
--minify - reduce size of files by removing unnecessary characters like comments.
This will generate the website in the public folder. Add this folder to repository and push it to github.com. Here is how project folder will look like, notice the new public folder. This folder contains the complete website that will be served by vercel.com
├── archetypes
│ └── default.md
├── config.toml
├── content
│ ├── _index.md
│ ├── about-me.md
│ └── blog
│ └── index.md
├── data
├── layouts
├── public
├── resources
├── static
└── themes#2 Upload to a Repository
Upload the project to a repository such as github.com, gitlab.com or bitbucket.org. This assumes the project repository is on github.com. GitHub Desktop application can make learning how to work with repository easier.
3 Deploy to Vercel
- Log in to Vercel
- If you are not logged into GitHub in your browser, log in to GitHub
- Get the repository link:
- Import Git Repository:
- Verify account type:
- Select Vercel Account:
- Install GitHub automatic deployment on Vercel
- Import Project
- Preview Site
- Copy the baseURL
Set the baseURL parameter in the config.toml file:
1
baseURL = "https://mysite-brown.vercel.app/" (1)
| 1 | paste into config.toml |
Re-Build your site useing the same command as above
$ hugo -D --gc --forceSyncStatic --destination public --minifyCommit all changed in git and upload the site to repository. The push should trigger a new deployment, refresh your browser and the site should now look correct.
Here is the example site.