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-websiteOnce your project is set up, you can serve it locally to ensure everything is working:
php artisan serveVisit 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/folioAfter installing Folio, run the Artisan command to set it up:
php artisan folio:installThis 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/pagesCreate a new Blade template for your homepage:
touch resources/views/pages/index.blade.phpAdd 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.phpAdd 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/layoutsCreate a layout file:
touch resources/views/layouts/app.blade.phpAdd 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>
@endsectionStep 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.