You are here:
Let’s create a simple blog using Sulu CMS. Our blog will feature a main page as the blog index, a static ‘About’ page, and a few demo blog posts. If you haven’t installed Sulu CMS yet, check out my guide on how to install Sulu CMS on Hostinger.
First of all I am going to create my ‘About’ page from the backend. Login into the backend, choose the webspace from the side menu, then click the (+) sign. I will add this page into the top navigation bar by selecting ‘Settings’ -> ‘Show page in’ -> ‘Main Navigation’.
To style my ‘About’ page, I will start by editing ‘<sulu-base>/templates/base.html.twig’
### Use hpanel / cpanel file editor, or Vim, or Emacs to edit '<sulu-dir>/templates/base.html.twig'
<!DOCTYPE html>
<html lang="{{ app.request.locale|split('_')[0] }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block meta %}
{{ include('@SuluWebsite/Extension/seo.html.twig', {
seo: extension.seo|default([]),
content: content|default([]),
localizations: localizations|default([]),
shadowBaseLocale: shadowBaseLocale|default(),
})
}}
{% endblock %}
{% block style %}{% endblock %}
</head>
<body>
{% block header %} {% endblock %}
{% block content %}{% endblock %}
{% block footer %} {% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
The next step is to add my fonts and CSS framework into ‘<sulu-base>/templates/pages/default.html.twig’
{% extends 'base.html.twig' %}
{% block style %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
<style>
/* These are mainly for the blog styles, which usually I put into a CSS file. For the sake of this example, I'll just embed it here */
:root {
--bulma-family-primary: "Kumbh Sans", sans-serif;
--bulma-family-secondary: "Lato", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--bulma-family-secondary);
}
h2 {
font-size: 2rem;
margin-top: 1rem;
}
p {
margin-top: 0.8rem;
}
</style>
{% endblock %}
{% block header %}
<header class="section has-background-link">
<div class="container">
<nav class="navbar has-background-link" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item has-text-white-ter" href="{{ sulu_content_root_path() }}">Hostinger Sulu</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="topNavbar" class="navbar-menu">
<div class="navbar-start">
{% for item in sulu_navigation_root_tree('main', 1) %}
<a class="navbar-item has-text-white-ter" href="{{ sulu_content_path(item.url) }}" title="{{ item.title }}">{{ item.title }}</a> {% endfor %}
</div>
</div>
</nav>
<h1 class="title is-1 has-text-white-ter">{{ content.title }}</h1>
</div>
</header>
{% endblock %}
{% block content %}
<section class="section">
<div class="container">
{{ content.article|raw }}
</div>
</section>
{% endblock %}
{% block footer %}
<footer class="footer has-background-link">
<div class="container">
<p class="has-text-centered has-text-white-ter">Copyright©2025 Mr. D Loves Website. All rights reserved.</p>
</div>
</footer>
{% endblock %}
Note that this is not a particularly attractive blog—it’s designed to be a functional proof of concept for Sulu. My ‘About’ page currently looks like this.
For the blog post, we will use the same Default template to build the post.
I will also use the excerpt to display the post summary in the blog index page and category to distinguish them from static pages. The excerpt and taxonomies tab is also the place where you can add the ‘featured’ image for the blog post (but I’m not using it for my demo blog).
The homepage for this blog will have hero section, and a list of blog posts. Let’s start by enable the blog in the homepage. Edit the ‘<sulu-base>/config/templates/pages/homepage.xml’
### <sulu-base>/config/templates/pages/homepage.xml
<?xml version="1.0" ?>
<template xmlns="http://schemas.sulu.io/template/template" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">
<key>homepage</key>
<view>pages/homepage</view>
<controller>Sulu\Bundle\WebsiteBundle\Controller\DefaultController::indexAction</controller>
<cacheLifetime>86400</cacheLifetime>
<meta> <title lang="en">Homepage</title> </meta>
<properties>
<property name="title" type="text_line" mandatory="true">
<meta> <title lang="en">Title</title> </meta>
<params>
<param name="headline" value="true"/>
</params>
<tag name="sulu.rlp"/>
</property>
<property name="blog" type="smart_content">
<meta><title lang="en">Blog</title> </meta> <params>
<params name="properties" type="collection">
<param name="title" value="title"/> <!-- This is the title of the blogpost -->
<param name="description" value="excerpt.description"/> <!-- This is the summary of the blogpost -->
</param>
</params>
</property>
</properties>
</template>
Then from the backend, you need to select the pages that has the ‘blog post’ category (or any categories that you used to indicate a blog post).
That’s it. Now you have a homepage that displays the blog posts index, an about page and a few blog post items. It’s not pretty, but it demonstrate Sulu’s simplicity to power a blog.
Posted in Sulu CMS