Hello Kaikunmidev, fantastic effort on the challenge! Keep up the great work! 🚀
I'm still fairly new to front-end development myself, but I'll do my best to help with any issues you've encountered! 😊
Deploying a Vite project on GitHub Pages for the first time was a very frustrating experience for me as well, especially dealing with relative paths. However, I’ve found a few steps that make the process much easier.
Backup your project first just in case (create another copy of the entire project folder).
Step 1: Install gh-pages
Run this command in your project terminal:
npm install gh-pages --save-dev
Step 2: Add "base" option in vite.config.js file
export default defineConfig({
base: "/your-repository-name/",
});
In your case repository name is "/git-test4/".
If your defineConfig already contains other configurations, no worries, simply add "base" inside the existing object.
What your final vite.config.js should look based on what you have:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/git-test4/'
})
This ensures Vite correctly resolves paths when deploying to GitHub Pages.
Step 3: Add deploy script to package.json file
Go to the package.json. All you need to do here is add these two lines at the end of "scripts" object:
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
If you’re having trouble finding the "scripts" object, and I’ll send the final version of the package.json file with the necessary additions in the reply below.
Step 4: Deploy project to gh-pages
Run this command in the terminal:
npm run deploy
Step 5: Enable GitHub Pages
- Go to your repository on GitHub.
- Navigate to Settings > Pages.
- Under "Branch", select "gh-pages" and save.
Now you should be able to see your site live after a few minutes on https://kaikunmidev.github.io/git-test4/
(Optional) Keep main branch up to date.
While not required, it’s good practice to push all your changes so that your main (or other working branch) matches what you deployed in order the update the current files displayed on github.
git add .
git commit -m "Your commit message here"
git push origin main
Reminder: The gh-pages and main branches are completely independent, meaning your live site will work fine even if you don’t push changes to main.
That’s all for the GitHub deployment struggles! 🎉
Regarding the "Nutrition" section:
I’m not sure about the best practice, but it would probably be easier to achieve the desired results using semantic table elements:
Example:
<table className="table">
<tbody>
<tr className="names">
<td>Calories</td>
<td>277kcal</td>
</tr>
/* add more table rows (<tr>) here */
</tbody>
</table>
Just make sure table and rows take up full width of the container, then you can fine tune positioning by giving padding-left to the <td>
It's good practice for accessibility to avoid divs as much as possible, using semantic elements like section, article, etc.
