Recently, I faced the challenge of integrating WordPress into my existing Next.js project. I had a blog hosted on WordPress and wanted to migrate it to my Next.js app.

I needed a solution that would allow me to use WordPress as a headless CMS. The goal was simple: leverage the power of WordPress for managing content while utilizing a modern frontend framework for displaying it.

In this article, we’ll walk through how to integrate WordPress to a Next JS app.

Why Use a Headless CMS?

A headless CMS separates the content management (back-end) from the presentation layer (front-end). This gives developers more flexibility over how content is delivered and displayed, without being restricted by traditional themes or layouts.

It's great for performance, and scalability, offering more control over how content is rendered on the frontend. In this case, you’ll use WordPress as your content management system but display the content in a more modern and performant way using Next.js.

What is Next.js?

If you are yet to come across Next.js, it's a powerful React-based framework that makes building optimized, server-side rendered (SSR) applications much easier.

It offers a bunch of features out of the box like file-based routing, API routes, static site generation (SSG), and incremental static regeneration (ISR). All these make it a great choice for creating fast, SEO-friendly websites.

How to Connect WordPress and Next.js

When using WordPress as a headless CMS, there are two primary ways to connect your Next.js application to your WordPress backend:

1. WP REST API: WordPress comes with a built-in REST API, which allows you to retrieve content from WordPress in JSON format.

2. WPGraphQL: WordPress supports headless content management through the use of GraphQL (with plugins such as WPGraphQL), making it easy to query and retrieve specific content, like blog posts, for use in a front-end framework like React.

While the REST API is popular, we’ll to go with WPGraphQL because it allows for more precise queries and flexibility. With GraphQL, you can ask for exactly the data you need, which can reduce the amount of data transferred and improve performance.

Steps to Connect WordPress and Next.js Using WPGraphQL

The first thing you need to do is to install the WPGraphQL plugin on your WordPress site. This plugin enables GraphQL API functionality within WordPress. You can install the plugin like any other by navigating to the WordPress admin dashboard.

First, go to Plugins and select Add New. Then, search for WPGraphQL, and once you find it, simply install and activate the plugin.

After installing and activating the plugin, the GraphQL IDE will appear on the WordPress dashboard. Here, you can test various queries you may need for your frontend development.

Let's move on to the frontend.

How to Fetch Data from WPGraphQL in Next.js

In your Next.js project, you'll need to fetch data from the GraphQL API. Here’s a simple example using graphql-request:

1. Install graphql-request to make it easy to query the GraphQL API:

npm install graphql-request

2. In your Next.js component, create a GraphQL query to fetch the blog posts:

import BlogHeader from '@/components/blog/BlogHeader';
import BlogNewsletter from '@/components/blog/BlogNewsletter';
import BlogPosts from '@/components/blog/BlogPosts';
import Link from 'next/link';
import React from 'react';

import { request, gql } from "graphql-request";

const query = gql`
{
  posts(first: 10) {
    edges {
      node {
        id
        title
        excerpt
        content
        date
        author {
          node {
            id
            name            
          }
        }
        date
        slug
        featuredImage {
          node {
            sourceUrl
          }
        }
        categories {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`

export async function getStaticProps() {
  try {
    const posts: any = await request('https://blog.intercity.ng/graphql', query);

    return {
      props: { posts }
    }
  } catch (error) {
    console.error('Error fetching posts:', error);
    return {
      props: {
        posts: []
      }
    };
  }
}

const Index = ({ posts }: { posts: any }) => {

  return (
    <main className="relative pb-10 pt-10 lg:pt-0 lg:mt-[-3%]">
      <div className='t40-container w-full'>
        <BlogHeader />
        <BlogPosts posts={posts} />
        <BlogNewsletter />
      </div>
    </main>
  )
}

export default Index

In the code above, your Next.js app fetches blog posts from your WordPress backend using GraphQL and displays them on the frontend. The GraphQL query is created to retrieve post details like the title, author, content, and featured image.

Using Next.js getStaticProps, the data is fetched at build time and passed as props to the component. The blog posts are rendered through custom components like BlogHeader, BlogPosts, and BlogNewsletter, making the page dynamic and efficient.

This demonstrates how WordPress can be used as a headless CMS for a Next.js application. Now that you have successfully integrated WordPress as a headless CMS in your Next.js application, you can continue fetching more data from the GraphQL API to enhance the functionality of your app.

Conclusion

By using WordPress as a headless CMS and Next.js for the frontend, we can build a fast, SEO-friendly blog while taking advantage of WordPress’s powerful content management features.

Using WPGraphQL allowed us to efficiently fetch only the data we needed, giving us more control and improving the site's performance.

I hope this was useful. Happy coding!

This tutorial will show you a solution that leverages Google Sheets as a makeshift database and React to build the frontend. This will let you effectively bypass the need for a dedicated server or traditional database system.

This approach not only reduces the overhead costs associated with web development, but also simplifies content updates and management. It's an ideal solution if you're looking to launch your own simple CMS without substantial investment.

This solution is suitable for freelancers at the beginning of their career and for clients who cannot invest much in their website.

Why Google Sheets?

Opting for Google Sheets as the backbone of your CMS comes down to its simplicity, flexibility, and cost-effectiveness.

Traditional web development requires a backend server to process data, a database to store information, and a frontend to display content. But each layer adds complexity and cost.

Google Sheets, on the other hand, acts as a highly accessible and intuitive interface that eliminates the need for a server and a database. It lets your users update content in real-time, much like any CMS, but without the usual setup and maintenance costs. This makes it an excellent choice for individuals, small businesses, or anyone looking to deploy a web application quickly and with minimal expense.

Getting Started

Before diving into the code, ensure you have Node.js and npm installed on your system. These tools will allow us to create a React application and manage its dependencies.

Let's start with Google Sheets now.

Step 1: Set Up Your Google Sheets

1. Go to your Google Sheets
2. Open the sheet you want to use or create a new one
3. Click on Extensions in the menu
4. Then click on Apps Script

In the Apps Script editor, you can write a script to serve as your endpoint. Here's a script that returns the contents of a Google Sheet in JSON format:

function convertRangeToJson(data) {
  var jsonArray = [];

  // Check if data is empty or doesn't contain enough rows for headers and at least one data row
  if (!data || data.length < 2) {
    // Return an empty array or a meaningful message as needed
    return jsonArray; // or return 'No data available';
  }

  var headers = data[0];
  for (var i = 1, length = data.length; i < length; i++) {
    var row = data[i];
    var record = {};

    for (var j = 0; j < row.length; j++) {
      record[headers[j]] = row[j];
    }

    jsonArray.push(record);
  }

  return jsonArray;
}

Then:

1. Click File > Save, and give your project a name
2. Click on Deploy > New deployment.
3. Click on Select type and choose Web app.
4. Fill in the details for your deployment. Under Execute as, choose whether the script should run as your account or as the user accessing the web app. Under Who has access, choose who can access your web app.
5. Click Deploy.

You may be asked to authorize the script to access your Google Sheets. Follow the prompts to do so.

After deploying, you'll be given a URL for your web app. This is your API endpoint.

To give you an idea of what you have done so far, this is your sheet structure:

How your sheet should currently look

And this is the JSON you get when you call the endpoint:

JSON

Step 2: Create Your React App

With your Google Sheets API ready, it's time to create the React app that will fetch and display this data.

First, go ahead and create a React app. Run the following command in your terminal to create a new React application:

npx create-react-app google-sheets-cards
cd google-sheets-cards
npm start

You can also use modern build tools like Vite for this purpose, as CRA is no longer the recommended way of building a React app.

Next, create the card component. Inside the src directory, create a file named Card.js. This component will be responsible for displaying each data record:

// src/Card.js
function Card({ title, content }) {
  return (
    <div className="card">
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}

export default Card;

Now it's time to fetch and display your data in App.js. Modify the App.js file to include logic for fetching the data from your Google Sheets API and using the Card component to display it:

// src/App.js
import React, { useEffect, useState } from 'react';
import Card from './Card';
import './App.css'; // Make sure to create some basic styles for the cards in App.css

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('YOUR_ENDPOINT_URL') // Replace with your actual endpoint URL
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div className="App">
      <h1>Data from Google Sheets</h1>
      <div className="cards-container">
        {data.map((item, index) => (
          <Card key={index} title={item.Title} content={item.Content} />
        ))}
      </div>
    </div>
  );
}

export default App;

Next, you can style your cards. Go ahead and add the below CSS in App.css for basic card styling:

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 10px;
  display: inline-block;
  background: #f9f9f9;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Step 3: Run Your React App

With everything set up, you can now run your React application and see the data from Google Sheets displayed in your browser. To do this, follow these steps:

First, start the React app. In your terminal, navigate to the root directory of your React app if you're not already there. Run the following command to start the development server:

npm start

This command compiles your React application and opens it in your default web browser. You should see a webpage with a title "Data from Google Sheets", and below that, a series of cards, each displaying a title and content fetched from your Google Sheets data.

Here's, in fact, what we get:

Data from Google Sheets and Card 1, Card 2, and Card 3 displayed on the screen

Now you can view your data. Each card on the page corresponds to a row in your Google Sheets, with the title and content fields displayed as specified in your Card component. If you make any updates to your Google Sheets data, you can refresh the web page to see the changes reflected immediately.

You can deploy your React app to one of the many services you can find online such as Github Actions or Netlify. This is a simple and effective way to host your frontend application for free with significant performance.

Conclusion

Congratulations! You've created a dynamic web application that fetches data from a Google Sheet and displays it using React.

This approach offers a flexible and straightforward way to manage your application's content without needing a backend server or database.

Google Sheets serves as an accessible and collaborative platform for managing data, while React allows you to build a responsive and interactive user interface. Together, they provide a powerful combination for creating web applications that can be quickly updated and easily maintained.

If you're an entrepreneur or a developer, chances are you'll work with a content management systems (CMS) at some point. And knowing how to analyze the many features of the CMS options out there is important when choosing the right one for your use case.

In this article, I'll explain why CMSs exist, the problems they help solve, and I'll also offer helpful guidance in choosing the right CMS for your needs.

What is a CMS?

You can think of a CMS as an extremely user-friendly database for your website’s content.

A CMS provides an intuitive interface that allows website owners and content creators to manage a website's content without requiring advanced technical skills.

As an example, think about it from the perspective of someone who wants to own a blog, but doesn’t know anything about web development. It would be very difficult, if not impossible, for this person to modify the source code of the web site in order to add a new article to the blog.

This is where a CMS comes in. The CMS is linked to the owner’s website, and the site has built in code that pulls data from the CMS and automatically publishes this data on the site. In this example, the data could be a new blog article and image.

Headless CMS vs Traditional CMS

You may have heard the term “headless CMS” floating around, and wondered what that was all about. Nowadays, CMSs come in two flavors; a traditional CMS, and a headless CMS. Let’s take a look at a few definitions to get a better grasp of each:

What is a Traditional CMS?

A traditional CMS is a complete website management system that not only stores your content in a user-friendly database, but also offers a front end, usually a WYSIWYG style editor to build out your actual web page.

The front-end UI designer and backend storage system are unified in one intuitive interface. Wordpress is a famous example of a traditional CMS.

What is a Headless CMS?

A headless CMS is similar to the traditional CMS, but without the front-end WYSIWYG editor to build your site. If you think of your actual webpage as the “head”, and your content as the “body”, then this starts to make sense.

A headless CMS is totally independent of your site’s design, and you can typically use any framework of choice and connect it to the headless CMS. The headless CMS acts similar to a backend database, but is tailor-made for handling typically used website content like images and rich text.

When Do I Need a CMS?

Before concerning yourself with choosing the right CMS for your needs, it is essential to understand whether you actually need one. CMSs are designed to streamline the process of creating, editing, and managing digital content, primarily for websites.

If you’re wondering whether you should consider a CMS, ask yourself the following questions:

1. Does the website require frequent content updates, such as articles or product listings?
2. Will there be multiple content authors collaborating on the website's content?
3. Does the website require flexible content structuring and organization to accommodate future changes?

If you answered yes to one of these questions, there’s a good chance that your project would benefit from the features offered by a good CMS.

CMS Integration and Compatibility

It’s important to consider ease of integration with your chosen system or framework. You may be considering adding some functionality to your site such as an e-commerce system or customer relationship management (CRM) software. Or you may just be starting a new project from scratch.

Either way, it is crucial to ensure that the CMS you select can seamlessly integrate with these systems.

Most frameworks, such as Next.js, Gatsby or Astro, will offer a list of official CMS plugins that streamline the process of integration. Of course, a CMS can be added to any project without an official plugin by utilizing the API from your CMS of choice, and coding everything manually.

But it’s usually wise to look for a CMS that is supported by your framework, as it takes much of the heavy lifting out of the equation and allows you to focus on other pressing concerns.

For example my blog has a list of the best CMS for Next.js to choose from. Most frameworks have a number of CMSs that are compatible and created by 3rd party developers.

When searching for a CMS with seamless integration and compatibility, look to your framework’s official docs for guidance, which should tell you what public libraries are available.

CMS Features to Consider

When evaluating CMS options, do some research and testing rather than going for the first option that pops up. While the specific requirements may vary depending on your project, here are some fundamental features to look for:

1. User-Friendliness: The CMS should have an intuitive and user-friendly interface, enabling non-technical users to manage and update content easily.
2. Content Organization: Effective content organization is crucial for a CMS. Look for features such as categorization, tagging, and metadata management to ensure your content is easily searchable and conveniently organized.
3. SEO Optimization: Ensure the CMS supports essential SEO features, such as image optimization, full-featured rich text editors, and friendly URLs.

