ServBay

English

简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

English

简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

Install and Configure Statamic in the ServBay Environment ​

What is Statamic? ​

Statamic is a modern content management system (CMS) based on the Laravel framework, suitable for building various types of websites. Known for its flexibility and powerful features, Statamic uses a file system to store content but also provides an option to use a database.

Steps to Install Statamic ​

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

Step 1: Create a Project Directory ​

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

bash
cd /Applications/ServBay/www
mkdir servbay-statamic-app
cd servbay-statamic-app

Step 2: Create a Statamic Project with Composer ​

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

bash
composer create-project statamic/statamic .

Step 3: Configure the Web Server ​

  1. Add a New Website

    Open ServBay and click the "Hosts" tab to add a new website:

    • Name: My Statamic Site
    • Domain: servbay-statamic.local
    • Website Type: PHP
    • PHP Version: Select the corresponding PHP version
    • Website Root Directory: /Applications/ServBay/www/servbay-statamic-app/public

  2. Save Configuration

    Save the configuration and restart ServBay.

Step 4: Configure Statamic ​

  1. Edit Environment Configuration File

    In the project root directory, copy the .env.example file to .env:

    bash
    cp .env.example .env

  2. Generate Application Key

    Run the following command to generate a new application key:

    bash
    php artisan key:generate

Step 5: Run Statamic ​

  1. Access Statamic

    Open your browser and visit https://servbay-statamic.local to see the welcome page of Statamic.

  2. Access Control Panel

    Open your browser and visit https://servbay-statamic.local/cp to see the login page of the Statamic control panel.

  3. Create Admin Account

    Follow the on-screen instructions to create an admin account by entering a username, password, and email address, then click "Create Account".

Step 6: Install Plugins and Themes ​

  1. Install Plugins

    Log into the Statamic control panel, click the "plus" icon, and then click "Addons" to search for and install the plugins you need.

  2. Install Themes

    Click the "plus" icon, then click "Themes", select a theme you like and install it.

Building a Website with Statamic ​

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

Create Content and Collections ​

  1. Create a Collection

    In the Statamic control panel, click "Content" -> "Collections", create a new collection, fill in the collection name and other settings, and then click "Save".

  2. Create Content

    Click "Content" -> "Collections", select the collection you just created, click "New Entry", fill in the content title and content, and then click "Save".

Configure Navigation Menu ​

  1. Create Navigation

    In the Statamic control panel, click "Content" -> "Navigation", create a new navigation, fill in the navigation name and other settings, and then click "Save".

  2. Add Navigation Items

    Add collections and content to the navigation, and then click "Save".

Customize Templates and Styles ​

  1. Edit Templates

    Edit Blade template files in the resources/views directory to customize your website's layout and content presentation. For example, edit the default.blade.php file:

    html
    <!-- resources/views/layouts/default.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'My Statamic Site' }}</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
    <header>
        <nav>
            <ul>
                @foreach ($navigation as $item)
                    <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                @endforeach
            </ul>
        </nav>
    </header>
    <main>
        @yield('content')
    </main>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

  2. Add Styles

    Create a CSS file in the resources/css directory and reference it in the template file. For example, create the app.css file:

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

    Reference the CSS file in the template file:

    html
    <!-- resources/views/layouts/default.blade.php -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

  3. Add Scripts

    Create a JavaScript file in the resources/js directory and reference it in the template file. For example, create the app.js file:

    javascript
    // resources/js/app.js
document.addEventListener('DOMContentLoaded', function() {
    console.log('Hello, Statamic!');
});

    Reference the JavaScript file in the template file:

    html
    <!-- resources/views/layouts/default.blade.php -->
<script src="{{ mix('js/app.js') }}"></script>

  4. Compile Resources

    Run the following commands to compile the CSS and JavaScript files:

    bash
    npm install
npm run dev

By following the above steps, you have successfully installed and configured Statamic in the ServBay environment and started using it to build your website. The flexibility and powerful features of Statamic make it an ideal choice for building a wide range of websites.