DEV Community

Cover image for Host Lovable.dev Project on github pages 😺

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
Collapse
 
poolshark profile image
Flo Ragossnig •

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
}));
Enter fullscreen mode Exit fullscreen mode

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/vite-github-pages-deployer@v1.5.0
        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: ./
Enter fullscreen mode Exit fullscreen mode
Collapse
 
coderatul profile image
Atul Kushwaha •

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 /

Collapse
 
daros_neochmosis profile image
Daros Neochmosis •

everything done properly but still getting 404

Collapse
 
coderatul profile image
Atul Kushwaha •

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

Collapse
 
daros_neochmosis profile image
Daros Neochmosis • • 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

Thread Thread
 
coderatul profile image
Atul Kushwaha •

thanks for your kind words and appreciating

Thread Thread
 
daros_neochmosis profile image
Daros Neochmosis •

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

Thread Thread
 
coderatul profile image
Atul Kushwaha •

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

Collapse
 
daros_neochmosis profile image
Daros Neochmosis • • 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

Collapse
 
girish_singh_2000 profile image
girish singh •

I followed both steps from blog and below comment but still getting blank page. Any other idea? I tried with incognito mode as well but no luck?

Collapse
 
coderatul profile image
Atul Kushwaha •

please share link to your repo

Collapse
 
girish_singh_2000 profile image
girish singh •

Thanks for giving you time. Repo : github.com/NajwaniGirish/girish-po...

Thread Thread
 
coderatul profile image
Atul Kushwaha •

@girish_singh_2000 i think you didn't followed the steps correctly, the repo you have shared is the same repo generated by lovable and not according to the steps mentioned above

Thread Thread
 
girish_singh_2000 profile image
girish singh •

I cloned the lovable repo as it is in my pc and then followed all the steps (The files were copy pasted from the lovable repo) is there anything prior steps that I missed? The repo linked with lovable is different ("de-portfolio" in my Github. let me know the reasons you think it is same then maybe I could try again resolving those.

Collapse
 
madhurima_rawat profile image
Madhurima Rawat •

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

Collapse
 
coderatul profile image
Atul Kushwaha •

a blog has been uploaded reagarding this blog

Collapse
 
madhurima_rawat profile image
Madhurima Rawat •

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

Collapse
 
srijan-xi profile image
Srijan Kumar •

Can you a video tutorial for this

Collapse
 
coderatul profile image
Atul Kushwaha •

on whihc platform should i upload it any recommendation ?

Collapse
 
jenkan27 profile image
Jens Holm •

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