Bolt CMS
Published in

Bolt CMS

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:

Happy building! 🛠⚙️

--

--

--

Sophisticated, Lightweight and Simple CMS written in PHP

Recommended from Medium

Gui Miner Download For Mac

How to Mint KNS domains NFT

Test Your Kafka Cluster With Python

5 Lessons learnt from re-writing end-to-end tests with Cypress

Female coding at her desk

Shard Key for MongoDB! Does it really matter to choose a good shard key?

Real Time Test Report Dashboard using Prometheus and Grafana

How to use models in Django web framework

META FINANCE ROAD MAP

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ivo Valchev

Ivo Valchev

product owner @TwoKings web design agency | https://www.linkedin.com/in/valchevivo/

More from Medium

Why Build your Next Side Project with Firebase

How To Show Your Latest Blogs On GitHub Profile

JAMStack hosting providers and the future of web development (Cloudflare + FaunaDB)

Launching SaasFrontends v1.0