The new site is built from the ground up and features a fresh design on a new tech stack. We collaborated closely with Eric at Laravel News to meet the following goals:
- New website with improved functionality and design
- Keep existing articles, article structure, and content on the 2,000+ current articles
- Make sure the new design works with the existing images used across the site
- Give better visibility to the Partners of Laravel News
- Statamic CMS Development
- Imgix Integration
Once the design wrapped up, we started architecting the pages, including analyzing the UI for any repeated elements that could be componentized. To keep the code nice and DRY, we abstracted UI bits like the Laravel Jobs card, buttons, and the date into self-contained Antlers components (also called partials in Statamic land). After building a lot of the markup, including customizing the Tailwind config file, we worked on integrating the CMS and importing prior content from the old WordPress site.
Laravel News has over 2,000 articles dating back to 2012. The CMS control panel handled it well without lag. And on the browser side, we added caching to help keep the website speedy.
The Archive Page
One page where we hit a snag was the Archive page. After some research, it looked like the section with the months, dates, and entry counts wouldn't be possible without some custom code. Luckily, Statamic is a PHP app (another reason why we love working in it), so one of our resident PHP developers wrote a custom Statamic tag that would return the exact data we needed for the archive page on the frontend.
Migrating from WordPress to Statamic
Another tricky part was the content migration from WordPress. The first step was exporting all the content from WordPress and creating markdown files that Statamic could read, which the client handled. Some of the data fields in the markdown files didn’t match how we'd built the site at that point. And the desired URL structure was different. But it was easy to run a find-all-and-replace with the fields that needed updating. (This is a huge advantage of working with a flat-file CMS like Statamic: being able to see and edit the data stored in markdown files.)
Before we started working with the client on data migration, we structured the content into several different collections (for example, news articles, tutorials, and packages). However, in working with him further, it was decided that the news articles, tutorials, and packages would all be the same collection with different categories using Statamic’s taxonomies.
This shift in mindset required some small changes to how we architected data on our end. Because these data types had different designs, we created a way to handle different landing pages based on the content's category.