GitHub Pages
You can use GitHub Pages to showcase some open source projects, host a blog, or even share your resume. This will guide you to get started on creating your next website.Github-pages
It will create a website with a domain, username.github.io. Eg. Let's consider your username as peter101 and your repo name as OnTheGo. Then it will make a website with the domain peter101.github.io/OnTheGo/.
Steps for the Deployment
The following steps must be followed in serial-wise.
We will create a seperate gh-pages branch that will contain our /dist folder.
Push your code to your repository (using Terminal)
- cd to your Vite App.
- Run the following commands in your Terminal
$ git init$ git add .$ git commit -m "first-commit"$ git branch -M main$ git remote add origin http://github.com/username/repo-name.git$ git push -u origin main
Now, you will able to see your code in your repository.
Deploying (Static)
- Go to your
vite.config.jsfile. And add your base url to it.
To be more precise, your base url will be /repo-name/.
In my case, my repo-name is Tech-To. So, my base url will be /Tech-To/.
- Run
npm run buildin your Terminal.
By default, the build output will be placed at dist. You may deploy this dist folder to any of your preferred platforms.
- Add /dist folder into your repo. By running. ```
$ git add dist -f
`-f` is required, as your **.gitignore** will not consider your _/dist_ folder. Hence, it is required for git to consider it as well.
4. Run `$ git commit -m "Adding dist"` in your Terminal.
5. Run `$ git subtree push --prefix dist origin gh-pages`
##Your Deployed website
- Visit your repository.
- Go to Settings.
- Scroll down to **Pages**.
- There will be a link to your website.
####You did it!!
>#####Thank You for referring to this post. Your comments will be helpful for the betterment of this post.
Latest comments (35)
Your a beast my dude. I've seen a lot of these and this is the best , most concise way.
I don't like this approach. I use git actions to build and deploy after pushing to main branch. I'm trying to get/set some env variables to modify the base parameter in vite.config.
Please advise. I deployed my app. But when I go to the link: subycuro46.github.io/curo46-app/ --> it gives me a blank screen
The code is saved in folder called "curo46-app". and in github it is stored in repo "curo46-app" in main branch.
here's my package.json
{
"name": "mosaic-react",
"version": "0.1.0",
"homepage": "subycuro46.github.io/curo46-app/",
"scripts": {
"dev": "vite",
"build": "vite build",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.3",
"chart.js": "^4.3.0",
"chartjs-adapter-moment": "^1.0.1",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-flatpickr": "^3.10.13",
"react-router-dom": "^6.11.2",
"react-transition-group": "^4.4.5"
},
"devDependencies": {
"@vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.14",
"gh-pages": "^5.0.0",
"postcss": "^8.4.24",
"tailwindcss": "^3.3.2",
"vite": "^4.3.9"
}
}
here's my vite config
import { defineConfig } from 'vite'
import postcss from './postcss.config.js'
import react from '@vitejs/plugin-react'
// vitejs.dev/config/
export default defineConfig({
define: {
'process.env': process.env
},
css: {
postcss,
},
plugins: [react()],
resolve: {
alias: [
{
find: /^~.+/,
replacement: (val) => {
return val.replace(/^~/, "");
},
},
],
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
}
}
})
✓ 209 modules transformed.
dist/assets/icon-01-e89d7385.svg 0.97 kB │ gzip: 0.41 kB
dist/assets/icon-02-d3838050.svg 0.97 kB │ gzip: 0.41 kB
dist/assets/icon-03-53e50533.svg 0.97 kB │ gzip: 0.41 kB
dist/index.html 1.33 kB │ gzip: 0.60 kB
dist/assets/favicon-17e50649.svg 1.52 kB │ gzip: 0.80 kB
dist/assets/user-36-01-9a55a891.jpg 22.39 kB
dist/assets/user-36-05-ba984a9e.jpg 1,317.07 kB
dist/assets/index-ab4d7545.css 63.47 kB │ gzip: 10.66 kB
dist/assets/index-f908d944.js 680.48 kB │ gzip: 209.43 kB
(!) Some chunks are larger than 500 kBs after minification. Consider:
Published
To recommit new changes and push up to the remote repository:
On remote repository delete the "gh-pages" branch.
In you local repository run this command: npm run build
git add dist -f
git commit -m [your commit message here]
git subtree push --prefix dist origin gh-pages
if anyone has a quicker process please feel free to update this! but I found this the fastest way to push up to gh-pages.
How do I update the site once the page is deployed? I read a comment above about using
npm run deploybut I don't have that script in my package.jsonAwesome :D
Thank you!! 🙏🏼
Thank you so much <3
Or add:
base: "/<repo>/",tovite.config.js,npm install gh-pages --save-devadd to
package.jsonand then run command
npm run deployto keep it simple.Thanks bro
I wish I had a vite.config.js but I don't (I config 2 projects with Vite + Vanilla JS (no TS) and added Tailwind to one of them). I don't know how to create a github page
Can you help me?
This just saved my life. Thank you!!!
This is the way!
THIS is the best method. Much faster deployment time than the article's one.
For a custom domain, change
in
vite.config.jsbase: "/"and in
package.json"homepage": "your-custom-domain",Besides that, you'll be free of git errors ocasionated by adding -f to git the dist folder and if an error is found, the folder dist got added to git, so your deploy is not going to work
Wow, Thank you so much!
thank you