How to Create a Liveblog with Bolt and Pusher
Imagine there is an event for something and you want to blog about it. Depending on the event, there can be much information in a short amount of time. And your visitors have to reload your page again and again. Which isn’t good for anyone. Neither your users nor your server.
The solution? Update your blog in realtime so your visitors can stay on the page while new posts are flying in like magic.
For this tutorial I use Bolt as CMS and Pusher to push new posts through websockets to the visitors.
Install and configure Bolt
There are a few different ways to install Bolt and they are all well described here. It’s up to you how and where you want to install it so I will continue with the configuration. (Note: Current stable version is v2.2.13)
Now we need a theme. We can use the standard base-2014 theme but it’s not specifically for blogs so I chose clean-blog for this tutorial.
Let’s install it. Go into your Bolt backend and browse to Extras > View/Install Extensions. Start typing “clean-blog” into the input field until you see a dropdown with the theme name. Click on it so it fills out the input field. Click on Browse Versions and install the latest stable one.
After the installation is done, you will find the theme in the list of Your currently Installed Extensions. If not, reload the page. Before we can go over to the config file, you have to hit the Copy to theme folder button on the list entry.
Time to edit the config file and to tell Bolt to use our new installed theme. Open app/config/config.yml with your favorite editor or browse to Configuration > Main configuration in your Bolt backend.
Here you can change the name of the theme you want to use. You are also free to change some other settings like sitename and payoff.
Enable Pusher
I assume you already have a Pusher account. If not, register here for free.
To integrate Pusher into our Bolt installation, we can simply use the extension pusher-realtime by — surprise surprise — me.
The installation is quite the same as with the theme. After the installation, you’ll find a button called config in the list entry of the extension. This button will open the configuration file for the extension in the backend.
Like the Bolt configuration file, you can also edit it with your favorite editor. The file is located under app/config/extensions/pusher-realtime.ohlandt.yml.
Before we can edit it, you have to create a new App in your Pusher Dashboard.
After you created the Pusher App, you will be redirected to the App Keys page that contains instructions on how to use Pusher and your App Keys on the right side.
Copy the keys over to the extension configuration file and make sure there is a space between the colon and the value (YAML Syntax). Leave everything else like it is.
Final Changes on the Theme
Our goal is to have a blog that will be updated in realtime when we save a new entry. The clean-blog theme comes with a simple index page that lists all recent posts. Perfect for our Pusher integration.
Go to theme/clean-blog in your preferred file manager. Here we will edit two files, index.twig and _head.twig.
index.twig: This file contains the loop that displays our recent entries. We change the number of the loaded entries to 20, display the entry body instead of the teaser, remove the metadata and add the class entries to the parent div. The content area will look like this:
_head.twig: In this file we enable Pusher through a helper function from the pusher-realtime extension. Then we will listen for the created event in the records channel and insert new posts into the page. Paste the following code right before the</head> HTML tag.
You are done! Your blog will update itself in realtime when you post something new. Here is a preview:
You will find more information about Pusher and the pusher-realtime extension in the Pusher Documentation and in the Extension Readme.
