Host a Simple Blog powered by ButterCMS and Cloudways

These days, content creation is the foundation of almost every business, especially those present on the internet. But if you’re planning to write articles, share your thoughts, or show people your products, it’s likely that you don’t want to spend hours configuring the blog engine or looking for solutions that work perfectly with the programming language of your choice. This is a situation where a headless CMS makes great sense. It allows you to use a ready and robust platform for managing your website content, which makes it easy to use with any technology out there.

In this article, I will show you how you can quickly launch your blog in a few minutes using ButterCMS for content management, Cloudways as a server provider, and the Laravel framework as a tool for building the backend. You don’t need any prior knowledge about these tools—you will learn how to use them by reading this article.

Stop Wasting Time on Servers

Cloudways handle server management for you so you can focus on creating great apps and keeping your clients happy.

Start Free

Requirements to start

Before we move to the practical part of the article, let’s talk about what you will need to successfully launch the same application that we will launch in the tutorial. Every tool that I mention in this article is free, so you don’t have to pay anything to check if the suggested setup works well for you and you feel comfortable with it.

ButterCMS

As mentioned before, ButterCMS is a headless CMS and content management platform for your blog. It comes with many features, and it’s easy to integrate and extend with any technology that can be used for building web applications.

First, let’s create a free account. Visit ButterCMS and click on the “Try it free” button. You will see a short form where you have to enter some details in order to create an account. Submit it and your account is ready to use. Feel free to explore your account—we will go through it a little bit later, and I’ll show you how to create new articles. On the welcome screen, you will see the API key. Save this somewhere because you’ll need it later.

Cloudways

Now it’s time to create an account that we will need to start a server where our application will be hosted. For this tutorial, we will use Cloudways, a Managed Cloud Hosting Platform. To start with Cloudways, signup for a free trial. Similarly to ButterCMS, you will be redirected to the account. You will need to verify your email first by clicking on the link in the email message that is delivered to you when you register.

After activating your account, you will see that the “Launch now” button in the bottom right corner of the screen is now enabled. But don’t click on it yet—we will start the server a little bit later when our blog application is ready to launch.

Laravel

Laravel is a backend framework written in the PHP programming language. It is used for building various web applications. We will use it to build our blog and communicate with the content platform, ButterCMS. No previous experience is required, but minimal programming knowledge will be helpful because I won’t be explaining the technical details of how things work—I’ll only demonstrates how to build the blog application.

GitHub

We will need a GIT repository to organize our application code. In this article, I will use GitHub to store the repository on the internet. This will help us easily update the code on the Cloudways servers every time we need to make some changes to the blog’s code.

If you don’t already have the Github account, then signup here. Later in the article, we will create a repository (which is a new project) and store the code for our application there.

Building a blog

Now that we’ve created all the required accounts we are ready to connect the different components of our blog: the content platform, application code, and application server. In moments, we will have our own website online.

Managing content with ButterCMS

Let’s start by writing an example blog article. When visiting https://buttercms.com/blog_home/ you will notice that one test article is already there, but to test the articles list, later on, we need to have more than one blog post. Visit https://buttercms.com/post/ and add a new post by filling the form with data and clicking on the Publish button. After submitting the article, you will be redirected to the form, but above it, a new button will appear: “API Explorer”. Click on it to see how you can access your article data outside of the platform. We will need this a little later when building our app.

You might be surprised, but we actually now have everything we need to start building our blog application. Articles will be exposed via the ButterCMS API that you can access along with the API key that is printed to you on the homepage.

Building a blog engine with Laravel

We will now begin the practical part where we start writing code. The first step is to create a new GIT repository to track all changes. The second step is to create a simple Laravel application that displays the list of articles and has the option of displaying a single article. When this part is done, we will push the changes to the remote repository hosted on GitHub and move to the last step, where we will deploy our app to the Cloudways servers so the whole internet can see it.

I will build the app on Mac OS, but you can easily reproduce all the steps on Linux or Windows.

PHP installation [*Not Required on Cloudways]

Note: You don’t need to install the PHP on Cloudways server (PHP Stack is already installed) but if you are using Localhost, then you can consider this step.

Let’s start with installing PHP:

brew install [email protected]

Now we have to install the package manager for PHP, which is called Composer:

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/
sudo chmod 755 /usr/local/bin/composer.phar

We also have to update the bash file and add one alias. Open it by using the following line:

nano ~/.bash_profile

Next, put there the following contents:

alias composer="php /usr/local/bin/composer.phar" export PATH="/usr/local/opt/[email protected]/bin:$PATH" export PATH="/usr/local/opt/[email protected]/sbinbin:$PATH"

And reload the file so changes are in use:

source ~/.bash_profile