Common CMS Pitfalls

There are a few potential pitfalls you should consider, because utilizing a CMS doesn’t always live up to expectations. Here are a few common challenges:

1. Overwhelming Complexity: This may seem oxymoronic, considering my earlier statement that CMSs are supposed to simplify things. But everyone is different, and one CMS may not suit your taste as much as the next person. It’s a good idea to create an account and take a look around, maybe even create some content, just to get a feel for whether the CMS is right for you.
2. Hidden Costs: Many CMSs claim they are free. But almost all of them begin charging when you reach a certain threshold of traffic or storage capacity. It’s important that you do your research, and ensure that you’re considering whether your project will venture into the realm of “paid service” sooner than you expected.
3. Limited Support and Documentation: When encountering issues or needing assistance, reliable support and comprehensive documentation is paramount. Ensure that the CMS you choose has an active community, official support channels, and extensive documentation or user guides. This support network can be invaluable in troubleshooting problems and learning how to make the most of the CMS's features.

Conclusion

Choosing the right CMS is an important decision that can impact your website's performance, scalability, and ease of management. By understanding the purpose of a CMS and evaluating your specific needs, you can make an informed decision that aligns with your goals.

Ultimately, a CMS should empower you to efficiently create, manage, and update content, allowing you to focus on delivering a compelling user experience. At the end of the day, meaningful content is the goal, and a CMS should be a helpful hand that guides you through the process.

Hope you enjoyed the post. If you want to learn more about CMSs and SEO in general checkout OhMyCrawl. If you want to follow along with one of my side projects, checkout my latest site Trust In Geeks to follow my journey.

Ghost targets primarily writers and all the features are specifically built for writing.

Ghost's new dashboard gives you a user-friendly interface, and beginners can easily understand the functionality. In addition, Ghost's free tutorials will help you if you have any problems.

Some cool Ghost features:

1. Open-source
2. Membership support
3. Rich text editor (Koenig editor)
4. Newsletters
5. Email subscriber support
6. Login functionality support
7. Integration plugin
8. Analytics dashboard
9. Inbuilt comment support
10. Inbuilt search support
11. Inbuilt search functionality
12. SEO and different types of metadata support social media
13. Custom theme design

You can check out all the code available for this project on GitHub here.

Here's what we'll cover:

1. Self-Hosting vs Hosting with Ghost
2. What Are the Drawbacks of Ghost?
3. How to Install the Ghost CMS
4. Understanding the Ghost Folder Structure
5. Understanding the Ghost Theme Folder Structure
6. How to Create a New Theme with the npm CLI Tool
7. How to Create a New Ghost Theme from Scratch
8. How to Install ghost-cli Globally
9. How to install Ghost locally
10. How to Configure Tailwind CSS
11. Other Important Commands in the Ghost CLI
12. How to Write the Code for Our Custom Ghost Theme
13. How to add theme configuration in package.json
14. How to Use Theme Helpers
15. What is the Partials Folder?
16. How to Create a Default Page
17. How to Create an Index Page
18. How to Create a Posts Page
19. How to Create Information Pages
20. How to Create an Author Page
21. How to Create a Tags Page
22. How to Create an Error Page
23. How to Enable Comments
24. How to Set Up Search
25. Conclusion

Self-hosting vs Hosting with Ghost

Ghost provides two ways to create/host your website:

1. Self-hosting
2. With the Ghost cloud platform

Self-hosting

If you choose to self-host, you'll host your website on any cloud platform like Google cloud, AWS cloud, Azure cloud, Digital Ocean, and so on. These are some of the most used cloud platforms in the market.

Most cloud platforms come with one click to deploy solutions. This means you can deploy your Ghost blog with a single click.

Before deploying your Ghost blog, you should compare all cloud platforms based on pricing before choosing one.

Self-hosting your Ghost blog is free, and you do not need to pay anything to the Ghost platform. You'll just pay your cloud provider.

Hosting with the Ghost Cloud Platform

If you choose to host with Ghost, they'll help create the blog and host it on the Ghost platform itself. The Ghost team handles all the maintenance and security. You won't have to worry about updating Ghost and any themes you're using – the Ghost staff will handle that for you.

Self-hosting focuses more on developers, while hosting with the Ghost platform targets anyone who doesn't know about computers and programming.

Ghost hosting comes with a paid plan – it's not free. But they give you 14 day free trial period, after which you shift automatically into a paid plan.

What should you choose, paid or self-hosting?

In my experience, hosting with the Ghost platform is the best solution for beginner developers, non-developers, and writers. The Ghost team handles everything for you. You do not worry about traffic, security, or maintenance and do not need to update the Ghost CMS. This lets you focus on writing.

As a developer, I always recommended that you self-host Ghost. I have run my self-hosted Ghost blog with Google Cloud for two years with a Bitnami one-click deployment.

After six months, I'd used up my $200 free credit, and then I started to pay monthly to Google Cloud hosting.

For a non-technical person, I highly recommended using the Ghost (pro) cloud platform and as well any other platform that provides Ghost-based cloud and shares hosting.

I found a list of Ghost-hosting platforms on the internet. Perhaps one of these will solve your hosting issues or questions. If you plan to deploy Ghost with the Google Cloud platform, I have an article on that.

What are the Drawbacks of Ghost CMS?

The biggest drawback of Ghost is that web performance can feel slow. If you want good web performance, you'll likely need to use a CDN for media (images, videos, and PDFs) and also for CSS and JavaScript.

The second biggest drawback is cost. I've been running my blog with Ghost for two years, and I pay 10 to 20 times extra to Google Cloud for hosting as a self-deploy.

My website has 4000 to 5000 active monthly users, and I pay 20 times extra. Because of this, I shifted my website to Hugo.

Now I still have 4000 to 5000 active users on the website, and I pay zero money to Netlify.

The Solution for Developers

The best solution for developers is to use Ghost as a backend and, with the REST API, choose any JavaScript framework like Next.js, Fresh, Astro, and so on.

There are a lot of frameworks that can help you build a static website. In addition, static websites are fast and deploy with zero JavaScript.

In this method, you may not use all Ghost's features, but you can save a lot of money. Still, building the website with a JavaScript framework takes a lot of time just to run the essential version of the website.

My solution only works well for a small team. So if your team has a lot of writers and submits many articles in a single day, I'd recommend sticking with Ghost CMS as a frontend and backend.

Ghost version 5.0 is 20% faster than the old version. Suppose you use Ghost and want to design your own custom theme – then this article is for you. Let's get started.

How to Install the Ghost CMS

How you install Ghost CMS changes according to your operating system. We'll discuss installation for all operating systems in this guide. You can install Ghost with npm, yarn, and Docker.

Now let's look at how to install Ghost for:

1. Windows, Linux, and macOS
2. Docker image

How to Install Ghost on Windows, Linux, and macOS

Setting up the Ghost theme development environment in Windows and macOS is a straightforward process. But it's best if you've installed the npm or yarn package manager. If you don't have Node.js, npm, and yarn, yolu'll need to install them – Node.js comes with preinstalled npm and yarn.

To install Ghost CMS globally and locally, follow these basic steps:

How to install ghost-CLI globally

First, you can install ghost-cli globally on your machine using npm or yarn. Here are the commands:

npm install ghost-cli@latest -g
    OR
yarn global add ghost-cli@latest

How to install Ghost locally

Next, when your ghost-CLI installation is complete, then run the ghost local command in your terminal. It looks like this:

ghost install local

The command output looks like this:

Ghost cms folder structure

Note: you'll need to run the ghost install local command in an empty folder. Otherwise, you'll face an error:

Not empty directory error with ghost-cli

To start the local development server, run the ghost start command in your terminal.

Ghost start command

If you get an error when running ghost start in Ubuntu, run the following command: ghost start --no-setup-linux-user.

The directory is not readable by other users' error in Ghost CMS.

How to Set Up Your Environment Using a Docker Image

Docker is also a great way to set up a theme development or production environment for Ghost. The Ghost team provides an official Ghost Docker image on Docker Hub.

To start the setup, you'll need the docker-compose.yml file in your root project folder. Then run the docker-compose up command in your terminal.

version: '3.8'
services:
  blog:
    image: ghost
    restart: always
    ports:
      - 8080:2368
    volumes:
      - ./custom-ghost-theme:/var/lib/ghost/content/themes/custom-ghost-theme/
    environment:
      url: http://localhost:808
      NODE_ENV: development

In the volume section, you pass your file. In my case, I added a specific file in my Ghost theme folder.

version: '3.8'
services:
  blog:
    image: ghost
    restart: always
    ports:
      - 8080:2368
    volumes:
      - ./assets:/var/lib/ghost/content/themes/fastest/assets
      - ./partials:/var/lib/ghost/content/themes/fastest/partials
      - ./author.hbs:/var/lib/ghost/content/themes/fastest/author.hbs
      - ./default.hbs:/var/lib/ghost/content/themes/fastest/default.hbs
      - ./error-404.hbs:/var/lib/ghost/content/themes/fastest/error-404.hbs
      - ./error.hbs:/var/lib/ghost/content/themes/fastest/error.hbs
      - ./gulpfile.js:/var/lib/ghost/content/themes/fastest/gulpfile.js
      - ./index.hbs:/var/lib/ghost/content/themes/fastest/index.hbs
      - ./package-lock.json:/var/lib/ghost/content/themes/fastest/package-lock.json
      - ./package.json:/var/lib/ghost/content/themes/fastest/package.json
      - ./page.hbs:/var/lib/ghost/content/themes/fastest/page.hbs
      - ./post.hbs:/var/lib/ghost/content/themes/fastest/post.hbs
      - ./query.hbs:/var/lib/ghost/content/themes/fastest/query.hbs
      - ./tag.hbs:/var/lib/ghost/content/themes/fastest/tag.hbs
      - ./readme.md:/var/lib/ghost/content/themes/fastest/readme.md
    environment:
      url: http://localhost:8080
      NODE_ENV: development

In your custom-ghost-theme folder, you need the index.hbs, post.hbs, and package.json files to start theme development. But, you'll get an error when you activate your theme in the Ghost dashboard without requiring a file.

Here's the GitHub repo if you want to follow along:

Errors

In Ubuntu (22.04) or any other Linux distros, you'll get the Message: The directory /home/rajdeepsingh/ is not readable by other users on the system error. This means yours is old. So update your ghost-cli then run the ghost start command in your folder.

Understanding the Ghost Folder Structure

The Ghost folder structure has three main folders and one file. They are:

1. The config.development.json file contains the configuration for Ghost development.
2. The current folder is a link (symbolic link) that targets the install version.
3. The version folder contains all versions of Ghost cms.
4. The content folder is the main folder containing our database file, settings, theme, images, media, and so on.

Ghost CMS folder Structure

The folder structure might change according to the operating system but the content folder is the same in every operating system.

The content folder contains all the important files for Ghost. They are:

1. The data folder contains an SQLite3 database file. Ghost, by default, uses the SQLite3 database.
2. Files, images, and media folders contain all files which writers upload.
3. The public folder contains all public CSS and JavaScript files – for example, card and member JavaScript and CSS files.
4. Finally, the settings folder contains all the settings, for example, the router.xml file.
5. The theme folder contains all files and folders used to develop the theme.

Understanding the Ghost Theme Folder Structure

You can build a new custom theme store in the content/theme folder. To develop a new theme, you'll always need to create a new folder with the theme name and store all files in the theme name folder.

// theme structure

content 
content/theme
content/theme/my-theme-name
content/theme/my-theme-name/index.hbs
content/theme/my-theme-name/post.hbs
content/theme/my-theme-name/package.json

// rest of file created in my-theme-name folder

Ghost CMS uses handlebars to build a Ghost theme. There are a number of files but only three files are required:

1. index.hbs in the main file (required) to design the home page of the website.
2. post.hbs the file (required) is used to read and design the full article.
3. package.json file (required) is used for Node.js config, and it also uses the theme name, description, version, custom config, and so on.
4. The default.hbs file is used to build the layout of the theme.
5. The assets folder contains all the JavaScript, CSS, fonts, and image files.
6. The partials folder helps divide files into small partials (parts) for better code readability.

Ghost theme folder structure

How to Create a New Theme with the npm CLI Tool

The easiest way to start a new Ghost theme is with the create-ghost-theme CLI. I built it, and I maintain it. The create-ghost-theme CLI helps you create the following folder structure that we'll discuss next. But currently, it only supports Tailwind CSS.

First, we'll create a new theme with the create-ghost-theme CLI and restart the Ghost CMS local server again.

Folder structure

After creating a new theme with create-ghost-theme CLI, your folder structure looks like this:

create-ghost-theme cli folder structure

Understanding the New Website Layout

After creating the theme with create-ghost-theme CLI, your theme looks like this.

index.hbs

Your website reading page will look like this:

Your new tag page looks like this:

How to Create a New Ghost Theme from Scratch

When you're learning about Ghost theme development, my recommendation is to start creating a new theme from scratch. Then you can use the CLI tool I just showed you. This will be a lot easier for you.

So now, that's what we're going to cover in-depth: how to create a new Ghost CMS theme from scratch.

Requirements:

To create a new theme, you'll need two libraries: the first is ghost-cli and the second is Tailwind CSS.

Here's what we'll go over in the coming sections:

1. How to install Ghost-cli globally
2. How to configure Tailwind CSS
3. How to understand more commands in the Ghost CLI
4. Finally, we'll write the code

