How to get started with Statamic

#statamic #laravel #cms

Welcome to the world of Statamic 🥳🪅, where CMS meets limitless possibilities 🌟. Unlike your typical CMS, Statamic breaks free from the shackles of traditional database-driven systems. It operates on flat files, eliminating the need for a database altogether. Content, users, and configurations are stored effortlessly in markdown, YAML, or PHP config files, while still providing the convenience of a control panel familiar to CMS users.

With Statamic, version control becomes a breeze as you gain the power to track changes across your entire site, from content updates to configuration modifications. Deploying your site to production is as simple as a Git commit, enabling seamless integration with your preferred version control system.

Collaboration becomes effortless as multiple developers or teams can work on separate branches and seamlessly merge their changes. Even writers and non-technical users can make updates within the control panel, and their modifications can be automatically committed back to your Git repository.

But wait, Statamic doesn't stop at flat files. It revolutionizes the entire data layer. You have the flexibility to utilize the Statamic site generator or leverage eloquent drivers, allowing you to tap into SQL databases or even build your own drivers for MongoDB or Firebase. This approach empowers you to start with simplicity and scale at your own pace.

Statamic is a chameleon 🦎, capable of dynamic execution like a traditional CMS, or operating as a static site generator or headless CMS 🤯. Seamlessly integrate with any front-end application, whether it's a Jamstack, React, Mobile, or even native applications, using the REST API or GraphQL.

Installing

There are 2 main ways you can do it.

New clean install
Into a Laravel application

In this case we go with the first way which is simpler.

Install Statamic global composer CLI tool.



composer global require statamic/cli

Then, create a new Statamic project and choose Blank Site to began. (If you don't have a Starter Kit)



statamic new YourAPPName

While installing, it'll ask you if you want to create a new super user, You may hit yes and enter your information as a user.

At the end change the directory to your project and run your application.

Then switch to /cp you'll see a login page that you should type in your information which you provided while installing Statamic.

After the successful login, You should be able to see the control panel. 😀

Create a home page

Now, let's add some captivating content to showcase on our homepage! Navigate to Collections → Pages in the control panel. Simply click on the entry's title to embark on a creative journey of editing. Unleash your imagination in the content field, crafting a compelling message or sharing your unique insights. Once you're satisfied, hit the Save & Publish button.

Take note that the entry is currently utilizing the home template (visible in the template field). Let's dive in and edit this template to unveil your amazing new content to the browser.

To get started, open your code editor and locate the file resources/views/home.antlers.html. This file serves as the home template, and its name corresponds to the filename without the file extension. Keep in mind that any view ending in .antlers.html will be seamlessly parsed by Statamic's Antlers template parser.

Customize the home page

Open resources/views/layout.antlers.html and replace it with this:



<!doctype html>
<html>
<head>
    <title>{{ title }}</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white text-lg font-mono">
    <div class="container max-w-lg mx-auto py-8">
        {{ template_content }}
    </div>
</body>
</html>

Your layout file serves as a home for essential markup that should appear consistently across all pages. It's the perfect spot to house <head> meta tags, persistent site navigation, the site footer, and other global elements.

Imagine layouts as a picture frame, while templates act as the content within that frame. Templates are seamlessly injected into the layout using the {{ template_content }} variable, forming a cohesive HTML document.

Then, you might see this.

Conclusion

In conclusion, we have merely scratched the surface of Statamic's capabilities. There is so much more to explore and unleash. Get ready to dive deeper into the world of Statamic and unlock its full potential. Exciting discoveries await!