If everything went fine, you should see the welcome message after typing the following command:

composer -v

The last step is to install Laravel using Composer which was installed previously:

composer global require laravel/installer

Blog Skeleton

We have PHP installed, along with the package manager Composer and the framework Laravel. We can now generate a new project:

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

And run the server:

php artisan serve

The welcome Laravel screen is now visible on the address http://127.0.0.1:8000, and we are ready to start building our blog.

Post Model

We won’t need a database because all the data is available on the ButterCMS platform, and we can fetch it anytime using the API key that was assigned to our account when it was created. However, we still need a Post model, so let’s generate it:

php artisan make:model Post

It should have the following content for now:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
public static function fetchAll() {
return [];
}

public static function find($slug) {
return NULL;
}
}

ButterCMS Package Installation and Usage

Since we are not using the database, we have to pull the data from an outside source. We already have some test data on the ButterCMS platform, so we have to update our methods to return the requested data.

Before we do this, we have to install the ButterCMS package, which provides a ready-to-use code that will save us some time. Without it, we would have to write the interface for connecting with the API. We don’t want to reinvent the wheel, so it’s time for the installation:

composer require buttercms/buttercms-php

Once the package is installed, we can update our Post model so the fetchAll method will return all articles and the find method will return a given article:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use ButterCMS\ButterCMS;

class Post extends Model
{
public static function fetchAll() {
$result = self::butterCms()->fetchPosts(['page' => 1]);
return $result->getPosts();
}

public static function find($slug) {
$response = self::butterCms()->fetchPost($slug);
return $response->getPost();
}

protected static function butterCms() {
return new ButterCMS(env('BUTTER_CMS_API_KEY'));
}
}

In order to pull the data from our account, we have to provide the API key, which should be protected and never published—that’s why the best practice is to keep it in the environment file. Open the .env file and paste there the following line:

BUTTER_CMS_API_KEY=your_key

Now you can run the console and trigger the functions we previously defined to see how things are working right now. In order to start the interactive session, type the following command in the console:

php artisan tinker

Now you can see what the data from the API looks like:

Post::find("example-post") # single post
Post::fetchAll() # all posts

Create Articles List and Single Page

Since we have the code for pulling the data, the next step is to present this data. We will create two pages: one for displaying all the articles (along with the link to the single page) and the single page where the full article will be displayed.

The process of having the data presented consists of three steps:

• Creating a controller, which handles the request and displays the proper action
• Creating routes, which define which actions are available
• Creating a view to display the information in the browser

Creating a Controller

Enter the app/Http/Controllers directory and create a new file called PostsController.php with the following contents:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Post;
use App\Http\Controllers\Controller;

class PostsController extends Controller {
public function index() {
$posts = Post::fetchAll();
return view('posts.index')->withPosts($posts);
}

public function show($slug) {
$post = Post::find($slug);
return view('posts.show')->withPost($post);
}
}

Creating Routes

We have two actions defined right now: index, which doesn’t accept any parameters, and show, which accepts one parameter. It’s time to define routes. Go to the routes/web.php file and replace the existing route definition with the following lines:

Route::get('/', 'PostsController@index');
Route::get('/articles/{slug}', 'PostsController@show');

Creating View

We have routes that lead to the controller action but we don’t display any data yet. We will assign one view to each action. Let’s start with the index action. Create new file called index.blade.php in app/resources/views/posts directory and put there the following code:

<h1>Blog</h1>

<ul>
@foreach($posts as $post)
<li><a href="{{ URL::action('PostsController@show', $post->getSlug()) }}">{{ $post->getTitle() }}</a></li>
@endforeach
</ul>

In the same directory, create another file called show.blade.php with the following code:

<a href="{{ URL::action('PostsController@index')}}">Back to the list</a>
<h1>{{ $post->getTitle() }}</h1>
{!! $post->getBody() !!}

Now you can run the server by calling PHP artisan to serve. After visiting the http://127.0.0.1:8000/ address, you should see the articles list with clickable links to single articles with the full content presented.

Our simple blog is working but doesn’t look good. Let’s improve the styles before moving on to the next stage.

Updating the Styles of the Blog

We will use the Bootstrap library, which provides a set of ready-to-use styles to make our website better-looking and more responsive. In order to install Bootstrap, we have to install the ui package first and then apply Bootstrap styles to our application using this package. Run the following commands to get this done:

composer require laravel/ui
php artisan ui bootstrap

The last step is to install JavaScript packages and compile assets:

npm install
npm run dev

We will create a layout to make the articles list and the single article page look the same. Create a new file called default.blade.php inside the directory /resources/views/layouts and put there the following contents:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
<strong>My blog</strong>
</a>
</div>
</div>
</header>