How to Install ghost-cli Globally

We went over how to do this above, but in case you need a reminder here it is:

First, you can install ghost-cli globally on your machine using npm or yarn. Here are the commands:

npm install ghost-cli@latest -g
    OR
yarn global add ghost-cli@latest

How to Configure Tailwind CSS

Tailwind CSS is a powerful CSS library for designing the front end of a website. And you can easily use it with Ghost.

Install Tailwind CSS in your theme folder like this:

npm install -D tailwindcss postcss autoprefixer

After Tailwind and another package have been successfully installed, then run the following command to configure Tailwind for your theme development:

npx tailwindcss init

The tailwindcss init command creates a tailwind.config.js file. Here's what you'll see:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Config your template path in the content section, so Tailwind CSS tracks the CSS classes. Then compile those classes in the production file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["*.hbs","partials/*.hbs"],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

Create a main.css or dev.css and use any other file name to create the file for Tailwind directives. Then paste the following tailwind CSS directives code into the file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create the script for Tailwind CSS to check all the classes then create a production-ready CSS file for your theme.

    "scripts": {
        "start": "npx tailwindcss -i ./assets/css/dev.css -o ./assets/build/css/build.css --watch"
    },

The last step is to link the production-ready CSS file to your theme like this:

<head>
    {{!-- link production ready css file  --}}
    <link rel="stylesheet" href="{{asset 'build/css/build.css'}}" />
</head>

The one problem you might face when you enable Tailwind CSS in a Ghost theme is that refreshing your site in the development process is manual. When you change anything related to Tailwind classes, you'll need manually refresh your website again. I haven't found a solution yet, but you can use the live server for that for now.

Other Important Commands in the Ghost CLI

There are a number of other commands you'll use often when working in the Ghost CLI. Let's go through them now. Here's what we'll discuss:

1. ghost stop
2. ghost ls
3. ghost doctor
4. ghost uninstall
5. ghost version
6. ghost restart
7. ghost update
8. ghost version
9. ghost --help

How to use the ghost stop command

The ghost stop command stops the currently running instance.

How to use the ghost ls command

The ghost ls command prints the current installs instance list in your machine.

How to use the ghost doctor command

The ghost doctor command checks the system's health to see if everything is fine before running the ghost install or ghost update command.

If you face any errors in Ghost, you can also use the ghost doctor command to check the errors.

How to use the ghost uninstall command

The ghost uninstall command removes the Ghost instance and related configuration files as well.

How to check the Ghost version

You can use the ghost version command to check your currently installed version of Ghost.

How to use the ghost restart command

The ghost restart command restarts your currently running Ghost instance.

How to use the ghost update command

The ghost update command updates your old Ghost version to the new version.

How to use the ghost --help command

The ghost --help command prints a help page:

Finally, we'll write the code

Now we get to start writing the code. Here's what we'll cover in the coming sections:

1. How to add theme configuration in package.json [required]
2. How to use theme helpers
3. What is the partials folder?
4. How to create a default page
5. How to create an index page [required]
6. How to create a posts page [required]
7. How to create informational page
8. How to create a tags page
9. How to set up comments
10. How to enable search

How to add theme configuration in package.json

The package.json file is the main file where you add or change the theme name, description, and custom configuration for the theme.

The first step is to create package.json file and add the theme name, description, version, and additional configuration.

The following properties are used by Ghost themes: name, description, version, engines, card_assets, license, author, keywords, screenshots, and config in the package.json file.

The most important properties are name, description, version, engines, card_assets, and config. Here's what this looks like in the code:

{
    "name": "fastest",
    "description": "Fastest ghost cms base theme. Fastest is light weight, modern open-source theme",
    "version": "1.0.7",
    "engines": {
        "ghost": ">=5.0.0"
    },
    "license": "MIT",
    "scripts": {
        "dev": "gulp",
        "start": "npx tailwindcss -i ./assets/css/dev.css -o ./assets/build/css/build.css --watch"
    },
    "author": {
        "name": "Rajdeep Singh",
        "email": "officialrajdeepsingh@gmail.com",
        "url": "https://officialrajdeepsingh.dev"
    },
    "keywords": [
        "ghost",
        "theme",
        "blog",
        "light weight",
        "ghost-theme"
    ],
    "screenshots": {
        "desktop": [
            "assets/dark.png",
            "assets/light.png"
        ],
        "mobile": "assets/mobile.png"
    },
    "config": {
        "posts_per_page": 10,
        "card_assets": true,
        "image_sizes": {},
        "custom": {
            "linkedin_url": {
                "type": "text",
                "default": "None"
            },
            "github_url": {
                "type": "text",
                "default": "None"
            },
            "instagram_url": {
                "type": "text",
                "default": "None"
            },
            "copyright": {
                "type": "text",
                "default": "Copy right by Rajdeep Singh"
            },
            "copyright_url": {
                "type": "text",
                "default": "https://officialrajdeepsingh.dev/pages/terms-and-conditions/"
            },
            "adsense_enable": {
                "type": "select",
                "options": [
                    "Disable",
                    "Enable"
                ],
                "default": "Disable"
            }
        }
        },
    "devDependencies": {
        "@tailwindcss/typography": "^0.5.8",
        "autoprefixer": "^10.4.13",
        "cssnano": "^5.0.17",
        "gscan": "^4.22.0",
        "gulp": "4.0.2",
        "gulp-autoprefixer": "^8.0.0",
        "gulp-concat": "^2.6.1",
        "gulp-cssnano": "^2.1.3",
        "gulp-livereload": "4.0.2",
        "gulp-sourcemaps": "^3.0.0",
        "gulp-uglify": "^3.0.2",
        "postcss": "^8.4.20",
        "tailwindcss": "^3.2.4"
    }
}

You can learn more about card_assets and config for the theme. The config section helps add configuration for Ghost. You can also add more custom configuration for Ghost and enable and disable it with the Ghost UI.

To check all configurations, go to Ghost > Settings > Design > and click Site-wide. There you can check all configuration lists provided by the theme developer.

custom config enable and disable in ghost cms

How to Use Theme Helpers

The Ghost team provide lots of helpful functions to add additional functionality to the Ghost theme with handlebars. Some of the functionality by default comes with handlebars and other functionality is built by the Ghost team and maintained by the community.

The Ghost team uses handlebars to build the entire Ghost CMS and theme. Basically, handlebars.js is a template language that helps you build both static and dynamic websites.

There are lots of Ghost helpers like foreach, get, if, is, match, @config, comments, navigation, post, total_members, total_paid_members, block, asset, ghost_head, ghost_foot, pagination, partials, body_class, block, search and many more.

You can read about all of the helpers on the official docs. You can also copy-paste some of the code so you do not need to remember.

What is the Partials Folder?

The partials folder is like a component folder where you define all components for your theme. Basically, components are reusable code that you can reuse as often as you need. In the theme structure, we call these partials. All the partials are created with handlebars.js.

partials for ghost theme

I create more than 24 partials for my Ghost theme and you can easily reuse them across websites. You can use partials with the following syntax: {{> your-partials-file-name}}.

How to Create a Default Page

First, we need to built a default.hbs file. The default.hbs file helps us build a layout for the website. Here's the code:

<!DOCTYPE html>

<html class="dark scroll-smooth overflow-x-hidden" lang="{{@site.locale}}">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {{!-- link production ready css file  --}}
    <link rel="stylesheet" href="{{asset 'build/css/build.css'}}" />
   {{!-- ghost header --}}
      {{ghost_head}}

</head>


<body class="{{body_class}} bg-white dark:bg-slate-800 dark:text-white antialiased scroll-smooth ">

  {{!-- partials/header --}}
    {{> header}}

    <main class="mt-6 flex flex-col">

{{!-- Render other pages  --}}
        {{{body}}}

    </main>
{{!-- partials/footer --}}
    {{> footer}}
    {{> banner}}

{{!-- ghost header --}}
    {{ghost_foot}}

    <script src="{{asset 'build/js/main.js'}}"></script>

</body>

</html>

Let's see what's going on here:

1. {{meta_title}} provides the title from the website.
2. The @site is a global variable and you can access a title with {{@site.title}}.
3. Include a Ghost {{ghost_head}} in the head tag.
4. Include a Ghost {{ghost_foot}} in the footer tag.
5. Inserted all other templates with the {{{body}}} tag in index.hbs, post.hbs, and so on.
6. All other templates get inserted in index.hbs, post.hbs, and so on.
7. Include dynamic CSS classes with {{body_class}} in the <body> tag
8. Add footer partials in the default {{> footer}} file
9. Add header partials in default {{> header}} file
10. Include assets from the {{asset "build/tailwind.css"}} folder.

How to Create an Index Page

Create index.hbs in the Ghost theme

The index page is the main page of the website. You can create a similar index page with the following code:

{{!--  Add default.hbs layout file --}}
{{!< default}} 

{{!-- loop all the posts and show on home page --}}

