<commit_before>---
layout: post
title:  "The Perfect Kirby Development Setup"
excerpt: "If you plan on building websites for clients, chances are they will ask for a way to add/administer content, i.e., a content management system. Problem is, most CMSs are just plain terrible for either the developer or the client, most times they give clients either too much freedom to screw up everything (Wordpress), or they don't give enough (Siteleaf, Cloudcannon)."
head: '<meta name="theme-color" content="#e3e3dc">'
style: "
body, header .nav {
  background-color: #FFFFF8;
}
.highlighter-rouge {
  background-color: #e3e3dc;
}
"
---

If you already know that Kirby is, [click](#setup) here to skip the introduction.

If you plan on building websites for clients, chances are they will ask for a way to add/administer content, i.e., a content management system. Problem is, most CMSs are just plain terrible for either the developer or the client, most times they give clients either too much freedom to screwup everything (Wordpress), or they don't give enough (Siteleaf, Cloudcannon).

[Kirby](https://getkirby.com/) to the rescue!, it is similar to Jekyll (what I'm using for this lovely blog) in that it is a static site generator and does not require a database, it is also super developer friendly and gives you full control without making a lot of assumptions and forcing you to deal with them.

The best part about Kirby is that it takes all the developer friendliness from Jekyll and adds a simple CMS on top of it. Put it simply, it has the best CMS, you can easily give just the right amount of control to the client, its "Panel" is logical, straightforward and does not have much of a learning curve.

Learn more about Kirby [here](https://getkirby.com/).

<a name="setup"></a>
In this guide we will use Gulp to serve our Kirby site locally, use SASS, autoprefixer, uglifycss, and deploy the site to Heroku.

---

## 1. Serving Kirby Locally

In order to start developing you'll need to serve the site locally using a PHP server. Most people use MAMP (even in the docs), which I think is too big and bloaty since you won't be needing a MySQL database with Kirby.

What I use instead is `gulp-connect-php` with Gulp (obviously). This means we'll need to setup Gulp first. To setup Gulp, we'll need Node and NPM if you don't have that already download it [here](https://nodejs.org/en/).

Now that you have Node and NPM, initiate NPM in your project folder from the terminal:

```bash
$ cd path/to/project
$ npm init
```

Fill in the package details when asked, or you can just press enter since it is not really that important. Then, install Gulp globally with NPM:
<commit_msg>post typo<commit_after>---
layout: post
title:  "The Perfect Kirby Development Setup"
excerpt: "If you plan on building websites for clients, chances are they will ask for a way to add/administer content, i.e., a content management system. Problem is, most CMSs are just plain terrible for either the developer or the client, most times they give clients either too much freedom to screw up everything (Wordpress), or they don't give enough (Siteleaf, Cloudcannon)."
head: '<meta name="theme-color" content="#e3e3dc">'
style: "
body, header .nav {
  background-color: #FFFFF8;
}
.highlighter-rouge {
  background-color: #e3e3dc;
}
"
---

If you already know what Kirby is, [click](#setup) here to skip the introduction.

If you plan on building websites for clients, chances are they will ask for a way to add/administer content, i.e., a content management system. Problem is, most CMSs are just plain terrible for either the developer or the client, most times they give clients either too much freedom to screwup everything (Wordpress), or they don't give enough (Siteleaf, Cloudcannon).

[Kirby](https://getkirby.com/) to the rescue!, it is similar to Jekyll (what I'm using for this lovely blog) in that it is a static site generator and does not require a database, it is also super developer friendly and gives you full control without making a lot of assumptions and forcing you to deal with them.

The best part about Kirby is that it takes all the developer friendliness from Jekyll and adds a simple CMS on top of it. Put it simply, it has the best CMS, you can easily give just the right amount of control to the client, its "Panel" is logical, straightforward and does not have much of a learning curve.

Learn more about Kirby [here](https://getkirby.com/).

<a name="setup"></a>
In this guide we will use Gulp to serve our Kirby site locally, use SASS, autoprefixer, uglifycss, and deploy the site to Heroku.

---

## 1. Serving Kirby Locally

In order to start developing you'll need to serve the site locally using a PHP server. Most people use MAMP (even in the docs), which I think is too big and bloaty since you won't be needing a MySQL database with Kirby.

What I use instead is `gulp-connect-php` with Gulp (obviously). This means we'll need to setup Gulp first. To setup Gulp, we'll need Node and NPM if you don't have that already download it [here](https://nodejs.org/en/).

Now that you have Node and NPM, initiate NPM in your project folder from the terminal:

```bash
$ cd path/to/project
$ npm init
```

Fill in the package details when asked, or you can just press enter since it is not really that important. Then, install Gulp globally with NPM:

{'fraction_non_alphanumeric': 0.0701230883998508, 'fraction_numerical': 0.002237970906378217, 'mean_word_length': 4.2373046875, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7237592', 'n_tokens_mistral': 1491, 'n_tokens_neox': 1428, 'n_words': 851}