How to Publish a Laravel Website to Cloudflare Pages

  • Ian Kibet

Publishing a Laravel website to Cloudflare Pages involves creating the website, converting it to static HTML using Spatie Laravel Export, and then manually uploading the static files to Cloudflare Pages. This guide walks you through each step in detail.

1. Create a Laravel Website with Different Pages

First, you need to create your Laravel website. If you haven't already set up Laravel, follow these steps:

Install Laravel

Install Composer: Laravel requires Composer, a PHP dependency manager. You can download and install it from getcomposer.org.

Create a New Laravel Project: Run the following command in your terminal to create a new Laravel project.

composer create-project --prefer-dist laravel/laravel my-laravel-site

Set Up Your Laravel Application

Navigate to your project directory:

cd my-laravel-site

Open the .env file and configure your database settings if needed.

Create Different Pages

To create different pages in your Laravel application, you need to define routes, controllers, and views.

Define Routes: Open the routes/web.php file and define your routes.

Route::get('/', function () {
    return view('welcome');
});
Route::get('/about', function () {
    return view('about');
});
Route::get('/contact', function () {
    return view('contact');
});

Create Views: Create Blade view files for each page in the resources/views directory.

  • resources/views/welcome.blade.php
  • resources/views/about.blade.php
  • resources/views/contact.blade.php

2. Convert Laravel Views to Static HTML Using Spatie Laravel Export

Next, you will use the Spatie Laravel Export package to convert your Laravel views into static HTML files.

Install Spatie Laravel Export

Run the following command to install the package:

composer require spatie/laravel-export

Configure the Package

You can configure the package by publishing its configuration file:

php artisan vendor:publish --provider="Spatie\Export\ExportServiceProvider"

Export Static Files

Run the export command to generate static HTML files:

php artisan export

The static files will be saved in the dist directory by default. You can change the output directory in the configuration file if needed.

3. Upload Static Files to Cloudflare Pages Manually

Finally, you need to upload the generated static files to Cloudflare Pages.

Create a Cloudflare Account

If you don't have a Cloudflare account, create one at cloudflare.com.

Set Up a New Cloudflare Pages Project

  1. Go to Cloudflare Pages: In your Cloudflare dashboard, navigate to "Pages" and click on "Create a project".
  2. Connect Your Git Repository: Cloudflare Pages can connect to your Git repository. However, for this guide, we'll upload the files manually.
  3. Create a New Project: Choose the option to create a project without connecting a Git repository.

Upload Static Files

  1. Access Your Project: Navigate to your newly created project in Cloudflare Pages.
  2. Upload Files: Drag and drop the contents of the dist directory (or your configured export directory) into the Cloudflare Pages interface.

Cloudflare Pages will automatically deploy your static files and provide you with a URL for your website.

Conclusion

By following these steps, you can successfully publish your Laravel website to Cloudflare Pages. This approach leverages the power of Laravel for development and the performance benefits of Cloudflare Pages for serving static content.

`