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
This will create a new Bolt project in the my-blog
folder, you’ll appear like this:
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
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: articleblocks:
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:
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
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! 🛠⚙️