Merge pull request #45 from arifszn/44-update-deploy-guide

Update deploy guide

README.md

@@ -46,13 +46,17 @@ These instructions will get you a copy of the project and deploy your website on
 
   ![Workflows](https://arifszn.github.io/assets/img/hosted/gitprofile/workflows.png)
 
-- Open `package.json`, and change `homepage`'s value to `https://username.github.io`.
+- Open `vite.config.js`, and change `base`'s value.
+
+  - If you are deploying to `https://<USERNAME>.github.io/`, set `base` to `'/'`.
+
+  - If you are deploying to `https://<USERNAME>.github.io/<REPO>/`, for example your repository is at `https://github.com/<USERNAME>/<REPO>`, then set `base` to `'/<REPO>/'`.
 
   ```js
-  // package.json
+  // vite.config.js
   {
+    base: '/',
     // ...
-    "homepage": "https://username.github.io",
   }
   ```
 
@@ -62,11 +66,9 @@ These instructions will get you a copy of the project and deploy your website on
 - Your personal portfolio will be live at `username.github.io`.
 - Any time you commit a change to the **main** branch, the website will be automatically updated.
 
-You can skip the above steps and do a manual deployment by running `npm run deploy`. For more info, visit [here](https://create-react-app.dev/docs/deployment/#github-pages).
+If you see only `README` at `username.github.io`, be sure to change your GitHub Page's source to `gh-pages` branch. See [how to](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site). Also, if you face any issue rendering the website, double-check the `base` value in the `vite.config.js`.
 
-If you see only `README` at `username.github.io`, be sure to change your GitHub Page's source to `gh-pages` branch. See [how to](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site). Also, if you face any issue rendering the website, double-check the `homepage` value in the `package.json`. It must be the value matching the repository name.
+As this is a vite project, you can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this [doc](https://vitejs.dev/guide/static-deploy.html) for a detailed deployment guide to other services.
-
-As this is a create react app, you can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this [doc](https://create-react-app.dev/docs/deployment) for a detailed deployment guide to other services.
 
 ## 🎨 Customization
 

package.json

@@ -3,7 +3,6 @@
   "description": "Kickstart your personal portfolio with Github Api and blog",
   "private": true,
   "version": "2.0.0",
-  "homepage": "https://arifszn.github.io/gitprofile",
   "license": "Apache-2.0",
   "author": "arifszn",
   "repository": {
@@ -14,8 +13,6 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
     "lint": "eslint --ext .js,.jsx .",
     "lint:fix": "eslint --ext .js,.jsx --fix .",
     "prettier": "prettier --check './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",

vite.config.js

@@ -3,6 +3,8 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  // If you are deploying to https://<USERNAME>.github.io/, set base to '/'.
+  // If you are deploying to https://<USERNAME>.github.io/<REPO>/, for example your repository is at https://github.com/<USERNAME>/<REPO>, then set base to '/<REPO>/'.
   base: '/gitprofile/',
   plugins: [react()],
 });