{{#foreach posts}} 

{{!--  check condition defined in config section in package.json and add adsense code after every third post --}}
    {{#has number="nth:3" }} 
        {{#match @custom.adsense_enable "Enable" }} 
            {{> ads}}
        {{/match}}
    {{/has}}

    {{!-- partials/postCard.hbs --}}
    {{> postCard }}

    {{/foreach}}

    {{!-- Add pagination --}}
    {{pagination}}

{{!--  check condition defined in config section in package.json and add adsense --}}
    {{#match @custom.adsense_enable "Enable"}}
        {{> ads}}
    {{/match}}

{{!-- newsletter partials --}}
    {{> newsletter}}

You can access all posts with a for each loop and pass them to the partials with the {{> postCard}} template. The @custom.adsense_enable is a custom config written in the package.json file and used in the theme to check that the website owner has enabled AdSense on-site or not. The custom config enables you to go to Ghost > Settings > Design > and to click on Site-wide and enable Adsense.

How to Create a Posts Page

Create post.hbs in the Ghost theme

The posts page is where readers will read your articles on your site. You can create a posts page with the following code.

{{!< default}}

{{#post}}


{{!-- Pass reading_time time to authors partials with block , learn more about about block https://ghost.org/docs/themes/helpers/block/ --}}
{{#contentFor "fastestReadingTime"}}

 <p class="text-slate-600 dark:text-slate-400 text-xs xs:text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm 2xl:text-sm ">
    {{reading_time}}
 </p>

{{/contentFor}}

{{#match @custom.adsense_enable "Enable"}}

    {{> ads}}

{{/match}}

<article class="{{post_class}} w-6/6 p-2">

    <!-- Heading section -->

    <div class="m-auto mb-4 w-6/6 xs:w-5/6 sm:w-5/6 md:w-5/6 lg:w-5/6 xl:w-5/6 2xl:w-5/6">
        <h1 class="mt-8 text-3xl xs:text-4xl sm:text-5xl md:text-5xl xl:text-5xl 2xl:text-5xl">
             {{title}} 
        </h1>
        <p class="text-slate-600 dark:text-slate-500 mt-2 text-1xl">
            {{excerpt}}
        </p>
    </div>

    <!--  Author card partials/authors -->
    {{> authors}}



    <!-- article thumbnail with partials/authors -->
    {{> featureImage}}


    <!-- article body -->
    <div class="prose-lg prose-neutral m-auto p-2 my-10 w-10/12">
        {{content}}
    </div>




</article>


    {{!-- partials/comment --}}
    {{> comment}}


{{!-- Add adsense  --}}
{{#match @custom.adsense_enable "Enable"}}

    {{> ads}}

{{/match}}

{{!-- Show related posts --}}
{{#get "posts" filter="authors:{{primary_author.slug}}+id:-{{id}}" limit="3" include="authors"}}

{{!-- if post is available then show it --}}
{{#if posts}}

<h2 class="mt-10 m-auto text-left w-5/6 text-xl xs:text-1xl sm:text-3xl md:text-4xl xl:text-5xl 2xl:text-6xl">
    Read more
</h2>

{{!-- loop all post --}}
{{#foreach posts}}
    {{> postCard }}
{{/foreach}}

{{/if}}

{{/get}}

{{!-- Add adsense  --}}
{{#match @custom.adsense_enable "Enable"}}

    {{> ads}}

{{/match}}

{{/post}}

{{!-- newsletter partials --}}
{{> newsletter}}

The fastestReadingTime block is to pass the reading time to the author partials. The @custom.adsense_enable is a custom config written in the package.json file and used in the theme to check that the website owner has enabled AdSense on-site or not. The custom config enables you to go to Ghost > Settings > Design > and to click to Site-wide and enable Adsense.

How to Create Informational Pages

Create page.hbs in the ghost theme

The page.hbs file helps you create informational pages for your website. For example, you can create an about, contact, privacy policy, or disclaimer page on your site.

{{!< default}} 

{{#post}} 

    {{!--Pass reading_time time to authors partials with block , learn more about about block https://ghost.org/docs/themes/helpers/block/     --}}
    {{#contentFor "fastestReadingTime"}}

    <p class="text-grey-600 text-xs xs:text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm 2xl:text-sm ">
        {{reading_time}}
    </p>
    {{/contentFor}}

{{!-- Add adsense base of if enable on theme  --}}
    {{#match @custom.adsense_enable "Disable"}}

        {{> ads}}

    {{/match}}

    <article class="{{post_class}}  w-6/6 p-2">

        <!-- Heading section -->
        <div class=" m-auto mb-16 w-6/6 xs:w-5/6 sm:w-5/6 md:w-5/6 lg:w-5/6 xl:w-5/6 2xl:w-5/6">
            <h1 class="text-gray-800 mt-8 text-3xl xs:text-4xl sm:text-4xl md:text-5xl xl:text-6xl 2xl:text-8xl">
                {{title}}
            </h1>
            <p class="text-gray-600 text-xl xs:text-xl sm:text-xl md:text-1xl xl:text-2xl 2xl:text-2xl">
                {{excerpt}}
            </p>
        </div>

        <!--  partials/authors -->
        {{> authors}}


        {{!--  partials/featureImage  --}}
        {{> featureImage}}



        <!-- article body -->
        <div class=" prose-xl prose-neutral m-auto p-2 my-10 w-10/12">
            {{content}}
        </div>



    </article>


    {{!-- Add adsense  --}}
    {{#match @custom.adsense_enable "Disable"}}

        {{> ads}}

    {{/match}}

    {{/post}}

The fastestReadingTime block is to pass the reading time to the author partials. The @custom.adsense_enable is a custom config written in the package.json file and used in the theme to check that the website owner has enabled AdSense on-site or not. The custom config enables you to go to Ghost > Settings > Design > and to click to Site-wide and enable Adsense.

How to Create an Author Page

Create author.hbs in the ghost theme

Author pages let you describe the author. You can show the author's name, bio, and related articles.

{{!< default}}

{{#author}}

{{!--  Author Section pass with block learn more about about block https://ghost.org/docs/themes/helpers/block/ --}}
   {{#contentFor "authorName"}}
      {{name}}
    {{/contentFor}}

<div class="container mt-20 mb-16 flex flex-col justify-between mx-auto">

    <div class="flex flex-col mt-6 w-6/6 xs:w-5/6 sm:w-5/6  md:w-3/6 lg:w-3/6 xl:w-3/6 2xl:w-3/6 xs:mt-6 sm:mt-6 md:mt-6 lg:mt-0 xl:mt-0 2xl:mt-0 ">

        <h1 class="text-3xl mt-5 xs:text-3xl sm:text-3xl md:text-4xl xl:text-5xl 2xl:text-6xl"> {{name}} </h1>

        {{#if bio}}
            <p class="mt-0 xs:mt-0 sm:mt-0 md:mt-1 lg:mt-3 xl:mt-3 2xl:mt-3 text-md">
                {{bio}}
            </p>
        {{/if}}

        <ul class="flex flex-row my-3">

            <li class="text-md">{{location}}</li>

               {{#if facebook}}

                    <li class="mx-3 text-sm flex items-center">
                        <a target="_blank" href="https://facebook.com/{{facebook}}" >

                        {{!-- Pass partials/Icons/facebook --}}
                            {{> Icons/facebook}}

                        </a>
                    </li>

                {{/if}}
                {{#if twitter}} 
                    <li class="mx-3 text-sm flex items-center">
                        <a target="_blank" href="https://twitter.com/{{twitter}}" >

                        {{!-- Pass partials/Icons/twitter --}}
                            {{> Icons/twitter}}

                        </a>
                    </li>
                {{/if}}
                {{#if website}} 
                    <li class="mx-3 text-sm flex items-center">
                        <a target="_blank" href="{{website}}" >

                            {{!-- Pass partials/Icons/website --}}
                            {{> Icons/website}}

                        </a>
                    </li>
                {{/if}}
        </ul>
    </div>
</div>


{{!--  get posts related to author base on author Id --}}
    {{#get "posts" limit="all" filter="authors:{{slug}}+id:-{{id}}" order="published_at desc"   }}

        {{#if posts}}
                {{#foreach posts}}
                    {{> authorCard}}
                {{/foreach}}
        {{/if}}

    {{/get}}

{{/author}}

How to Create a Tags Page

Create tag.hbs in the ghost theme

You can use the tag.hbs file to show articles related to the tag used.

{{!< default}}


{{#tag}}

<div class="container m-auto mt-32  mb-16  w-5/6 xs:w-5/6 sm:w-5/6 md:w-5/6 lg:w-5/6 xl:w-5/6 2xl:w-5/6">

    <h1 class=" text-gray-800 text-4xl xs:text-5xl sm:text-6xl md:text-7xl xl:text-8xl 2xl:text-9xl">{{name}}</h1>

    {{#if description}}
        <p class=" text-gray-600 text-xl xs:text-xl sm:text-xl md:text-1xl xl:text-2xl 2xl:text-2xl">
            {{description}}       
        </p>
    {{/if}}


</div>

{{!--  get posts related to tag base on  tag slug --}}

    {{#get "posts" include="authors,tags" limit="3" filter="tag:{{slug}}" as |related|}}

   {{!-- loop posts base on article --}}
        {{#foreach related}}

    {{!--  check condition define in config section in package.json and add adsense code after every third post --}}
            {{#has number="nth:3"  }}
                {{#match @custom.adsense_enable "Enable"}}
                    {{> ads}}
                {{/match}}
            {{/has}}

        {{!-- partials/postCard.hbs --}}
            {{> postCard }}

        {{/foreach}}

    {{/get}}

{{/tag}}

How to Create an Error Page

Create error.hbs in the ghost theme

You use the error.hbs file to show when any errors occur on the website. Error pages help your website not break in production. The most common error is a 404 (not found) error.

{{!< default}} 
<div class="flex flex-col m-auto p-10 w-5/6 xs:w-5/6 sm:w-5/6 md:w-5/6 lg:w-5/6 xl:w-5/6 2xl:w-5/6">
    <h1 style="font-size: 10.8rem;" class="text-black text-center">
        {{statusCode}}
    </h1>

    <p class="text-4xl -m-6 text-center">
        {{message}}
    </p>

    <a href="/" class="text-center w-32 m-auto my-20 p-3 bg-black text-white items-center rounded-full">
        Home
    </a>
</div>

How to Enable Comments

enable comments in the ghost theme

Ghost 5 officially supports the commenting system (it's built-in) and you can just enable comments on the theme by copying and pasting the code – you never need any configuration. Ghost itself handles all the configurations. Here's the code:

<div class="m-auto my-8 w-10/12">
    <p class="text-right text-xs xs:text-xs sm:text-xs md:text-sm lg:text-sm xl:text-sm 2xl:text-sm ">
        Before comment read our <a style='text-decoration: underline' href="https://officialrajdeepsingh.dev/terms-and-conditions/">term and condition </a>
    </p>
    <div class="mt-5 mb-5 p-4">

   {{!--  Enable comment on theme --}}
       {{comments}}
    </div>
</div>

How to Set Up Search

enable the search bar in the ghost theme

Ghost 5 comes with the official support of search functionality. You do not need any other configuration. Just paste the following code into your theme and the search functionally will start working on your site.

{{!-- partials/Icons/search --}}
<button class="gh-search" data-ghost-search>{{> Icons/search}}</button>

Conclusion

Building a theme with Ghost is a relatively straightforward process compared to WordPress. The Ghost team has created well-defined documentation that you can easily follow as a beginner with examples.

They also provide many ready-made components, like search functionality, amp page, comments, and so on.

You can create your Ghost theme by copy-pasting the code. For beginner developers, it might seem a bit complicated, but you'll get the hang of it with some time and work.

The Ghost team has created a well-defined folder structure for theme development. It is the easiest way to manage the theme development process. You can also use npm packages to enhance the development process and add more functionality to the theme. In my theme, I use tailwind CSS and the Gulp package to speed up the development process.

And you might wonder why so many people use them. Well, it's because they're easy to use, cost-effective, and highly efficient.

With WordPress, Shopify, and Ghost, you can create a website from scratch in a matter of minutes.

Tailored to your needs, these powerful website builders can help you achieve anything from building an e-commerce website to starting your own blog or showcasing your portfolio.

It's no wonder why so many businesses choose these platforms. But which one should you choose?

We can't simply say that one is better than the other, because there's no single solution that will work in every situation.

So in this article, we'll cover the three platforms and look at their strengths and weaknesses so that you can figure out what will work best for your particular situation.

If you Want to Build a Blog From Scratch – Use Ghost

If you are a blogger who is looking for an open-source platform, Ghost might be the perfect choice for you.

The fact that it’s open-source enables you to alter the code of the platform, customize it, and make it more suitable to your writing needs.

And even if you’re not a coder, you can get help from other users who are willing to contribute to the community by fixing bugs or adding new features.

Tutorials on how to install Ghost on your own web server are available online. You can also choose to go with a hosted plan, which allows you to use themes created by other users instead of relying on the default theme.

Ghost is a platform that is based on Node.js, and it runs using Node.js servers. It comes with a rich plugin system, allowing you to customize your blog to suit your own needs.

Ghost lets you to use Markdown instead of HTML for writing. This makes it easy for you to write directly in the browser window.

If you don’t know about Markdown, it is a lightweight markup language that allows you to write in rich text but with simpler code, as opposed to HTML.

In fact, one of the benefits of Ghost over other platforms is that your posts are written in Markdown rather than HTML or text files, which results in much cleaner code.

You Can Use Ghost as a Headless CMS

Ghost has a flexible architecture, which means it can be used as a headless CMS. In fact, it's one of the most popular headless content management systems in the JAMStack.

A headless CMS allows you to build a front-end website or application, such as a mobile app, with an API that calls the CMS for its data. You can deploy the API and your website or app to separate servers or environments without having to change anything within your content.

Since the API delivers data from the CMS, you will have full control over that data, including permissions, tags, and categories. If you need to make changes to your content, you will only have to make those changes on one end rather than both.

Headless CMSs are often used for building websites and applications with JavaScript frameworks such as AngularJS and React.js​. However, if you need to render a dynamic site with multiple pages using a single API call, this type of CMS can be beneficial as well.

To use a headless CMS, you will need to learn how it works and how to utilize it through its API. This may require additional development resources, depending on your skill level.

This approach is gaining popularity among startups and agencies who want more control over the display of content while still retaining the ability to make updates through a central interface.

Advantages of Using Ghost

Ghost is a free, easy-to-use CMS that doesn’t require any kind of coding skills.

Along with simplicity, Ghost CMS comes with lots of out-of-the-box features which make it really appealing to bloggers and small businesses.

You can add multiple authors, set up collaborative writing, track analytics, create polls, customer support forums, manage templates, and much more using drag and drop features.

Things get interesting as you start using third-party apps on Ghost. There are numerous integrations available for installing apps like Google Analytics and Disqus comments.

Some other pros include:

• It has a clean, minimalistic design. If you want your blog to be beautiful, then Ghost CMS is great for that.

• Complete tools. You get all the tools that are required in creating a blog, starting from the installation to setting up the theme with the drag and drop features.

• Customizable themes. The themes can be customized using the built-in theme editor that makes it really easy for anyone to modify them as per their needs.

• Ghost community. If you’re stuck, you can find help from other Ghost users by going over their forums and asking questions.

If You Want to Take Your Website to the Next Level – Use WordPress

You can use WordPress as a simple blogging platform, but it is also a fully-featured content management system (CMS). It allows you to build custom websites and blogs if you want to take your business to the next level.

Because of its popularity, there is an active support community and lots of free training materials.

Tutorials for the basic functionality and more advanced features are widely available online.

WordPress is free, but if you need help installing it or customizing it for your needs, you can purchase web hosting from a reputable company. Hosting costs vary depending on the type of hosting service you choose.

You can install WordPress yourself or pay someone to do it for you. The WordPress website provides instructions on how to install the software on different server platforms.

Once installed on your server, WordPress will allow you to create your own blog page. You have complete control over the look and feel of your site through the use of themes, which are pre-built designs for the layout of your pages.

Themes are available for purchase or free download from the WordPress website. You can also design your own custom theme if you're up to the challenge.

You might want a more complicated site than what is provided by the basic WordPress installation. In that case, you can hire a designer to build you a customized theme or using an existing theme as a framework and add your own custom features through plugins. Plugins extend the features of themes with special design elements and programming functions.

Advantages of using WordPress

WordPress is by far the most customizable option in this list. It features the most comprehensive library of themes and plugins, allows you to edit the source code quite easily, and even write your own custom functionalities.

You can think of WordPress as the CMS that falls between Ghost and Shopify, as it allows you to run an eCommerce store and a blog at the same time by simply installing a compatible theme.

WordPress lets you take your blog to the next level and scale your eCommerce store as your business grows.

The downside is that sooner or later you will need a developer’s help. This is because the more plugins you install, the slower your website will get, and users hate slow websites (not to mention search engines).

Some other pros include:

• Extremely cheap to get started with. You can get a WordPress website up and running for free, and basic hosting plans start as low as $18.96 per year.

• Ability to assign user roles. At some point during your business growth cycle, you might need to bring in extra people to help you create, edit and publish content. WordPress comes with built-in user roles which will make your life a whole lot easier.

• Best marketing plugins on the market. You can install one of the many SEO plugins available in the plugin directory. Some examples include Yoast or Rank Math. These plugins help you optimize your content (like articles, pages, and even product pages) and increase your chances of outranking your competitors.

• A vast array of integrations. Chances are you will be using 3rd party SaaS products like Mailchimp or ActiveCampaign. Regardless of the service, you will find it extremely easy to integrate them with your website as almost all have created a WordPress plugin.

• The biggest online library of resources. The WordPress community is by far the largest which makes it easy to find answers to all your questions regarding your installation. There are tens of thousands of websites and forums focused solely on WordPress websites featuring tons of information.

If You Want the Fastest Way to Start an eCommerce Business – Use Shopify

Shopify started in 2006 as an online store for snowboarding equipment. Back then, the CMS ecosystem was lacking a robust and easy-to-use solution, so the Shopify creators decided to code their own.

Needless to say, this was a hit. In the years that followed more and more stores have started to use the Shopify CMS. As of May 2021, more than 1.7 million businesses from some 175 countries use Shopify to run their businesses.

By far the simplest and fastest way to start an eCommerce business, Shopify is mainly used by nontechnical people that want to bring their brick and mortar stores online. In no more than a few minutes you can have your own website up and running and start accepting online payments.

But Shopify is also used by some of the biggest online stores on the Internet, which makes it a great option if you want to scale your business to the next level, and have the funds to do so.

Some of Shopify’s advantages:

• Extremely easy to get started with. The CMS was built with ease of use in mind. Anyone can get a store up and running in no time. You don’t have to know how to code or even how to connect a domain to your website as Shopify does all that for you.

• Compatible with most major third-party services. Shopify connects out of the box with the biggest third-party services, like Klaviyo for email marketing or Facebook Ads for paid advertising.

• Plenty of apps in the app store. If you feel that your store needs additional functionality, like bundle discounts, for example, you will be happy to hear that there are tons of apps that can help you achieve this. Just be careful and look at their cost as they can go up rather quickly.

Some of Shopify’s disadvantages:

• Can get pretty expensive. Shopify is extremely easy to start with, but that comes with a cost. The cheapest plan (Basic) starts at $29 per month, while the most expensive one (Advanced) reaches $299 per month. The main difference is the commission applied by Shopify on payments.

• High payment fees. You have to take into account that Shopify charges up to a 2% fee on your transactions (on the Basic plan). This commission decreases with the plan to a minimum of 0.5% (on the Advance plan). In comparison, WooCommerce doesn’t charge you a percentage of your sales.

• Shopify developers are expensive. If you want to customize your store beyond basic functionalities you will need the help of a developer, and they are not cheap. However, there are a multitude of apps available that can help you achieve your goals.

• Most Shopify Apps have a monthly cost. You can find free apps in the app store, but most of them have a monthly cost (compared to a fixed one-time fee charged by the vast majority of WordPress plugins).

• The blog functionality isn't great. Shopify is an eCommerce-centric platform so there’s no wonder that they haven’t spent too much time optimizing their blog functionality. Big stores choose to host their blogs on WordPress while keeping their storefront on Shopify.

In conclusion, you can use Ghost to start your blog almost instantly, or Shopify to configure a fast and secure online store. And, if you want to get the best out of both worlds, you might want to go with WordPress.

The ultimate WordPress guide is a free resource that will help you understand the basics and help you launch your new website in no time, so be sure to give it a read before you make the big decision of choosing a specific platform.

Many people and businesses choose to create their websites with WordPress because of its versatility, speed, and ease of use.

WordPress is also Open Source, which means that anyone can use and edit the code for free, forever. All you need to get started is a domain and hosting provider, which brings the cost of creating a website lower than a coffee and bagel combo.

WordPress runs on PHP and MySQL, but you don’t need to be a developer to get started. Because it’s Open Source, a large number of organizations have built plugins on top of the basic platform which makes it easy for anyone to design a website, create a forum, or even set up an online store, all without writing a single line of code.

Most plugins are free to use when you get started, with the costs increasing based on usage or the extra features you need. Later in the article, I will share 3 of the most popular WordPress plugins that will help you create a website just the way you want.

Popular Websites Created On Top of WordPress

You might be thinking that WordPress is used only by individuals and small businesses, but this is far from the truth.

Some of the biggest news publications in the world chosen this CMS and blogging platform as the base for their websites. Websites like TechCrunch, BBC America, and The New York Times all use WordPress as their content management system.

Even the White House’s website is built on top of WordPress.

I do want to point out that the previously presented websites are using the version of the CMS as presented on wordpress.org and not the wordpress.com one.

What is the difference between wordpress.org and wordpress.com?

Wordpress.org allows you to download the WordPress source code so you can install it on your own server. Wordpress.com, on the other hand, allows you to instantly create a website that is hosted on their platform.

How to Get Started with WordPress

I am going to cover 3 different ways to get your website up and running using WordPress.

The cheapest way is to grab a shared hosting plan and setup your website yourself. This requires a bit of technical knowledge or Google search skills.

The easiest but a bit more expensive way to get started is to go for a dedicated WordPress hosting plan. In this case, all you will need to do is buy a domain and link it to the website.

The third way to get started is to simply go with a wordpress.com hosted website. This is by far the most expensive option on this list.

The cheapest way to get started with WordPress

This option starts at $2.32 per month and requires you to use cPanel and install the source code yourself. Even though it sounds complicated and technical, you just need to navigate something called cPanel and click a few buttons.

If you go this route you will need to buy hosting and a domain (otherwise your URL will look something like this https://100.100.8.8).

In recent years, the price of both hosting and domains has plummeted. Take Namecheap for example – they sell .com domains that start at $8.99 per year and can also host your website for $18.96 per year.

This brings the cost of running a website to $27.95 for your first year or just $2.32 per month.

The easiest way to host your own WordPress website

This option costs just a few cents more than the previous option (starts at $2.65 per month), but it’s by far the easiest way to host your own website. It’s important to mention that the price also covers the domain, not only the hosting.

This example takes into account the EasyWP Managed WordPress Hosting cheapest plan.

All you have to do is sign up for an account, complete the 5 step process, and your website is live. That’s it.

The Starter plan limits your website to 50,000 visitors per month and gives you 10 GB of storage space (for images, videos, and so on). This is enough to get you started, and remember – you can always upgrade it if your website starts to get traction.

The fastest way to start a website without worrying about hosting

If you don’t want to worry about hosting at all, this option is for you. I don’t recommend going this route as your costs will start rising rapidly, especially if you want to get the most out of the WordPress functionality.

For example, you will be forced to pay $25 per month just to be able to install a plugin. That’s close to 7 times more expensive than the previous option, and it doesn’t even cover the domain!

If you still want to use wordpress.com, all you have to do is to sign up for an account (either create an account with your email or use your Google or Apple accounts), pick a domain (they offer a free one as well), and you are all set.

WordPress Dashboard

Regardless of how you create your new WordPress website, once you log in you will see the same dashboard. Something like this:

The website in the above screenshot has a few plugins installed, like Elementor, Autoptimize, and Yoast SEO, which I will cover in the next section.

WordPress Plugins to Install on Your Site

WordPress powers more than 40% of all websites because of its versatility. The base functionality is great, but the ability to install plugins takes it to the next level.

You can install:

• Website builder plugins (Elementor, WP Bakery, Beaver Builder, and more)

• Ecommerce plugins (WooCommerce, Easy Digital Downloads, WP Easy Cart, and so on)

• Speed optimization plugins (a3 Lazy Load, WP Rocket, W3 Total Cache, and so on)

• SEO plugins (Yoast, Redirection, Rank Math, and more)

There are over 54,000 free plugins you can install on your website, not to mention the paid ones.

With such a large selection, it might be a bit overwhelming for you to choose the ones that you really need. So I compiled this list of 3 of the most important plugins for the ultimate WordPress setup.

Bear in mind that each additional plugin you install will make your website slower, so don’t overdo it.

Elementor Plugin – Website Builder

WordPress comes with a built-in website builder called Gutenberg, but this can hardly help you get the website you like.

This is why Elementor is a must-have plugin for someone that wants an eye-catching website without writing a single line of code.

In order to install Elementor (or any other plugin), you have to navigate to your WordPress dashboard and hover over the Plugins item. Then just click on the “Add New” option:

Type in “elementor” in the search box and install the first one. Wait for a bit and click on “Activate”. This way, you will tell WordPress that you want to start using Elementor as soon as possible.

A new menu item will appear once you successfully install Elementor. To create your first page you will have to click on the “Templates” menu item (the one below “Elementor”) then just click “Add New”:

With Elementor you can design anything from single pages to how your blog articles will look.

It’s one of the easiest drag-and-drop website builders plugins, plus they have a great resource library to get you started in no time.

Autoptimize Plugin - Speed Optimization

There are tens if not hundreds of speed optimization plugins in the marketplace, and installing all of them will not make your website faster (on the contrary, it will slow it down).

Moreover, depending on what option you have chosen to host your website, some plugins can completely destroy your website.

With that in mind, you should be extra cautious about what speed optimization plugins you decide to install. Make sure to always check with your hosting provider before installing any plugin.

However, one plugin that will work with absolutely any type of hosting and will surely boost your website’s speed is Autoptimize.

This plugin does it all in terms of speed:

• Minifies CSS and JS (makes the code of your website smaller)

• Lazy loads images (they will get downloaded by the browser only when the user scrolls enough to see them)

• Caches your CSS and JS (they will be loaded way faster by the browser)

Autoptimize does all this automatically. You just have to install and activate it and that’s basically it.

When your website starts to grow you can use Autoptimize’s API to really take full advantage of all features, but if you are just starting out this plugin will make your website faster in a breeze.

Yoast Plugin – SEO optimization

Yoast is one of the most downloaded WordPress plugins. It helps you write better content that is easy to read by people and search engines alike.

Yoast can help your website rank higher on search engines by combining a suite of different functionalities:

• It can generate a sitemap for your website, making it easy for Google to understand your site structure

• Automated technical SEO improvements, like canonical URLs and meta tags

• An in-depth Schema.org integration that will increase your chance of getting rich results

• Real-time readability and SEO analysis to help you write better blog posts and copy

Yoast is very easy to set up. All you have to do is install and activate it and go through the onboarding process. Just add your website name, description, and type (blog, e-commerce, and so on) and Yoast will automatically start working for you.

Elementor, Autoptimize, and Yoast are 3 essential plugins for WordPress. Each one is packed with all the functionalities you will ever need to design, optimize and rank your website.

Conclusion

Whether you are a complete beginner or a pro at building websites, WordPress is undoubtedly one of the best choices when it comes to CMS platforms. It’s not only easy to set up but extremely cheap and versatile.

So go ahead and start building your new project, be it an online store, personal blog, or a resume website. With WordPress, you can do it all, in a single day.

CMSs are pretty hard to ignore because they're everywhere on the internet. WordPress, for example, powers nearly 40% of the internet today.

In this article, we'll cover what CMSs are and why you should care about them. I'll also introduce you to a new type of CMS that seems to be everywhere at the moment – the Headless CMS. And we'll do all this with a story!

Life has a funny way of making you try things. And after years of ignoring CMSs as a technology, in mid 2020 I got a job at Strapi, a headless CMS tool. Since then, I have developed a pretty good understanding of what these things do – so let's get into it.

What is a CMS?

A Content Management System (CMS) is a tool that helps users create, manage, and modify digital content.

In this article, however, I won’t get into the nitty-gritty of it. Instead, if you want to learn more you can have a look at an article I wrote that goes deeper into various types of CMSs.

What is a Headless CMS?

A headless CMS has a back end where content is prepared – and that's it. The content and its data are only accessible via calls made to the API, whether it's REST or GraphQL.

I like to use this diagram to illustrate how Headless works, so hopefully it paints a clearer picture.

Monolithic vs decoupled vs headless architectures

Besides serving content to multiple platforms, there are a couple other reasons why you would want to use a Headless CMS.

You don’t want to give up developer flexibility

Adopting a Headless architecture by default means that you have the flexibility of selecting a front end tool of your choosing. And for many developers, this is a critical advantage.

You need a secure content solution

Decoupling the front end from the back end makes targeted attacks much harder. This is something some traditional CMSs still struggle with today.

You want to future proof your tech stack

Going headless also means that you’re less dependent on a single solution for a front end. Should you need to upgrade to a more modern front end or add a new front end altogether, headless makes this much easier.

You need to create custom and personalized experiences

This is becoming a really important benefit for headless CMSs for many organizations.

With headless you have the opportunity to tailor different experiences for different platforms all from a single content source.

How I got into Headless CMSs

So I really like GraphQL, and that’s how I got started with Strapi. Working for a CMS was like diving head first into this ecosystem. I thought I understood Headless CMSs because to me they were “data, API, frontend” and that’s how I thought about it.

Well, we use these things to build our front ends, but we often overlook the content management side of things when we think about building a front end like that. And it wasn't until I started working with Strapi that I recognized my assumption.

“Content Management” sounds kinda boring, right? And CMS? “Ewww why would I want to use such a tool?” I know! Me too, but hear me out. CMSs actually pretty useful. So let’s talk about how and why a CMS might help you out.

Why Do You Need a Headless CMS?

For starters, there’s no downplaying the role of content in today's world. Content is everywhere and manifests itself in so many forms through text, audio, video, and more.

For a long time, computers and browsers were the main tool for content consumption. We read blogs, watched YouTube videos, and listened to podcasts on our personal computers.

Gradually our computers got smaller and less obvious. Content in its many shapes and forms started to appear all around us. It showed itself in mobile phones, on our smart televisions, in our cars, in our virtual assistants and wearable devices.

The way people consumed content changed, and so did the way we had to build content-consuming experiences.

So How Does Headless CMS Help?

Traditionally, CMSs were monoliths with the front end and back end tightly coupled. The content you added in the CMS back end only showed up on the front end it was coupled to - think WordPress and Drupal.

This proved inefficient as developers needed a better way to build and adapt to this new consumer behavior.

The solution? Rip the head off a traditional CMS and make it possible for your back end to deliver content to multiple platforms. This was how Headless was born.

Why You Might Not Need a Headless CMS

Headless isn't necessarily the right solution for all use cases, though. It might not be for you if...

You have a small team

Adopting and building a headless architecture takes quite a bit of effort. To reap all its benefits you would have to have a dedicated developer team to build your front end as well as people on your team to work on adding content to your CMS.

You rely heavily on a simple live preview implementation

Live previews on Headless CMSs aren’t the most intuitive to set up (as of writing this) and take some effort from developers to implement.

You only require simple publishing capabilities

As we just learned, headless takes a reasonable amount of effort to get it working efficiently and effectively.

If you need only simple publishing capabilities without features like internationalization or role-based access control, then it’s best to wait till you need those additional features to use a Headless CMS.

Use Cases for a Headless CMS

A lot of my early CMS projects centered around corporate sites and personal blogs, which are both solid use cases for headless. But I don’t build sites full time so I don’t ship code often.

Personally I’ve used a CMS to help build a Restaurant Catalog, an Event Website, and an Online Quiz.

There’s folks using headless CMSs to build eCommerce sites, Covid tracking projects, hospital management systems, inventory management applications, mobile catalogs, VR games, and some people even run email campaigns with them. So many possibilities.

Conclusion

Seeing what people are building with CMSs is very inspiring. And I’ve gained a huge appreciation for CMSs as a technology. What I once thought was a boring tool actually powers so much of the world around me.

There are lots of use cases for Headless CMS these days. And while at the moment there is a huge focus on serving developers (which many CMSs are doing well), we still have a ways to go to make the content editor's experience better.

It’s exciting having a foot in the race, and all I can tell you is that it's going to be an amazing next few years for Headless technology in general.

So hopefully this article helps you jump on the bandwagon and get a better understanding of what the technology can and cannot do.

After all, at the end of the day, the choice is yours!

Resources

• Headless CMS | Jamstack.org

• What is a Headless CMS

• What’s a Headless CMS and Why Should You Care

• CMS Comparison

In this article, we are going to build a blog with Gatsby and Netlify CMS. You will learn how to install Gatsby on your computer and use it to quickly develop a super fast blog site.

You are also going to learn how to add Netlify CMS to your site by creating and configuring files, then connecting the CMS to your site through user authentication.

And finally, you'll learn how to access the CMS admin so that you can write your first blog post.

The complete code for this project can be found here.

Here's a brief introduction to these tools.

What is Gatsby?

Gatsby is a free and open-source framework based on React that helps you build fast websites and web apps. It is also a static site generator like Next.js, Hugo, and Jekyll.

It includes SEO (Search Engine Optimization), accessibility, and performance optimization from the get-go. This means that it will take you less time to build production-ready web apps than if you were building with React alone.

What is Netlify CMS?

Netlify CMS is a CMS (Content Management System) for static site generators. It is built by the same people who made Netlify. It allows you to create and edit content as if it was WordPress, but it's a much simpler and user-friendly interface.

The main benefit of Netlify CMS is you don't have to create markdown files every time you want to write a post. This is useful for content writers who don't want to deal with code, text editors, repositories, and anything to do with tech - they can just focus on writing articles.

Alright, without any further ado, let's start building the blog!

But before we get going, a quick heads up: This guide requires prior knowledge of JavaScript and React. If you are not comfortable with these tools yet, I've linked the resources at the end of the article to help you brush up on those skills.

Even if you're new to those technologies, I tried to make this guide as simple as I was able so you can follow along.

How to set up the environment

Before we can build Gatsby sites, we have to make sure that we have installed all the right software required for the blog.

Install Node.js

Node.js is an environment that can run JavaScript code outside of a web browser.

It is a tool that allows you to write backend server code instead of using other programming languages such as Python, Java, or PHP. Gatsby is built with Node.js and that's why we need to install it on our computer.

To install Node.js, go to the download page and download it based on your operating system.

When you are done following the installation prompts, open the terminal and run node -v to check if it was installed correctly. Currently, the version should be 12.18.4 and above.

Install Git

Git is a free and open-source distributed version control system that helps you manage your coding projects efficiently.

Gatsby starter uses Git to download and install its required files and that's why you need to have Git on your computer.

To install Git, follow the instructions based on your operating system:

• Install Git on Mac OS
• Install Git on Windows
• Install Git on Linux

Install Gatsby CLI

Gatsby CLI (Command Line Interface) is the tool that lets you build Gatsby-powered sites. By running this command, we can install any Gatsby sites and the plugins we want.

To install Gatsby CLI, open the terminal and run this command:

npm install -g gatsby-cli

Once everything is set up successfully then we are ready to build our first Gatsby site.

How to build a Gatsby site

In this guide, we're going to use the default Gatsby starter theme, but you're free to choose any themes on the Gatsby starter library. I personally use the Lekoart theme because the design is minimalist and beautiful, and it has a dark mode.

In the terminal, run this command to install the new Gatsby blog:

gatsby new foodblog https://github.com/gatsbyjs/gatsby-starter-blog

Note for Windows users: If you encounter "Error: Command failed with exit code 1: yarnpkg" while creating Gatsby site, see this page to troubleshoot it. You may have to clean up dependencies of old yarn installations or follow the Gatsby on Windows instructions.

What's does this command line mean exactly? Let me explain.

• new - This is the command line that creates a new Gatsby project
• foodblog - This is the name of the project. You can name it whatever you want here. I named this project foodblog as an example only.
• The URL (https://github.com/gatsbyjs/gatsby-starter-blog) - This URL specified points to a code repository that holds the starter code you want to use. In other words, I picked the theme for the project.

Once the installation is complete, we'll run the cd foodblog command which will take us to the location of our project file.

cd foodblog

Then we'll run gatsby develop that will start running on the local machine. Depending on the specs of your computer, it will take a little while before it is fully started.

gatsby develop

Open a new tab in your browser and go to http://localhost:8000/. You should now see your new Gatsby site!

How a Gatsby starter blog homepage looks

Now that we've created the blog, the next step is to add Netlify CMS to make writing blog posts easier.

How to add Netlify CMS to your site

Adding Netlify CMS to your Gatsby site involves 4 major steps:

• app file structure,
• configuration,
• authentication, and
• accessing the CMS.

Let's tackle each of these stages one at a time.

How to set up the app's file structure

This section deals with the file structure of your project. We are going to create files that will contain all Netlify CMS codes.

When you open your text editor, you will see a lot of files. You can read this article if you are curious about what each of these files does.

├── node_modules
├── src
├── static
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

Do not worry about all these files — we are going to use very few of them here.

What we are looking for is the static folder. This is the folder where it will form the main structure of the Netlify CMS.

If your project does not have Static folder, then create the folder at the root directory of your project.

Inside the static folder, create an admin folder. Inside this folder, create two files index.html and config.yml:

admin
 ├ index.html
 └ config.yml

The first file, index.html, is the entry point to your CMS admin. This is where Netlify CMS lives. You don't need to do styling or anything as it is already done for you with the script tag in the example below:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

The second file, config.yml, is the main core of the Netlify CMS. It's going to be a bit complicated as we are going to write backend code. We'll talk more about it in the configuration section.

How to configure the back end

In this guide, we are using Netlify for hosting and authentication and so the backend configuration process should be relatively straightforward. Add all the code snippets in this section to your admin/config.yml file.

We'll begin by adding the following codes:

backend:
  name: git-gateway
  branch: master

Heads up: This code above works for GitHub and GitLab repositories. If you're using Bitbucket to host your repository, follow these instructions instead.

The code we just wrote specifies your backend protocol and your publication branch (which is branch: master). Git Gateway is an open-source API that acts as a proxy between authenticated users of your site and your site repository. I'll explain more what this does in the authentication section.

Next up, we will write media_folder: "images/uploads". This will allow you to add media files like photos directly to your CMS. Then you won't need to use a text editor to manually add media and all that.

media_folder: "images/uploads"

Make sure you created a folder called images in the admin folder. Inside the images folder, create an uploads folder as this is the place where you'll host your images.

Configure Collections

The collections will define the structure for the different content types on your static site. As every site can be different, how you configure the collection's settings will differ from one site to another.

Let's just say your site has a blog, with the posts stored in content/blog, and files saved in a date-title format, like 2020-09-26-how-to-make-sandwiches-like-a-pro.md. Each post begins with settings in the YAML-formatted front matter in this way:

---
layout: blog
title: "How to make sandwiches like a pro"
date: 2020-09-26 11:59:59
thumbnail: "/images/sandwich.jpg"
---

This is the post body where I write about how to make a sandwich so good that will impress Gordon Ramsay.

With this example above, this is how you will add collections settings to your Netlify CMS config.yml file:

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Body", name: "body", widget: "markdown"}

Let's examine what each of these fields does:

• name: This one is used in routes like /admin/collections/blog
• label: This one is used in the UI (User Interface). When you are in the admin page, you will see a big word "Blog" on the top of the screen. That big word "Blog" is the label.
• folder: This one points to the file path where your blog posts are stored.
• create: This one lets the user (you or whoever has admin access) create new documents (blog posts in this case) in these collections.
• slug: This one is the template for filenames. {{year}}, {{month}}, and {{day}} which are pulled from the post's date field or save date. {{slug}} is a URL-safe version of the post's title. By default it is {{slug}}.

The fields are where you can customize the content editor (the page where you write the blog post). You can add stuff like ratings (1-5), featured images, meta descriptions, and so on.

For instance, in this particular code, we add curly braces {}. Inside them we write label with the value "Publish Date" which will be the label in the editor UI.

The name field is the name of the field in the front matter and we name it "date" since the purpose of this field is to enter the date input.

And lastly, the widget determines how the UI style will look and the type of data we can enter. In this case, we wrote "datetime" which means we can only enter the date and time.

- {label: "Publish Date", name: "date", widget: "datetime"}

You can check the list right here to see what exactly you can add. If you want, you can even create your own widgets, too. For the sake of brevity, we'll try to keep things simple here.

Enable Authentication

At this point, we are nearly done with the installation and configuration of Netlify CMS. Now it's time to connect your Gatsby site to the CMS by enabling authentication.

We'll add some HTML code and then activate some features from Netlify. After that, you are on the way to creating your first blog post.

We are going to need a way to connect a front end interface to the backend so that we can handle authentication. To do that, add this HTML script tag to two files:

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

The first file to add this script tag is the admin/index.html file. Place it between the <head> tags. And the second file to add the tag is the public/index.html file. This one also goes in between the <head> tags.

When a user logs in with the Netlify Identity widget, an access token directs them to the site homepage. In order to complete the login and get back to the CMS, redirect the user back to the /admin/ path.

To do this, add the following code before the closing body tag of the public/index.html file:

<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

With this, we are now done writing the code and it's time to visit Netlify to activate authentication.

Before we move on, you should Git commit your changes and push them to the repository. Plus, you will have to deploy your site live so you can access the features in the Enable Identity and Git Gateway section.

Deploy your site live with Netlify

We are going to use Netlify to deploy our Gatsby site live. The deployment process is pretty straightforward, quick, and most importantly, it comes with a free SSL (Secure Sockets Layer). This means your site is protected (you can tell by looking at the green lock on the browser search).

If you haven't signed up for the platform, you can do it right here. When you've finished signing up, you can begin the deployment process by following these 3 steps.

1. Click the "New site from Git" button to create a new site to be deployed. Choose the Git provider where your site is hosted. My site is hosted on GitHub so that's what I will choose.
2. Choose the repository you want to connect to Netlify. The name of my Gatsby site is "foodblog" but you have to pick your own project name.
3. The last one asks how you would like Netlify to adjust your builds and deploy your site. We are going to leave everything as it is and we will click the "Deploy site" button. This will begin deploying your site to live.

Once the deployment is complete, you can visit your live site by clicking the green link that has been generated for you on the top left of the screen. Example: https://random_characters.netlify.app.

With this, the world can now view your site. You can replace the weird URL with your custom domain by reading this documentation.

How to enable Identity and Git Gateway

Netlify's Identity and Git Gateway services help you manage CMS admin users for your site without needing them to have an account with your Git host (Like GitHub) or commit access on your repository.

To activate these services, head to your site dashboard on Netlify and follow these steps:

1. Go to Settings > Identity, and select Enable Identity service.

In the Overview page of your site, click the "Settings" link.

After clicking "Settings", scroll down the left sidebar and click the "Identity" link.

Click the "Enable Identity" button to activate the Identity feature.

2. Under Registration preferences, select Open or Invite only. Most of the time, you want only invited users to access your CMS. But if you are just experimenting, you can leave it open for convenience.

Under the Identity submenu, click the "Registration" link and you'll be taken to the registration preferences.

3. Scroll down to Services > Git Gateway, and click Enable Git Gateway. This authenticates with your Git host and generates an API access token.

In this case, we're leaving the Roles field blank, which means any logged-in user may access the CMS.

Under the Identity submenu, click the "Services" link.

Click the "Enable Git Gateway" button to activate the Git Gateway feature.

With this, your Gatsby site has been connected with Netlify CMS. All that is left is to access the CMS admin and write blog posts.

How to access the CMS

All right, you are now ready to write your first blog post!

There are two ways to access your CMS admin, depending on what accessing options you chose from the Identity.

If you selected Invite only, you can invite yourself and other users by clicking the Invite user button. Then an email message will be sent with an invitation link to login to your CMS admin. Click the confirmation link and you'll be taken to the login page.

Alternatively, if you selected Open, you can access your site's CMS directly at yoursite.com/admin/. You will be prompted to create a new account. When you submit it, a confirmation link will be sent to your email. Click the confirmation link to complete the signup process and you'll be taken to the CMS page.

Note: If you cannot access your CMS admin after clicking the link from the email, the solution is to copy the link in the browser starting with #confirmation_token=random_characters and paste the link after the hashtag "#", like this: https://yoursite.com/admin/#confirmation_token=random_characters. This should fix the problem.

If everything goes well, you should see your site's admin dashboard:

Netlify CMS admin.

You can create your new post by clicking the "New post" button.

When you're ready to publish your post, you can click the "Publish Now" button to publish it immediately.

When you hit the publish button, the post file is automatically created. Then it will add to the changes with the commit message based on the name of the post along with the date and time of publishing. Finally, it will be pushed to the host repository, and from there your post will be seen live.

You can view the changes by looking at the commit message in your host repository.

After waiting for a few minutes, your new post should be live.

One more thing

The last thing to do is clean up the sample articles. To delete these posts, go to the blog files in your text editor and delete them one by one. Make sure you check your terminal when deleting them so that there will be no issues on your site.

Once all the sample posts are cleared out, commit these changes and push them to the repository.

And now, you are all done! You can now create your new posts from the comfortable CMS dashboard and share your stories to the world.

Summary

In this guide you have learned how to:

• Create a Gatsby blog site
• Added the Netlify CMS to your Gatsby site by creating and configuring files
• Enable user authentication by activating Identity and Git Gateway
• Access your site's CMS admin
• Publish your first post powered by Gatsby and Netlify CMS

By the end of this guide, you should now be able to enjoy writing blog posts with a fast website and simple content editor. And you probably don't have to touch the code unless it needs further customization.

There is still more to cover about Gatsby and Netlify CMS. One of the best ways to learn about them is to go through their documentation.

I hope you found this guide beneficial, and happy posting!

Check out my blog to learn more tips, tricks, and tutorials about web development.

Cover photo by NeONBRAND on Unsplash.

Resources for JavaScript and React

Here are some resources that may help you to learn JavaScript and React:

JavaScript

• Official JavaScript Documentation
• freeCodeCamp
• W3Schools: JavaScript Tutorial
• JavaScript.info

React

• Official React Documentation
• Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL)
• Scrimba: Learn React for free
• Flavio Copes: The React Handbook

WordPress is powerful and versatile and it powers more of the internet's web pages than any other engine.

But it's not a perfect fit for everyone. And perhaps you're looking for something different. So let me help guide you through the confusing world of modern web Content Management.

To do this we'll compare the top Content Management Systems (CMS) built from each of the three dominant programming language families: PHP, Node, and Python.

All the options I’ll explore are open source. Which is fitting, since in many ways, WordPress was a pioneer in open source platforms.

However, some of us are looking for a more modern, faster, more secure CMS. And we still don’t like the closed-source ones like Squarespace and Wix.

What seems to be happening is that people are moving away from CMS platforms built on a single engine, MVC paradigm to a more decoupled system.

For example, does your website's blog really need a full database? And could your eCommerce or payment system use a simpler headless paradigm?

So let's see what's available, arranged by language.

PHP

PHP is a simple, reliable and well maintained language. So it's no surprise that it came to be the most popular backend of the entire web.

Its versatility makes it easy for developers to provide such large arrays of features and plugins for their CMS's. In short, PHP was basically originally invented for the CMS.

A downside to WordPress's popularity is that its plugin marketplace is hard to navigate or, in some cases, maybe it's too expensive.

However, WordPress may not be unique in that sense. Here are some other PHP CMS frameworks:

• Drupal

• Joomla

• Magento

• Grav CMS

The first three all have the same issue as WordPress: a bloated interface or an overcrowded plugin marketplace.

But Grav felt like a breath of fresh air. It's a bit like a simplified WordPress without all the complex bloatware. There isn't even a database, just folders and pages.

It attempts to give you the best of both worlds. Grav has an admin dashboard plugin for non techies to manage everything as they would with WordPress.

At the same time, Grav also delivers the stability and customization of a decoupled system. You don't even need an admin GUI if you don't want it.

Node

Node.js, the newest language to hit the back end market, is innovative and unconventional. Since it's already a popular language for front end web development, it seems like Node is making a play for most popular programming language everywhere.

Node deployments often rely on tech stacks such as NoSQL databases such as MongoDB, NGINX web servers, and Markdown. An advantage of a Node.js-powered CMS is that it tends to integrate well with web apps.

Here are a couple of Node.js based CMS's:

• KeystoneJs: Complex. More of a framework than a CMS.

• Ghost: Simple. Doesn’t do much more than Medium, which is perfect if you want to self host your Medium blog. You can add decoupled eCommerce like Shopify.

• NetlifyCMS: Not a standalone CMS – rather, you add it to a website/webapp as a custom git-based static content manager for your writers.

From a market-share perspective, Ghost seems to be the only new CMS that is positioned to take a bite out of the WordPress monopoly.

Python

Although Python is known as a powerful scripting language, in recent years it has matured to be an all around server-side language. However it still has a much less developed plugin and themes market for its CMSs.

Here are a few popular Python based CMS platforms:

• Django CMS: Requires a bit more code know-how than WordPress

• Mezzanine: Also built on Django. Many features, but you still need to know Python for advanced functionality.

• Storyblok: friendly editor interface and headless api for apps but limited plugins

Python has the advantage of speed in certain situations. And so Python frameworks will potentially scale up much more efficiently than JavaScript. Also this is why they will often run better on inexpensive hardware such as a Raspberry Pi.

These Python-based CMSs might also find their niche when integrating with a domain that is dominated by Python. What areas are we talking about here? Check out this article and find out what Python is used for.

All the same, I doubt Python will ever be a major contender in the CMS market. Mainly because it came very late to the web. The lack of backwards compatibility between versions is an issue as well.

Conclusion

If you are ready to embrace the future of the CMS, here are the keys to making an informed decision.

Consider all the factors that will most likely give you all the security, reliability, and customization you need.

Note: As of July 2022, GraphCMS is now Hygraph.

• What are we going to build?
• Step 1: Creating a new app with Gatsby Starter Leaflet
• Step 2: Creating and managing a list of travel locations with GraphCMS
• Step 3: Querying our GraphCMS location data with Gatsby and GraphQL
• Step 4: Creating a bucket list of destinations and adding them to the map
• What else other features can we add to our app?
• Want to learn more about maps?

What are we going to build?

We’re going to build a mapping app with Gatsby managed by a CMS that will both display markers on a map and show our locations in a simple text-based list for our bucket list locations.

Demo of a Travel Bucket List mapping app

We’ll spin up the app with a Gatsby Starter for Leaflet and then we’ll use GraphCMS to create and manage the list of locations for our map!

Woah, a mapping app?

Yup. If you haven't played with maps before, don't be discouraged! It's not as bad as you probably think. If you'd rather start with mapping basics, you can read more about how mapping works first.

Step 1: Creating a new app with Gatsby Starter Leaflet

We’ll start off with Gatsby Starter Leaflet. This is going to give us a basic React application with our mapping tools already built in.

Creating a new Gatsby app with Gatsby Starter Leaflet

To get started, navigate to where you want to create your new app and run:

gatsby new my-travel-bucket-list https://github.com/colbyfayock/gatsby-starter-leaflet

Note: you can replace my-travel-bucket-list with whatever you want. This will be used to create the new folder for the app.

Once you run that, Gatsby will pull down the Starter and install the dependencies. After it’s complete, navigate to that directory and run the development command:

cd my-travel-bucket-list
yarn develop
# or
npm run develop

Once it’s finished location, your app should be ready to go!

Cleaning our some demo code

Because we’re using a Starter, it has a little bit of demo code. Let’s clean that out to avoid any confusion.

Open up the src/pages/index.js file.

First, remove everything inside of mapEffect except the first line and set up an alias for leafletElement to map:

async function mapEffect({ leafletElement: map } = {}) {
  if ( !map ) return;
}

With that gone, we can remove the markerRef definition at the top of the IndexPage component, remove the ref={markerRef} prop from our <Marker> component, and the useRef import next to React.

Now, we can remove all of the variables that start with popup and time, including:

• timeToZoom
• timeToOpenPopupAfterZoom
• timeToUpdatePopupAfterZoom
• popupContentHello
• popupContentGatsby

Lastly, you can remove all of the following lines:

import L from 'leaflet';
...
import { promiseToFlyTo, getCurrentLocation } from 'lib/map';
...
import gatsby_astronaut from 'assets/images/gatsby-astronaut.jpg';
...
const ZOOM = 10;

Once done, we should be ready to go with a basic app with a map!

New app with Gatsby Starter Leaflet

Follow along with the commit!

Step 2: Creating and managing a list of travel locations with GraphCMS

Creating a GraphCMS account

To get started with GraphCMS, you’ll need an account. I’m not going to walk you through this part, but the good news is they have a generous free tier that makes it easy to sign up for us to use for our demo!

Sign up for GraphCMS

Alternatively, if you already have an account, you can make sure you’re logged in.

Creating a new GraphCMS project

Once logged in, we’ll want to create a new project. We’re going to create one manually, so once at the GraphCMS Dashboard, select Create new project:

Creating a new project in GraphCMS

Here, you can enter whatever you’d like for the Name and Description such as:

• Name: My Travel Bucket List
• Description: The locations that I want to travel to some day!

Below that you’ll see a map where you’ll select a Region. This is where your database data will live, so while it probably doesn’t matter too much for our purposes, you can choose the one that’s closest to you.

Configuring a new project in GraphCMS

After you select your options, go ahead and click Create Project.

Selecting the Personal plan in GraphCMS

Next, you’ll be presented with billing options. Since we’re just creating a demo, under Personal select Continue at which point we’ll be dropped into our new GraphCMS project dashboard.

Creating a new Content Model Schema with GraphCMS

In GraphCMS, a Content Model refers to a specific type of data that has specific properties associated with it. In our case, our Model will be a Destination, which will be defined by a Name and a Location.

First, navigate to the Schema section of GraphCMS in the left sidebar and select Create Model.

Creating a new Schema Model in GraphCMS

Once selected, you’ll see a popup that asks for a bit more information. Here, you can type in “Destination” as the Display Name, which will also fill in most of the other fields. We’ll leave those as is.

Configuring a new Model in GraphCMS

Feel free to add a description if you’d like, but it’s not required. Then select Create model.

Now that we have our Model, we need our properties.

First, select Single line text in the right list of fields and add a Display Name of “Name”. This will also fill out App Id which you can leave as is. Then click Create.

Adding and configuring a new text field in GraphCMS

Next, scroll down in the field options on the right and under Location select Map. Add “Location” as the Display Name, which will set the App Id as “location” which you can leave as is. Then same as before, click Create.

Adding and configuring a new map field in GraphCMS

Now we have a Content Model which we’ll use to create our locations!

Destination content Model in GraphCMS

Creating our locations

Finally, let’s create our locations. Navigate over to Content in the GraphCMS dashboard, make sure you’ve selected Destination under System (should be the only one), and select Create New.

Create new Destination Content in GraphCMS

Now we can start adding all of our locations! First, add the name of your location in the Name field, then you can use the Search box under Location to find that location on the map.

Adding a new Destination Content item in GraphCMS

Once you’re good, hit Save and publish. This will create your first location!

Follow those same steps and create as many locations as you want.

List of Destination Content items in GraphCMS

We’ll use these for our map and bucket list.

Step 3: Querying our GraphCMS location data with Gatsby and GraphQL

Now that we have our locations, let’s use them!

Adding a plugin to Gatsby to query our GraphQL data

First, we need to add a new plugin to our Gatsby project to query our GraphQL data. In your terminal make sure your development server isn’t running and run:

yarn add gatsby-source-graphql
# or
npm install gatsby-source-graphql

Next, open up your gatsby-config.js file in the root of your project and add the following to your plugins:

{
  resolve: 'gatsby-source-graphql',
  options: {
    typeName: 'GCMS',
    fieldName: 'gcms',
    url: '[API ENDPOINT]',
  }
}

This will be what sources our data from GraphCMS, but we need an endpoint.

Finding our API endpoint for GraphCMS

Open back up your browser and head over to your GraphCMS project. After selecting Settings in the left navigation, select API Access.

API Access in GraphCMS

Before we copy our API Endpoint, first we need to update our permissions so we can query our API. Under Public API Permissions, check the box next to Content from stage Published and click Save.

Configuring API permissions in GraphCMS

Next, copy the URL under Endpoints:

Copying API Endpoint in GraphCMS

And paste that in to your gatsby-config.js file that we modified above:

{
  resolve: 'gatsby-source-graphql',
  options: {
    typeName: 'GCMS',
    fieldName: 'gcms',
    url: 'https://[region-id].graphcms.com/v2/[project-id]/master',
  },
},

Note: your URL will have actual values inside of [region-id] and [project-id].

Save your gatsby-config.js file and start your development server backup (yarn develop) and we’re ready to go!

Querying our locations via GraphQL

Finally, let’s actually query our data so that we’ll be able to use it in our app.

We’re going to create a new React Hook that we’ll be able to use to grab our locations anywhere within our app.

Under src/hooks/index.js, add the following line to the existing list:

export { default as useDestinations } from './useDestinations';

This will allow us to more conveniently import our hook which we’ll create next.

Under src/hooks, create a new file useDestinations.js and paste in this code:

import { graphql, useStaticQuery } from 'gatsby';

export default function useDestinations() {
  const { gcms = {} } = useStaticQuery( graphql`
    query {
      gcms {
        destinations {
          id
          name
          location {
            latitude
            longitude
          }
        }
      }
    }
  ` );

  let { destinations } = gcms;

  return {
    destinations,
  };
}

Here, we’re:

• Importing the graphql and useStaticQuery utilities from Gatsby
• We’re creating a new function (or hook) that is exported by default
• In that function, we’re using useStaticQuery to create a new GraphQL query which asks GraphCMS to return the data structure we defined.
• That query returns a value which we destructure immediately to grab the gmcs object
• We destructure destinations from gmcs and return it as part of a new object from our hook

With this, we can now use our hook anywhere in our app!

Head over to your src/pages/index.js file, first import our new hook:

import { useDestinations } from 'hooks';

And at the top of the IndexPage component, query our data:

const { destinations } = useDestinations();

This puts all of our locations into the destinations variable. We can test that this works by console logging it out:

console.log('destinations', destinations);

And once we open up our browser and look in our web developer tools console, we can see our location data!

Logging destinations data to the web console

Step 4: Creating a bucket list of destinations and adding them to the map

We’re going to start with creating a simple text list of our destinations. This will let us see all of our destinations in an easy to read format.

Creating a text list of our destinations

Inside of our IndexPage and above “Still Getting Started?”, let’s add the following code:

<h2>My Destinations</h2>
<ul>
  { destinations.map(destination => {
    const { id, name } = destination;
    return <li key={id}>{ name }</li>
  })}
</ul>

This code:

• Adds a new header for our list
• Creates a new unordered list
• Loops through our destinations and creates a new list item for each destination that include’s the location’s name

Once we hit save and reload, we should see our list under our map!

New basic list of destinations in the app

The list looks a little odd though right? We probably want to format it a little better to fit into the page.

Open up src/assets/stylesheets/pages/_home.scss and inside of the .home-start class, add:

.home-start {

  ...

  ul {
    list-style: none;
    padding: 0;
    margin: 1.2em 0;
  }

Let’s also modify the h2 to space things out a little better:

.home-start {

  ...

  h2 {

    margin-top: 2em;

    &:first-child {
      margin-top: 0;
    }

  }

Once you hit save and reload, it should look a little better.

Destinations in the app with cleaned up styles

Feel free to make additional changes, but we’ll leave it there for now.

Adding our destinations to the map

Now we can finally add our destinations to the map!

Inside of our <Map> component, we already have a <Marker>. This allows us to easily add a marker to the map given a position. We’ll take this concept and combine it with our text list to add our locations to the map.

Let’s update our <Map> code to match the following:

<Map {...mapSettings}>
  { destinations.map(destination => {
    const { id, name, location } = destination;
    const position = [location.latitude, location.longitude];
    return <Marker key={id} position={position} />
  })}
</Map>

Here we:

• Loop through our destinations to dynamically create a new list of components inside our <Map>
• Inside each loop instance, we destructure our date from destination
• We create a new position array with the latitude and longitude
• Create a new Marker where we use our position to add it to the map

This gives us our markers on the map!

Markers for each destination in the mapping app

But we want to know what each of those locations are, so let’s also add a popup to each marker that will show the name.

First, we need to import Popup from react-leaflet:

import { Marker, Popup } from 'react-leaflet';

Then, let’s update our <Marker> component to return:

return (
  <Marker key={id} position={position}>
    <Popup>{ name }</Popup>
  </Marker>
);

And once we save and open back up our map, you can now click on each marker and see our destinations name!

Popup for each destination marker in the mapping app

Before we’re done, center the map

Previously, our demo map centered on Washington, DC. Let’s update that to the center of the world since our map doesn’t focus on the United States.

Update the LOCATION variable to:

const LOCATION = {
  lat: 0,
  lng: 0,
};

And with that, we have our map!

Final mapping app with markers and popups for each destination

Follow along with the commit!

What else other features can we add to our app?

Add a way to check off each location

Inside GraphCMS, you can add a new field to your Destination content model that allows you to select whether you visited each location or not.

With this value, we can add it to our query and update our map with some kind of indicator like a checkmark to show that we’ve checked it off our bucket list!

Customize your map background styles

We’re using a public version of OpenStreetMap which is open source, but Mapbox offers some cool maps we can use to make it look a little more impressive.

If you want to get started changing your map styles, you can check out this other walkthrough of mine to learn how to use Mapbox.

Check out the blog post or watch the video!

Style the map markers with a custom image

You can check out my video walk through on how to change the markers to a custom image.

Take that a step further and use the feature above to dynamically show a different marker image when you’ve checked off a location.

Check out the video on Egghead.io!

Want to learn more about maps?

Check out some of my other tutorials and videos:

• Mapping with React Leaflet (egghead.io)
• Mapping Apps with React, Gatsby, & Leaflet (youtube.com)
• How to create a Coronavirus (COVID-19) Dashboard & Map App with Gatsby and Leaflet (colbyfayock.com)
• How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet (colbyfayock.com)
• How to build a mapping app in React the easy way with Leaflet (colbyfayock.com)
• Anyone Can Map! Inspiration and an introduction to the world of mapping (colbyfayock.com)

What’s on your travel bucket list?

Let me know on Twitter!

Last fall I was trying to decide on how to host and manage a small storytelling project built by around 40 users — my students. I wanted them to have a clean and easy experience uploading their content (images and audio files, along with some text). I also wanted it to be stored long-term in a format my little Vue.js app could easily pull in to display without a lot of set up and overhead on my part.

I’ve relied very happily on WordPress as a primary Content Management System (CMS) for years, but it’s been feeling a bit old lately, and it’s not quite designed for such a heavily AV-based, multi-user project, so I decided to look around for good fresh options.

Option 1: Google Sheets

The simplest path seemed to be setting up a Google Sheet the students could populate with links to their own self-hosted media. I’ve had good experiences building small sites like this before pulling in the data through JSON.

For this case, though, with around fifteen different content pieces going into each user’s contribution, if I used a spreadsheet it would be a beast, and populating it would not be a good user experience for the students.

The links to the students’ self-hosted media also risked going bad over time, as accounts lapse, and services dry up. I didn’t want the project to get patchy, and I didn’t want to have to do too much maintenance on it each year to keep it solid.

So, no to Google Sheets.

Option 2: Contentful

Contentful is a headless CMS, which means it provides infrastructure for storing, editing, and serving content without providing any sort of front-end display. Traditional WordPress, in contrast, is set up to do both — store your content, and offer up all the code that retrieves and displays it. This big stack of abilities makes it pretty bulky, and increasingly it doesn’t feel as nimble as a web tool should.

I was really excited about Contentful. It’s so pretty and slick! And so smart — it permits direct geotagging of content! Ahhh. And I could set up a custom content model that exactly matched the project at hand, and it was fun! Yay.

After spending some time configuring Contentful, I desperately wanted to use it, but I began to lose interest the more I thought through how the students would upload their work.

The free tier maxes out at five users. While I could have had the students upload their content through one generic user account, this would not have been a good experience, as they would have had to wade through the back end and other people’s files to submit their work.

I also wasn’t convinced that the free tier would have covered the hosting needs of this project. It probably would have been fine — but I would have found myself keeping an eye on bandwidth and API requests and the longterm status of the content.

With the first paid tier starting at $249 per month, levelling up was too expensive to consider. That pricing deterred me from even wanting to use a free account, because I knew I would never upgrade at that price. So there was a chance I’d need to migrate everything if I started building the project on the service.

It was clear Contentful didn’t really want the business of small-scale experimental work — fair enough — and anyway it was getting too annoying to be fussing over these details for a little project.

Option 3: RESTful WordPress

While I was trying to make Contentful work, I kept switching back to a WordPress install to play around. Bulky though the old WP can be, faced with Contentful’s nickle-and-dime approach of charging for content “records,” I was starting to feel very nostalgic for the ease and freedom of adding content in WordPress.

I thought — well, hey — why not use WordPress as a headless CMS with its new REST API feature? This would let me get around the bulk of serving content through PHP, while still allowing me to use WordPress as a CMS, an interface my students know well.

To allow the students to add all the images and audio for their projects, I would need to add a custom post type. To do that I would need to add a plugin. To use the plugin I would need to figure out how to configure it, and then create an appropriate custom post type that would provide in an easy-to-use interface inside the WP system. To do that I would need to rewrite WordPress from the ground up, because bless its heart it is not built to do anything other than look and feel like WordPress. It manages blog posts really, really, really well, and can be muddled into doing some other things sort of but not well. The whiff of the blog post never really fades.

I gave up on all this before even trying to figure out how I would use the REST API in my project. I’m still excited about it, though. It’s probably an amazing option for serving content from larger sites using JS frameworks.

Option 4: WordPress + Forms = CMS Sugar

The solution I finally settled on seemed ridiculously simple and a funny amalgam of all my earlier efforts.

Using Gravity Forms, a WordPress plugin I know my way around from other projects, I built a basic form through which the students could upload all fifteen of their files, and paste in their text components.

I exported the entries as a spreadsheet with links to the uploaded content stored in the WordPress site, and I turned this file into JSON to use just as I would a Google Sheet.

So my students got a clean, familiar, and accessible experience uploading their content, and I will be able to store it long term without hassle in a format my static web app will play nicely with. Problem solved.

Ta da! Why was this solution not more obvious when I began?

For me, one moral of this story is that even in this era of increasingly fancy decoupled and well-rested deployment options, it still helps to know your way around WordPress — that despite getting a bit long in the tooth, its low-cost, and feature-rich ecosystem continues to lower barriers to digital creativity.

A Content Management System (CMS) is a web-based application. Multiple users with different access levels can operate the data, as well as modify the content of a website/project or an internet application.

Important features your CMS should have

If you are developing a new website, a Content Management System is your best bet as you will have full control of your content and product sales. The biggest advantage is that you can manage your entire internet marketing strategy under one roof.

A CMS allows you to administer and assign diverse levels of permission access to users. When choosing a CMS, you need to keep two things in mind:

• Figure out your stakeholders
• Prioritize their requirements.

Now, deciding on a CMS platform is akin to buying a new smartphone.

Wondering how?

Let me explain.

Choosing the right CMS for you and your team

When you sit down to buy a new smartphone, the sheer number of options available will boggle your mind. The same is the case with CMS. The number of platforms to choose from is mind-boggling.

On the one hand, there are the popular and well-known platforms like WordPress, Joomla, and Drupal. And on the other hand, there are around 1000–2000 open source Web Content Management Systems which you can choose from.

Every CMS will have its own set of features to offer. Some platforms may offer all the requisite functions you need, while others might offer an unmatched intuitive experience. So, it becomes confusing as to which features are crucial as there are many basic features which are common to all the CMS platforms.

Here are a few basic features which you should consider while choosing a CMS platform. They are mostly common across all platforms:

• The platform should be steadfast and convenient
• It should have an easy navigation
• The platform should be flexible
• The site maintenance cost should not be very high
• The platform should have a streamlined authoring process

Apart from these basic features, there are three very important features your CMS should have. Let’s take a look at them in more detail:

1) An open API

API is the most commonly used term when it comes to CMS. Everybody from Mark Zuckerberg to the developer next door talks about APIs. What makes the API such a crucial feature?

An Application Programming Interface (API) is an intermediary software that promotes data exchange between two systems so that they can interact and share data with ease.

A CMS with an open API allows you to create a website and build apps that are detached from their content management tools and are integrated via the API. This gives you the benefit of using your choice of front-end tools. Also, you will be able to integrate a customized CMS with other external and internal systems, effortlessly. It is commercially viable and saves a lot of time, too.

2) Out of the box Plugins

Plugins allow you to customize attributes of your website effortlessly and easily.

They help in enhancing the scalability and functionality of the website.

Look for a CMS platform which has built-in SEO tools. With these, you can optimize the page for both the readers and the search engine. Having SEO plugins will help you to add page titles, put in metadata descriptions, and will also help in complying with the accessibility guidelines. It will also help in preventing duplicate content.

Also, when deciding on a platform, make sure you choose a platform which offers social media widgets and online marketing tools. This will make it easy for you to add social media sharing buttons to any piece or page of your content.

Plugins also allow you to integrate ERP (Enterprise Resource Planner) and CRM (Customer Relationship Management) systems. Make sure that your chosen platform has such plugins.

WordPress as a CMS platform offers scores of plugins. Also, it is the most preferred platform and there is a huge demand for WordPress website development in the market. To get the best service for your web development needs, you can hire one of the top WordPress development companies.

3) Design independence

Finally, the platform you choose should be open enough to allow modifications to the design and the layout. A customized design will have a huge impact on the user and thus will make them stay longer on the page. The platform should also offer flexibility to customize the interface so that you can craft the best experience for managing your content. The platform should not impose the templates on you. Rather it should be flexible enough to allow customization.

The CMS platform should provide you with the authority to make changes to the templates so that you can make your content stand out. It also allows you to bring into focus certain aspects on your page which you might want to highlight.

The CMS should give you the freedom to tweak and re-frame a few aspects so that it is in accordance with your needs and requirements.

Also, having a personalized design will encourage the customer to browse through your content and stay on the page rather than flipping through it.

To sum up

Now that you know which features to look out for, you can settle on your desired CMS platform and weed out the rest.

After all, a good Content Management System is a platform which is able to incorporate all your business needs and requirements and minimize the limitations as far as possible.

Be it micro data requirements or easy to use templates, your CMS should have these important features discussed above so that your business can deliver a seamless digital experience to all your customers.