Deploy Webpage On GitHub pages

GitHub pages serve a static index.html page. The index.html needs to be at the root of the repo. The repo needs to be public. If its private GitHub pages doesn’t work.

• Custom Build
• Vuejs
• Reactjs

Custom Build

1. Make sure that the project build, the root of the repo has the index.html file

2. Go to setting > pages > branch > select main and save

3. Wait a minute or two. Visit your GitHub page.

https://username.github.io/repoName

Deployment via Vuejs

1. Create your Vue app

vue create [name-of-your-project]

2. Connect your Vue project to GitHub repo.

3. Install the gh-pages package

npm install gh-pages

4. In the vue.config.js file slap the publicPath property inside. Replace the true statement with your project-name.

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === "production" ? "/name-of-your-project/" : "/"
})

5. Inside the package.json file add homepage field right below name . Replace with your GitHub username and project repo name. Inside the scripts object add predeploy and deploy field.

"name": "repoName",
"homepage": "https://username.github.io/repoName",
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },

6. Run the deploy command. This will run the predeploy and create the production /dist folder. gh-pages will deploy the /dist folder to GitHub on the a sub-branch call gh-pages.

npm run deploy

7. On GitHub, go to setting > pages. Verify its now on a new branch called gh-pages.

8. Wait a minute or two. Visit your GitHub page.

https://username.github.io/repoName

Deployment via Reactjs

1. Create your React app

npx create-react-app [your-project-name]

2. Connect your React project to GitHub repo.

3. Install the gh-pages package

npm install gh-pages

4. Inside the package.json file add homepage field right below name . Replace with your GitHub username and project repo name. Inside the scripts object add predeploy and deploy field.

"name": "repoName",
"homepage": "https://username.github.io/repoName",
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

5. Run the deploy command. This will run the predeploy and create the production /build folder. gh-pages will deploy the /build folder to GitHub on the a sub-branch call gh-pages.

npm run deploy

6. On GitHub, go to setting > pages. Verify its now on a new branch called gh-pages.

7. Wait a minute or two. Visit your GitHub page.

https://username.github.io/repoName