Html Question posted in
Some basic documentation can be found here.

Html – When I created a live link in github it loads only an empty page

I’m trying to host my website using GitHub Pages, but the live site is not working. I’ve ensured that my repository is public, the files (HTML, CSS, JS) are correctly placed, and the index.html file is in the root directory. I’ve also checked the GitHub Pages settings and tried solutions from various YouTube tutorials, but nothing seems to work.

Can someone help me identify what might be going wrong? Here’s the repository link: https://github.com/Vishnuvarthan14/vishnuvarthan14.github.io

Any guidance is appreciated, let me know if you’d like help refining further!

Tags:

2

Answers


  1. 0

    you can use the gh-pages package to easily build and deploy the app.

    Install gh-pages package: First, you need to install the gh-pages package in your React app. This package will help you deploy your React app to GitHub Pages easily.

    In your project directory, run:

    npm install gh-pages --save-dev

    Add homepage field to package.json: In the package.json file of your React app, add the homepage field to specify where the app will be hosted. It should look like this:

    "homepage": "https://yourusername.github.io/vishnuvarthan14.github.io"

    Replace yourusername with your GitHub username.

    Update the scripts section in package.json: Add deploy and predeploy scripts to your package.json file under the scripts section. This allows you to build the app and deploy it to GitHub Pages easily.

    "scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

    This will automatically build your app and deploy it to the gh-pages branch when you run the npm run deploy command.

    Build and Deploy: Now, you’re ready to build and deploy your app. Run the following

    Build your app:

    npm run build

    Deploy to GitHub Pages:

    npm run deploy

    This will create a new branch called gh-pages in your GitHub repository and deploy the build files there. GitHub Pages will then serve your site from this branch.

    Verify GitHub Pages Settings: After deploying, go to the Settings tab of your GitHub repository and scroll down to the Pages section. Ensure that the source is set to the gh-pages branch (and the folder should be /root).

    Wait for Deployment: After deploying, it may take a few minutes for GitHub Pages to reflect the changes. Your site should now be accessible at:

    https://yourusername.github.io/vishnuvarthan14.github.io

    Alternatively, you can consider using Vercel for a more seamless deployment process with automatic build and hosting, which is simple and requires no additional configuration.

    for me i use vercel it’s better.

    Login or Signup to reply.
  2. 0

    When I went on your page and opened the Developer Tools (Ctrl+Shift+I), I noticed a following error:

    Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.

    The reason for this problem is that JSX files are not natively supported by browsers, as they only serve to extend the original JS syntax. React needs to be compiled into regular JavaScript before executing in the browser.
    If you want to transpile, you should update your config:

    import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      output: {
        entryFileNames: '[name].js',
        chunkFileNames: '[name]-[hash].js',
        assetFileNames: '[name]-[hash][extname]'
      }
    }
  }
})

    and then use npx vite build to generate static files in the dist folder.

    PS: I’m sending a PR to your repo to fix this

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search