0 Shares

Making a blogging website is fun and exciting. Using Laravel, it becomes much more easier than you think. We will share how you can manage your perfect blogging website today.

Table Of Contents

Step 1: install Laravel
Step 2: Install Voyager admin panel
Step 3: create routes
Step 4: Make controller
Step 5: make blade files

Step 1: install Laravel

I am going to explain step by step from scratch so, we need to get fresh Laravel application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Install Voyager admin panel

Voyager is a great admin panel and it is MIT licensed. Voyager is super easy to install. After creating your new Laravel application you can include the Voyager package with the following command:

composer require tcg/voyager

Next make sure to create a new database and add your database credentials to your .env file, you will also want to add your application URL in the APP_URL variable:

APP_URL=http://localhost
DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

Finally, we can install Voyager. You can choose to install Voyager with dummy data or without the dummy data. The dummy data will include 1 admin account (if no users already exist), 1 demo page, 4 demo posts, 2 categories and 7 settings.

To install Voyager without dummy data simply run

php artisan voyager:install

If you prefer installing it with the dummy data run the following command:

php artisan voyager:install --with-dummy

Specified key was too long error If you see this error message you have an outdated version of MySQL, use the following solution: https://laravel-news.com/laravel-5-4-key-too-long-error

And we’re all good to go!

Start up a local development server with php artisan serve And, visit the URL http://localhost:8000/admin in your browser.

If you installed with the dummy data, a user has been created for you with the following login credentials:

email: admin@admin.com password: password

Quick note A dummy user is only created if there are no current users in your database.

If you did not go with the dummy user, you may wish to assign admin privileges to an existing user. This can easily be done by running this command:

php artisan voyager:admin your@email.com

If you wish to create a new admin user you can pass the --create flag, like so:

php artisan voyager:admin your@email.com --create

And you will be prompted for the users name and password.

Step 3: create routes

In this step, we will create routes for get request and another for post request. So, let’s add new route on that file.

routes/api.php

<?php
    
Route::get('posts', 'BlogController@posts');
Route::get('post/{slug}', 'BlogController@singlePost');

Step 4: Make controller

php artisan make:controller BlogController

Now go to your app/Http/Controllers and you can see BlogController.php

Now edit this

<?php

namespace App\Http\Controllers;

use TCG\Voyager\Models\Post;

public function posts(){
        $posts=Post::where('status','=','published')->paginate(10);
        
        return view('posts',compact('posts'));
    }
public function singlePost($slug){
        $post=Post::where('status','=','published')->where('slug',$slug)->firstorfail();
        
        return view('post',compact('post'));
    }

Step 5: make blade files

Now go to resources/views and create posts.blade.php and post.blade.php.

in posts.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        
        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }

            
        </style>
    </head>
    <body>
        
        <div class="container my-5">

            <div class="row">
                @foreach($posts as $post)
                     <div class="col-md-6">
                       <img src="{{Voyager::image($post->image)}}">
                       <a href="/post/{{$post->slug}}">{{$post->title}}</a>
                     </div>
                @endforeach
             </div>
         </div>
</body>
</html>

in post.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        
        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }

            
        </style>
    </head>
    <body>
        
        <div class="container my-5">

            <div class="row">
                
                     <div class="col-md-6">
                       <img src="{{Voyager::image($post->image)}}">
                       {!!$post->body!!}
                     </div>
               
             </div>
         </div>
</body>
</html>

Now you have made simple blog website using Laravel. Run “php artisan serve” and go to “localhost:8000/posts” and you can see your posts and click on the title and you will redirect to the post.

You can check the github repo for clear view: https://github.com/rhaider-dev/laravel-game-review

Here is how to make a blogging website with laravel

Total Time: 20 minutes

Install laravel

Install laravel using command

Install admin panel

Install voyager admin panel using command

Make route

Make controller

Make blade files