HTML to Laravel Blade with CSS Assets

If you want to convert an HTML template to a Laravel Blade template with proper integrating CSS assets, you must modify the HTML code as per the Blade syntax. You also need to transfer all CSS files to Laravel’s asset management system.

Follow the instruction below:

1. Set Up Your Project

Before starting, make sure you have a Laravel Project. You can use your existing project or create a new Laravel project using the command. If you want to install Laravel via composer, use the code for one time.

composer global require laravel/installer

Once you run the command, use

laravel new #name

Here, #name is the project name like ( Blog, Agency, Ecommerce, etc).

2. Move HTML Files to Blade Files

Move all your HTML files to the resources/views directory. You must use page_name.blade.php extension for Laravel Blade template.
If you are using any layout, it should go into the resources/views/layouts folder.

3. Move CSS and Other Assets to Laravel’s Public Directory

Move all your CSS, JavaScript, images and other files to the public directory like this:

public/css/style.css
public/js/script.js
public/images/logo.png

4. HTML to Blade Template Creation

The code given below is an example of html code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <div class="content">
        <!-- Content goes here -->
    </div>

    <footer>
        <p>© 2023 My Website</p>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>

HTML to Blade convertion (resources/views/layouts/page.blade.php)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'My Website')</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <div class="content">
        @yield('content')
    </div>

    <footer>
        <p>© 2023 My Website</p>
    </footer>

    <script src="{{ asset('js/script.js') }}"></script>
</body>
</html>

Blade View (resources/views/home.blade.php)

<@extends('layouts.page')>

<@section('title', 'Home Page')>

<@section('content')>
    <div class="main-content">
        <h2>This is the home page content</h2>
        <p>Welcome to our site!</p>
    </div>
<@endsection>

5. Route Setup

You need to set up route to return blade view in routes/web.php

Route::get('/', function () {
    return view('home');
});

6. CSS and JavaScript setup

You must use the {{ asset(‘path-to-asset’) }} function to reference assets from the public folder. Laravel will handle the correct URL generation. In your html code, you have

<link rel=”stylesheet” href=”css/style.css”>

You need to use in Laravel:

<link rel="stylesheet" href="{{ asset('css/style.css') }}">

If you follow these steps, you can convert your HTML templates to Laravel Blade templates very easily while maintaining the CSS and JavaScript assets in Laravel’s asset system.