Some time ago I started looking for Laravel based content management systems (CMS) in relation to a project I was involved with. That's when I first discovered Statamic, and was intrigued by its out of the box feature set. Sadly that project didn't move forward to use a CMS, so ever since then I've been looking for an excuse to try it out.
I figured my best bet was to move my own website onto Statamic so I could really have a good tinker with it. A busy work schedule delayed that for almost a year, but eventually I had some spare time to make a start. Fast forward another 5 months and I actually made good on that promise.
Why I moved away from WordPress and Eleventy
My previous website used WordPress as a CMS and Eleventy to generate my HTML from Nunjucks templates for the front end. I'd hosted it on Netlify, and had my WordPress installation on Krystal. I had no real problems with any of it, it was cost effective, and it was really, really fast thanks to a static front end. Perhaps the only real hidernance with this sort of setup would be the added complexity in introducing dynamic real-time data, and a potential reliance on 3rd party microservices.
The real driving force for change was my desire to try Statamic's features. For me the standout ones were:
- A flat file CMS that could be version controlled in full in all environments. Including the ability for Statamic to commit content changes from the control panel.
- The ability to slot into existing Laravel Projects
- Modern dev tools
- Flexible blueprints and fieldsets
- Live editing preview
- Use of Blade templating language and components
However there are many more features worth taking note of.
The other major factor being that I now mainly work as a front end developer on Laravel projects. So moving to a Laravel based CMS made a lot of sense in terms of familiarity.
The plan to rebuild my website in Statamic
My plan was fairly straightforward:
- Export all my posts and custom post types from WordPress and import them into Statamic
- Re-write my Nunjucks templates into Laravel Blade templates *
- Move across my CSS/SCSS and my JavaScript
- Figure out how and where to deploy the website
*Statamic has its own templating language called Antlers (which seems easy enough to pick up) however I opted to go with Laravel Blade as I work with it most days.
As you would expect it wasn't quite as simple as that...
Exporting posts from WordPress to Markdown for Statamic
The biggest hurdle actually turned out to be exporting all my posts into Markdown with the correct keys. Whilst there are a few addons to export data from WordPress to Statamic they mostly fail to account for ACF custom fields, which was problematic for my content. So it took a reasonable amount of fiddling to write a custom export script to get everything lined up. But once I got past that point it wasn't too bad to get working in my local development environment.
Converting Nunjucks templates into Laravel Blade
Rewriting my HTML from Nunjucks into Blade was a more straightforward experience. Both are excellent templating languages in their own way, and have good support for includes and components. Though I do slightly prefer Blade, it just feels a little easier to read. But that might just be me. The biggest challenge I faced with this process was learning how to access some of the Statamic tags in blade as I'm used to dealing with collections and queries.
Migrating the CSS/SCSS and JavaScript
The CSS/SCSS and JS took a little bit of work to unpick from Eleventy and recompile. I chose to stick with Vite which came bundled with Statamic. I could have switched it to Webpack and Laravel Mix, which I am more familiar with, but I thought it was worth trying Vite. From my limited experience with it so far, it seems to be pretty good, it's lean and low maintenance.
The Gotcha
So at that point I thought I had a fairly good representation of my existing site running locally. At least until I realized I hadn't got a replacement for Yoast that had been handling all my SEO related meta tags etc. A quick search in the Statamic Marketplace revealed a number of addons that would solve the problem, but I was curious if I could roll out my own solution with the Statamic fieldsets. So that's what I opted for. To be honest I sunk way more time into this than I probably should have done, mainly due to my own indecisions on how to structure everything. I suspect with more experience of statamic and the fieldsets I could probably speed this up significantly.
Deployment to Katapult with Ploi
This is where things got really interesting for me. I've spent a lot of years working with WordPress and deploying projects to shared or managed WordPress hosting. Which as most of you will know can be a real mixed bag. For the most part I've stuck with Krystal where possible, who I like for their support and green credentials, and suggested my clients do the same. Then I used DeployHQ to keep myself sane at deployment time. It's worked fairly well. And beyond that I've used Netlify to build and deploy my Eleventy projects, and it's been fantastic. But I don't honestly have that many projects where I can just use Eleventy.
Laravel Forge and Digital Ocean seem to be a popular choice for many Laravel based projects. However I was hoping to use Katapult and continue with Krystal as I've had a really positive experience with them. Whilst comparing other dev-ops tools against Laravel Forge I came across Ploi that has out of the box support for both Katapult and Statamic, with a potentially better price point than Forge. So that sort of made my mind up for me, and I signed up for Katapult and Ploi. It took a little bit of time to step through all the documentation and double check a few things, but it was a good first time experience with little troubleshooting needed to get everything up and running. So now I can push to Git, auto deploy my staging site, and manually deploy my production site as needed.
Wrapping this all up
When I started this process I really didn't know whether it would be a success, or what hurdles I would face. I just hoped I could get it up and running without it being a chore. Thankfully it was a pretty pleasurable experience, which was certainly helped along by my recent experience with Laravel front end development.
I'm glad I've had the chance to try Statamic properly, and rebuilding my own website from start to finish with it has been a really good way to do it. I've also been able to compare the out-of-the-box setup and features against WordPress. As it stands I'm hugely impressed with it, so much so that I'm really considering moving forward with it over WordPress in the near future for client projects where possible.
Finally, I just want to recognise that this is a pretty casual recap on how I moved my website to Statamic. I will almost certainly have forgotten parts of the process as it's happened over a long period of time. However I'd like to flesh out some of the topics I've covered here in follow up articles when I have more time. I hope that will provide a better understanding of the process for anyone who's interested in taking a similar route.