In this video, we will walk through the fundamentals of #Vite, how to use it in order to create a static website using #TypeScript, and how to deploy all of that into production using #githubactions to #githubpages.
The actual process takes less than 18 minutes, excluding a 5min deep dive into the different usage of assets vs public files.
*Useful links*
- Code: https://github.com/ResoluteError/vite-website
- Vite Getting Started: https://vitejs.dev/guide/
- Vite Github Actions Template: https://vitejs.dev/guide/static-deploy.html#github-pages
- Custom domain names with Github pages: https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages
*Timestamps*
0:00 Intro
1:03 Create Vite Project
2:37 Vite Local Dev Server
5:00 Vite Build Process
7:05 Assets vs Public
8:59 Restructuring `src` Directory
10:30 Repository Setup
11:50 Vite Config Setup
13:59 Assets vs Public Deep Dive
19:08 Setup GitHub Pages & Action
23:38 Outro