Posted onMay 16, 2023 • Edited onJul 5, 2024

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 tostart 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.

composerglobalrequirestatamic/cli

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

statamicnewYourAPPName

While installing, it'll ask you if you want to create a new super user, You may hityes 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 toCollections → 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 fileresources/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

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

<!doctype html><html><head><title>{{ title }}</title><linkhref="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"rel="stylesheet"></head><bodyclass="bg-gray-900 text-white text-lg font-mono"><divclass="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!