Build a Simple Marketing Website with Laravel Folio

Laravel Folio is a powerful tool for simplifying routing in Laravel applications. It uses a file-based approach to define routes, making it particularly useful for creating simple websites like marketing pages, blogs, or portfolios. In this guide, we'll walk through the steps to build a simple marketing website using Laravel Folio.

Step 1: Set Up Your Laravel Project

First, you'll need to create a new Laravel project. You can do this using the Laravel installer:

laravel new marketing-website
cd marketing-website

Once your project is set up, you can serve it locally to ensure everything is working:

php artisan serve

Visit http://127.0.0.1:8000 in your browser to see the default Laravel welcome page.

Step 2: Install Laravel Folio

Next, you need to install Laravel Folio. Use Composer to add Folio to your project:

composer require laravel/folio

After installing Folio, run the Artisan command to set it up:

php artisan folio:install

This command will configure Folio to use the resources/views/pages directory for your routes.

Step 3: Create Your First Page

With Folio installed, you can start creating pages. Remove the default resources/views/welcome.blade.php file and create a new directory for your pages if it doesn't exist:

mkdir -p resources/views/pages

Create a new Blade template for your homepage:

touch resources/views/pages/index.blade.php

Add some simple content to this file:

<h1>Welcome to Our Marketing Website</h1>
<p>Discover our products and services.</p>

Visit http://127.0.0.1:8000 again, and you should see your new homepage.

Step 4: Add More Pages

To add more pages, simply create additional Blade files in the resources/views/pages directory. For example, create an "About Us" page:

touch resources/views/pages/about.blade.php

Add content to the about page:

<h1>About Us</h1>
<p>Learn more about our company and team.</p>

This page will be accessible at http://127.0.0.1:8000/about.

Step 5: Use Layouts for Consistency

To maintain a consistent look across your site, create a layout file. Create a new directory for layouts:

mkdir -p resources/views/layouts

Create a layout file:

touch resources/views/layouts/app.blade.php

Add a simple HTML structure with Tailwind CSS for styling:

<html class="bg-gray-50 text-gray-600">
<head>
    <title>{{ config('app.name') }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="container mx-auto p-4">
        {{ $slot }}
    </div>
</body>
</html>

Use this layout in your pages by extending it:

@extends('layouts.app')

@section('content')
<h1>Welcome to Our Marketing Website</h1>
<p>Discover our products and services.</p>
@endsection

Step 6: Add Route Parameters and Model Binding

Folio supports route parameters and model binding, which allows for dynamic content. For example, to create a page for individual products, you can use:

php artisan make:folio "products/[id]"

This command will create a file resources/views/pages/products/[id].blade.php. You can access the id parameter in the Blade template:

<h1>Product {{ $id }}</h1>
<p>Details about product {{ $id }}.</p>

Conclusion

Laravel Folio simplifies the process of building a marketing website by allowing you to define routes through Blade templates. This approach is efficient for creating content-driven sites without the need for extensive routing files or controllers. By leveraging Laravel Folio, you can quickly set up a marketing site with dynamic content and a consistent layout, making it an excellent choice for small to medium-sized projects.

Support My Work

If you enjoy my content, consider supporting me through Buy Me a Coffee or GitHub Sponsors.

or

Building a Simple Marketing Website with Laravel Folio