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!
Top comments (0)