Create simple and static website in Laravel

In this article you will get to know how to create a basic, simple and static website in Laravel. Read this article and code you very first app in Laravel and get started with Laravel programming.

Let's get started:

1. Firstly, open terminal/command prompt in system and type laravel new simple-website and

type cd simple-website.

2. Then open your newly setup app in code editor of your choice.

3. Then we will setup our fresh Bootstrap scaffolding. For this open terminal and

in the simple-website, type composer require laravel/ui then php artisan ui bootstrap

and then to complete scaffolding type npm i then npm run prod.

4. Open public/css directory and create a new file and name it extra_styles.css and type

a,h3,h1,h2,h4,h5{

font-family: Raleway;

}

5. Open resources/views directory and create a new directory and name it common_files and

in that directory create a new file and name it main.blade.php and then type:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My first simple website</title>
    <link rel="stylesheet" href="/css/app.css">
    <link rel="stylesheet" href="/css/extra_styles.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="/">Website Logo here...</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            
            <li class="nav-item active">
              <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
            </li>
            
            <li class="nav-item active">
              <a class="nav-link" href="/products">Products</a>
            </li>
            
            <li class="nav-item active">
                <a class="nav-link" href="/projects">Projects</a>
            </li>
            
            <li class="nav-item active">
                <a class="nav-link" href="/blog">Blog</a>
            </li>

            <li class="nav-item active">
                <a class="nav-link" href="/contact">Contact</a>
            </li>
            
            
          </ul>
          
        </div>
    </nav>

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

    <div style="text-align:center;margin:0;width:100%;
                height:auto;background-color:rgb(220,220,220);">
        <h2>This is footer</h2>
        <ul>
            <a href="#"><li style="display: inline-block;margin:10px;">Home</li></a>
            <a href="#"><li style="display: inline-block;margin:10px;">Products</li></a>
            <a href="#"><li style="display: inline-block;margin:10px;">Projects</li></a>
            <a href="#"><li style="display: inline-block;margin:10px;">Blog</li></a>
            <a href="#"><li style="display: inline-block;margin:10px;">Contact</li></a>
        </ul>
        <h5>© Your copyright</h5>
    </div>

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

6. Go to resources/views directory and create 5 new files and name them

i) blog.blade.php

ii) products.blade.php

iii) projects.blade.php

iv) contact.blade.php

v) home.blade.php

7. Open blog.blade.php and type

@extends('common_files.main')
@section('sections')
<div style="margin-bottom:350px; margin-left:350px; margin-right:350px; margin-top:350px; text-align:center">
 <h3>this is blog section.</h3> 
</div>
@endsection

8. Open products.blade.php and type

@extends('common_files.main')
@section('sections') 
 <div style="margin-bottom:350px; margin-left:350px; margin-right:350px; margin-top:350px; text-align:center"> 
  <h3>this is products section.</h3> 
</div> 
@endsection

9. Open projects.blade.php and type

@extends('common_files.main')
@section('sections')
 <div style="margin-bottom:350px; margin-left:350px; margin-right:350px; margin-top:350px; text-align:center"> 
  <h3>this is projects section.</h3>
</div>
@endsection

10. Open contact.blade.php and type

@extends('common_files.main') 
@section('sections') 
<div style="margin-bottom:350px; margin-left:350px; margin-right:350px; margin-top:350px; text-align:center"> 
 <h3>this is contact section.</h3>
</div> 
@endsection

11. Open home.blade.php and type

@extends('common_files.main') 
@section('sections') 
<div style="margin-bottom:350px; margin-left:350px; margin-right:350px; margin-top:350px; text-align:center"> 
 <h3>this is home section.</h3>
</div> 
@endsection

12. Now open routes\web.php and type

<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () { return view('home'); });
Route::get('/products', function () { return view('products'); });
Route::get('/projects', function () { return view('projects'); });
Route::get('/blog', function () { return view('blog'); });
Route::get('/contact', function () { return view('contact'); });

13. And it's done. Now open terminal and then type php artisan serve

14. Now open any browser and type http://localhost:port_no/

Done