Migrating a blog from WordPress to Statamic

How we helped F2N2 decrease costs, improve website security, increase visitor engagement, and pulp propaganda with style.

Migrating a blog from WordPress to Statamic

The Challenge

F2N2’s WordPress website was slow and the design wasn’t user-friendly, making it hard for people to find the information they needed. It kept crashing because of updates and third-party plugins, and was frequently attacked by hackers (94% of hacked websites are running WordPress). As a result, the company had a team of developers working full-time on maintenance alone.

The solution

We designed and built a highly secure website that runs smoothly on all devices, is easily customizable from the control panel (CP), and has a fast loading time. This reduced costs and increased visitor engagement.

The game plan

  • Migrate from WordPress to Statamic
  • Replace jQuery and Bootstrap with Alpine.js and TailwindCSS
  • Redesign using UI/UX best practices
  • The client

    Fighting False News Narratives (F2N2) is a digital project from North Macedonian citizens’ association MOST. Since 2018 it has published thousands of articles related to disinformation and fake news to challenge the influence of authoritarian regimes and Russian propaganda. It’s a sensitive topic, attracting hackers who want to breach the website’s security and take it down.

    f2n2 mobile


    increase in organic traffic


    reduction in costs


    faster loading time



    The results

    With the new site up and running, F2N2 received positive feedback every day. People who had been frustrated with the website started to return, and users overall were spending three times longer on the site.

    With a fully modular and secure Statamic site, the spend on hosting services was slashed. And maintenance costs were cut too, as regular updates didn’t break the website, meaning F2N2 no longer needed to pay two full-time developers to keep things running.

    The migration to Statamic, along with replacing jQuery and Bootstrap with more advanced solutions like Alpine.js and TailwindCSS, dramatically improved loading time.

    Because Statamic is built on Laravel, widely regarded as the most secure and well-maintained PHP framework today, we decreased downtime caused by hackers to virtually zero.

    Get a FREE consultation!

    We would love to discuss more details in a meeting and provide a free consultation for you.

    f2n2 mac

    The timeline

    A complex project like this, with multiple third-party integrations, data migration, and a complete redesign, takes time. We worked hard to define all requirements up front and gather as much feedback from the client as possible throughout the process. This meant we could produce a bespoke design that made sense for F2N2 and offer the most appropriate solutions.

    f2n2 timeline

    Technology stack

    A fully modular website

    We created a bespoke website, made from custom building blocks, giving F2N2 more flexibility and control. This approach meant the client could add, rearrange, and remove certain sections of the site without worrying about it impacting functionality. One custom building block lets F2N2 keep article titles short to save space but add an icon, which users can hover over for more information.

    Find out about more of the bespoke blocks we built below.






    Best Practices



    Optimized website performance

    F2N2’s website is complex with hundreds of articles in multiple languages and thousands of users every day. It needed to be super-fast, while handling high traffic and regular cyber attacks.

    To optimize performance across the site, we cached all the posts and ensured users only viewed cached pages. When a post was edited, the cached content updated automatically.

    For the home page, which includes more than 30 posts from different categories, we used Statamic’s No Cache Tag feature to specify which sections of the page we wanted to exclude from caching. That way, in those sections, live information would always be displayed.

    Before and After

    Components you can control

    The CP provides a seamless experience, letting you toggle certain functionalities on or off for each of the website’s building blocks. We set some required fields so F2N2 staff wouldn’t accidentally forget to complete them. And we enforced validation of specific fields depending on the data of other fields, offering them multiple variations of the same building block.

    For example, F2N2 wanted different background colors in a section of the site designed for displaying quotes. We set the fields so the background color would change depending on the type of author the quote was from, for example, internal writers and external experts.

    Discuss with an expert!

    You might be thinking that a change of technology will not solve your website issues. Maybe you’re right. Maybe not! Let’s talk about it.



    We were lucky to be provided with the Brand Guidelines from the Organisation itself. Using their Guidelines, made the design process much easier and easily implementable for a UI/UX design. From using the colors and generating shades, we were happy to give the client the results they expected.













    f2n2 fonts

    Making the move to Statamic

    F2N2’s site was built with Visual Composer, which adds its own tags to the content, making it much harder to migrate posts to Statamic. Exporting the images and post links was also a challenge because they were shown with “IDs,” not URLs. Thanks to our full-proof migration process, we were able to successfully move all the posts.

    Find out more about how we make migrations happen here

    Saving space with image crops

    There were situations where the client captured long screenshots of articles. These took up a lot of space on the page. We proposed cropping these images and fading them out, with a “show image” button, so users could decide for themselves if they wanted to see more of the image or keep reading the article.

    Fancy image slider

    Each post had a gallery section made up of multiple images. Rather than have all these images dominate the page, drawing attention from the written content, we designed a smart slider to display them. It looks professional, takes up less space, and works great on desktop and mobile.

    Dynamic timeline function

    The new site lets the client create a progress timeline, containing a header, description, and image. Using the CP, they can add, modify, or remove items with ease. Here you can see an example of the timeline and how it appears in the CP.

    Fast and accurate searching

    F2N2 users had complained they struggled to find specific posts on the site. And because of the sensitive nature of the articles, they didn’t want to use search functions where their data would be saved on an external server. To overcome this, we implemented Fuzzy Search.

    Fuzzy Search looks for results that are close to the search term, even if they are not an exact match, and the data is saved locally thanks to Javascript library fuse.js, making searches wider, more effective, and user-friendly.

    Up Next

    light overlay

    Generating leads and empowering patient journeys

    How we helped Clinique Michel Gagner improve performance, strengthen patient relationships, and cement itself as a Canadian leader in weight-loss surgery.

    Read Case Study