Search code examples
dnsgithub-pagessveltevite

blank screen on website after configuring apex domain and www subdomain variant on github

I am using vite+svelte wanted to host my webpage using github pages

Deployed Vite app as showed in the video How to Deploy Your Vite App to Github Pages

Create a repo repo1 on github

all stuff

git init
git add .
git commit -m "comment"
git branch -M main
git remote add origin https:// ........git

Changed the base url inside vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
    base: '/repo1/',
  plugins: [svelte()]
})

npm run build

git add dist -f

git commit -m "add dist"

git subtree push --prefix dist origin gh-pages

Got website running with this extension https://name.github.io/repo1/

Wanted to add a custom domain to the repo1

Saw this page Configuring an apex domain and the www subdomain variant

First configure an apex domain with A record

On GitHub, navigate to your site's repository.

Under your repository name, click  Settings.

Repository settings button

click Pages

Under "Custom domain", type your example.com, then click Save

Check for CNAME created inside repo1 containing example.com

Changed A record in DNS provider

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Then configured a CNAME record with your DNS provider

type CNAME name www.example.com data username.github.io.

confirmed if DNS record configured correctly using

dig WWW.EXAMPLE.COM +nostats +nocomments +nocmd

I had to get this output

> ;WWW.EXAMPLE.COM.                     IN      A
    > WWW.EXAMPLE.COM.              3592    IN      CNAME   YOUR-USERNAME.github.io.
    > YOUR-USERNAME.github.io.      43192   IN      CNAME    GITHUB-PAGES-SERVER .
    >  GITHUB-PAGES-SERVER .         22      IN      A       192.0.2.1

But what I got is

;WWW.EXAMPLE.COM.   IN  A
WWW.EXAMPLE.COM. 9999   IN  CNAME   YOUR-USERNAME.github.io.
YOUR-USERNAME.github.io. 9999 IN    A   185.199.111.153
YOUR-USERNAME.github.io. 9999 IN    A   185.199.109.153
YOUR-USERNAME.github.io. 9999 IN    A   185.199.110.153
YOUR-USERNAME.github.io. 9999 IN    A   185.199.108.153

I never got these

username pointing to github-pages-server

> YOUR-USERNAME.github.io. 43192 IN CNAME GITHUB-PAGES-SERVER .

github-pages-server pointing to IP

> GITHUB-PAGES-SERVER . 22 IN A 192.0.2.1

When I tried checking www.example.com my custom domain I get a blank white screen no errors or warning message on the website just a white screen

I came across this How to Configure GitHub Pages Custom Domain? (Google Domains | Subdomain & Apex Domain)

He too gets a blank white screen without any kind of error or warning messages on page load just as mine he inspects the page gets 404 error on console

When I checked my custom domain inspect -> console

Even i got similar warning

example.com/:8
GET https://example.com/repo1/assets/index.b0a7898d.js net::ERR_ABORTED 404
example.com/:9          
GET https://example.com/repo1/assets/vendor.8c7ac98a.js net::ERR_ABORTED 404
example.com/:10          
GET https://example.com/repo1/assets/index.897361a6.css net::ERR_ABORTED 404

He adds homepage inside package.json

  "homepage": "https://example.com",

Saves pushes the code on github and website starts working

How do I correct this?

Do I add '"homepage": "https://example.com",' inside package.json?

Or

Should I change the base URL inside vite.config.js from /repo1/ to example.com?

OR

have I missed anything in between?

I am confused please help

Solution

  • Went through vite documentation

    base is required to be specified inside vite.config.js

    base
    Type: string
    Default: /
    Base public path when served in development or production. Valid values include:
        Absolute URL pathname, e.g. /repo-name/
        Full URL, e.g. https://example.com/
        Empty string or ./ (for embedded deployment)

    default vite.config.js file content below

    import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()]
})

    When deploying with https://user-name.github.io/repo-name/ add base with repo-name

    import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
    base: '/repo-name/',
  plugins: [svelte()]
})

    When deploying with https://example.com(your custom domain) add base with https://example.com

    import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
    base: 'https://example.com/',
  plugins: [svelte()]
})

    Then npm run build update to your github repo, same procedure

    Got my site running