DEV Community

Host Lovable.dev Project on github pages 😺

Atul Kushwaha on May 02, 2025

Deploying a Lovable.dev Project to GitHub Pages link to the blog to get free custom .me domain name Free custom domain for your project...

Read full post

Daros Neochmosis • May 8

everything done properly but still getting 404

Atul Kushwaha • May 8

try this dev.to/poolshark/comment/2nhik

Daros Neochmosis • May 9 • Edited

Yes, that fixed the problem bro, problem caused because I didnt change the workflow properly!
thanks again and keep up the good work sharing such projects

Atul Kushwaha • May 9

thanks for your kind words and appreciating

Daros Neochmosis • May 9

Your most welcome, have you ever tried a second page or I guess probably need a new github acc for that

Atul Kushwaha • May 9

most probably yes, we may host multiple pages from a single account

Daros Neochmosis • May 9 • Edited

Thank you for your quick reply, I think I tried it before writing here but I will try again later and get back to you

Flo Ragossnig • May 8

A quick update. I have no clue if Github changed the default pages route now but according to their docs you must name your repo <username>.github.io. This will automatically be your base route (so https://.github.io). Therefore, in the vite.config.ts, the base path must be

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
import { componentTagger } from "lovable-tagger";

export default defineConfig(({ mode }) => ({
  server: {
    host: "::",
    port: 8080,
  },
  plugins: [
    react(),
    mode === 'development' &&
    componentTagger(),
  ].filter(Boolean),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  base: '/' // Since this will be the base directory
}));

Additionally, you need to change the base path destination in the workflow.yaml file accordingly


on:
  push:
    branches:
      - main

permissions:
  id-token: write 
  contents: write 
  pages: write    

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18 

      - name: Vite GitHub Pages Deployer
        uses: skywarth/[email protected]
        with:
          public_base_path: /  # This is the base
          build_path: ./dist
          install_phase_node_env: dev
          build_phase_node_env: production
          package_manager: npm
          artifact_name: github-pages
          debug_mode: false
          working_path: ./

Atul Kushwaha • May 8

my repo name is coderatul.github.io and i set base path to this only

in workflow : public_base_path: /coderatul.github.io/
and in vite config file: base: '/coderatul.github.io/'

and it works maybe you forgot : /repo name/ (the slashesh)

anyway i went through your github and yours seems working with base as / so thanks for commenting this people facing issue might get it right with base as /

Madhurima Rawat • May 4

Your portfolio looks good ✨️ Looking forward to custom domain article, would be helpful

Atul Kushwaha • May 4

a blog has been uploaded reagarding this blog

Madhurima Rawat • May 5

Thanks for uploading! I read the blog — it’s really informative.

Srijan Kumar • May 2

Can you a video tutorial for this

Atul Kushwaha • May 3

on whihc platform should i upload it any recommendation ?

Jens Holm • May 27

I had issues with it not working, with page not found, blank page etc. so i deleted it all and gave up lol, but now i realised it might be because my repo was privet and githubpages requires a public repo to display it for free, so if your repo is private set it to public lol