Installing and Configuring Kirby in the ServBay Environment

What is Kirby?

Kirby is a flexible and powerful file-based content management system (CMS) suitable for building various types of websites. Kirby does not rely on a database but instead uses the file system to store content, making it very lightweight and easy to deploy.

Steps to Install Kirby

In this article, we will introduce how to install and configure Kirby 4.2 using Composer in the ServBay environment.

Step 1: Create the Project Directory

First, create a new project directory in the www directory of ServBay:

cd /Applications/ServBay/www
mkdir servbay-kirby-app
cd servbay-kirby-app

Step 2: Create a Kirby Project Using Composer

ServBay already comes with Composer, so we can use Composer directly to create a Kirby project:

composer create-project getkirby/starterkit .

Step 3: Configure the Web Server

1. Add a New Site

   Open ServBay, click on the "Hosts" tab, and add a new site:

   • Name: My Kirby Site
   • Domain: servbay-kirby.local
   • Site Type: PHP
   • PHP Version: 8.2
   • Document Root: /Applications/ServBay/www/servbay-kirby-app

2. Save Configuration

   Save the configuration.

Step 4: Configure Kirby

1. Create Content Directory

   In the project root directory, the content directory has already been created by the Kirby Starterkit.

Step 5: Run Kirby

1. Access Kirby

   Open your browser and navigate to https://servbay-kirby.local, where you will see the default Kirby welcome page.

Step 6: Install the Kirby Panel (Optional)

If you want to use the Kirby administration panel, you can follow these steps to install it:

1. Access the Kirby Panel

   Open your browser and navigate to https://servbay-kirby.local/panel, where you will see the installation page for the Kirby panel.

2. Create an Admin Account

   Follow the on-page prompts to create an admin account, fill in the username, password, and email address, and then click "Create Account."

Using Kirby to Build a Website

Now that you have successfully installed and configured Kirby in the ServBay environment, you can start using it to build your website. Here are some common operations:

Create Pages and Content

1. Create a Page

   Create a new page directory in the content directory. For example, create an about page:

   mkdir content/about
   echo "Title: About Us\n----\nThis is the about page." > content/about/about.txt

2. Edit Templates

   Create or edit template files in the site/templates directory. For example, create an about.php template:

   <!-- site/templates/about.php -->
   <h1><?= $page->title() ?></h1>
   <p><?= $page->text() ?></p>

Configure the Navigation Menu

1. Edit Templates

   Edit the main template file in the site/templates directory, for example, default.php, to add a navigation menu:

   <!-- site/templates/default.php -->
   <nav>
     <ul>
       <?php foreach ($site->children()->listed() as $item): ?>
         <li>
           <a href="<?= $item->url() ?>"><?= $item->title() ?></a>
         </li>
       <?php endforeach ?>
     </ul>
   </nav>

Customize Styles and Scripts

1. Add Styles

   Create CSS files in the assets/css directory and reference them in the template files. For example, create style.css:

   /* assets/css/style.css */
   body {
     font-family: Arial, sans-serif;
   }

   Reference the CSS file in the template file:

   <!-- site/templates/default.php -->
   <link rel="stylesheet" href="<?= url('assets/css/style.css') ?>">

2. Add Scripts

   Create JavaScript files in the assets/js directory and reference them in the template files. For example, create script.js:

   // assets/js/script.js
   document.addEventListener('DOMContentLoaded', function() {
     console.log('Hello, Kirby!');
   });

   Reference the JavaScript file in the template file:

   <!-- site/templates/default.php -->
   <script src="<?= url('assets/js/script.js') ?>"></script>

Through the above steps, you have successfully installed and configured Kirby in the ServBay environment and started using it to build your website. Kirby's flexibility and file-based architecture make it an ideal choice for building various types of websites.