DEV Community

Cover image for Day 2 : Host Static App on GitHub Pages
Ehtesham Ali
Ehtesham Ali

Posted on • Edited on

1 1

Day 2 : Host Static App on GitHub Pages

GitHub Pages is designed for hosting static sites, which means it doesn't support PHP applications like Laravel out of the box. However, you can host the static frontend part of your Laravel application by exporting the compiled assets (HTML, CSS, and JavaScript) using Laravel's artisan commands and tools.

Here's how you can adapt a Laravel "Hello World" app for GitHub Pages:

Steps to Host Laravel on GitHub Pages

  1. Prepare Your Laravel App Create a route in routes/web.php for your Hello World application:
Route::get('/', function () {
    return view('welcome'); // Or replace 'welcome' with your view file.
});
Enter fullscreen mode Exit fullscreen mode

Ensure your app runs locally with php artisan serve.

Install laravel-export Package

Use the laravel-export package to export your Laravel views as static HTML files.

Install it via Composer:

composer require spatie/laravel-export
Enter fullscreen mode Exit fullscreen mode

Publish the configuration file:

php artisan vendor:publish --provider="Spatie\Export\ExportServiceProvider"
Enter fullscreen mode Exit fullscreen mode

Export the Static Files

Run the following command to export your Laravel routes to static HTML files:

php artisan export
Enter fullscreen mode Exit fullscreen mode

The static files will be saved in the storage/export directory by default (you can change the output path in the config/export.php file).

Copy the Exported Files

Navigate to the storage/export directory and copy all the files to a new folder in your project, e.g., dist.

Contents of Export

Push to GitHub

Initialize Repo
Initialize Repo

Commit the Code
Commit the Code

Publish the Repo
Publish the Repo

Enable GitHub Pages

  • Go to your repository on GitHub.
  • Navigate to Settings > Pages.
  • Under the Source section, select main branch and set the folder to /root or /docs if needed.
  • Save your settings.

Access Your Site

Your site will be live at https://your-username.github.io/your-repo/.

Notes:

  • This approach only works for static content. Dynamic Laravel features (e.g., database access, authentication) will not function on GitHub Pages.
  • For hosting the full Laravel application, consider using platforms like Heroku, Vercel, or Laravel Forge.

For more similar articles:

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay