Introduction
I'm writing a blog post for my Kirby CMS blog about how to make a Kirby CMS blog. Pretty meta, I know. This post is meant for beginners and will cover everything from downloading and installing Apache and PHP to actually working with Kirby CMS. If you've used an Apache server before, you can likely skip the first few sections because you're only interested in how to use Kirby.
So here's the thing about Kirby - it's a great database-less CMS that's super easy to use once you're all set up and you know what you're doing, but the documentation isn't great in a lot of areas. Without a friend to help you out, it can take a while to get everything working and to understand a lot of the cool features of Kirby. Most likely, a lot of your time will be spent aimlessly searching the darkest corners of Google while cursing the developers under your breath. Well lucky for you, I already went through all of that so that you all don't have to.
The Structure of The Site
Kirby is a file-based content management system. In other words, instead of loading all of your stuff from a database, you have a folder for every possible web page in your application. In the case of a blog, that means that you have a folder for every single blog post. Each folder contains a text file in which you can define variables which can then be used in the associated template for that file. The template contains "kirbytext", which is a markdown unique to Kirby CMS that uses PHP to render it. It's an extension of the popular markdown developed by John Gruber.
For simplicity, I will only be covering how to make a home page and several sub-pages for blog posts. When you make your own blog, feel free to include other useful pages like an about page, a contact page, etc. For the basic structure of the HTML and the styling, I will be using a version of the "Clean Blog" StartBootstrap template, originally created by David Miller, the owner of Blackrock Digital. The source code for this template can be found here and the StartBootstrap source can be found here.
Getting Started
Downloading and Installing
First let's download Kirby. You can get Kirby easily by cloning the following Git repository:
$ git clone --recursive https://github.com/getkirby/starterkit.gitMove the files into your project directory. These files include a simple Kirby website to help you get started with learning how everything works. Once we get our server set up we should be able to see the site.
Kirby requires PHP to render its templates, so you'll need to make sure to download the latest version. I am using a Linux machine for my development, so I'll only be covering how to do the installation with Linux. In addition to PHP, you should install Apache2 if you haven't already. Luckily for us Linux users, this can be done from the command line easily. To install Apache2 and Linux (and MySql at the same time, conveniently), open up a terminal and run the following commands:
$ sudo apt-get update
$ sudo apt-get install lamp-server^Configuring Your Server
Now, there are a couple of things you'll want to change in your Apache2 configuration files to get your server up and running and so that you can use Kirby correctly. Firstly, navigate into the proper directory to find the configuration files. By default, Apache2 installs in /etc/apache2/ on Ubuntu 16.04, and likely on other Linux distros as well. cd into this directory and you'll find a file called "apache2.conf". Go ahead and open that puppy up in your favorite text editor (remember to open it as root or you won't actually be able to edit it since we did a sudo apt-get earlier), and scroll down a while until you reach a block of code that looks something like this:
<Directory ></Directory>
Options FollowSymLinks
AllowOverride none
Require all denied
</Directory>It should be located at around line 153 of the file. Directly beneath that block of code, paste the following code into your file:
<Directory /path/to/your/project/directory></Directory>
Options FollowSymLinks Indexes
AllowOverride all
Require all granted
</Directory>Now replace "/path/to/your/project/directory/" with the actual path to your project directory. I won't go into detail about what these changes have done, but they are necessary for Kirby to work properly. Next, we need to make a change in another file to point our server at our project directory. Inside the same folder as your apache2.config file, you will find a directory called "sites-available". cd into this directory and open the file called "000-default.conf". Paste the following block of code at the bottom of your file:
<VirtualHost *:80>
ServerAlias blog.*
ServerName blog.localhost
DocumentRoot /path/to/your/project/directory
DirectoryIndex index.php
</VirtualHost>Again, edit this code so it contains the real path to your project directory. This block of code points the apache server at your code so that it may access it anytime you ask it to. The last thing we need to do is simple. In order for Kirby to work properly, an apache2 property called mod_rewrite must be enabled. In order to enable mod_rewrite, all you need to do is run the following commands in your terminal:
$ a2enmod rewrite
$ sudo service apache2 restartAnd there you have it! If you did everything successfully, you should now be able to view the simple Kirby website that came with the starter kit you downloaded earlier by navigating to http://blog.localhost in your browser. Awesome!
Kirby CMS Starter Kit File Structure
The Kirby starter kit comes with a nice default file structure which we can use to organize our files nicely. Additionally, it helps you understand how the page organization and numbering works. Let's do a quick run through of all the default folders that come with the starter kit that Kirby provides for us:
- assets
This folder will contain all of the static files for your site. For example stylesheets, javascripts, fonts, images, etc. Place the appropriate files into these folder locations when needed and link to them from other pages.
- content
This folder contains the markdown files for the website. Every single page of your site will have a folder in this location, and each sub-page will have a folder within those folders. Pay attention to the folder naming system here. Each "visible" page on the site will have a folder that begins with a number, and the order of the numbers will dictate which pages come first logically. That is, when using the $pages variable in your PHP, you will have access to the visible pages in the order that they are numbered. We'll talk more on this later, for now it's not very important. All of the folders without numbers can still be accessed via URL, but they are not considered part of the $pages variable provided by Kirby.
- kirby
You likely will not need to worry much about this folder at first, it contains all of the PHP code for the global functions and variables that Kirby provides for us. We'll touch on a few of these when we start building the site and doing some coding.
- panel
Like the kirby folder, you likely won't have to worry about this. It contains the code for the development panel that Kirby provides for us. We'll talk more about this later as well.
- site
This folder will be the meat and bones of our website. It's where all of the PHP files that will be rendered as HTML are located. It's also home to some other important parts of the site which should be touched on.
Static Files
Before we do anything, let's get our CSS and JavaScripts in their rightful places. I've created a GitHub repository containing the necessary files for this, and you can find it here. It's safe to replace all of the files in your assets sub-folders with the files from this repository. Please note that the site will NOT work properly at all without these files because of the way it has been structured. It is absolutely necessary to include these files in your assets folders.
Let's Make Some Snippets
Header
If you haven't used them before, snippets are basically small, reusable "chunks" of code that are meant to be rendered on multiple pages for a website. If you have the same header on all or some of your web pages, it's a waste of time to re-type your code for every one of those pages. Snippets allow you to type the code once, and then link to that code in other files. It will be rendered as if it were actually a part of that file.
Kirby makes working with snippets really easy and natural. The starter kit even comes with a directory inside the "site" folder for you to place all of your snippets in. For our snippets, we'll do just that. First, make a new file called "header.php" inside the snippets folder, which can be found within the "site" folder provided by the Kirby starter kit. In your header.php file, type or copy/paste the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title><?php echo $site->title()->html() ?> | <?php echo $page->title()->html() ?></title>
<?php echo css('/assets/css/bootstrap.min.css') ?>
<?php echo css('/assets/css/clean-blog.css') ?>
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Your Name Here</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="<?= page('home')->url() ?>">Home</a>
</li>
<li>
<a href="<?= page('posts')->url() ?>">Blog Posts</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>There's a lot of stuff there. Most of it is standard HTML, but you'll find some PHP in there that's unique to Kirby. I'll take a few paragraphs to explain some of this stuff.
The first thing that may seem unfamiliar to you if you've never used Kirby before is this line of code near the top:
<title><?php echo $site->title()->html() ?> | <?php echo $page->title()->html() ?></title>Essentially you're just echoing two variables to the web page with PHP, but where are these variables coming from? The $site and $page variables are two of the global PHP variables that I mentioned earlier on in this post. They're provided by Kirby and are located inside the kirby folder that we glossed over earlier. The $site variable can be used to access properties of the website, like many of the things that would be defined in meta tags in an HTML header. In this case, we're calling the title() method of $site which will return the title of the website as defined in content/site.txt. Feel free to define any other site-wide variables that you might need here. There are many other useful methods defined for $site, and you can read up on them in the Kirby Docs here.
The $page variable is a bit like $site, but with a scope that is limited to the current page. It also has many useful methods associated with it which you can read up on here. You can define your own variables for each $page in the markdown files for those pages. We'll cover that later when we make those files. Lastly, you may notice that we call the html() method on our two title variables for $site and $page. This simply returns the titles as html rather than the default Kirby markdown text.
The next bit of code you may be curious about is this:
<?php echo css('/assets/css/bootstrap.min.css') ?>
<?php echo css('/assets/css/clean-blog.css') ?>This is simply Kirby's way of calling static CSS files that are in the site. It's essentially just shorthand for the normal method of linking to stylesheets in HTML. In this case, we're linking to two of the CSS files that we placed into our assets folder earlier. The first is for Bootstrap and the second is our custom CSS which we got from the Clean Blog Bootstrap template.
The last bit of Kirby code here is located near the bottom and looks like this:
<li>
<a href="<?= page('home')->url() ?>">Home</a>
</li>
<li>
<a href="<?= page('posts')->url() ?>">Blog Posts</a>
</li>Here we're using the global method post() that is provided by Kirby. This method allows us to access the $page object for any of the pages in our website with the page's URI. The URI of a page is everything after the root URL. So, for example, if a site's home page were "http://mysite.com" and a sub-page was located at the URL "http://mysite.com/pages/first-page", then the URI of that sub-page would be "pages/first-page". After we use the page() method to access the $page objects for our home and posts pages (which we will create later), we call the url() method on those page objects. This simply returns the URL for those particular pages. Very convenient.
Overall, we will be using this snippet on every single one of our pages. It contains the code for our HTML head as well as a nice Bootstrap navigation bar which will make navigating around our site really easy for users.
Footer
Now that we've got a header for every page, let's make a footer. In our footer we'll place links to our JavaScript files and also some links to relevant social networking sites for our users to check out. Create a new file in your site/templates folder called "footer.php" and type or copy/paste the following code in it:
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Your Website 2014</p>
</div>
</div>
</div>
</footer>
<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/assets/js/clean-blog.min.js" type="text/javascript"></script>
</body>
</html>There should be nothing particularly surprising in this code if you're familiar with HTML. The spans are simply icons that we get from Bootstrap that we are using as links to social media accounts. The links don't currently go anywhere, but feel free to edit the href properties so that you can link to your personal social media accounts.
Banner
The last snippet that we're going to make is for a banner which we'll want to include on all of our pages. The banner should be pretty, so we'll give it a nice background image, and it should have some text on it that is relevant to the particular page that is rendering it. To do so, create a new file in your site/snippets folder called "banner.php", and type or copy/paste the following code in it:
<?php
if (!isset($title)) $title = "BLOG";
?>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('/assets/images/home-bg2.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1><?= $title ?></h1>
<?php if (isset($subtitle)): ?>
<hr class="small">
<span class="subheading"><?= $subtitle ?></span>
<?php endif; ?>
</div>
</div>
</div>
</div>
</header>There are a couple bits of code in here that you may not understand. First, notice this line of PHP at the very top of the code:
if (!isset($title)) $title = "BLOG";The "isset()" method, if you're not familiar with it, simply returns a boolean dependent upon whether or not the argument variable is defined in that scope. Without any other context, it seems like this method would always return False here, but in reality that will not be the case. You will see later that when linking to a snippet from another file, you can pass it an array of variables to be used within that snippet. This is SUPER convenient for us developers because it allows us to define snippets in such a way that the snippet can be customized to suit the particular page that is is being used on.
When we link to the banner.php snippet in the future, we will be sure to pass it an array of variables which includes the "$title" variable which we use here. If we don't do so, it will default to "BLOG" as per the code above. Moving on down the code, you'll see a great example of how to take advantage of the variables passed to the snippet and the isset() method. In this case, if the $subtitle variable isset(), then we render a horizontal line and the subtitle below our main title on the banner. If the $subtitle variable is not set (this is the case if we neglect to pass it in our array of arguments), then we simply don't render those things.
Note that the banner.php snippet renders an image called "home-bg2.jpg" located in the images folder of the assets directory. You will need to place an image here as well. I recommend googling "Background Images" and selecting one from those results so that it is a high-quality image. Your image should either be named "home-bg2.jpg", or you should edit the snippet code to reflect the actual name of your image file. Either way works.
The Kirby Panel
Alright, we've got all of our snippets made. Those snippets in addition to the blog posts will be the bulk of our site, so let's make a template file for our blog posts so that adding new posts is really easy for us. To do this, we're going to take advantage of one of the COOLEST features of Kirby (in my opinion), the Kirby Panel. The panel can be accessed from our root URL + "panel". So, in our case, we can access it at http://blog.localhost/panel.
The panel is basically a convenient UI provided by Kirby for editing web pages more easily. From the panel, you can add, remove, or edit existing pages on your site. The first time you access the panel, you will be asked to create an account with a username and password. Doing so will generate a file in the site/accounts folder which contains the login information for your account. From now on, only that account will be able to access the panel unless you create new user information. This is easily done from the panel or by creating a new file in the site/accounts folder. After you've made an account and logged in, take a few minutes to explore the panel and familiarize yourself with it.
Blueprints
At first when you add a new web page to your site via the Kirby panel, you don't have the ability to add much to that page. In fact, you're limited to what is defined in what Kirby calls the "blueprint" for that page. Blueprints are located inside the site/blueprints folder, and they are quite literally blueprints for how the panel will display editable markdown for a web page. Take a few moments to look through some of the blueprints that come packaged with the Kirby Starterkit so that you understand how they work.
Making the Blog Post Template
It would be really convenient if we could add new blog posts from within the nice UI of the panel instead of our dark, depressing text editor, so let's make a template for our blog posts which we can use in the panel. The blog posts should all have the same general structure, so this shouldn't create any issues for us. In order to accomplish this, we'll need to create a couple of files. We'll need a markdown file for our variables, a PHP template file to render in the browser, and a blueprint file to define how our template will be viewed from within the panel.
First thing's first, let's create our markdown file. Inside your content folder, create a new folder called "1-posts". Then, inside that folder, create another folder called "post-template", and within that folder, create a file called "post-template.txt." Afterwards, your file structure should look like this:
content
1-posts
post-template
post-template.txtThere will be other files in your content folder by default, but don't worry about those right now. We'll delete the unnecessary ones later and edit the rest to suit our needs. In your post-template.txt file, type or copy/paste the following code:
Title: Blog Post Template
----
Text: Put Blog Post Text Here
----
Date:
----
Author:
----
Tags:
----
summary: Put Blog Post Summary HereTake note of the structure of this file. When creating markdown files for Kirby, each variable should be separated by a line consisting of four hyphens. I like to add spacing in between my lines as well, but that's just personal preference. In our markdown, we've included some standard stuff that should be available to edit for every blog post, including the title, some text, a date, author, etc.
Next, we'll define the blueprint for our blog post template. Inside your site/blueprints folder, create a new file called "post-template.php". In that file, type or copy/paste the following code:
<?php if(!defined('KIRBY')) exit ?>
title: Blog Post Template
pages: false
files: true
fields:
title:
label: Title
type: title
date:
label: Date
type: date
width: 1/2
default: today
author:
label: Author
type: text
width: 1/2
tags:
label: Tags
type: tags
summary:
label: Summary
type: text
text:
label: Text
type: textareaThis file is pretty straightforward. You simply define variables that you want to be visible in the panel and how you want them to be viewed. There are many attributes which you can define for these guys, including a label, a type, a width, etc. You can read up more on Kirby blueprint fields in the Kirby Docs here.
The last file we'll need to create for our blog post template is the actual PHP template which will be rendered as HTML. We're about to bring together a ton of stuff we've covered so far in this tutorial, so get ready. In your site/templates folder, create a new file called "post-template.php", and in that file, type or copy/paste the following code:
<!-- Snippet for HTML header and nav bar -->
<?php snippet('header'); ?>
<!-- Snippet for hero banner -->
<?php snippet('banner',
array('title' => $page->title()->html())); ?>
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 blog-post">
<?php echo $page->text()->kirbytext() ?>
</div>
</div>
</div>
</article>
<hr>
<!-- Snippet for footer -->
<?php snippet('footer'); ?>As you can see, in this blog post template, we're including all of the snippets that we created earlier. We link to snippets by using the "snippet()" method provided by Kirby for us and passing it the name of our snippet file as an argument. Additionally, in the case of the banner snippet, we pass a PHP array defining the $title variable that we use within the snippet! In this case, we want the title on our banner to be the title of the blog post, so we give the $title variable the value of the "title" defined within the markdown file for whichever blog post is using this template.
You'll notice that the only real content on this page other than the snippets is this line of code (surrounded by some wrappers):
<?php echo $page->text()->kirbytext() ?>This is accessing the "text" variable that we defined in the markdown and calling the kirbytext() global method on it. The kirbytext method causes the text to be rendered as kirbytext rather than regular HTML. This is convenient for us because it will allow us to format our blog posts while we type them in the panel by using Kirbytext markdown language. You can read up on Kirbytext more in the Kirby Docs located here.
There is one last thing we need to do to finish the blog post template for our website. We need to tell the Kirby panel that this is the file that we want to use as a blog post template when we create a new file in the Kirby panel. We can do this by editing the blueprint for the parent folder, which is the "1-posts" folder we created earlier. In order to do this, we'll need to make two simple files. First, a markdown file located within content/1-posts called "posts.txt". Go ahead and create this file and type or copy/paste the following code within it:
title: Blog Posts
----
text:Next, we'll need to make the actual blueprint for this file. Create a file called "posts.php" within site/blueprints and type or copy/paste the following code in it:
<?php if(!defined('KIRBY')) exit ?>
title: Home
pages: post-template
files: true
fields:
title:
label: Title
type: text
text:
label: Text
type: textarea
size: largeThe only different thing about this blueprint compared to the one we created earlier is the "pages" variable. Here we define it as "post-template", which is the file inside this folder that we want to use as a template when we create new files in this folder from within the panel. After you've done this, you should be able to go to your panel and use your newly-made post template!
To see how this works - open up your panel, navigate to "Blog Posts", and then click on the "add" button next to the "Pages" area. If you've done everything right so far, then when you click this, a small modal should pop up asking you what the title of your new page will be and which template you would like to use for it. In this case, you will only have one template available which is the one which you just made. From now on, to create a new blog post, just repeat this process and type your post. Kirby will do the rest of the work for you automatically!
The Home Page
Our home page will be the first thing that our visitors see when they visit our blog, so we should make it pretty and simple. In addition to our standard snippets, we'll add a couple of links that point to some featured blog posts that we want to show off. By default, the Kirby Starterkit comes made with a "home" markdown file, template PHP file, and blueprint. We'll take advantage of this and simply edit the files to suit our needs.
To begin, open the "home.txt" markdown file located in the content/home folder and type or copy/paste the following code:
Title: Home
----
featured-article-1-url: kirby-blog
----
featured-article-2-url: fake-post-1
----
featured-article-3-url: fake-post-2
----
featured-article-4-url: fake-post-3Here we're giving the page a title and listing the names of four blog posts that we want to feature on our home page. On the home page, our users will be able to see previews of these blog posts including their titles and summaries. After this, let's open the template PHP file called "home.php" located in the site/templates folder and type or copy/paste the following code:
<?php
/* An array that contains the name of each featured article, as defined in
the markdown for the home page */
$articles = [];
array_push($articles, $page->featured_article_1_url());
array_push($articles, $page->featured_article_2_url());
array_push($articles, $page->featured_article_3_url());
array_push($articles, $page->featured_article_4_url());
?>
<!-- Snippet for HTML head and navbar -->
<?php snippet('header') ?>
<!-- Snippet for hero banner -->
<?php snippet('banner',
array('title' => 'BLOG', 'subtitle' => 'Projects, Tutorials, Thoughts')); ?>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<?php foreach($articles as $article): ?>
<div class="post-preview">
<a href="posts/<?php echo $article ?>">
<h2 class="post-title">
<?php echo page('posts/' . $article)->title() ?>
</h2>
<h3 class="post-subtitle">
<?php echo page('posts/' . $article)->summary() ?>
</h3>
</a>
<p class="post-meta">Posted by <?= page('posts/' . $article)->author() ?> on
<?php echo page('posts/' . $article)->date('m/d/Y, h:i a') ?></p>
</div>
<hr>
<?php endforeach; ?>
<!-- Pager -->
<ul class="pager">
<li class="next">
<a href="<?= page('posts')->url() ?>">Blog Posts</a>
</li>
</ul>
</div>
</div>
</div>
<hr>
<!-- Snippet for footer -->
<?php snippet('footer') ?>You should understand Kirby well enough by now that you can run through this code and clearly see what's going on here. I've simply defined an array of of $page variables so that we can access the featured articles that we defined back in our markdown file. Below that, I execute a foreach() loop to iterate over those variables and render some post-preview divs that contain information about each of those posts, like the title, summary, author, etc. This information is coming from the markdown file for each of the posts, which are located inside the "posts" directory. Now, we haven't created those posts yet, but we'll do that right now.
Featured Posts
We're not going to bother making real blog posts for this tutorial. You can handle that part on your own, I'm sure, but for now let's make some fake posts. Now that we have a panel up and running, and a blog post template made, this should be super simple for us. Go ahead and access your panel by navigating to http://blog.localhost/panel. You may be prompted to login at first. If so, just enter the username and password that you created earlier on.
Once inside your panel, click on "Blog Posts" under the "Pages" section on the left-hand side. Now you're inside the "Posts" folder. Once there, again under the "Pages" section, click on the add button. You should be prompted with a dialogue box where you may fill in the title of your new blog post. Enter the title "fake post 1" (be mindful of the lowercase capitalization). Kirby will automatically generate a URL for you when you do this. We need to keep this url for our purposes, but when you make blog posts in the future - feel free to edit it to something more simple than your title.
If you created the post template properly earlier, then Kirby should have also automatically selected the "Blog Post Template" for your page. When you're all done, click on "add" to make the new fake blog post. Once you click add, you'll be able to enter values for the things we added to the post template blueprint earlier (i.e. title, author, date, summary, etc). Fill in these values with some bogus data for now, or we won't be able to properly see the featured articles on the home page. Lastly, under the "Page settings" section, if the "Status" isn't already set to "visible", then set it to be. I'll explain the importance of this later.
For our purposes, we are going to do this a total of four times, and each time we will title our posts to correspond to the featured articles that we defined in the home.txt markdown earlier. We just did "fake article 1", so go ahead and repeat the process for "fake article 2", "fake article 3", and "fake article 4". Once this is completed, you should be able to navigate to your home page at http://blog.localhost and see our featured blog posts appear below your header!
The Blog Posts Page
The last thing that we're going to do is create a page that lists all of our blog posts, not just the featured ones. This is the page that is linked to in your nav bar and also below your featured blog posts. Currently, clicking those links will result in a server error. We're going to change that. To do so, make a file in your "templates" folder called "posts.php", and type or copy/paste the following code into the file:
<?php $articles = page('posts')->children()->visible(); ?>
<?php snippet('header'); ?>
<!-- Snippet for hero banner -->
<?php snippet('banner',
array('title' => 'Blog Posts')); ?>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<?php foreach($articles as $article): ?>
<div class="post-preview">
<a href="<?= $article ?>">
<h2 class="post-title">
<?= $article->title() ?>
</h2>
<h3 class="post-subtitle">
<?= $article->summary() ?>
</h3>
</a>
<p class="post-meta">Posted by <?= $article->author() ?> on
<?= $article->date('m/d/Y, h:i a') ?></p>
</div>
<hr>
<?php endforeach; ?>
</div>
</div>
</div>
<hr>
<?php snippet('footer'); ?>The only significant difference between the code for this page and the code for the home page is the way that the pages are accessed. In our home page, we used the $page variable to get our featured articles from the home.txt markdown file. In this page, we are calling a Kirby global function called "children()" on our posts page, which returns an array of all of the blog posts that we made earlier. This alone, however, includes the post template that we created, so we call another Kirby function called "visible()" on our array. This filters the array so that it only contains pages which we declared as "visible" in our page settings. That's why we changes the status of our fake blog posts earlier, remember?
Conclusion
Well, if you've done everything correctly, you should have a fully functional Kirby CMS blog now. Kirby is a great CMS for a personal blog because the panel provides a really nice UI for writing and editing blog posts. Congratulations. You now have your very own, fully customizable personal blog.
The next step is to deploy your blog to a virtual server, like an AWS EC2 instance, so that it may be accessed from anywhere with an internet connection. The AWS documentation is really dense, so for beginners especially, this is an entirely different problem to tackle. I may make a blog post in the future to describe how to do this, but that is for another day. For now, thanks for reading! If you have any questions at all, don't hesitate to comment below or contact me personally. I will be sure to answer as soon as I can.