<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1>Welcome on my blog!</h1>
<p class="lead text-muted">Welcome text</p>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
@yield('content')
</div>
</div>
</div>
</main>
</body>
</html>

Now update the file index.blade.php with the following code:

@extends('layouts.default')
@section('content')
@foreach($posts as $post)
<div class="col-md-6">
<div class="card mb-6 shadow-sm">
<div class="card-body">
<p class="card-text"><h1>{{ $post->getTitle() }}</h1>{!! Str::of($post->getBody())->limit(50) !!}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="{{ URL::action('PostsController@show', $post->getSlug()) }}" class="btn btn-sm btn-outline-secondary">View</a>
</div>
</div>
</div>
</div>
</div>
@endforeach
@stop

Also, update show.blade.php with the following code:

@extends('layouts.default')
@section('content')
<div class="col-md-12">
<a href="{{ URL::action('PostsController@index')}}" class="btn btn-primary">Back to the list</a>
</div>
<div class="col-md-12 pt-5">
<h1>{{ $post->getTitle() }}</h1>
{!! $post->getBody() !!}
</div>
@stop

Our simple blog is now ready! We created two pages: the list of articles and a single article page. We are not using the database because all the content is provided by ButterCMS and easily accessible via API. The last step is to deploy the website on our Cloudways account and show it to the world.

Hosting the Application with Cloudways

Sign in to your account on Cloudways and configure the new server. You will be able to do this from the welcome screen. The most important step is to select the proper application for the server from the first list on the left side, as marked on the screenshot:

After selecting all details, click on the “Launch now” button. Information that the server is adding should be visible after submitting the form. It usually takes a few minutes, so feel free to make yourself a cup of tea and then continue the deployment.

When the configuration is finished, we can click on the “www” icon to see the details of our application. Now click on the “Deployment via GIT” tab on the list on the left side and click on the “Generate SSH” button.

We will be asked about the repository address. Sign in to your account on GitHub and then visit the address https://github.com/new, set the name of the repository, and create it. Now open the console again and enter the directory where the application code is placed. In order to push the code to the repository, we have to launch the following commands:

git init
git add .
git commit -m "first commit"
git remote add origin [email protected]:your_nickname/repository_name.git
git push -u origin master

Our code is now pushed to the repository. Copy the SSH key that Cloudways generated, visit https://github.com/settings/ssh/new, and add a new key that will allow the server provider to copy your application on the server.

After adding the key, you can paste the repository address that will look like the following: [email protected]:your_nickname/your_repository.git. Now click the “Authentication” button, and if the authentication goes through successfully, you will be able to click the “Start deployment” button.

The application is now deployed, but we have to update the packages and configure the ButterCMS API key on the server to launch the blog properly. You will have to connect to the server via SSH, but before you can do this, you have to add a new SSH user. Enter the “Access Details” tab and add a new user on the left side where there is a header for “application credentials”. After adding new credentials, you can sign in using the following command:

ssh username@server_ip

Instead of username, use the username you typed before, and instead, server_ip, use the IP address of your server. You will then be asked for the password.

After connecting to the server, run the following command:

composer update

The last step is to add the ButterCMS API key. Prepare the API key and edit the environment file using the nano editor:

nano .env

Paste the following line:

BUTTER_CMS_API_KEY=your_key

Finally, save the file. You can now exit the server and your website should be up and running.

Summary

Our simple blog is now online and accessible to other users around the world. You can add and remove data easily using the ButterCMS platform as well as extend your website by adding other pages.

Before we look at what we can do next with this, let’s quickly summarize the steps we took to publish the blog:
We used ButterCMS as the content management system for our content so we don’t have to worry about the database, space for the data, or it’s accessibility—it’s all handled by the experts on the ButterCMS side.

We built the blog engine with the Laravel framework, which consumes the data that the ButterCMS API exposes, and styled it with the Bootstrap framework.

We deployed our website in just minutes using the Cloudways infrastructure and a GIT repository.

The result of taking the above steps is a fully working and good-looking website launched in minutes. We did it without any costs, and the solution is ready to be easily extended.

Next steps

What we did in this article was just a beginning. There are plenty of other ideas you can apply to your blog or projects using the ButterCMS platform. You can easily extend your blog by adding pages such as the following:

• SEO landing pages
• A FAQ knowledge base
• Customer case studies
• Company news and updates
• Events and webinar pages
• An education center

The good news is that regardless of the server provider, you don’t have to worry about data migration because the data is always present on the ButterCMS platform and accessible using any technology out there. The same goes for the blog engine.

By using Headless CMS for your content management, you can focus on the creative process instead of thinking about the storage. And this means more time for building your presence on the internet!