I have wanted to create a development blog for the longest time now and I have tested a lot of methods from creating everything from scratch to using a CMS but I knew that I wanted the front end to be built with react and to look good and none of the solutions that I tried were good enough for me until today.

I found this library called Frontity which would connect to WordPress’s REST API and it would get everything you need from there, it is really simple to use and requires none too little setup to be able to start the blog.

The setup

Why reinvent the wheel and build a new CMS where we already have WordPress which is amazing and open source?

It is just as easy as running the command

$ npx frontity create <app-name>

After running this command you would get to choose from 2 themes, mars and WordPress’s 2020 theme I choose to go with the mars theme because that is what I was looking for but you can go with any and there are even themes online you can choose or just build your own.

After you initiate the project you just have to set up the pointing to WordPress, so if you go into your project directory and edit the file frontity.settings.js there you will have to edit 2 values

    const settings = {
      "name": "my-first-frontity-project",
      "state": {
        "frontity": {
          "url": "https://test.frontity.org/",
          "title": "Abod's blog",
          "description": "A look into my brain 🧠"
        }
      },
      "packages": [
        {
          "name": "@frontity/mars-theme",
          "state": {
            "theme": {
              "menu": [
                [
                  "Home",
                  "/"
                ],
                [
                  "Portfolio",
                  "https://abodsakka.xyz/"
                ]
              ],
              "featured": {
                "showOnList": true,
                "showOnPost": true
              }
            }
          }
        },
        {
          "name": "@frontity/wp-source",
          "state": {
            "source": {
              "url": "https://test.frontity.org/"
            }
          }
        },
        "@frontity/tiny-router",
        "@frontity/html2react"
      ]
    };

and change https://test.frontity.org/ to your own domain or you can just leave the same for now to just see test it out, but these links are where frontity is going to try to contact the WordPress REST API to get the information needed as posts, tags, authors and such.

You can now run the website by typing

$ npx frontity dev

That is how simple it is to create your blog with WordPress as a headless CMS.

For me instead of hosting my own WordPress intense on my server i just use 000webhost but you can use what ever you want and then so that people wont be able to get to the front end of my website i just created a new folder in the public_html/wp_content/themes/ directory and created 2 files in there for wordpress to know it is a theme, style.css and index.php. I left the style.css empty but populated the index.php with a redirect script

<?php
    header( "Location: https://blog.abodsakka.xyz" );
?>

So now everytime someone tries to get to my WordPress front end they are going to be redirected to the React app instead.

Addons

Prismjs

As a developer, I like to post some code snippets into my blog from time to time and I think all developers could agree that syntax highlighting is a good thing to have for readability so I wanted to use Prism.js with it.

It was just as simple as installing Prism.js with npm or yarn

$ npm i prismjs
    or
$ yarn add prismjs

and then in my <project>/packages/mars-theme/src/post.js i just added

import Prism from "prismjs";

And then added all the languages that I would want to use, for intense

import "prismjs/components/prism-typescript"

And the same thing for the plugins

import "prismjs/plugins/line-numbers/prism-line-numbers"

And now in order for Prism engine to run we have to create a use Hook which is called in the Post function

useEffect(() => {
    Prism.highlightAll();
}, []);

This is not going to take effect with the normal wordpress code block so I use an addon

Done !

Cookie consent

With today’s GDPR we have to tell the user that we are using cookies on this website so how would we set it up? I am using a react library called react-cookie-consent and it is just as simple as installing it with

$ npm i react-cookie-consent
    or
$ yarn add react-cookie-consent

Importing it to our <project>/packages/mars-theme/src/index.js

import CookieConsent from "react-cookie-consent";    

And then adding it at the bottom of out Theme function

    <CookieConsent
              location="bottom"
              buttonText="Got it!"
              cookieName="myAwesomeCookieName2"
              style={{ background: "#2B373B"}}
              buttonStyle={{ color: "#fff", backgroundColor: "#1f38c5", fontSize: "24px" }}
              expires={150}
            >
              This website uses cookies to enhance the user experience.{" "}
    </CookieConsent>

And that is it, now you will have a cookie consent screen on your website that easy.

Hope this was useful and thanks for reading!