My top CMS to all my projects

I have been getting a lot of questions about the CMS I use for my website.
I think the most important thing to think about is

• Having a good editor

• Be optimized for SEO

• Extendable with different features

Most people might not like my answer, but I mostly use WordPress.

I have tried all the new projects from Strapi to Sanity. They are all nice.
Nothing compared to the robustness, options, and UX of WordPress (sorry, in advance)

While this is not my type of traditional newsletter, I feel it’s essential for the Marketing part to have a super-optimized SEO website.

WordPress FTW

WordPress is old and slow PHP, but it is still one of the best editors I have been working on (Gutenberg). Inherently, I would not choose WordPress for my marketing website, but since I am using headless WordPress (only for the API), the website is statically generated. There are no performance issues.

So, for my last project, I used the railway.app and deployed a WordPress project using a template.

I deployed the project on a different subdomain cms.website.com

Once I got the application running, I installed a few plugins:

• Headless Mode

• Code Snippets

• Yoast SEO

• Custom Post Type UI

• WordPress REST API Authentication

• Vercel Deploy Hooks

Once WordPress is up and running you can visit

• cms.website.com/wp-json/wp/v2/posts

• cms.website.com/wp-json/wp/v2/pages

Get the pages (like the home page) or posts (blog posts) you created from the CMS.

Once you are logged in to the CMS, go to “Settings” » “Permalink“ and use a custom structure. I usually use /blog/%postname%

Now that you know the basics, let’s dive into the CMS Plugins

1. Headless Mode

WordPress comes with a frontend, but we don’t want it—we build our website with a faster Framework like Next or Nuxt and open-source it (that’s the way of open-source).

Headless mode removes the front end and redirects you back to the admin panel for login.

2. Code Snippets

WordPress was not built for Headless mode; we have a small problem. If we go to the API, many paths will lead to the CMS and not your frontend. To solve that, you can install the Code Snippets plugin and create a new code Snippet with the following content:

if (strpos($_SERVER['REQUEST_URI'], '/wp-json/wp/v2/posts') !== false || strpos($_SERVER['REQUEST_URI'], '/wp-json/wp/v2/pages') !== false) {
	add_filter('rest_prepare_post', function($response, $post, $request) {
		$response->data['link'] = str_replace('cms.website.com', 'website.com', $response->data['link']);
		// You can add additional lines to modify other URL parts or data as necessary.
		return $response;
	}, 10, 3);
	
	add_filter('rest_url', function($url) {
		return str_replace('cms.website.com', 'website.com', $url);
	});
	
	add_filter( 'wpseo_canonical', function( $canonical ) {
    	return str_replace( 'cms.website.com', 'website.com', $canonical );
	});
	
	add_filter( 'wpseo_sitemap_entry', function( $url, $type, $object ) {
		$url['loc'] = str_replace( 'cms.website.com', 'website.com', $url['loc'] );
		return $url;
	}, 10, 3 );
	
	add_filter( 'wpseo_opengraph_url', function( $og_url ) {
    	return str_replace( 'cms.website.com', 'website.com', $og_url );
	});
	
	add_filter( 'wpseo_twitter_url', function( $twitter_url ) {
    	return str_replace( 'cms.website.com', 'website.com', $twitter_url );
	});
}

3. Yoast SEO

Yoast is an amazing plugin. It automatically adds SEO to every page and all the metatags that you want (and don’t know about).

It’s also being exposed in the API automatically, so you can start adding all of them to your head.

I have done a small trick. Yoast gives you all the metadata in a raw format via the API, so I like to use the React plugin html-react-parser, it takes the raw HTML and convert it to react, and you can use it later next/head to render all the metadata.

Alternatively, you can get all the metadata manually from the API.
One of the most excellent things is that it works great with all the OG:IMAGE.

4. Custom Post Type UI

By default, WordPress gives Pages and Posts But what if you want some additional type of content, like Tools or Resources?

You can install Custom Post Type UI, create a new type (you will imminently see it in the WordPress menu), and then you can access it via the API in a path like cms.website.com/wp-json/wp/v2/tools

5. WordPress REST API Authentication

The WordPress API (the GET routes) is exposed by default. You can block them by using WordPress REST API Authentication, but it’s not a must.

If you are open-sourcing the project, you might not want to add this plugin to allow different contributors to update your website.

Just add a rate limiter so as not to be spammed.

6. Vercel Deploy Hooks

Depending on your frontend, you must let your provider know you have changes to update the website. I use Vercel Deploy Hooks but feel free to use it for your framework.

After implementation

Once you have finished building your front, make sure you play with the following:

1. PageSpeed - it’s essential to have a score higher than 85. Google will like you a lot for that.
   

2. Semrush / Hrefs: Look for website audits and see if you are missing stuff (like keywords, metadata, etc.). Yoast is supposed to be a big help in that.

Here is some additional information on custom cms development.

See you next week.