Back to Browse

Deploying a Static Website with Vite + TypeScript

10.1K views
Feb 27, 2023
24:09

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

Download

1 formats

Video Formats

360pmp448.8 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Deploying a Static Website with Vite + TypeScript | NatokHD