Host Lovable.dev Project on github pages 😺

Deploying a Lovable.dev Project to GitHub Pages

link to the blog to get free custom .me domain name Free custom domain for your projects 😉

Here is the link to my portfolio, generated by lovable.dev and hosted on GitHub Pages

Prerequisites

Before we begin, ensure you have the following:

1. Node.js (version 18 or higher) installed on your system.
2. Basic knowledge of Git and GitHub.

Step 1: Connect lovable.dev with GitHub

• Click View on GitHub.
• Clone this private project locally on your machine.
• Open a terminal in your cloned repository location. First, we are going to remove all Git files. For Windows, type:

Remove-Item -Recurse -Force .git
# Check if Git files still exist
git status

• This will remove all Git-related files from your project.
• Now we can try running the project locally:

npm install       # Install all dependencies
npm run build
npm run dev

6.Make any changes to the code if needed.

Step 2: Create a New Repo for GitHub Pages and Update Config

• Create a new repository, say coderatul-portfolio, on GitHub.
• Clone this newly created repository to your machine.
• Copy and paste all files from your original project (where Git was removed) to this new repo coderatul-portfolio.
• You may now delete the initially cloned repository, as we have all source code where we need it.

Update vite.config.ts

The base property in the Vite configuration file (vite.config.ts) must be set to the repository name for GitHub Pages. This ensures that all asset paths are correctly resolved.

Example:

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: '/coderatul-portfolio/' // Replace with your GitHub repo name
}));

Step 3: Push Code to GitHub and Set Up Workflow via GitHub Actions

• Push the changes to your repository say coderatul-portfolio here:

git status
git add .
git commit -m "adding project"
git push -u origin main

• Grant access for workflow: Visit https://github.com/<your-username>/<your-repository-name>/settings/actions, scroll down, make the necessary changes, and save.

• In your repository, go to Settings > Pages

• Select GitHub Actions
• Then select GitHub Pages Jekyll and click Configure

• Edit the workflow

Modify workflow.yaml as follows:

name: Deploy to GitHub Pages

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: /coderatul-portfolio/  # Replace with your repository name
          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: ./

Step 4: Verify the Deployment

• Make appropriate changes, paste the modified workflow.yaml, commit it, and the workflow will start under the Actions tab.
• Under Settings > Pages, you’ll see a live link to the deployed project.

What is a Workflow?

A workflow automates the process: any time you push code, GitHub Actions will automatically build and deploy your project. This is part of CI/CD.

Common Issues and Fixes

1. Blank Page After Deployment

• Make sure the base property in vite.config.ts is correctly set to /repository-name/.
• Clear browser cache or use incognito mode.

2. 403 Permission Errors

• Ensure the GITHUB_TOKEN in your workflow has the correct permissions:

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

3. Asset Paths Not Resolving

• Double-check the base property in vite.config.ts and ensure it matches your repo name.

Conclusion

Deploying a lovable.dev project to GitHub Pages is simple with the right setup. By setting the base path in vite.config.ts and automating deployment using GitHub Actions, you can publish your project effortlessly.