How to build a personal blog with Bolt CMS in under 30 minutes…

Have you not heard of Bolt CMS before? Let me fill you in on the big picture in under 30 seconds: Bolt CMS is the content management system built for all three user groups: you, the implementor, the content editors, and the site end users. At Bolt HQ, we are a bunch of pragmatic web developers who make a living out of building websites for clients. We know a thing or two about CMS features that content editors are looking for, so with the help of our open source community, we baked them into Bolt CMS. Bolt gives you the Lego blocks, it’s up to you to decide if you are building a megapolis, or a quiet little house on the side of the road. It’s completely free and open source.

Today, we’re building your personal blog in under 30 minutes!

In fact, there’s surprisingly few things we need to build a personal blog website:

• A computer with PHP & composer package manager
• A file editor or IDE
• And a tiny bit of imagination 😇

1. Set up a new Bolt project

Before diving into our new Bolt project, make sure to have PHP and composer installed on your machine. These are the foundations of any modern PHP project, after all.

To create a new Bolt project, open up a terminal (Windows: command line), and type:

composer create-project bolt/project my-blog

Type in the command to create a new project and hit Enter

This will create a new Bolt project in the my-blog folder, you’ll appear like this:

Example message on successful installation. Note, by the time you run this, there will be a newer version with even more cool features! 🐛

So far, so good!

To finish up the installation, change directory to the new folder and run the Bolt installation script like so:

cd my-blog/ && php bin/console bolt:setup

You’ll be asked to create an admin account. After this, it’ll ask you to add dummy content (fixtures): choose yes.

2. Run the new website in the browser

You may not know this yet, but there’s already a working Bolt website waiting for you!

To start a development server for your website, run the following:

php bin/console server:start

Starting a development server of your website

As soon as you type http://127.0.0.1:8000 (or localhost:8000`), you’ll see the new website in action. Since we asked Bolt during setup to create dummy content for us, it will already have lorem ipsum pages and text:

3. Set up a simple blog

Like many content management systems, content in Bolt is managed in Content Types. A Content Type defines the structure of your website content, for instance News, Pages, Blog Posts, Testimonials and Sections are all examples of a ContentType. What makes them so cool is how ridiculously easy it is to define them: all ContentTypes are defined in YAML format in the config/bolt/contenttypes.yaml file.

Open up the my-blog/config/bolt/contenttypes.yaml file in your favourite text editor or IDE. The file has a lot of comments explaining how it all works, but for now, you can remove everything and replace it with this:

# This file defines the content types on the website. See the documentation for
# details: https://docs.bolt.cm/contenttypes/intro

blogposts:
    name: Blog Posts
    singular_name: Blog Post
    fields:
        title:
            type: text
        content:
            type: article
blocks:
    name: Blocks
    singular_name: Block
    fields:
        title:
            type: text
            class: large
            group: "Block"
            label: De Titel
        slug:
            type: slug
            uses: [ title ]
        image:
            type: image
        content:
            type: html
            height: 150px
    viewless: true
    searchable: false
    icon_many: "fa:cubes"
    icon_one: "fa:cube"
    order: title

This defines a new Content Type for Blog Posts, which has two fields: a title and a body content. And another Content Type for blocks, which will be elements across the site that are not standalone pages, but still have content that can be edited.

Save the file and head to http://localhost:8000/bolt . Remember that admin account that you set up? Use it to login to the Bolt Editor for the first time! After logging in, you’ll see the new Blog Posts on the left of the screen:

The Bolt Editor showing the Blog Posts and Blocks content types on the left

Hover over Blog Posts and click “New” to add some blog article!

4. Set up the theme of the new website

So far, we saw and used Bolt’s default theme. Time to shake things up a bit, I’ll use the Leaf theme for Bolt, developed by Bolt’s creator Bob. You can also look up other themes on the Bolt extensions website.

To install the theme, go back to the terminal and run:

composer require bobdenotter/bolt-leaf-theme

Now, let’s copy the theme to your project:

php bin/console bolt:copy-themes

One last step is to tell Bolt to use the new theme, open the my-blog/config/bolt/config.yaml file and replace theme: base-2021 with bolt-leaf-theme . In the same files, replace:

homepage: homepage
homepage_template: index.twig

With:

homepage: blog-posts
homepage_template: listing.twig

Voilà!

Your personal blog is now complete

Your new blog built with Bolt CMS

In just under 30 minutes, we built a personal blog with Bolt CMS. As you add more blog posts, you’ll find that all of these things are already handled by Bolt:

• Detail blog pages with freeform content, images and videos
• A list of all blog posts, with excerpts and meta data like the author and time of publication
• Pagination
• Multilingual (as soon as you are ready to add a new language)

The next steps?

If you’re looking to expand your new website, here are useful resources to help you get started:

• boltcms.io — the main Bolt CMS website with all links and info you’ll need
• docs.bolt.cm — documentation
• extensions.boltcms.io — list of available Bolt extensions
• bolt.tips — tips & tricks on various Bolt subjects
• Slack & twitter links — get in touch with the community to get your questions answered, and learn from the best

Happy building! 🛠⚙️