blog - freeCodeCamp.org

How to Create a Table of Contents for Your Article

Jakub T. Jankiewicz — Thu, 12 Mar 2026 08:39:33 +0000

When you create an article, such as a blog post for freeCodeCamp, Hashnode, Medium, or DEV.to, you can help guide the reader by creating a Table of Contents (ToC). In this article, I'll explain how to create one with the help of JavaScript and browser DevTools. The article will explain how to use Google Chrome Dev Tools. But the same can be applied to any modern browser.

The process in this article needs to be done once per platform. Once you have the code, you can apply it every time to create a ToC. Note that if the platform changes something, you may need to adjust the script.

Browser Dev Tools
JavaScript Console
Understanding the DOM Structure
Creating TOC in Markdown
How to create an HTML TOC?
Copy the HTML code for the editor
What to do if I don’t have headers?
- Create Table of Contents for DEV.to
Conclusion

Browser Dev Tools

Dev Tools is an extension to the browser that can allow you to inspect and manipulate the DOM (Document Object Model), which is a representation of the HTML the browser keeps in memory in the form of a tree. It also gives access to the JavaScript console, where you can write short code snippets to test something. It has a lot more features, but we'll only use those two.

To open Dev Tools (in Google Chrome), you can press F12 or right-click on the page with your mouse and click Inspect.

⚠

In Safari, the browser Dev Tools are disabled initially. To enable it, read: Use the developer tools in the Develop menu in Safari on Mac.

Above is the screenshot of DevTools with a preview of this article. On the right, you can see a selected h1 HTML tag (the title) and CSS applied to that tag. The tree structure you see is the DOM.

💡

When creating a ToC for freeCodeCamp, you should open the preview in a new tab.

JavaScript Console

We will need to have access to the JavaScript console. To open the console in Google Chrome, you can use F12, right-click on the page and select Inspect from the context menu, or use the shortcut CTRL+SHIFT+C (Windows, Linux) or CMD+OPTION+C (Mac).

In Chrome DevTools, you can pick the Console tab at the top of the DevTools. But this will hide the DOM tree. It’s better to open the bottom drawer. You need to click the 3 dots in the top right corner and pick “show console drawer”.

The Dev Tools will look like this:

💡

You can ignore any errors or warnings in the console. You can click this icon 🚫 on the left side of the drawer, and it will clear the console.

The console is a so-called Read-Eval-Print-Loop. A classic interface, where you type some commands, here JavaScript code, and when you press enter, the code is executed in the context of the page the DevTools is on.

Above, you can see a page alert executed from the console.

Understanding the DOM Structure

The first step to create a ToC is to inspect the DOM and find the headers. They are usually H1…H6 tags. H1 is often the title of the page. In an ideal world, it would always be.

In my case, the header looks like this:

Dev Tools

The article only has H2 tags, but later in the article, I will also explain how to create a nested ToC.

💡

Your headers need to have an “id” attribute. It can look different, for example, be on a different element, but it has to be in the DOM. Later in the article, I will explain a few different structures and how to handle them.

Now with DevTools, we can write code that will find every header:

document.querySelectorAll('h2[id], h3[id], main h4[id]');

In the case of my article on freeCodeCamp, it returned this output:

NodeList(5) [h2#heading-dev-tools, h2#heading-javascript-console, h2#heading-understanding-the-dom-structure, h2#trending-guides.col-header, h2#mobile-app.col-header]

First, it’s a NodeList that we need to convert to an Array. Second is that besides our headers that we have so far, we also have two headers that are part of the website and not the main content. So we need to find out the single element that is the parent of the headers we need.

You can right-click on the white page that contains the article and pick Inspect Element. In our case, it found an element

. So we can rewrite our selector as:

document.querySelectorAll('main h2[id], main h3[id], main h4[id]');

And now it returns our headers and nothing more.

💡

The [id] attribute selector is not needed here, actually. At least not on freeCodeCamp.

How to Create the ToC in Markdown

A lot of blogging platforms support Markdown, so it'll be the first thing we'll create.

First, we'll convert the Node list to an array. We can use the spread operator:

[...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')];

Then we can map over the array and create the Markdown links that point to the given header.

const headers = [...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')];

headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    const hash = node.getAttribute('id');
    const indent = ' '.repeat(level * 2);
    return `\({indent}* [\){node.innerText}](#${hash})`;
});

The output looks like this:

(4) ['* [Dev Tools](#heading-dev-tools)', '* [JavaScript Console](#heading-javascript-console)', '* [Understanding the DOM Structure](#heading-understanding-the-dom-structure)', '* [What to do if I don’t have headers?](#heading-what-to-do-if-i-dont-have-headers)']

To get the text, we can join the array with a newline character and use console.log to display the output. If we don’t use console.log, it will show a string with \n characters.

const headers = [...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')];

console.log(headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    const hash = node.getAttribute('id');
    const indent = ' '.repeat(level * 2);
    return `\({indent}* [\){node.innerText}](#${hash})`;
}).join('\n'));

The output for this article will look like this:

* [Dev Tools](#heading-dev-tools)
* [JavaScript Console](#heading-javascript-console)
* [Understanding the DOM Structure](#heading-understanding-the-dom-structure)
* [Creating TOC in Markdown](#heading-creating-toc-in-markdown)
  * [This is fake header](#heading-this-is-fake-header)

I created one fake subheader. Platforms, even when not supporting Markdown when writing articles, often support Markdown when copy-pasted. The ToC at the top of the article was created by copying and pasting markdown generated with the last JavaScript snippet.

How to Create an HTML ToC

If your platform doesn’t support Markdown (like Medium), you can create HTML, preview that HTML, and copy the output to the clipboard. Pasting that into the editor of the platform you're using should keep the formatting.

💡

On Medium, the content is inside a

element, so the selector must be updated.

To convert Markdown to HTML, you can use any online tool, but you'll see how to create it yourself in the snippet. It will be faster after you create the code.

const headers = [...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')]

function indent(state) {
    return ' '.repeat((state.level - 1) * 2);
}

function closeUlTags(state, targetLevel) {
    while (state.level > targetLevel) {
        state.level--;
        state.lines.push(`${indent(state)}`);
    }
}

function openUlTags(state, targetLevel) {
    while (state.level < targetLevel) {
        state.lines.push(`${indent(state)}`);
        state.level++;
    }
}

const result = headers.reduce((state, node) => {
    const level = parseInt(node.nodeName.replace('H', ''));

    closeUlTags(state, level);
    openUlTags(state, level);
    
    const hash = node.getAttribute('id');
    state.lines.push(`\({indent(state)}${node.innerText}`);
    return state;
}, { lines: [], level: 1 });

closeUlTags(result, 1);

console.log(result.lines.join('\n'));

This is the output of the code in this article:


  Table of Contents
  Dev Tools
  JavaScript Console
  Understanding the DOM Structure
  Creating TOC in Markdown
  How to create HTML TOC
  
    Level 3
    
      Level 4
    
  
  What to do if I don’t have headers?

I added a few headers at the end, so you can see that it will work for any level of nested headers. Note that we also have the ToC as the first element on the list.

💡

Note that the above HTML code includes a link to the Table of Contents. This happens if you run the script again after adding the TOC. You can remove it by hand. If you want to improve the code, you can add a filter.

Copy the HTML code for the editor

Most so-called WYSIWYG editors are using HTML, and you should be able to copy the output of HTML code with formatting and paste it into that editor. The easiest is to just save that into a file, open that file, and select the text:

What to Do If I Don’t Have Headers?

You need to find anything that can be targeted with CSS. If they are p tags with a specific class (like header), you can use p.header instead of h2.

How to Create a Table of Contents for DEV.to

If you have a different DOM structure, you can use different DOM methods to extract the element you need. For example, on DEV.to, the headers look like this:


  
  
  Overview

So the selector needs to be just main h2. But when you execute this code:

[...document.querySelectorAll('main h2, main h3, main h4')];

You will see that there are way more headers than the content of the document. Luckily, we can use a new selector in CSS :has(). The final selector for one header can look like this: main h2:has(a[name]).

Here is the full code:

const selector = 'main h2:has(a[name]), main h3:has(a[name]), main h4:has(a[name])';
const headers = [...document.querySelectorAll(selector)];

console.log(headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    // this is how you get the hash
    // you can also access href attribute and remove # from the output string
    const hash = node.querySelector('a').getAttribute('name');
    const indent = ' '.repeat(level);
    return `\({indent}* [\){node.innerText}](#${hash})`;
}).join('\n'));

Conclusion

Creating a table of contents can help your readers digest your article. Since most people don’t read the whole article, they only scan for what they need. You can also find a lot of articles about its impact on SEO. So it’s always worth adding one if the article is longer.

And as you can see, creating a ToC is not that hard with a bit of web development knowledge.

If you like this article, you may want to follow me on Social Media: (Twitter/X, GitHub, and/or LinkedIn). You can also check my personal website and my new blog.

How to Build a Blog with the Ghost API and Next.js

Rajdeep Singh — Thu, 13 Apr 2023 21:14:46 +0000

Ghost CMS is a popular content management system that many devs and companies use to host their blogs.

It has many features and an editor that's highly optimized for writing. You can even build different themes using handlebars.js.

But if you don't know Handlebars, learning it can be a long and difficult process. If you are already a Next.js developer and you don't know Handlebars, creating a new theme for your Ghost-based site can be tough.

In the article, I will teach you how to use Ghost CMS as a backend and Next.js as a frontend. I will guide you through everything related to Nextjs 13 app directory and the Ghost CMS API.

Next.js 13 team currently working on the experimental app folder. Next uses file-based routing with the page directory. The new app directory is based on file system routing and provides additional functionality like layouts, error handling, component loading, and server-side and client-side rending out of the box.

All the code is available on GitHub. You can also check out the live demo website.

Why Use Next.js for the Front End and Not a Ghost CMS Theme?
Project Requirements
How to Set Up Ghost CMS
How to Set Up Ghost CMS with the Cloud
How to Get the Blog Template
How to Set Up Next.js
What to know before following this tutorial
Folder Structure
How to Configure Ghost CMS and Next.js
Understanding the Next.js 13 App Folder
Demo Data for the Project
How to Build the Blog
How to Build the Header
How to Build the Footer
How to Build the Layout
How to Build the Homepage
How to Build the Reading Page
How to Build the Tag Page
How to Build the Author Page
How to Build Single Pages
How to Handle Pagination
Next.js SEO
How to Enable Search
Error Handling
How to Rebuild Your Static Site with Webhooks
Conclusion

In this article, we cover the basics of Next's experimental app directory. Then I'll teach you how to step up Next and Ghost CMS locally and how to integrate Ghost with Next. Lastly, I'll show you how to consume data from the backend (via theGhost CMS API ) and show it on the site with React.js.

Why Use Next.js for the Front End and Not a Ghost CMS Theme?

There are a few reasons why you might consider using Next as the frontend framework for your blog:

Ghost CMS doesn't generate static builds, but Next.js does.
You get increased website speed and performance with Next.js and it now provides built-in SEO support and other optimizations. Ghost doesn't have some of these features.
For React developers, it is easy to build a new blog with Next (since Next is React-based), and you do not need to learn additional tools.
You'll find a few service providers available for Ghost to deploy a Ghost blog with one click. Most of them come with a paid plan while one or two offer a free plan (but these tend to have time and feature limitations). For Next.js, many players are available in the market.

Basically, when it comes to static builds and website performance, Ghost doesn't perform as well in either case. The alternative is to use a frontend platform like Next, React, Angular, or Vue.

I chose Next because it's a highly in-demand and popular React framework, and plenty of tools and libraries are built around it.

Note that the current project is not ready for TypeScript, but I'm working on it. Because of this I disabled TypeScript during build time like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },

  typescript: {
    ignoreBuildErrors: false,
  },

}

module.exports = nextConfig

Project Requirements

To follow along with this tutorial, you'll need basic knowledge of the following packages:

PNPM is a Node.js package manager similar to npm or yarn (you can use any of them that you prefer).
TypeScript helps you write type-safe code in JavaScript, and can also help improve productivity. It is not required, though. You can use JavaScript in your project.
React.js is a free and open-source front-end JavaScript library for building user interfaces with class and function components.
Next.js 13 (app) is based on React and it provides additional functionality like routing, error handling, and layouts.
Ghost CMS API is an open-source content management system (CMS) similar to WordPress. Ghost is specifically designed and built for blogging. In this project, we'll Ghost as the backend and Next as the frontend. For communication between the backend and frontend development, we'll use the Ghost CMS API.
Tailwind CSS is an open source CSS-based framework similar to Bootstrap. We'll use Tailwind CSS to design our blog website.

How to Set Up Ghost CMS

The next step is installing Ghost locally, which you can do with one command. First, you need to install ghost-cli globally with pnpm, yarn, or npm.

pnpm add -g ghost-cli@latest

# or

yarn global add ghost-cli@latest

# or

npm install ghost-cli@latest -g

After installing the Ghost CLI, you can create a new Ghost blog project locally with the following command:

ghost install local

After the blog installation is finished, you can start your local development server with the ghost start command and your local development serve on http://localhost:2368/ghost.

Additional Ghost CLI Commands

There are a few additional commands that are helpful when using the Ghost CLI:

ghost start: start your server.
ghost stop : stop your running Ghost server.
ghost help : check the available list of commands.

Note:

Make sure your current installation directory is empty before installation. Currently, you are installing Ghost in development mode. For production, you won't follow the same steps.

How to Set Up Ghost CMS with the Cloud

If you run into any problems with Ghost local installation, or maybe it's too complicated and you do not have enough space on your drive, you can use a tool like digital press or any other cloud service like GCP or AWS, Digital Ocean, and so on.

I like digital press because it comes with a free plan. Other cloud services do not provide that, which is why I suggest it.

How to Get the Blog Template

Creating a new blog from scratch can be tough. In this tutorial, we'll use a pre-build template from the frontend web. All templates have an open-source MIT license, so you can use them, and you don't need to set up everything.

I picked the Open-blog template from the frontend web.

How to Set Up Next.js

Setting up Next is one of the main parts of this tutorial, where you'll spend time and energy coding, debugging, and deploying the site.

Here are the commands to run depending on whether you're using npx, yarn, or pnpm:

npx create-next-app@latest --experimental-app

# or

yarn create next-app --experimental-app

# or

pnpm create next-app --experimental-app

create a new nextjs app.

After completing the installation process, we must install some additional Node packages for the blog.

These Node packages can help you speed up your development process. Make sure to install all the below packages to follow along with this guide:

Node packages to install:

pnpm add @tryghost/content-api(required)
pnpm add @types/tryghost__content-api (required by TypeScript)
pnpm add tailwindcss postcss autoprefixer
pnpm add @tailwindcss/typography
pnpm add react-icons
pnpm add date-fns
pnpm add next-themes
pnpm add @radix-ui/react-popover

Here's what each of these packages does:

@tryghost/content-api package is a Ghost JavaScript Client Library for fetching content API data.
@types/tryghost__content-api package contains type definitions for @tryghost/content-api.
TailwindCSS, autoprefixer, and PostCSS are packages required for Tailwind CSS.
@tailwindcss/typography package for handling dynamic typography with Tailwind CSS.
The next-themes package enables themes like switching from dark to light mode on your site.
The react-icons package provides lots of SVG icons for the project. This way, you do not need to download them manually.
@radix-ui/react-popover is part of the Radix UI ecosystem. I choose the Radix popover component for the design of the search component on the site.
date-fns package helps convert your published_at date into a different date format.

What to Know Before Following This Tutorial

Before building this project, I highly recommend watching some tutorials on YouTube (especially if you're a beginner with Next.js). These will help you understand some basics about the Next.js experimental app folder.

Every video explains the same kind of topic. If you watch each of the four videos, you have a basic idea of how the Next.js app folder works. That will make this advanced tutorial easier to follow.

Vercel

In this tutorial, Lee Robinson covers the basics of routing, dynamic route segments, data fetching, caching, and metadata.

Sakura Dev

Sakura Dev teaches you about the difference between Next.js pages and the app folder and routing with examples.

Tuomo Kankaanpaa

Tuomo Kankaanpaa teaches you about Next app folder routing, layouts, and server components.

Piyush Garg

Piyush Garg compiles all the new Next features and converts them into a small crash course, and builds a demo project.

Now that you're ready to go, let's get into building our blog.

Folder Structure

Our folder structure looks like this for our demo application:

.
├── next.config.js
├── next-env.d.ts
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── public
├── README.md
├── search.json
├── src
│   └── app
│       ├── authors
│       │   └── [slug]
│       │       └── page.tsx
│       ├── BlogLayout.tsx
│       ├── cards.min.css
│       ├── Card.tsx
│       ├── error.tsx
│       ├── favicon.ico
│       ├── Footer.tsx
│       ├── ghost-client.ts
│       ├── globals.css
│       ├── Header.tsx
│       ├── layout.tsx
│       ├── not-found.tsx
│       ├── pages
│       │   └── [slug]
│       │       └── page.tsx
│       ├── page.tsx
│       ├── pagination
│       │   └── [item]
│       │       └── page.tsx
│       ├── Pagination.tsx
│       ├── read
│       │   └── [slug]
│       │       ├── Newsletter.tsx
│       │       └── page.tsx
│       ├── Search.tsx
│       ├── SocialIcons.tsx
│       └── tags
│           └── [slug]
│               └── page.tsx
├── tailwind.config.js
└── tsconfig.json

13 directories, 30 files

How to Configure Ghost CMS and Next.js

The next step is to set up data fetching for the Ghost Content API. This is why we installed the @tryghost/content-api package above.

Ghost CMS comes with two types of APIs: the first is the Content API, and the second is the Admin API. For the blog, we'll use the Content API.

Content API is a RESTful API that fetches the published content for the Ghost database. It is a read-only API. You can not call POST requests with it.

To configure it, we create a new file inside the src/app folder with ghost-client.ts. Inside the file, we have a new Ghost API instance.

// ghost-client.ts

import GhostContentAPI from "@tryghost/content-api";

// Create API instance with site credentials
const api = new GhostContentAPI({
  url: process.env.GHOST_URL as string,
  key: process.env.GHOST_KEY as string,
  version: "v5.0"
});

We need the blog URL, key, and version to config the Ghost content API in Next. You can find both the URLs and Key properties in the Ghost dashboard, as well as the version value which is your current version of Ghost CMS.

Go to the Ghost dashboard:

Get your KEY and URL

Go to dashboard > settings > integrations > Your-intergration-id and get your GHOST_URL and GHOST_KEY . Now you can copy both and paste them inside your .env.local file.

_Get your GHOST_KEY and GHOST_URL_

Understanding the Next.js 13 App Folder

There have been lots of changes in the Next.js pages folder and app folder with the release of Next.js 13. We'll discuss some important stuff now and more when we're building the app:

There is no _app , _document, getServerSideProps, getStaticProps, getStaticPaths , 404 and useRouter.
Now it combines the _app and _document files with the layout file.
useRouter is import from next/navigation.
The 404 file is replaced by the notFound() function.
The error.tsx file provides functionality like reacting to error boundaries.
Now the index.js file is replaced by page.js.
Passing dynamic route segments pages/blog/[slug].js is changed, and the Next app directory looks like this: app/blog/[slug]/page.js.

Examples

To understand the Next experimental app folder, let's look at a real example:

tag page => app/tag/[slug]/page.ts
category => app/tag/[slug]/page.ts

Now you can create five files inside every route. For example, if you create a tag or category route in your app folder, then you can create four files inside your app route folder.

page.ts (required): it is your main file.
layout.ts (optional): it helps design your layout
loading.ts (optional): it creates a loading indicator with React suspense.
error.ts (optional): it helps handle errors in your React app.
components (optional): you can also create another component in your routes.

Let's understand how the new Next.js 13 app route works with a real-life example: your tag route folder looks like this.

app/tag/[slug]/page.ts
app/tag/[slug]/loading.ts
app/tag/[slug]/layout.ts
app/tag/[slug]/error.ts
app/tag/[slug]/my-card-component.ts

Demo Data for the Project

You don't have to worry about creating a demo or dummy blog post data. For your testing, You can download it from this GitHub repository.

How to Build the Blog

We'll go through and build each part of the blog in the following sections so you can follow along at home.

How to build the header
How to build the footer
How to build the layout
How to build the homepage
How to build the reading page
How to build the tag page
How to build the author page
How to build single pages
How to handle pagination
Next.js SEO
How to Enable Search
Error Handling
How to rebuild your static site with webhooks

How to Build the Header

The first and main part of the site is the header. First, we'll create a simple header for our demo blog. Our header will end up looking like this:

Design of the header

First is the logo, next comes the nav bar with various elements, and last is the icon section. All the data comes from the Ghost CMS API. You can change things inside Ghost CMS and it will reflect on the site.

Here's the code to build the header component:

// Header.tsx

import Link from "next/link";
import SocialIcons from "./SocialIcons";
import Image from "next/image";
import type { Settings } from "@tryghost/content-api";

function Header({ setting }: { setting: Settings }) {

  return (
    "px-2 sm:px-4 py-2.5 dark:bg-gray-900 w-full">

      "container flex flex-wrap items-center justify-between mx-auto">
        {/* Logo for blog */}
        "/" className="flex items-center">
          {setting.logo !== null ?
            200} height={100} src={setting.logo} className="self-center text-xl font-semibold whitespace-nowrap dark:text-white" />
            : setting.title}
        
        "flex md:order-2">

          "flex flex-wrap p-4 md:space-x-8 md:mt-0 md:text-sm md:font-medium">

            {
              /* Blog Navigation Edit in GHOST CMS  */
              setting.navigation !== undefined ? setting?.navigation.map(item => "block py-2 pl-3 pr-4 text-gray-700 rounded hover:text-blue-700 dark:hover:text-blue-700 md:p-0 dark:text-white"
                aria-current="page">
                
                  {item.label}
                
              
) : " "

            }

          

        
        
      

    
  )

}
export default Header

The footer is also an important section of a blog site. It shows your important information and various helpful links.

Design of the footer

I designed a basic footer with copyrighted text and added social icons for the site. The social icons come from the Ghost CMS API.

// Footer.tsx

import { FaTwitter, FaFacebook } from "react-icons/fa";
import Link from "next/link";
import type { Settings } from "@tryghost/content-api";

function Footer({ setting }: { setting: Settings }) {

  return (

    "px-2 sm:px-4 py-2.5 dark:bg-gray-900 w-full">

      "container flex flex-wrap items-center justify-between mx-auto">

        "https://github.com/frontendweb3" className="flex items-center">
          "self-center text-gray-800 text-sm font-semibold whitespace-nowrap dark:text-white">2023 copyright frontend web
        

        "flex md:order-2">

          "flex p-4 flex-row md:space-x-8 md:mt-0 md:text-sm font-medium">

            {
              setting.twitter !== null ? 
                "_blank" href={`https://twitter.com/${setting.twitter}`} className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:text-blue-700 dark:hover:text-blue-700 md:p-0 dark:text-white" aria-current="page">
                  
                
              
 : " "

            }

            {
              setting.facebook !== null ? 
                "_blank" href={`https://www.facebook.com/${setting.facebook}`} className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:text-blue-700 dark:hover:text-blue-700 md:p-0 dark:text-white ">
                  
                
              
 : " "

            }

          
        

      
    

  )
}

export default Footer

How to Build the Layout

I designed a basic layout for the blog. For building layouts in Next.js, there's a special layout.tsx file.

Before we create the layout design, we need to define a getNavigation function to fetch navigation and basic website-related data from Ghost.

// ghost-client.ts


export async function getNavigation() {
  return await api.settings.browse()
}

The data look like this:

{
  title: 'Rajdeep Singh',
  description: 'Thoughts, stories and ideas.',
  logo: 'http://localhost:2368/content/images/2023/04/nextjsandghostlogo-2.png',
  icon: 'http://localhost:2368/content/images/size/w256h256/2023/04/nextjs-60pxx60px.png',
  accent_color: '#d27fa0',
  cover_image: 'https://static.ghost.org/v4.0.0/images/publication-cover.jpg',
  facebook: 'ghost',
  twitter: '@ghost',
  lang: 'en',
  locale: 'en',
  timezone: 'Etc/UTC',
  codeinjection_head: null,
  codeinjection_foot: null,
  navigation: Array(5) [
    { label: 'Home', url: '/' }, { label: 'JavaScript', url: '/tags/javascript/' }, { label: 'Nextjs', url: '/tags/nextjs/' },
    { label: 'Reactjs', url: '/tags/reactjs/' }, { label: 'Ghost CMS', url: '/tags/ghost-cms/' }
  ],
  secondary_navigation: Array(1) [ { label: 'Login', url: '#/portal/' } ],
  meta_title: 'My demo post',
  meta_description: 
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
  og_image: null,
  og_title: null,
  og_description: 
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
  twitter_image: null,
  twitter_title: null,
  twitter_description: 
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
  members_support_address: 'noreply',
  members_enabled: true,
  members_invite_only: false,
  paid_members_enabled: false,
  firstpromoter_account: null,
  portal_button_style: 'icon-and-text',
  portal_button_signup_text: 'Subscribe',
  portal_button_icon: null,
  portal_plans: Array(1) [ 'free' ],
  portal_name: true,
  portal_button: true,
  comments_enabled: 'all',
  url: 'http://localhost:2368/',
  version: '5.39'
}

The getNavigation function returns the settings data, and then we pass the data as props into the header and footer components.

Our Main layout.tsx file works server side. It helps fetch data on the server side with the React use hook.

// Layout.tsx


import "./globals.css";
import BlogLayout from './BlogLayout'
import { getNavigation, } from "./ghost-client"
import { use } from "react"
import type { Settings } from "@tryghost/content-api"

interface UpdateSettings extends Settings {
  accent_color?: string;
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  const settings: UpdateSettings = use(getNavigation())

  return (

    'light' lang="en">

      '--bg-color': settings?.accent_color ? settings.accent_color : "",
        }}
        className={` bg-[--bg-color] dark:bg-gray-900`}>

        

          {children}

        

      

    

  )
}

BlogLayout component

The BlogLayout component works on the client side. In the Next.js app folder, you can easily convert your server-side component to the client side with the following "use client" syntax.

The purpose of the BlogLayout component is to contain the ThemeProvider, header, and footer. ThemeProvider is a high-order component, and it provides additional functionality, like changing the theme from dark to light. We wrap the intra-site with ThemeProvider's higher component. In the old pages directory, we achieve similarly functionally with nextjs _app.ts custom app.

ThemeProvider component helps to change the theme from light to dark mode.

"use client"

// BlogLayout.tsx

import Footer from "./Footer";
import Header from "./Header";
import { ThemeProvider } from 'next-themes';
import type { Settings } from "@tryghost/content-api";
function Layout({ setting, children }: { setting: Settings, children: React.ReactNode }) {
  return "class">
    
    {children}
    
  

}
export default Layout

How to Build the Homepage

Next.js has a special app/page.tsx file for designing and building the home page. Our blog website's home page looks like what you see below. We import the header, card, pagination, and footer on the home page. The header and footer are part of layout.tsx.

Home page

First, we fetch all posts data from Ghost CMS with the help of the getPosts function, which I defined in the ghost-client.ts file.

// ghost-client.ts

export async function getPosts() {
  return await api.posts
    .browse({
      include: ["tags", "authors"],
      limit: 10
    })
    .catch(err => {
      throw new Error(err)
    });
}

By default, the api.post.browse() returns only post data, but you can easily extend it. In every article or post data, we also include tags and authors with the help of include. Then we set the article limit to ten.

The data look like this:

 [
  {
    id: '6422a742136f5d40f37294f5',
    uuid: '8c2fcfda-a6e4-4383-893b-ba18511c0f67',
    title: 'Demo Posts with Nextjs and Ghost Editor',
    slug: 'demo-posts-with-nextjs-and-reactjs',
    html: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text si
nce the 1500s when an unknown printer scrambled a galley of type and scrambled it to make a type specimen book. 
It has survived five centuries and the leap i
nto electronic typesetting, remaining essentially unchanged. 
It was popularised in the 1960s with Letraset sheets containing Lorem Ipsum passages and, more r
ecently, desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
"kg-card kg-gallery-card kg-width-wide kg-card-hascap
tion">"kg-gallery-container">"kg-gallery-row">"kg-gallery-image">"http://localhost:2368/content/images/2023/03/Build-and-d
eploy.png" width="1500" height="400" loading="lazy" alt srcset="http://localhost:2368/content/images/size/w600/2023/03/Build-and-deploy.png 600w, http://localhost:2
368/content/images/size/w1000/2023/03/Build-and-deploy.png 1000w, http://localhost:2368/content/images/2023/03/Build-and-deploy.png 1500w" sizes="(min-width: 720px)
 720px">
"kg-gallery-image">"http://localhost:2368/content/images/2023/03/Build-and-deploy-profile-1.png" width="1500" height="400" loading
="lazy" alt srcset="http://localhost:2368/content/images/size/w600/2023/03/Build-and-deploy-profile-1.png 600w, http://localhost:2368/content/images/size/w1000/2023
/03/Build-and-deploy-profile-1.png 1000w, http://localhost:2368/content/images/2023/03/Build-and-deploy-profile-1.png 1500w" sizes="(min-width: 720px) 720px">
"kg-gallery-row">"kg-gallery-image">"http://localhost:2368/content/images/2023/03/Build-and-deploy-profile--1--1.png" width="15
00" height="400" loading="lazy" alt srcset="http://localhost:2368/content/images/size/w600/2023/03/Build-and-deploy-profile--1--1.png 600w, http://localhost:2368/co
ntent/images/size/w1000/2023/03/Build-and-deploy-profile--1--1.png 1000w, http://localhost:2368/content/images/2023/03/Build-and-deploy-profile--1--1.png 1500w" siz
es="(min-width: 720px) 720px">
"kg-gallery-image">"http://localhost:2368/content/images/2023/03/Build--Test-and-Deploy-profile-1.png" width
="1500" height="400" loading="lazy" alt srcset="http://localhost:2368/content/images/size/w600/2023/03/Build--Test-and-Deploy-profile-1.png 600w, http://localhost:2
368/content/images/size/w1000/2023/03/Build--Test-and-Deploy-profile-1.png 1000w, http://localhost:2368/content/images/2023/03/Build--Test-and-Deploy-profile-1.png 
1500w" sizes="(min-width: 720px) 720px">
Build and deploy
"why-do-we-use-it">Why do we use it?
It is
 a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
The point of using Lorem Ipsum is tha
t it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
Many desktop 
publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their 
infancy. 
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
"where-can-i
-get-some">Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by i
njected humour, or randomised words which don't look even slightly believable. 
If you are going to use a passage of Lorem Ipsum, you need to be sure there is
n't anything embarrassing hidden in the middle of text. 
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making 
this the first true generator on the Internet. 
It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generat
e Lorem Ipsum which looks reasonable. 
The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
"kg-card kg-callout-card kg-callout-card-red">"kg-callout-emoji">💡
"kg-callout-text">My note is here 
"kg-card kg-header-card kg-width-full kg-size-small kg-style-dark" style data-kg-background-image>"kg-header-card-header" id="product">Produc
t
"kg-header-card-subheader" id="my-blog-list">My blog list
"kg-card kg-embed-card kg-card-hascaption">"2
00" height="113" src="https://www.youtube.com/embed/_q1K7cybyRk?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gy
roscope; picture-in-picture; web-share" allowfullscreen title="Next.js 13.1 Explained!">youtube
"kg-card
 kg-embed-card">"twitter-tweet">"en" dir="ltr">In 2022, we enabled developers to create at the moment of inspiration, now with over 2 mill
ion deployments per week.

Here's what we shipped ↓ "https://t.co/6k7Xmbpna3?ref=localhost">pic.twitter.com/6k7Xmbpna3— Vercel (@ver
cel) "https://twitter.com/vercel/status/1611094825587167254?ref_src=twsrc%5Etfw&ref=localhost">January 5, 2023\n` +
      '\n' +
      '
"kg-card kg-bookmark-card kg-card-hascaption">"kg-bookmark-container" href="https://medium.com/frontendweb/what-is-progre
ssive-web-app-and-how-to-enable-it-in-nextjs-application-17f2e3240390?ref=localhost">"kg-bookmark-content">"kg-bookmark-title">What is Progres
sive Web App and How to enable it in nextjs Application?
"kg-bookmark-description">A detailed guide to Progressive Web Apps: How to use it with next
js and publish on Google play store, Microsoft store, Meta Quest, and…
"kg-bookmark-metadata">"kg-bookmark-icon" src="https://cdn-static-
1.medium.com/_/fp/icons/Medium-Avatar-500x500.svg" alt>"kg-bookmark-author">FrontEnd web"kg-bookmark-publisher">Rajdeep singh<
/div>
"kg-bookmark-thumbnail">"https://miro.medium.com/v2/resize:fit:1200/1*yAoHfq4Wm2Bp8DU1Dav29Q.png" alt>Bookmark<
/figcaption>
"kg-card kg-header-card kg-width-full kg-size-small kg-style-dark" style data-kg-background-image>"kg-header-card-header" 
id="thank-you">Thank you',
    comment_id: '6422a742136f5d40f37294f5',
    feature_image: 'https://images.unsplash.com/photo-1543966888-7c1dc482a810?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDE2fHxqYXZhc2Nya
XB0fGVufDB8fHx8MTY3OTk5MjY1NA&ixlib=rb-4.0.3&q=80&w=2000',
    featured: false,
    visibility: 'public',
    created_at: '2023-03-28T08:37:22.000+00:00',
    updated_at: '2023-03-28T08:51:38.000+00:00',
    published_at: '2023-03-28T08:50:44.000+00:00',
    custom_excerpt: 'It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. ',
    codeinjection_head: null,
    codeinjection_foot: null,
    custom_template: null,
    canonical_url: null,
    tags: [ [Object] ],
    authors: [ [Object] ],
    primary_author: {
      id: '1',
      name: 'Rajdeep Singh',
      slug: 'rajdeep',
      profile_image: 'https://www.gravatar.com/avatar/dafca7497609ae294378279ad1d6136c?s=250&r=x&d=mp',
      cover_image: null,
      bio: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
      website: 'https://officialrajdeepsingh.dev',
      location: 'India',
      facebook: 'officialrajdeepsingh',
      twitter: '@Official_R_deep',
      meta_title: null,
      meta_description: null,
      url: 'http://localhost:2368/author/rajdeep/'
    },
    primary_tag: {
      id: '6422aa9a136f5d40f3729552',
      name: 'demo',
      slug: 'demo',
      description: null,
      feature_image: null,
      visibility: 'public',
      og_image: null,
      og_title: null,
      og_description: null,
      twitter_image: null,
      twitter_title: null,
      twitter_description: null,
      meta_title: null,
      meta_description: null,
      codeinjection_head: null,
      codeinjection_foot: null,
      canonical_url: null,
      accent_color: null,
      url: 'http://localhost:2368/tag/demo/'
    },
    url: 'http://localhost:2368/demo-posts-with-nextjs-and-reactjs/',
    excerpt: 'It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. ',
    reading_time: 3,
    access: true,
    comments: true,
    og_image: null,
    og_title: null,
    og_description: null,
    twitter_image: null,
    twitter_title: null,
    twitter_description: null,
    meta_title: null,
    meta_description: null,
    email_subject: null,
    frontmatter: null,
    feature_image_alt: 'Demo Posts with Nextjs and Ghost Editor',
    feature_image_caption: 'Photo by "https://unsplash.com/@pinjasaur?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Paul Esch-Laurent / 
"https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash'
  },
meta:{
    pagination: { page: 1, limit: 10, pages: 2, total: 12, next: 2, prev: null }
  }
]

Now we call the getPosts function on the server side. It returns all the post data with the associated tags and authors. Now you can loop through the data with a map() function.

We pass the data into app/page.tsx to the card.tsx components. We pass the article data as props into the card component.


// src/app/page.tsx

import { getPosts } from "./ghost-client"
import Card from './Card'

export default async function Home() {

  const getPost = await getPosts()

  return (
    <>
      "container my-12 mx-auto grid grid-cols-1 gap-2 md:gap-3 lg:gap-4 lg:grid-cols-3 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4">

        {
          getPost?.map(
            item => {
              return 
            })
        }

      

    
  )
}

Card component

I designed a basic card for the blog. The card component looks like this:

Card component

I rendered every item of data coming from the home page as props and showed it on the site with Card.tsx .

// Card.tsx

import Image from "next/image"
import Link from "next/link"
import type { PostOrPage } from "@tryghost/content-api";
import { format } from 'date-fns'

function Card({ item }: { item: PostOrPage }) {

  return (
    "max-w-full bg-white dark:bg-gray-800" >

      {
        item.featured !== null && item.feature_image !== undefined ? `/read/${item.slug}`}>
          "rounded-lg p-3" width={1000} height={324} src={item.feature_image} alt={item.feature_image_alt || item.title} />
         : " "
      }

      "p-3">

        "flex mb-3">
          {
            item.published_at !== null && item.published_at !== undefined ? "text-sm text-gray-500 dark:text-gray-400">
              {format(new Date(item.published_at), 'dd MMMM, yyyy')}
            
 : ""
          }
          "text-sm text-gray-500 dark:text-gray-400 mx-1"> , 
          "text-sm text-gray-500 dark:text-gray-400">
            {item.reading_time} min read
          
        

        `/read/${item.slug}`}>
          "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
            {item.title}
          
        


      

    

  )

}



export default Card

How to Build the Reading Page

The reading page is the second most important page for the blog site. If people can't figure out how to read what the author writes, this is a big problem for front-end developers.

Reading page

First, we get a single article from the Ghost CMS API based on its slug. We pass it to the Card component with the Link component.

// ghost-client.ts

export async function getSinglePost(postSlug: string) {
  return await api.posts
    .read({
      slug: postSlug
    }, { include: ["tags", "authors"] })
    .catch(err => {
      console.error(err);
    });
}

The getSinglePost() function returns data about a single article, and you can render that data on the page.

// src/app/read/[slug]/page.tsx

import Newsletter from "./Newsletter";
import Link from "next/link";
import { getSinglePost, getPosts } from "../../ghost-client"
import Image from "next/image";
// import icon
import { FaAngleLeft } from "react-icons/fa";

// types for typescript
import type { Metadata } from "next";
import type { PostOrPage } from "@tryghost/content-api";

// format the date
import { format } from 'date-fns'

// css for card
import "../../cards.min.css"


export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({
    slug: post.slug,
  }));
}


async function Read({ params }: { params: { slug: string }; }) {

  const getPost = await getSinglePost(params.slug)

  return (
    <>
      "pt-8 pb-16 lg:pt-16 lg:pb-24 dark:bg-gray-900">

        "flex justify-between px-4 mx-auto max-w-screen-xl ">

          "mx-auto w-full max-w-3xl prose prose-xl prose-p:text-gray-800  dark:prose-p:text-gray-100 sm:prose-base prose-a:no-underline prose-blue dark:prose-invert">

            "flex mb-4 w-full justify-between">

              "inline-flex items-center" href={`/`}>
                 Back
              

              {
                getPost.primary_tag ? `/tags/${getPost?.primary_tag.slug}`}>
                  # {getPost?.primary_tag.name}
                 : ""
              }

            

            "mb-4 text-3xl font-extrabold leading-tight text-gray-900 lg:mb-6 lg:text-4xl dark:text-white">
              {getPost.title}
            

            "lead">
              {getPost.excerpt}
            

            "mb-4 lg:mb-6 not-format">

              "flex items-center mb-6 not-italic">

                "inline-flex items-center mr-3 text-sm text-gray-900 dark:text-white">

                  32} height={32} className="mr-4 w-10 h-10 rounded-full" src={getPost?.primary_author.profile_image} alt={getPost?.primary_author.name} />
                  {
                    getPost.primary_author ? `/authors/${getPost?.primary_author.slug}`} rel="author" className="text-xl font-bold text-gray-800 dark:text-white">{getPost?.primary_author.name} : " "
                  }

                  {
                    getPost.published_at ? "text-base font-light text-gray-800 dark:text-white mx-1" dateTime={getPost?.published_at} title={format(new Date(getPost?.published_at), 'yyyy-MM-dd')}>
                      {format(new Date(getPost?.published_at), 'dd MMMM, yyyy')}
                     : ""
                  }

                  "text-base w-1 h-1 rounded-full bg-black dark:bg-white mx-1">

                  "text-base font-light text-gray-500 dark:text-gray-400"> {getPost.reading_time}  Min Read

                

              

            

            
              "mx-auto" width={1000} height={250} src={getPost.feature_image} alt={getPost.feature_image_alt} />
              "text-center"
                dangerouslySetInnerHTML={{
                  __html: getPost?.feature_image_caption
                }}>
            

            

          
        
      
      
    
  )

}
export default Read

You render the post's HTML data with dangerouslySetInnerHTML . But you need to write lots of CSS to handle the dynamic content coming from the Ghost CMS API.

To solve that, I used the @tailwindcss/typography package. I also downloaded cards.min.css from Ghost. Now you don't need to write a single line of CSS in your Next app.

Generate the static site with the generateStaticParams function. Before, we used to getStaticProps function.

// ghost-client.ts


export async function generateStaticParams() {

  // fetch All posts

  const posts = await getPosts()

  // return the slug 

  return posts.map((post) => ({
    slug: post.slug,
  }));

}

How to Build the Tag Page

I designed a simple tag page for the blog. The tag page shows articles related to the tags that are used.

You can also create a category page. Tag pages and category pages use the same logic and functionalities.

Tag page

Similar to the reading page, we'll get articles based on tags from the Ghost CMS API.

// ghost-client.ts


// return all posts realted to tag slug
export async function getTagPosts(tagSlug: string) {

  return await api.posts.browse({ filter: `tag:${tagSlug}`, include: 'count.posts' })
    .catch(err => {
      throw new Error(err)
    });
  ;

}

// return all the slugs to build static with generateStaticParams
export async function getAllTags() {
  return await api.tags.browse({
    limit: "all"
  }).catch(err => {
    console.log(err)
  })
}

The getTagPosts() function returns all the available posts related to a specific tag.

After receiving all posts with getTagPosts(), we render all posts with the help of the map() method.

// src/app/tag/[slug]/page.tsx

import React from 'react'
import Card from "../../Card"

import { getTagPosts, getAllTags } from "../../ghost-client"

import { notFound } from 'next/navigation';

import type { PostsOrPages } from "@tryghost/content-api";


export async function generateStaticParams() {

  const allTags: Tags = await getAllTags()

  let allTagsItem: { slug: string }[] = []

// genrate the slug for static site

  allTags?.map(item => {
    allTagsItem.push({
      slug: item.slug,
    })
  })

  return allTagsItem

}


async function Tag({ params }: { params: { slug: string }; }) {

  let tagPosts: PostsOrPages = await getTagPosts(params.slug)

// Handling 404 error

  if (tagPosts.length === 0) {
    notFound()
  }

  return (
    "Related articles" className="py-8 lg:py-24 dark:bg-gray-800">

      "px-4 mx-auto max-w-screen-xl">

        "mb-8 text-2xl font-bold text-gray-900 dark:text-white">
          More articles from {params.slug.split("-").join(" ")}
        

        "container my-12 mx-auto grid grid-cols-1 gap-12 md:gap-12 lg:gap-12  lg:grid-cols-3  md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4 ">

          {
            tagPosts.map(
              item => 
            )
          }

        

      

    
  )

}

export default Tag

Generate the static site with the generateStaticParams function. It helps to generate slugs of the static build.

// ghost-client.ts

export async function getAllTags() {
  return await api.tags.browse({
    limit: "all"
  }).catch(err => {
    console.log(err)
  })
}

How to Build the Author Page

The last and one of the most important pages for the blog site is the author page. This is where readers can learn more about the author.

For the demo blog, I designed a basic page for the author.

Author page

We'll build this in a similar way as we built the tag page. First, we get the author's metadata and author posts from the Ghost CMS API.

// ghost-client.ts


// get author meta Data

export async function getSingleAuthor(authorSlug: string) {
  return await api.authors
    .read({
      slug: authorSlug
    }, { include: ["count.posts"] })
    .catch(err => {
      console.log(err)
    });

}

// get author related posts

export async function getSingleAuthorPosts(authorSlug: string) {
  return await api.posts.browse({ filter: `authors:${authorSlug}` })
    .catch(err => {
      console.log(err)
    })
};

// get All author from Ghost CMS for generateStaticParams

export async function getAllAuthors() {

  return await api.authors
    .browse({
      limit: "all"
    })
    .catch(err => {
      throw new Error(err)
    });

}

The getSingleAuthor() returns data about a single author based on the author slug, and the getSingleAuthorPosts() function returns all posts related to the author.

We render the posts data with the help of the map() method.

// src/app/author/[slug]/page.tsx

import React from 'react';
import Link from "next/link";
import { FaFacebook, FaTwitter, FaGlobe } from "react-icons/fa";
import Card from "../../Card"

import { getSingleAuthor, getSingleAuthorPost, getAllAuthors } from "../../ghost-client"

import Image from 'next/image';
import { notFound } from 'next/navigation';

import type { Author, PostsOrPages } from "@tryghost/content-api";



export async function generateStaticParams() {

  const allAuthor: Author[] = await getAllAuthors()


  let allAuthorItem: { slug: string }[] = []

  allAuthor.map(item => {
    allAuthorItem.push({
      slug: item.slug,
    })
  })
  return allAuthorItem

}


async function AuthorPage({ params }: { params: { slug: string }; }) {

  const getAuthor: Author = await getSingleAuthor(params.slug)

  const allAuthor: PostsOrPages = await getSingleAuthorPost(params.slug)

// Handling 404 errors
  if (allAuthor?.length === 0) {
    notFound()
  }

  return (
    <>
      "dark:bg-gray-900">
        "py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">

          " p-10 text-gray-500 sm:text-lg dark:text-gray-400">

            {
              getAuthor?.profile_image !== undefined ? 30} width={30} className="w-36 h-36 p-2 rounded-full mx-auto ring-2 ring-gray-300 dark:ring-gray-500" src={getAuthor?.profile_image} alt={getAuthor?.name} /> : ""
            }

            {
              getAuthor?.name ? "mb-4 mt-4 text-4xl tracking-tight font-bold text-center text-gray-900 dark:text-white">
                {getAuthor?.name.split(" ")[0]}
                "font-extrabold">
                  {getAuthor?.name?.split(" ")[1]}
                
              
 : ""
            }

            "mb-4 font-light text-center">{getAuthor?.bio} 


            "flex flex-wrap p-4 justify-center md:space-x-8 md:mt-0 md:text-sm md:font-medium">

              {
                (getAuthor?.website !== null) ? (
                  "block py-2 pl-3 pr-4 text-gray-700 hover:text-blue-700 dark:hover:text-blue-700 rounded md:p-0 dark:text-white" aria-current="page">
                    
                  </Link> li>) : " "


              }

              {
                (getAuthor?.twitter !== null) ? (

                  "block py-2 pl-3 pr-4 text-gray-700 rounded hover:text-blue-700 dark:hover:text-blue-700 md:p-0 dark:text-white" aria-current="page">
                    
                  
                
) : " "
              }

              {
                (getAuthor?.facebook !== null && getAuthor.facebook !== undefined) ? (
                  "block py-2 pl-3 pr-4 text-gray-700 rounded  hover:text-blue-700 dark:hover:text-blue-700 md:p-0 dark:text-white"> 
                  
                
) : " "

              }

            

          
        
      

      "Related articles" className="py-8 lg:py-24 dark:bg-gray-800">
        "px-4 mx-auto max-w-screen-xl">

          "mb-8 text-2xl font-bold text-gray-900 dark:text-white">
            More articles from {getAuthor?.name}
          

          "container my-12 mx-auto grid grid-cols-1 gap-12 md:gap-12 lg:gap-12  lg:grid-cols-3  md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4 ">

            {
              allAuthor?.map(item => )
            }

          
        
      


    
  )

}
export default AuthorPage

To generate the author slug for the static site, we need to use the generateStaticParams function. We do not need anything else to build the static site.

// ghost-client.ts


// Build Static Site 

export async function generateStaticParams() {

  const allAuthor: Author[] = await getAllAuthors()


  let allAuthorItem: { slug: string }[] = []

  allAuthor.map(item => {
    allAuthorItem.push({
      slug: item.slug,
    })
  })
  return allAuthorItem

}

How to Build Single Pages

For single pages like About, Contact, Privacy Policy, and so on, you can also create them with the Ghost Content API.

Our single-page design looks like this:

single blog page

Firstly, you need to fetch all pages and the single pages data from the Ghost Content API.

// ghost-client.tsx

// fetch all pages

export async function getSinglePage(pageSlug: string) {
  return await api.pages
    .read({
      slug: pageSlug
    })
    .catch(err => {
      console.error(err);
    });
}

// single page data 

export async function getSinglePage(pageSlug: string) {
  return await api.pages
    .read({
      slug: pageSlug
    }, { include: ["tags"] })
    .catch(err => {
      console.error(err);
    });
}

The getSinglePage(page-slug) function returns the single page data based on the page slug, and the getAllPages() function returns all the available published page data to generate the dynamic params with the generateStaticParams() function.

// src/app/pages/[slug]/page.tsx

import { getSinglePage, getAllPages } from "../../ghost-client"
import { notFound } from 'next/navigation';
import type { PostOrPage } from "@tryghost/content-api";
import "../../cards.min.css"

// genrate Static slug or params for blog

export async function generateStaticParams() {
  const pages = await getAllPages()

  return pages.map((post) => ({
    slug: post.slug,
  }));
}

async function Pages({ params }: { params: { slug: string }; }) {

// fetch single page
  const getPage = await getSinglePage(params.slug)

  // handle 404 error
  if (!getPage) {
    notFound()
  }

  return (
    <>
      "pt-8 pb-16 lg:pt-16 lg:pb-24 dark:bg-gray-900">
        "flex justify-between px-4 mx-auto max-w-screen-xl ">

          "mx-auto w-full max-w-3xl prose prose-xl prose-p:text-gray-800  dark:prose-p:text-gray-100 sm:prose-base prose-a:no-underline prose-blue dark:prose-invert">


            "mb-14 text-3xl font-extrabold leading-tight text-gray-900 lg:mb-6 lg:text-4xl dark:text-white">
              {getPage.title}
            

            

          
        
      
    
  )

}
export default Pages

How to Handle Pagination

Pagination helps speed up your site as well as divide your site into smaller parts, more digestible pages. You can link your posts with each other with prev and next.

meta:{
    pagination: { page: 1, limit: 10, pages: 2, total: 12, next: 2, prev: null }
 }

Firstly, we'll create a Pagination.tsx file as a React component.

// Pagination.tsx

import Link from "next/link"
import { Pagination } from "@tryghost/content-api"

function PaginationItem({ item }: { item: Pagination }) {

  let paginationItems = []

  for (let index = 1; index <= item?.pages; index++) {
    paginationItems.push(2} >1 ? "/" : `/pagination/${index}`} className="px-3 py-2 leading-tight bg-blue-100 hover:bg-blue-200 border-transparent border rounded-lg text-black dark:bg-gray-800 dark:text-gray-400 mx-2 dark:hover:bg-gray-700 dark:hover:text-white">
      {index}
    </Link>li>)
  }

  return (

    "pagination" className="mx-auto my-20 container">

      "mx-auto flex justify-center -space-x-px">

        
          {
            item.prev ? 1 ? "/" : `/pagination/${item.prev}`} className="px-3 py-2 mr-2 border border-transparent rounded-md  leading-tight bg-white hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400
              dark:hover:bg-gray-700 dark:hover:text-white">
              Prev
             : " "
          }
        

        {paginationItems}

        
          {
            item.next ? `/pagination/${item.next}`} className="px-3 py-2 ml-2 border border-transparent rounded-md leading-tight bg-white hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400
            dark:hover:bg-gray-700 dark:hover:text-white">
              Next
             : " "
          }
        


      

    

  )

}


export default PaginationItem

When you call the api.posts.browse({ limit: 10 }) request, the API endpoint returns ten posts and a meta object with pagination.

The returned `api.posts.browse({ limit: 10 })` data look like this:

 [
  {title: 'Demo Posts with Nextjs and Ghost Editor',... },
  {title: Trigger the hook and rebuild the nextjs site',... }

meta:{
    pagination: { page: 1, limit: 10, pages: 2, total: 12, next: 2, prev: null }
  }
]

Now based on meta, we can create pagination and pass meta.pagination as props to the Pagination component.

// src/app/page.tsx

import { getPosts } from "./ghost-client"
import Pagination from "./Pagination"

export default async function Home() {

  const getPost = await getPosts()

  const AllPostForSerach = await getSearchPosts()

  return (
    <>
     {/* rest of code  */}
      
    
  )
}

To enable dynamic pagination, we'll create a src/app/pagination/[item]/page.tsx route in the blog. You can use whatever name you want for the pagination route.

// ghost-client.tsx

// return all posts for generateStaticParams

export async function getPosts() {
  return await api.posts
    .browse({
      include: ["tags", "authors"],
      limit: 10
    })
    .catch(err => {
      throw new Error(err)
    });
}

// 
export async function getPaginationPosts(page: number) {
  return await api.posts
    .browse({
      include: ["tags", "authors"],
      limit: 10,
      page: page
    })
    .catch(err => {
      throw new Error(err)
    });
}

The getPosts is used to render the Pagination component on the pagination page. The important part is the getPaginationPosts() function, which returns posts based on the pagination page number.

// src/app/pagination/[item]/page.tsx

import { getPaginationPosts, getPosts } from "../../ghost-client"
import Card from '../../Card'
import PaginationItem from "../../Pagination"
import type { Metadata } from "next";
import type { PostsOrPages } from "@tryghost/content-api";




export async function generateStaticParams() {

  const posts:PostsOrPages = await getPosts()

  let paginationItem: { item: number }[] = []

  for (let index = 1; index <= posts?.meta.pagination.pages; index++) {
    paginationItem.push({
      item: index,
    })

  }

  return paginationItem

}



export default async function Pagination({ params }: { params: { item: string }; }) {

  let getParams: number = Number.parseInt(params.item)

  const getPost: PostsOrPages = await getPaginationPosts(getParams)

  return (
    <>

      "container my-12 mx-auto grid grid-cols-1 gap-2 md:gap-3 lg:gap-4 lg:grid-cols-3 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4">

        {
          getPost?.map(
            item => {
              return 
            })
        }
      

      

    
  )
}

Next.js SEO

If you are a blogger, you know how important SEO is in helping people find your blog and your articles. For SEO, Next.js provides a generateMetadata function to generate dynamic SEO metadata for your site. This means that you don't need any additional packages for SEO.

For the purpose of this example, I'll explain how to enable SEO for the blog only on the Homepage and the Reading page. You can use the same logic to enable it on any of your other pages.

First, let's see how to enable SEO on the Homepage:

// ghost-client.ts


// Get you settings meta data from Ghost CMS
export async function getNavigation() {
  return await api.settings.browse()
}

// src/app/page.tsx

import { getNavigation } from "./ghost-client"

export async function generateMetadata(): Promise<Metadata> {
  const Metadata = await getNavigation()
  return {
    title: Metadata.title,
    description: Metadata.description,
    keywords: ['Next.js', 'React', 'JavaScript'],
  }
}

Now we'll see how to enable SEO on the Reading page:

// ghost-client.ts


export async function getSinglePost(postSlug: string) {
  return await api.posts
    .read({
      slug: postSlug
    }, { include: ["tags", "authors"] })
    .catch(err => {
      console.error(err);
    });
}

The generateMetadata have params props, which help access the slug. Then, based on the slug, we get the data and return it.



export async function generateMetadata({ params }: { params: { slug: string }; }): Promise<Metadata> {

  const metaData: PostOrPage = await getSinglePost(params.slug)

  let tags = metaData?.tags.map(item => item.name)

  return {
    title: metaData.title,
    description: metaData.description,
    keywords: tags,
    openGraph: {
      title: metaData.title,
      description: metaData.excpet,
      url: metaData.url,
      keywords: tags,
      images: [
        {
          url: metaData.feature_image,
        },
      ],
      locale: metaData.locale,
      type: 'website',
    },
  }
}

How to Enable Search

Enabling search on a static blog is hard to do from scratch. Instead, you can use a third-party Node page like Orama or Flex search.

For our demo, we created a very simple search bar functionality without installing any additional packages.

Firstly, we get all posts from the Ghost CMS API.

// ghost-client.ts

export async function getSearchPosts() {
  return await api.posts.browse({ limit: "all"}).catch(err => {
    console.log(err)
  });

After we convert it into a string with the help of JSON.stringify(), we then create a new search.json file. On every request, it updates or rewrites our search.json file.

// src/app/page.tsx

import {  getSearchPosts } from "./ghost-client"
import * as fs from 'node:fs';



export default async function Home() {


// get All posts for search 
  const AllPostForSerach = await getSearchPosts()

  // Enable getSearch  

  try {

    const jsonString = JSON.stringify(AllPostForSerach)

    fs.writeFile('search.json', jsonString, 'utf8', err => {
      if (err) {
        console.log('Error writing file', err)
      } else {
        console.log('Successfully wrote file')
      }
    })

  } catch (error) {
    console.log('error : ', error)
  }


  return (
    <>
      "container my-12 mx-auto grid grid-cols-1 gap-2 md:gap-3 lg:gap-4 lg:grid-cols-3 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4">
      {/* rest code... */}
      
    
  )
}

When you enter the text in the search input, based on the text query, we compare the query or text in the serach.json file data. If it matches the article title with the query, then we store the searchPost variable, and finally we render the stored data in the searchPost variable page.

"use client"

import React, { useEffect, useState } from 'react';
import * as Popover from '@radix-ui/react-popover';
import { FaSearch } from "react-icons/fa";
import Link from 'next/link';
import searchData from '../../search.json'
import type { PostOrPage } from "@tryghost/content-api"


let searchPost: PostOrPage[] = []


function Search() {

  const [query, setQuery] = useState(null)

  useEffect(() => {

    searchPost.length = 0;

    searchData.map((item: PostOrPage) => {

      if (item?.title.trim().toLowerCase().includes(query?.trim().toLowerCase())) {
        searchPost.push(item)
      }

    })

  }, [query])


  return (
    
      
        
      

      

        "rounded p-2 bg-white dark:bg-gray-800 w-[480px] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
          sideOffset={5}
        >

          'my-2'>
            "default-search" className="mb-2 mt-5 text-sm font-medium text-gray-900 sr-only dark:text-white">Search bar 
            "relative">
              "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                "none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">"round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>svg>
              
              type="search" id="default-search" onChange={(event) => setQuery(event?.target.value)} className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Start searching here ..." required />

            
          


          {

            serachPost.length > 0 ? serachPost.map(item => {

              return (
                'my-3'>
                  "text-white my-2 py-2 bg-blue-400 dark:bg-gray-900 dark:hover:bg-blue-400 border-none rounded-md dark:text-white">
                    `read/${item.slug}`} className="relative inline-flex items-center rounded-lg w-full px-4 py-2 text-sm font-medium">
                      {item.title}
                    
                  
                
              )
            }) : " "

          }

        

      

    
  )
}

export default Search;

Error Handling

Next.js has two types of error handling. the first is layout-based, and the second is global error handling. For the demo here, we'll use layout-based error handling.

Next provides a special type of error.tsx file to handle errors on your site. It does not handle 404, 500, and so on – it handles only runtime errors.

'use client'; // Error components must be Client components
import React from 'react';
import { useEffect } from 'react';
import Link from 'next/link';
export default function Error({ error, reset }: { error: Error; reset: () => void; }) {

  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    "dark:bg-gray-900 my-16">

      "py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">

        "mx-auto max-w-screen-sm text-center">

          "mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500">Something wrong
          "mb-4 text-lg p-2 font-light bg-red-500 text-white dark:bg-red-400 dark:text-white">{error.message}

          'flex justify-around mt-2'>

            "#" className="inline-flex bg-gray-600 text-white hover:bg-gray-700 focus:ring-4 font-medium rounded-lg text-sm p-2
                text-center">Back to Homepage

            


          

        

      

    
  );
}

How to handle 404 errors

To handle 404 errors in the Next.js app folder, you need to create a not-found.tsx file in your root level.

Our 404 file looks like this:

404 error

Here's the code for that:

import Link from "next/link"

function NotFound() {

  return (
    "bg-white dark:bg-gray-900 my-16">
      "py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
        "mx-auto max-w-screen-sm text-center">
          "mb-4 text-7xl tracking-tight lg:text-9xl text-primary-600 dark:text-primary-500">404
          "mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white"> Something wrong
          "mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
            Sorry, we cant find that article. You will find lots to explore on the home page.
          
          "/" className="inline-flex text-white bg-black dark:bg-white dark:text-black p-3 hover:bg-gray-800 my-4">Back to Homepage
        
      
    
  )

}

export default NotFound

The big issue with the not-found.tsx error file is that it doesn't show automatically in Next (v13.3.0). To show a 404 error, you need to show the error manually. Here's how you do that:

import { notFound } from 'next/navigation';

async function Read({ params }: { params: { slug: string }; }) {

  const getPost = await getSinglePost(params.slug)

  // if not found getPost, then show 404 error

  if (!getPost) {
    notFound()
  }

  return (
      "pt-8 pb-16 lg:pt-16 lg:pb-24 dark:bg-gray-900">

          rest of code ....

      
      )
}

How to Rebuild Your Static Site with Webhooks

The biggest problem when you create a static site happens if somebody writes a new post or changes an existing post in Ghost. For a personal project, you can manually redeploy your site. But for a larger site, you won't be able to do that every time this happens.

The best solution is to use webhooks. Ghost provides webhook support. If you update an existing post or write a new one, it'll update in Ghost.

In the demo project, we're using Vercel webhooks to deploy our blog. When we create a new blog or update something on the site, Ghost triggers the Vercel webhook. Then Vercel rebuilds the site as needed.

You do not need to write the code for this – just follow along and copy-paste as you go.

How to get the webhook from Vercel

Firstly, go to the Vercel dashboard.

Vercel dashboard

Select your project, where you'll deploy your Ghost frontend.

Select the project in your Vercel dashboard

Click on the settings tab in your Vercel project.

Click the Git tab

Then click on the Git tab. After scrolling down, you can see the deploy hook selection.

Go to Deploy hooks sections

Enter your webhook name and branch name and click on the "create hook" button.

Copy your webhook url

Click on the copy button to copy your vercel webhook.

How to integrate Vercel webhooks in the Ghost dashboard

When something changes in Ghost, it triggers the Vercel webhook URL. Then Vercel redeploys the blog site.

To integrate the Vercel webhook with Ghost, just follow these steps:

Open the Ghost CMS dashboard.

Ghost dashboard

Click on the setting icon.

Ghost settings

Click on the New custom integration button.

Add a new custom integration

Enter the integration name.

Add integration name

Click to add the webhook button.

How to add the webhook

First, enter the name, then select Event and paste the URL which you copied from the Vercel dashboard.

Based on the event, Ghost will call the webhook, and your website will rebuild. Redeploys take time based on how big your site is, and so on.

Conclusion

Everything should work well using Next.js and the Ghost CMS as we've worked through in this tutorial.

But some of the Ghost editor components, like toggles, where you need JavaScript interaction, don't work. You can solve this by writing your own JavaScript or getting a JavaScript file for Ghost and adding it to the read/[slug]/page.tsx file.

You can save a lot of money on hosting by combining Next.js and the Ghost CMS API, but you lose some features like inbuilt signup, login, accounts, subscriptions, search bar, and member access levels.

You can share and follow me on Twitter and Linkedin. If you like my work, you can read more content on my blog, the officialrajdeepsingh.dev, frontend web, and Sign up for my free newsletter.

You can also check out awesome-next, a curated list of awesome Nextjs-based libraries that help build small and large-scale applications with Next.js.

Here are some additional resources you can use if you need more help or information while going through this tutorial:

https://ghost.org/docs/jamstack/next/

https://www.digitalocean.com/community/tutorials/how-to-build-your-blog-on-digitalocean-with-ghost-and-next-js

https://ghost.org/docs/content-api/

https://beta.nextjs.org/docs/getting-started

I write tons of articles on Next. If you are interested in Next and related stuff, you can follow me on Medium and join the frontend web publication.

How to Build a Table of Contents Component for Your Blog

freeCodeCamp — Fri, 03 Mar 2023 14:54:50 +0000

By Caleb Olojo

When you visit documentation sites, you'll notice that many of them have a common component: the component.

The idea behind it is to give the reader a "heads-up" about the information they're trying to consume.

This feature, in turn, helps the reader go directly to the section that includes a solution to whatever bug or issue they're facing, without reading the whole article. It contributes to a good User Experience because you end up saving your audience the hassle of extra scrolling and searching.

I have a personal blog that I dedicate a lot of my time to. And for a long time, I thought about adding this feature. It will help anyone visiting my site to enjoy their time and find what they need.

This article is a summary of my process, so you don't have to go through the issues I went through. If you're trying to add a Table of Contents feature to your blog, you can walk through it with me.

I shared a video of what the component looked like after completing it. You can take a look at it here.

How to Get Heading Text from the Frontmatter

To build a table of contents feature, I knew what I needed to do. Since the articles on my blog are written in markdown, I am just using a superset of markdown – MDX – which allows me to use React components in markdown files.

The first thing on my list was to get a way to render the heading text in a component. This way, when people clicked on the headings, the browser would scroll to that point in the article.

With HTML, you can achieve this by using the anchor tag and passing the value to an href attribute.

To have linked text pointing to a section, the ideal way of doing this would look like what's in the snippet below:

<a href="#section-one">Go to section onea>
<a href="#section-two">Go to section twoa>
<a href="#section-three">Go to section threea>

<section id="section-one">some contentsection>
<section id="section-two">yet, a content that seems weirdsection>
<section id="section-three">some content, againsection>

In the snippet above, the anchor tags are tied to the sections with respect to their id attribute in the DOM. When you click on any text, it takes you to the respective section.

With this mental model, I thought of populating the frontmatter of each article with the headings in all the articles I've written. I knew it was going to be stressful, but I went with it anyway.

For context, this is what a frontmatter in a markdown file looks like. The frontmatter contains the metadata of all articles on my blog. Details like the title, date it was published, the tags or category that the article falls into, the description, a canonical URL, and any other thing you may feel like adding to improve your article's SEO.

This pattern is common when you're building blogs with Next.js and MDX (markdown in general). It has a YAML-like syntax too.

---
id: 20
title: Building a Table of Content component
publishedAt: '2023-02-28'
excerpt: description of the article
tags:
  - ux
  - nextjs
headings:
  - heading-one
  - heading-two
  - heading-three
cover_image: /img/covers/toc.jpg
---

The snippet above is what the frontmatter of this article looks like, but with the headings entry. I'm going to use that to explain my initial approach. If I go ahead and map through the frontmatter, I'll be able to retrieve the content from the headings array.

It's great because I'll be able to use the items in the headings array in the TableOfContent component. It felt surreal, and I was elated for a minute. The component looked like this:

import React from 'react'
import { HeadingContainer } from './style/toc.styled'

export default function TableOfContents({ headings }) {
  return (
    <HeadingContainer>
      <p>In this articlep>
      <ul>
        {headings.map((item, index) => (
          <li key={index}>
            <a href={`#${item}`}>{item}a>
          li>
        ))}
      ul>
    HeadingContainer>
  )
}

The component above receives a headings prop alone, which in turn receives a value from the frontmatter through the Next.js getStaticProps() method.

export default function Blog({
  post: {
    frontmatter: { title, headings },
  },
}) {
  return (
    <>
      <Head>
        <title>{title}title>
      Head>
      <TableOfContents headings={headings} />
    
  )
}

// destructuring params to get the unique slugs
export async function getStaticProps({ params }) {
  const { slug } = params
  const { frontmatter } = await getArticleFromSlug(slug)

  return {
    props: {
      post: {
        frontmatter,
      },
    },
  }
}

If everything in the snippets above seems a bit confusing, you can take a look at this article where I wrote about the process of setting up a Next.js blog.

With that out of the way, the component rendered the list of items from the frontmatter, and it looked fine.

But, the moment I clicked on an item, hoping to be scrolled to that section, it did not work as expected. I ran into an error, which you'll see in the next section.

How to Use extract-md-headings

I realized that when I clicked on an item in the component, the browser encoded the URL of the current slug with an encoding parameter for spaces – %20% – which in turn led to the issue.

Although, I realized that it also could be the way I was referencing the heading elements in the frontmatter. But that didn't end up mattering, because I found an alternative and it worked great.

After I made sure that it worked perfectly, I went on and published that alternative as a package to the npm registery.

The package extends a function, extractHeadings(), that accepts a string, as a path, to where the markdown file is and extracts any text that matches how heading texts are written in markdown files. You can take a look at the source code here if you want to see how it works under the hood.

With this tool in my arsenal, I modified the getStaticProps method to use the function. Why? you might ask me. Well, because the package depends solely on Node's fs module, which equates to a server-side scripting approach.

With Next.js we can perform server-side operations in the pages directory with any of the data-fetching methods, getStaticProps, getStaticPaths, and getServerSideProps:

import React from 'react'
import { extractHeadings } from 'extract-md-headings'

export default function Blog({
  post: {
    fileContent,
    frontmatter: { title },
  },
}) {
  return (
    <>
      <Head>
        <title>{title}title>
      Head>
      <TableOfContents headings={fileContent} />
    
  )
}

export async function getStaticProps({ params }) {
  const { slug } = params
  const { frontmatter } = await getArticleFromSlug(slug)
  const mdxContent = extractHeadings(`/path/to/where/${slug}.mdx`)

  return {
    props: {
      post: {
        frontmatter,
        fileContent: mdxContent,
      },
    },
  }
}

The [slug].js page is now aware of the fileContent through the heading prop from the TOC component. So I need to modify it so it will accommodate the properties that the function returns.

import React from 'react'
import { HeadingContainer } from './style/toc.styled'

export default function TableOfContents({ headings }) {
  return (
    <HeadingContainer>
      <p>In this articlep>
      <ul>
        {headings.map(({ slug, title, id }) => (
          <li key={id}>
            <a href={`#${slug}`}>{title}a>
          li>
        ))}
      ul>
    HeadingContainer>
  )
}

For now, the component just renders the list of items in the array that is returned from the function, with no interactivity, no way to track which element is active, and many more things that I haven't been able to add for now.

How to Add Click and Scroll-based States

If there's anything I love about React, it is its ability to track state. I've seen how this works on other doc platforms – when you click on an item, it becomes active, when you scroll into the section where there's a heading tag, it becomes active.

A lot of people have different approaches to monitoring these states. I chose to go with the simplest one — changing the color — because, as usual, "I no like stress". The default text color in my component's UI is sorta "grey-ish", so when it is active, it becomes white.

I'll start with the snippets of the modification I made to the component with the useState hook, some DOM APIs, and the getBoundingClientRect web API. It's a lot – I know 😩. But, please stay with me, I'll try to break it down simply.

It is a common approach to have a default value — a boolean, string, or number — when we use the useState hook. In the snippet below, the component uses the headings prop to check if the length of the array isn't empty, is greater than zero, and sets the default state of the component to that of the first element.

const [active, setActive] = React.useState(
  headings.length > 0 ? headings[0].slug : ''
)

If the array is empty, no element will have the active state style. For now, if you place an onClick attribute in the list element — like I did — and pass the slug as an argument, It'll toggle the style you have written in the style attribute.

() => setActive(slug)}
  style={{
    color: active === slug ? '#fff' : '',
  }}
>
  <a href={`#${slug}`}>{title}a>

Handling the scroll state would require the use of React's useEffect hook because it contains all the lifeCycle methods — componentDidMount(), componentDidMount(), and componentWillUnmount(). Here, I decided to track the scroll state by listening to the native scroll event with the DOM EventTarget interface.

The function handleScroll below maps the result we're getting from the extractHeadings() function by destructuring the slug property from the object. It proceeds to return all the elements containing a proper id attribute with getElementById and assigns the value to headingElements.

const handleScroll = () => {
  const headingElements = headings.map(({ slug }) =>
    document.getElementById(slug)
  )
  const visibleHeadings = headingElements.filter((el) =>
    isElementInViewport(el)
  )
  if (visibleHeadings.length > 0) {
    setActive(visibleHeadings[0].id)
  }
}

Still in this function, the visibleElements is filtered from the array of headingElements, and the isElementInViewport function is used to check which heading element is currently in the viewport — this is possible with getBoundingClientRect, I'll get to that soon.

The function closes with a condition to set an active element if the length of the visible headings is greater than zero.

Now, I can go ahead to wrap this function in the Effect, initiate the cleanup of the scroll event, and pass the headings prop inside the dependency array. Then the Effect is only triggered when the headings prop changes.

React.useEffect(() => {
  const handleScroll = () => {
    const headingElements = headings.map(({ slug }) =>
      document.getElementById(slug)
    )
    const visibleHeadings = headingElements.filter((el) =>
      isElementInViewport(el)
    )
    if (visibleHeadings.length > 0) {
      setActive(visibleHeadings[0].id)
    }
  }

  document.addEventListener('scroll', handleScroll)

  // clean up the effect by removing the event listener
  return () => {
    document.removeEventListener('scroll', handleScroll)
  }
}, [headings])

isElementInViewport is the cherry on top of this feature. The function accepts an element, el as an argument, and it checks if its bounding rectangle (this sorta proves the box principle on the web to be correct, again) is inside the viewport of the browser.

const isElementInViewport = (el) => {
  const rect = el.getBoundingClientRect()
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  )
}

This is possible because of the getBoundingClientRect web API. The method returns an object containing the coordinates of the top, left, bottom and right edges of the element relative to the viewport.

When getBoundingClientRect is called, it returns an object containing the coordinates of the top, left, bottom, and right edges of a particular heading element relative to the viewport.

In the context of this feature, the element that is relative to the viewport is the heading element which is being retrieved using the getElementById method.

The function returns true if the top and left coordinates are greater than or equal to zero, and the bottom and right coordinates are less than or equal to the height and width of the viewport, respectively.

For the function to return true, we'd have to get the value of the viewport's height and width. That's why it is convenient to compare these values with window.innerHeight and window.innerWidth or documentElement.clientHeight and documentElement.clientWidth.

Why the Stress? IntersectionObserver Fixes This Issue

I know that going the intersectionObserver route would've saved me a lot of stress. But, I chose this approach nonetheless, because I wanted to understand the inner workings of how this feature is built by other people.

I think there's an intersection observer package that you can use to monitor scroll events in React applications, too. So you may not even need to go this route. But I want to share some of the reasons I decided to use this API, instead of the IntersectionObserver.

In terms of Accuracy, getBoundingClientRect returns a more accurate position of the element relative to the viewport, while IntersectionObserver uses an approximation based on the element's bounding box.

This means that getBoundingClientRect can be more precise for certain use cases, such as when you need to trigger an action as soon as the element enters the viewport — just like we're changing the active state of the list item in the component.

In terms of Browser compatibility, IntersectionObserver is a relatively new API, and its support by other browsers may not be available. But, getBoundingClientRect on the other hand is widely supported by modern browsers.

One advantage that IntersectionObserver has over getBoundingClientRect is in terms of performance. This is because the API uses an optimized algorithm that minimizes the amount of work needed to detect the changes in the intersection state when you are tracking so many elements.

The getBoundingClientRect API cannot handle so many elements.

Wrapping Up

I know that a lot of people would still prefer to use intersectionObserver. But, I decided to go with this other approach because it opened my eyes to how intersectionObserver itself works under the hood, and most importantly, it suited my use case.

This is what the logic of the TOC component looks like — without the markup. Copy it and use it if you want.

import React from 'react'
import { HeadingContainer } from './style/toc.styled'

const TableOfContents = ({ headings }) => {
  const [active, setActive] = React.useState(
    headings.length > 0 ? headings[0].slug : ''
  )

  React.useEffect(() => {
    const handleScroll = () => {
      const headingElements = headings.map(({ slug }) =>
        document.getElementById(slug)
      )
      const visibleHeadings = headingElements.filter((el) =>
        isElementInViewport(el)
      )
      if (visibleHeadings.length > 0) {
        setActive(visibleHeadings[0].id)
      }
    }

    document.addEventListener('scroll', handleScroll)
    return () => {
      document.removeEventListener('scroll', handleScroll)
    }
  }, [headings])

  const isElementInViewport = (el) => {
    const rect = el.getBoundingClientRect()
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <=
        (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    )
  }

  return // component markup
}

export default TableOfContents

If you read up to this point, please share this article. Thanks as you do so. You can also read up on the getBoundingClientRect() web API if you want to get an in-depth understanding

How to Add Categories to a Ruby on Rails Application

freeCodeCamp — Wed, 01 Mar 2023 23:31:16 +0000

By Sampurna Chapagain

Creating a category page is essential for most web applications these days. Different kinds of applications like blogs, ecommerce sites, movie streaming platforms, and many others have category features.

This article will show how to add categories to Ruby on Rails applications.

This is a beginner-friendly tutorial, so you can follow along even if you have very basic Ruby on Rails knowledge.

How to Generate the Blog Scaffold

Let's first create a new Rails project. Here, we will be using Rails version 6.1.7 and Ruby version 3.0. You can create the new Rails project using the command below:

rails new blog_categories

Now, let's create the new blog scaffold using the following command:

rails g scaffold blogs title:string description:text

This command will create all the necessary files for us to work with the blog's CRUD operations with two database fields title and description. Here, the title is the string field and the description is the text field.

You now need to run the migration with the rails db:migrate command.

Now, head up to your terminal, start the server, and visit the /blogs page. You can see the following result on the browser.

creating blogs

How to Generate the Categories Scaffold

Now, we have come to the main part of the tutorial which is to add categories to our blog articles.

For that, let's create the categories scaffold now with the command below:

rails g scaffold categories name:string

This command will create CRUD for the categories.

Also, you will need to run rails db:migrate to update the schema.

How to add an association between the blog and category models

Next, you need to add an association between the blog and category models.

In Blog.rb:

class Blog < ApplicationRecord
    belongs_to :category
end

And in `Category.rb`:

```ruby
class Category < ApplicationRecord
    has_many :blogs
end


Now, you need to add the `category_id` to the `blogs` table since each blog is associated with a category. You can go to your terminal and add the following migration:

```ruby
rails g migration add_category_id_to_blogs

This will create a new migration. You need to add the following code in this migration file:

add_column :blogs, :category_id, :integer

Rails has its own set of conventions and rules. And it's smart enough to recognize that this migration is to add a new database column named category_id to the blogs table.

You now need to pass category_id as a strong parameter in the blogs controller.

def blog_params
    params.require(:blog).permit(:title, :content, :category_id)
end

Now, let's create a few categories from the browser.

creating categories from the browser

You could also add some validation while creating category. For that, you can update the category.rb file with the following code:

```ruby class Category < ApplicationRecord validates :name, presence: true, uniqueness: true has_many :blogs end

This will add few validations as shown in the GIF below:

adding validations while creating categories

Now that you can create both blogs and categories, you'll need to display all categories as a dropdown when someone visits the new blog page.

The code for that is shown below:

```ruby

<%= form.label :category %> <%= form.select :category_id, options_for_select(Category.all.map { |category| [category.name, category.id]})%>

The select tag creates the dropdown selection box. The options_for_select takes a few arguments.

First, it maps through all categories and returns an array of [c.category, c.id]. The category name gets displayed as a dropdown and the category id of any category the user selects gets passed to the controller. The controller then performs the database insertion for blogs.

You can go to the new blogs URL and create blogs with categories.

creating blogs with categories

Listing each category's blogs

The next part of this tutorial will show you how to list all categories and all blogs associated with each category. We will be displaying this on the categories index page.

For that, you need to add some code in the categories index view.

```ruby

<%= notice %>

Name	Blogs
<%= category.name %>	<%= blog.title %>

How to Build a Custom Ghost CMS Theme

Rajdeep Singh — Wed, 04 Jan 2023 15:20:24 +0000

Ghost CMS is a platform specifically designed for bloggers and writers. Using Ghost, you can quickly get a blog website up and running.

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:

Open-source
Membership support
Rich text editor (Koenig editor)
Newsletters
Email subscriber support
Login functionality support
Integration plugin
Analytics dashboard
Inbuilt comment support
Inbuilt search support
Inbuilt search functionality
SEO and different types of metadata support social media
Custom theme design

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

Here's what we'll cover:

Self-Hosting vs Hosting with Ghost
What Are the Drawbacks of Ghost?
How to Install the Ghost CMS
Understanding the Ghost Folder Structure
Understanding the Ghost Theme Folder Structure
How to Create a New Theme with the npm CLI Tool
How to Create a New Ghost Theme from Scratch
How to Install ghost-cli Globally
How to install Ghost locally
How to Configure Tailwind CSS
Other Important Commands in the Ghost CLI
How to Write the Code for Our Custom Ghost Theme
How to add theme configuration in package.json
How to Use Theme Helpers
What is the Partials Folder?
How to Create a Default Page
How to Create an Index Page
How to Create a Posts Page
How to Create Information Pages
How to Create an Author Page
How to Create a Tags Page
How to Create an Error Page
How to Enable Comments
How to Set Up Search
Conclusion

Self-hosting vs Hosting with Ghost

Ghost provides two ways to create/host your website:

Self-hosting
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:

Windows, Linux, and macOS
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:

https://github.com/officialrajdeepsingh/ghostthemewithdocker

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:

The config.development.json file contains the configuration for Ghost development.
The current folder is a link (symbolic link) that targets the install version.
The version folder contains all versions of Ghost cms.
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:

The data folder contains an SQLite3 database file. Ghost, by default, uses the SQLite3 database.
Files, images, and media folders contain all files which writers upload.
The public folder contains all public CSS and JavaScript files – for example, card and member JavaScript and CSS files.
Finally, the settings folder contains all the settings, for example, the router.xml file.
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:

index.hbs in the main file (required) to design the home page of the website.
post.hbs the file (required) is used to read and design the full article.
package.json file (required) is used for Node.js config, and it also uses the theme name, description, version, custom config, and so on.
The default.hbs file is used to build the layout of the theme.
The assets folder contains all the JavaScript, CSS, fonts, and image files.
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:

How to install Ghost-cli globally
How to configure Tailwind CSS
How to understand more commands in the Ghost CLI
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:


    {{!-- link production ready css file  --}}

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:

ghost stop
ghost ls
ghost doctor
ghost uninstall
ghost version
ghost restart
ghost update
ghost version
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:

How to add theme configuration in package.json [required]
How to use theme helpers
What is the partials folder?
How to create a default page
How to create an index page [required]
How to create a posts page [required]
How to create informational page
How to create a tags page
How to set up comments
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:






    

    {{!-- link production ready css file  --}}
    
   {{!-- ghost header --}}
      {{ghost_head}}






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

    

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

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

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

Let's see what's going on here:

{{meta_title}} provides the title from the website.
The @site is a global variable and you can access a title with {{@site.title}}.
Include a Ghost {{ghost_head}} in the head tag.
Include a Ghost {{ghost_foot}} in the footer tag.
Inserted all other templates with the {{{body}}} tag in index.hbs, post.hbs, and so on.
All other templates get inserted in index.hbs, post.hbs, and so on.
Include dynamic CSS classes with {{body_class}} in the tag
Add footer partials in the default {{> footer}} file
Add header partials in default {{> header}} file
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"}}

 
    {{reading_time}}
 

{{/contentFor}}

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

    {{> ads}}

{{/match}}



    

    
        
             {{title}} 
        
        
            {{excerpt}}
        
    

    
    {{> authors}}



    
    {{> featureImage}}


    
    
        {{content}}
    







    {{!-- 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}}


    Read more


{{!-- 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"}}

    
        {{reading_time}}
    
    {{/contentFor}}

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

        {{> ads}}

    {{/match}}

    

        
        
            
                {{title}}
            
            
                {{excerpt}}
            
        

        
        {{> authors}}


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



        
        
            {{content}}
        



    


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

        {{> ads}}

    {{/match}}

    {{/post}}

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}}



    

         {{name}} 

        {{#if bio}}
            
                {{bio}}
            
        {{/if}}

        

            {{location}}

               {{#if facebook}}

                    
                        

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

                        
                    

                {{/if}}
                {{#if twitter}} 
                    
                        

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

                        
                    
                {{/if}}
                {{#if website}} 
                    
                        

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

                        
                    
                {{/if}}
        
    



{{!--  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}}

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}}
        class=" text-gray-600 text-xl xs:text-xl sm:text-xl md:text-1xl xl:text-2xl 2xl:text-2xl">
            {{description}}       
        
    {{/if}}




{{!--  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}} 
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>

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:


    
        Before comment read our term and condition 
    
    

   {{!--  Enable comment on theme --}}
       {{comments}}

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 --}}

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.

How to Create a Static Markdown Blog with Deno and Deploy It

Rajdeep Singh — Tue, 13 Sep 2022 16:46:28 +0000

Deno is a runtime for JavaScript and TypeScript. The creator of Node.js built it, and while Node is built with C and C++, Deno is built with the Rust language.

You might be wondering what some of the main differences between Node and Deno are. Well, Rust is a low-level language similar to C and Java. It helps make Deno super fast, and Deno is also more secure than Node.

In this article, we will build a static markdown blog with Deno in less than five minutes. In the end, we'll deploy the markdown blog with Deno deploy.

We'll use Deno's third-party blog package created by Ryan Dahl and another contributor for the blog

With the Deno blog module, you can create a fantastic blazing-fast blog. Then you can set up and deploy the blog with two lines of code. And it takes less than five minutes to configure it.

What is markdown?

Markdown is a lightweight markup language. It helps create consistently formatted text. To start working in markdown, you need an IDE that supports markdown and you'll need to create a file with a .md extension. Markdown typically supports written documents, blogs, and so on.

Some examples of documents written in Markdown are GitHub and npm READMEs, the React.js, and many more.

The Deno blog module (Package) comes with markdown support and lets you create a static blog. This module comes with lots of features, like:

Markdown support.
Auto refresh. Any change in a markdown file automatically builds and reloads your website in the browser.
You can customize the header and add comments and a footer section.
It supports SEO, SEO markup, and an inbuilt feed (sitemap).
iFrames support with markdown files.
It has built-in Preact, TypeScript, and Tailwind CSS support.
It allows multiple authors
It has middleware and redirects pathname support
It comes with server-side Google Analytics support

Here's a demo of the blog we'll build and deploy:

deno blog demo

All the code is available on GitHub.

Here are the steps we'll follow:

How to install and setup the blog
How to understand the folder structure
How to start the local developer server
How to add more configuration to the blog.
How to deploy with Deno

How to Install and Setup the Blog

First, you'll need to install the Deno blog module. The blog module comes with the init command to create a new blog setup. It looks like this:

deno run -r --allow-read --allow-write https://deno.land/x/blog/init.ts my-deno-demo-blog-name

Create a blog setup with the deno blog module

How to Understand the Folder Structure

The beauty of Deno is that you only need a few files to start a project. For the markdown blog, you need only four files:

deno folder structure

Let's go through each file in the above folder structure:

In the deno.jsonc file you add tasks and the importMap file. Tasks are similar to scripts in Node, and in the importMap section, you pass a JSON file that contains all your import packages from Deno.
The import_map.json file contains imports of all packages which you need to run your project.
The posts folder contains all markdown files.
The main.tsx file contains all configurations for the blog module.

How to Start the Local Developer Server

After installation is complete, run the local development server with the deno task dev command.

Run deno local development server

How to Add More Configuration to the Blog

The blog module default comes with the following configuration in the main.tsx file. You can easily change blog configurations according to your requirements.

// main.tsx

import blog, { ga, redirects, h } from "blog";

blog({
  title: "My Blog",
  description: "This is my new blog.",
  // header: Your custom header
,
  // section: Your custom section
,
  // footer: Your custom footer
,
  avatar: "https://deno-avatar.deno.dev/avatar/blog.svg",
  avatarClass: "rounded-full",
  author: "An author",

  // middlewares: [

    // If you want to set up Google Analytics, paste your GA key here.
    // ga("UA-XXXXXXXX-X"),

    // If you want to provide some redirections, you can specify them here,
    // pathname specified in a key will redirect to pathname in the value.
    // redirects({
    //  "/hello_world.html": "/hello_world",
    // }),

  // ]
});

Custom configuration

Demo of custom configuration

With custom configuration, you can make your website look however you want – even like the example above. In addition, you can quickly add more custom configurations to your blog.

For example, you can change the default header, footer, title, author, theme, custom style, links, section, and so on. Here's some code to do that:

// main.tsx

/** @jsx h */
import blog, { h } from "blog";
import { Section } from './components/Section.jsx';

blog({
  author: "Rajdeep singh",
  title: "Hello, my name is Rajdeep Singh",
  description: "Nice to meet you",
  avatar:"assets/logos/profile.jpg",
  avatarClass: "rounded-full",
  coverTextColor:"white",
  links: [
    { title: "Email", url: "mailto:officialrajdeepsingh@gmail.com" },
    { title: "GitHub", url: "https://github.com/officialrajdeepsingh" },
    { title: "Twitter", url: "https://twitter.com/Official_R_deep" },
    { title: "Linkedin", url: "https://www.linkedin.com/in/officalrajdeepsingh/" },
  ],
  lang: "en",
  favicon: "favicon.ico",
  section: <Section/>,
  theme:"auto",
  cover:"assets/logos/backgroundbanner.png",
  ogImage: {
    url: "http://localhost:8000/assets/logos/Frame.png",
    twitterCard:  "summary_large_image" 
  },
  style:".markdown-body ul, .markdown-body ol { list-style: disc !important;}"
});

Markdown files support various types of frontMatter. The most common and widely used fontMatter types are:

YAML: YAML is identified by opening and closing ---.
JSON: JSON is identified by '{' and '}'.
TOML: TOML is identified by opening and closing +++.

The most common frontMatter is YAML. The YAML frontMatter support markdown file is everywhere. But the Deno blog module only supports yml frontMatter.

yml front matter example

The Markdown file is divided into two sections. The first section is the header (frontMatter), and the second is the body section.

The header section contains all metadata for the article. All the metadata is written inside three dashes (---) both opening and closing – for example, post title, tag, description, publish date, and so on.

Finally, in the body section, you write your article body and explain it.

// hello-world.md

---
author : "Rajdeep Singh"
publish_date : "2020-11-10T11:42:46Z"
description : "Easy Ways Add CSS in Next.js #SeriesPart2"
og:image : "assets/images/next.js-add-css-code.jpg"
tags : ["Next.js", "Next", "Next.js Framework", "Next.js Tutorial", "React.js", "react.js tutorial"]
title : "How To Add CSS In Next js?"
allow_iframes: true
cover_html: <img src="assets/images/next.js-add-css-code.jpg" alt="How To Add CSS In Next js" />
pathname: "hello-world"
---

First blog post created with the Deno blog package. It is an amazing package you can use to create markdown blogs with Tailwind CSS. 

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/3NR9Spj0DmQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>iframe>


```javascript
console.log("hello world")


The Deno blog module supports the following YML FrontMatter fields in a markdown file:

1. author (string): The `author` contains the names of the authors. For example, `author : "Rajdeep singh , deno"`
2. publish_date(Date):  The `publish_date` is required for the article.
3. description (string): The `description` is required for the description.
4. og:image(string): The `og:image` is not required. It is used for ``
5. tags(string[]): The `tags` are just keywords used for SEO. They're not compulsory.
6. title(string): The `title` is required for the heading.
7. allow_iframes( boolean ): the `allow_iframes` allows you to use `iframe` HTML.
8. pathname( string ): pathname is not required. For example, `http://yourdomain.com/hello-world` after your domain `hello-world` is your pathname
9. cover_html(string): The `cover_html` contains the HTML for the blog.

author : "Rajdeep Singh , Rajvinder singh" publish_date : "2022-03-20T13:09:24Z" description : "Npm install command help to install package from npmjs.org" og:image : "assets/images/npm-init-command-1.png" tags : ["npm-test", "npm-cli", "npm install command"] title : "What is the npm install command?" allow_iframes: true pathname:"/how-is-npm-install-command" cover_html:


These are all the supported fields by YML frontMatter for markdown files:

title, author, publish_date, description, og:image, tags, allow_iframes, pathname, cover_html


This is the required field for markdown files:

title ```

Without a title filed, the blog module produces an error Uncaught TypeError: Cannot read properties of undefined (reading 'snippet').

Error: Uncaught TypeError: Cannot read properties of undefined (reading 'snippet')

How to Deploy Your Blog with Deno

The final step is to deploy our static blog in Deno. Currently, the Deno blog module only supports Deno for deployment. But Deno deploy provides a similar interface to Netlify and Vercel. So you can easily understand the dashboard if you've worked with those tools before.

To deploy a new blog on Deno, you need two things. The first is an account on Deno deploy, and the second is a GitHub account. With a GitHub repository to help manage your articles, it is a straightforward process similar to Vercel and Netlify.

Deployment steps:

Here are the steps to deploy your blog with Deno deploy (we'll go through each one in detail below):

First, login to your account on Deno deploy
Click to create a new project
Configure the GitHub repository and environment variables
Deploy the static blog

First, go to the Deno deploy website and create a new account if you don't have one already. If you do, then login to your account.

deno deploy website

Click to create a new project

After successfully logging in, you can now access the Deno dashboard and click on the "+ new project" button.

Create a new project with deno deploy

Configure the GitHub repository and environment variables

After clicking on the new project button, you'll be redirected to the project configuration page. Your project page will look like the below. Just fill in all the details:

Fill out your new project configuration and link to GitHub

The first time click the GitHub button. After that, Deno deploys and asks for permission for a GitHub account. After granting all the permissions, your project page looks like this:

After finishing the information

After opening the project page, you fill in all the required information.
Then, in the second step, select the GitHub repository.
After selecting the GitHub repository, select a branch, then choose main.tsx file.
Give any project name, but make sure you name is in lowercase letters – for example, my-new-website. Otherwise, you'll get a capital case error.
Click on the environment variable and add an environment (if you have one - otherwise, skip it).

And that's it - you've done all the configuration successfully. Now click on the link button.

Deployment is finished

After deployment is finished, you'll see the website dashboard. Click on the view button to view your production-ready website.

Your website dashboard with deno looks like this after successful website deployment.

Here's a tip to help you manage all your markdown files and speed up your written work. The VS Code code editor has a free, open-source FrontMatter VS Code extension. It's a great tool to manage all your markdown files inside VS Code with the FrontMatter dashboard.

Manage markdown files with VS Code extension

Conclusion

The Deno blog module is an excellent library for creating a personal blog in five minutes and deploying it with Deno. Deno deployment is speedy. It takes less than ten seconds.

I think the Deno blog module is best for personal use because you do not need to customize many things. You only customize the header, footer, and various sections.

Thank you for reading!

References to help you setup your blog:

How to Use GitHub Discussions as Your Blog's Chat System

freeCodeCamp — Fri, 13 May 2022 15:48:14 +0000

By Rakesh Potnuru

If you have a personal blog, you might be using a comment system to manage your blog's discussions and comments. If so, it's time to think about updating your comment system.

You can take your blog's comments to the next level with the help of GitHub Discussions. In this article, I am going to explain how to integrate GitHub discussions into your blog and make most out of it.

What is "GitHub Discussions"?

GitHub Discussions

GitHub discussions is a forum that can be enabled on every GitHub repository. It makes it easy for developers to discuss new features, get feedback from the community, create polls, make announcements, and more.

GitHub Discussions is a one stop collaboration place for developers and community members.

How to Use GitHub Discussions as Chat System

To integrate GitHub Discussions into your blog, we are going to use giscus.

giscus

giscus is a GitHub Discussions-powered comment system. It lets you integrate discussions from your repository into your blog.

Your readers can leave comments on your blog, which will appear on both the blog and the discussions page of your repo.

Advantages of using Discussions as your blog chat system

It's completely free
There are no ads or tracking
It's super powerful
You have complete control over comments and full moderation authority.
There are lots of themes
It's quite customizable
You can self-host on your own servers

Just keep in mind that this tool is mainly suited for dev blogs because mostly developers use GitHub.

How to Integrate giscus in Your Blog

Prerequisites

A blog (you must have access to the source code)
A GitHub account
Your selected repository must be public

First, you'll need to enable discussions for your repo.

Go to the repo Settings -> Under the Features section -> Check the Discussions box.

Discussions enabled

Next, install the giscus app in your repo.

Go to https://github.com/apps/giscus, follow the prompts, and give access to only the selected repo.

Repository access

Now the important part: we need to configure the giscus widget.

First, go to giscus homepage and scroll to Configuration section.

Select your widget language. This is the language in which you want to display your widget.

Selecting language

Then type your repo name along with your username like username/reponame.

Typing repository name along with username

For Page ↔️ Discussions Mapping, I would recommended choosing "Discussion title contains page URL". But depending upon your needs choose the one that best suits you.

Page ↔️ Discussions Mapping

Next, create a category in your discussions page on your GitHub repo – something like "Comments" – or choose existing category.

Creating a discussion category

Choosing a category

Then enable the optional Features if you want.

Next, select the theme. And don't worry – you can programmatically toggle different themes.

Finally, copy and paste in the generated code.

Giscus will generate a script tag based on your settings, which you can paste into your code. But we will see how to use the giscus component.

How to use giscus-component

If your blog is built with React/Vue/Svelte or Web components then you can install the giscus component.

For example, to integrate giscus in React, do the following:

Install the giscus package.

npm i @giscus/react

or

yarn add $giscus/react

Then import giscus in your component and use it. Copy the attributes which we got in the last step, remove data- from all the attributes, and covert attributes into valid jsx attributes.

import Giscus from '@giscus/react';

export default function MyApp() {
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="Announcements"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

It's basically the same procedure for other frameworks.

Here's the Final Result

This is how the whole thing works:

Final result

Conclusion

In this article, we learnt the benefits of using GitHub discussions as a chat system. We also learned how to create and integrate the giscus widget in our website.

I hope you found this helpful. Make sure to ⭐ the giscus GitHub repo to support them.

Follow me on Twitter where I share random tips, resources, and my learnings around web development and technical writing.

How to Build Your Own Blog with Next.js and MDX

freeCodeCamp — Thu, 21 Apr 2022 02:28:29 +0000

By Caleb Olojo

When I decided to build my blog, I found many tools out there that were readily available. I looked at Gastby along with content management systems like Ghost, Contentful, Sanity dot io, and HUGO.

But I needed something that I could have total control over. I've also always been someone who loves the flexibility of writing own my custom code. When I do this, I can conveniently go back to where any issues might be when a problem arises.

Gatsby provides this flexibility, and it is something I could get familiar with pretty easily since it's built on a library I use every day (React.js). But, I found out that I can do the exact same thing with Next.js by integrating MDX.

"What is MDX?" You might ask me.

Well... MDX is more or less like the markdown files we always see in GitHub repositories. MDX brings this flexibility into a markdown file by allowing you to literally write or import JavaScript (React) components into your articles. This in turn saves you from writing repetitive code.

In this article, I am going to show you how I built my blog with these tools, so you can also try building something similar. You'll like this simple stack if you are a person who loves the flexibility that this approach brings.

So, sit tight, and let's get started.

How to Start Building – My Trial and Error

To build a blog with Next.js and MDX, there are four popular options that you can choose from.

They are:

@next/mdx, which is the official tool built by the Next.js team
Kent C. Dodds' mdx-bundler
next-mdx-remote, which is a tool built by the Hashicorp team
next-mdx-enhanced, which is a tool also built by Hashicorp (I honestly don't know why they decided to build two)

At first, I started by using Kent's mdx-bundler, but then I ran into a lot of problems with the tool. It is a library that is based on the new ECMAScript standards that allow us to create ESModules in the browser, and I was using a very old version of Next.js (V10.1.3, my bad honestly, I didn't know any better).

I did a lot of downgrading and upgrading of Next.js to fix this problem to no avail. There was a certain error that stuck with me, and refused to go away for days. Yes, for days! I felt like crying during that period. Take a look at the error below:

module not found: can't resolve 'builtin-modules'

Apparently, for mdx-bundler to work, it needs another npm package called esbuild to do the necessary compiling processes that work under the hood.

npm i mdx-bundler esbuild

Luckily for me — at least I thought I was lucky — Cody Brunner submitted an issue about this particular error. Going through the discussions on the issue, a lot of possible fixes were suggested, some of them were related to Webpack, modifying your next.config.js file, and whatnot.

module.exports = {
  future: {
    // Opt-in to webpack@5
    webpack5: true,
  },
  reactStrictMode: true,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (!isServer) {
      // https://github.com/vercel/next.js/issues/7755
      config.resolve = {
        ...config.resolve,
        fallback: {
          ...config.resolve.fallback,
          child_process: false,
          fs: false,
          'builtin-modules': false,
          worker_threads: false,
        },
      }
    }

    return config
  },
}

In the snippet above, it shows that Webpack5 was still a feature that was in progress for Next.js – hence the snippet below in the config:

future: {
  webpack5: true
}

But, now the latest version of Next.js supports Webpack5 by default, so there's no need to add that object — if it works for you — in the config.

After going through the discussions, I found a comment (by Kent) that says running npm update would fix the issue, and it did work for Cody Brunner. But not for me apparently.

When I couldn't find a possible fix to this error, I decided to use next-mdx-remote, and the only issue I faced was the breaking change that was added to the tool. Before version 3 of next-mdx-remote you would normally render parsed markdown content by doing the following:

import renderToString from 'next-mdx-remote/render-to-string'
import hydrate from 'next-mdx-remote/hydrate'
import Test from '../components/test'

export default function TestPage({ source }) {
  const content = hydrate(source, { components })

  return <div className="content">{content}div>
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = 'Some **mdx** text, with a component '
  const mdxSource = await renderToString(source, { components })

  return {
    props: {
      source: mdxSource,
    },
  }
}

The breaking change that was added in version 3 of the package stripped off a lot of internal code that was perceived to cause poor experiences for people who were using it at that time.

The team went on to announce the reason behind this change and the major changes. Take a look at them below.

This release includes a full rewrite of the internals of next-mdx-remote to make it faster, lighter-weight, and behave more predictably! The migration should be fairly quick for most use-cases, but it will require some manual changes. Thanks to our community for testing out this release and providing early feedback. heart.

Major changes to next-mdx-remote:

renderToString has been replaced with serialize
hydrate has been replaced with
Removed provider configuration. React context usage should now work
without additional effort.
Content will now hydrate immediately by default
Dropped support for IE11 by default

With this new change, the previous implementation will now become:

import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

import { Test, Image, CodeBlock } from '../components/'

const components = { Test }

export default function TestPage({ source }) {
  return (
    <div className="content">
      <MDXRemote {...source} components={{ Test, Image, CodeBlock }} />
    div>
  )
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = 'Some **mdx** text, with a component '
  const mdxSource = await serialize(source)

  return {
    props: {
      source: mdxSource,
    },
  }
}

How to Build the Blog

In the previous section, I walked you through some of the issues I encountered while I was choosing a suitable tool to use.

In this section, we're going to cover how you can build a similar blog like mine.

We'll start by creating a Next.js app with the command below:

npx create-next-app blog

The command above will give you a boilerplate of a typical Next.js app. For the sake of brevity, I'll be focusing more on the pages and src/utils folders of this app.

|--pages
|   |-- blog
|   |   |-- index.js
|   |   |-- [slug].js
|   |-- _app.js
|   |-- index.js
|--src
|   |-- utils
|        |-- mdx.js
|--data
|   |-- articles
|        |-- example-post.mdx
|        |-- example-post2.mdx

In a typical blog, we'd need to write blog posts or articles. In this blog, we're using markdown (MDX) to write our articles, which is why you can see that we have two .mdx files inside the data/articles directory. You can have more than that, as far as the number of articles you want to write goes.

How to Read the Markdown (MDX) Files

In this section, we're going to start by writing some reusable functions inside src/utils/mdx.js.

The functions we're writing here will be using Node.js' FileSystem API. We'll be calling the functions at the server-side in the pages folder because Next.js has some data-fetching methods that runs on the server.

Let's start by installing the dependencies that we need for now. As we progress, we'll be adding other dependencies:

npm install gray-matter reading-time next-mdx-remote glob dayjs

The command above will get all packages listed above as dependencies in our blog project.

gray-matter will parse the content in the .mdx files to readable HTML content.

reading-time assigns an approximate time to read a blog post or article based on the word count.

next-mdx-remote does the background compilation of the MDX files by allowing them to be loaded within Next.js' getStaticProps or getServerSideProps data-fetching method, and hydrated properly on the client.

glob gives us access to match the file patterns in data/articles, which we'll be using as the slug of the article.

dayjs is a JavaScript library that helps to parse, manipulate, validate, and display dates that we would be adding to the metadata of each article.

We've seen the basic functions of the packages we installed. Now let's start writing the functions that'll read the files in the articles directory.

import path from 'path'
import fs from 'fs'
import matter from 'gray-matter'
import readingTime from 'reading-time'
import { sync } from 'glob'

const articlesPath = path.join(process.cwd(), 'data/articles')

export async function getSlug() {
  const paths = sync(`${articlesPath}/*.mdx`)

  return paths.map((path) => {
    // holds the paths to the directory of the article
    const pathContent = path.split('/')
    const fileName = pathContent[pathContent.length - 1]
    const [slug, _extension] = fileName.split('.')

    return slug
  })
}

In the snippet above, we've imported the Node.js FileSystem from its module and the other packages. The first variable declaration, articlesPath, holds the path to where all the articles can be found.

const articlesPath = path.join(process.cwd(), 'data/articles')

We're using the path module to get access to where the articles are by tapping into the process API of Node.js which gives us direct access to the cwd() (Current Working Directory) object.

The getSlug function will get a unique article when it's clicked by the user
on the blog page. You'll see that we're referencing the articlesPath variable that was declared before, and we're passing it to the sync function of the glob package. This will in turn match any file that has the .mdx extension, and give us an array with a list of these files.

const paths = sync(`${articlesPath}/*.mdx`)

With that being said, we'll return an array of modified file names. The pathContent variable holds the path to all the articles in the articles directory, so we're using JavaScript to remove all the "forward-slashes" with the split() method of JavaScript.

const fileName = pathContent[pathContent.length - 1]
const [slug, _extension] = fileName.split('.')

The fileName variable declaration gets the last part of path, say for example "/data/articles/example-post.mdx", since it is an array, and returns the last part which is /example-post.mdx. The next variable goes on to remove the period (.) from the filename itself, so we'll be left with example-post as the slug.

How to Parse Article Content from the Slug

The next function gets and parses the content in our MDX files from the slugs. It returns an object of metadata that we'll be using as we progress.

export async function getArticleFromSlug(slug) {
  const articleDir = path.join(articlesPath, `${slug}.mdx`)
  const source = fs.readFileSync(articleDir)
  const { content, data } = matter(source)

  return {
    content,
    frontmatter: {
      slug,
      excerpt: data.excerpt,
      title: data.title,
      publishedAt: data.publishedAt,
      readingTime: readingTime(source).text,
      ...data,
    },
  }
}

In the snippet above, we're using Node.js' readFileSync function from the FileSystem API to read the files in the articleDir in a synchronous manner.

What we're doing with this function — readFileSync — is telling Node to stop other processes that are currently going on, and perform this operation for us.

You can learn more about it here if you want to.

If you go ahead and console.log(source) in your terminal, you'll get a — which isn't readable — data type in your console.

This is where the gray-matter package comes to save the day. It helps in parsing the markdown content in the source to something — readable HTML — that you and I can understand.

Here, we're destructuring content and data variables, assigning it to the matter package (which parses the source) and returns an object that holds our content and frontmatter: data variables:

const { content, data } = matter(source)

return {
  content,
  frontmatter: {
    slug,
    excerpt: data.excerpt,
    title: data.title,
    publishedAt: data.publishedAt,
    readingTime: readingTime(source).text,
    ...data,
  },
}

We need a way to display all the articles on the blog page. The function below does that for us, by utilizing the reduce() method of JavaScript to return an array of all the articles in the articles directory.

export async function getAllArticles() {
  const articles = fs.readdirSync(path.join(process.cwd(), 'data/articles'))

  return articles.reduce((allArticles, articleSlug) => {
    // get parsed data from mdx files in the "articles" dir
    const source = fs.readFileSync(
      path.join(process.cwd(), 'data/articles', articleSlug),
      'utf-8'
    )
    const { data } = matter(source)

    return [
      {
        ...data,
        slug: articleSlug.replace('.mdx', ''),
        readingTime: readingTime(source).text,
      },
      ...allArticles,
    ]
  }, [])
}

You can see how we're using readdirSync() to synchronously read all the files inside data/articles. The source variable can be accessed by reading all the files with their respective slugs and getting their content parsed with the gray-matter package.

const source = fs.readFileSync(
  path.join(process.cwd(), 'data/articles', articleSlug),
  'utf-8'
)
const { data } = matter(source)

If you take a look at the snippet below, you'll see how we're using the reading-time package to get the approximate time it will take to read this article. We get the slug that will be attached to this article by stripping the last part of the article — blog/example-post.mdx — and replacing it with an empty string. This makes it accessible via "blog/example-post".

{
  slug: articleSlug.replace('.mdx', ''),
  readingTime: readingTime(source).text,
}

The readingTime has some methods that you can assign to it, one of them is the text method. You can try removing this value, saving your code, and allowing Next.js to throw an error, so you can get a glimpse of the values that you can use.

How to Display a List of Articles

In the previous sections, we have seen how we can use the Node.js FileSystem API and a couple of other tools to get access to where all our articles are.

In this section, we'll be displaying the articles on a webpage.

We'll start with the index file in the blog folder. In this file, we'll be using the data-fetching method — getStaticProps — to render the articles on the page.

import { getAllArticles } from '../../src/utils/mdx'

export async function getStaticProps() {
  const articles = await getAllArticles()

  articles
    .map((article) => article.data)
    .sort((a, b) => {
      if (a.data.publishedAt > b.data.publishedAt) return 1
      if (a.data.publishedAt < b.data.publishedAt) return -1

      return 0
    })

  return {
    props: {
      posts: articles.reverse(),
    },
  }
}

In the snippet above, we imported the getAllArticles function and used it in the data-fetching method of Next.js.

You'll notice how we're sorting the articles based on the date they were published. We'll eventually map the list of articles that will be returned as props to the index (blog) page.

articles
  .map((article) => article.data)
  .sort((a, b) => {
    if (a.data.publishedAt > b.data.publishedAt) return 1
    if (a.data.publishedAt < b.data.publishedAt) return -1

    return 0
  })

Lest I forget, this is how the content of your typical article file will look in markdown syntax below:

---
title: 'Next.js Image optimization error on Netlify'
publishedAt: '2022-04-16'
excerpt: 'Next.js has a built-in Image component that comes with a lot of performance optimization features when you are using it.'
cover_image: 'path/to/where/image/is/stored'
---

rest of the content falls here

You may ask me, "why do we need to sort the articles by date if we can just use the reverse() method to re-order the array of articles?".

I think it is appropriate for us to sort the list of articles by comparing them with the date they were published and still apply the reverse method to the array.

Say, for example, we forget to add the published dates to the articles. Then the reverse() method will just perform the operation on the array without comparing the dates in a LIFO — Last-In-First-Out — pattern, if the sort function is missing. So it is better to sort the articles and still reverse the content of the array.

Now that we've returned the list of articles as props we can go ahead to map them onto the page.

import React from 'react'
import Head from 'next/head'
import Link from "next/link"
import { getAllArticles } from '../../src/utils/mdx'

export default function BlogPage({ posts }) {
  return (
    <React.Fragment>
      <Head>
        <title>My Blogtitle>
      Head>
      <div>
        {posts.map((frontMatter) => {
          return (
            <Link href={`/blog/${frontMatter.slug}`} passHref>
              <div>
                <h1 className="title">{frontMatter.title}h1>
                <p className="summary">{frontMatter.excerpt}p>
                <p className="date">
                  {dayjs(frontMatter.publishedAt).format('MMMM D, YYYY')} —{' '}
                  {frontMatter.readingTime}
                p>
              div>
            Link>
          )
        })}
      div>
    React.Fragment>
  )
}

export async function getStaticProps() {
  ...
}

In the snippet above, we're using the Link component to route the user to a dynamic page with the unique article's slug. This is the reason we created a file called [slug].js, if you can recall. It is a dynamic route, and you can read more about it here.

How to Display a Unique Article

In the last section, we were able to render the list of articles onto the webpage. In this section, we'll be rendering a unique article that gets clicked on by the user in a new route.

We're also going to be using a tool called rehype to customize what our blog post will look like. Rehype is an HTML pre-processor that is powered by plugins. We'll be using some of these plugins in this section, so let's install them now.

npm i rehype-highlight rehype-autolink-headings rehype-code-titles rehype-slug

rehype-highlight allows us to add syntax highlighting to our code blocks.

rehype-autolink-headings is a plugin that adds links to headings from h1 to h6.

rehype-code-titles adds language/file titles to your code.

rehype-slug is a plugin that adds an id attributes to headings.

Now that we've seen the roles that each plugin carries out, let's start working on the [slug].js file. In this file, we'll be using two data-fetching methods of Next.js — getStaticProps and getStaticPaths.

We're using these two methods because we'll be fetching data (articles) that are unique to the path (slugs) that the user is redirected to.

// dynamically generate the slugs for each article(s)
export async function getStaticPaths() {
  // getting all paths of each article as an array of
  // objects with their unique slugs
  const paths = (await getSlug()).map((slug) => ({ params: { slug } }))

  return {
    paths,
    // in situations where you try to access a path
    // that does not exist. it'll return a 404 page
    fallback: false,
  }
}

When you take a look at the snippet above, you'll see that we're obtaining the list of paths from the articles, and mapping that list of items (paths) to an array. This can be accessed with the params variable in the getStaticProps data-fetching method.

import { getArticleFromSlug } from "../../src/utils/mdx"

export async function getStaticProps({ params }) {
  //fetch the particular file based on the slug
  const { slug } = params
  const { content, frontmatter } = await getArticleFromSlug(slug)

  const mdxSource = await serialize(content, {
    mdxOptions: {
      rehypePlugins: [
        rehypeSlug,
        [
          rehypeAutolinkHeadings,
          {
            properties: { className: ['anchor'] },
          },
          { behaviour: 'wrap' },
        ],
        rehypeHighlight,
        rehypeCodeTitles,
      ],
    },
  })

  return {
    props: {
      post: {
        source: mdxSource,
        frontmatter,
      },
    },
  }
}`

In the snippet above, we're destructuring content and frontmatter — which is the metadata of the article — and assigning it to the getArticleFromSlug function which receives the slug of the article as an argument.

We continued by serializing the content of the article with next-mdx-remote's serialize() function, and pass the necessary rehype plugins in the mdxOptions object:

const mdxSource = await serialize(content, {
  mdxOptions: {
    rehypePlugins: [
      rehypeSlug,
      [
        rehypeAutolinkHeadings,
        {
          properties: { className: ['anchor'] },
        },
        { behaviour: 'wrap' },
      ],
      rehypeHighlight,
      rehypeCodeTitles,
    ],
  },
})

To wrap it up, we return the content of the article and the frontmatter as props that'll be accessed by the slug component.

return {
  props: {
    post: {
      source: mdxSource,
      frontmatter,
    },
  },
}

The props that we returned in the previous snippets can be accessed via the component below.

You'll notice that the component receives the {...source} and custom React component props that we can use in our MDX files. This eradicates the process of having to write repetitive code over and over.

import dayjs from 'dayjs'
import React from 'react'
import Head from 'next/head'
import Image from 'next/image'
import rehypeSlug from 'rehype-slug'
import { MDXRemote } from 'next-mdx-remote'
import rehypeHighlight from 'rehype-highlight'
import rehypeCodeTitles from 'rehype-code-titles'
import { serialize } from 'next-mdx-remote/serialize'
import 'highlight.js/styles/atom-one-dark-reasonable.css'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import { getSlug, getArticleFromSlug } from '../../src/utils/mdx'
import { SectionTitle, Text } from '../../data/components/mdx-components'

export default function Blog({ post: { source, frontmatter } }) {
  return (
    <React.Fragment>
      <Head>
        <title>{frontmatter.title} | My blogtitle>
      Head>
      <div className="article-container">
        <h1 className="article-title">{frontmatter.title}h1>
        <p className="publish-date">
          {dayjs(frontmatter.publishedAt).format('MMMM D, YYYY')} —{' '}
          {frontmatter.readingTime}
        p>
        <div className="content">
          <MDXRemote {...source} components={{ Image, SectionTitle, Text }} />
        div>
      div>
    React.Fragment>
  )
}

In the snippet above, you'll notice how we destructured the post props into { source, frontmatter }. So instead of doing this, in the component below we can just spread the source variable directly as a prop.

Notice how we're also dynamically rendering the title of the page with the title of the article instead of the normal title? This is gotten from the frontmatter.


  <title>{frontmatter.title} | My blogtitle>

Final Thoughts

Every developer loves having their fancy themes applied to their editors. So we're not going to leave this out in this blog.

I'm currently using the "atom-one-dark-reasonable" theme for my syntax highlighting. You can import it from the "highlight.js" library — since the rehype-highlight plugin uses it under the hood — like this:

import 'highlight.js/styles/atom-one-dark-reasonable.css'

There are a lot of other themes here, so you can choose any that you're comfortable with.

You might have noticed while reading this article that there are some components like the one in the image below – and you may have been wondering how it was created.

You can decide to have a lot of custom MDX components that you can use in your articles. But, I decided to target any element that I want to style in this article by assigning a generic className to it. So whenever I want to use it, I just reference that style in the element.

SEO is one of the important things when it comes to building a blog, and luckily for us, Next.js already has that covered for us. You can take a look at this article that walks you through How to add SEO Meta tags in your Next.js apps and How I fixed a meta tag pre-rendering error in Next.js

There is an important thing that you must not forget, and that is the next.config.js file. You need to make sure that it is properly set up so you can avoid one of the version compatibility errors of the latest version of React — v18.0.0 — with next-mdx-remote.

Although the Hashicorp team said they've fixed this in their latest release, it didn't work for me. A way to bypass this error is to install next-mdx-remote as a legacy peer dependency, like so:

npm i next-mdx-remote --legacy-peer-deps

And make sure to have a next.config file that looks like what you're seeing below.

module.exports = {
  reactStrictMode: true,

  images: {
    loader: 'akamai',
    path: '',
  },

  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react/jsx-runtime.js': require.resolve('react/jsx-runtime'),
    }

    config.resolve = {
      ...config.resolve,

      fallback: {
        ...config.resolve.fallback,
        child_process: false,
        fs: false,
        // 'builtin-modules': false,
        // worker_threads: false,
      },
    }

    return config
  },
}

The resolve.alias object in the config above helps as a workaround in fixing the error below

What to do if you get a server error

Error: Package subpath "./jsx-runtime.js" is not defined by "exports" in "path-to-node_modules/react/package.json"

Sometimes you may also encounter an error that has to do with the "builtin" modules of Node.js while you're deploying your project. The config.resolve object with the fallback key helps in removing that error.

You'll notice that there's an image object in the config.

  images: {
    loader: 'akamai',
    path: '',
  },

Its role is to ensure that the proper image optimization process is used during the build process. You can take a look at an article I wrote about how you can fix the Next.js image optimization error on Netlify

Thank you so much for reading this article. I hope you found it helpful.

How to Choose a CMS – WordPress vs Ghost vs Shopify

Edan Ben-Atar — Wed, 02 Feb 2022 17:05:13 +0000

WordPress, Shopify, and Ghost are some of the most powerful and popular CMS platforms out there.

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.

How to Start a Blog [Free 70-Page Book]

Flavio Copes — Mon, 11 Oct 2021 17:21:00 +0000

What follows is a full-length book on how to create a successful blog.

I am a software developer and I've written 1,500 posts on my blog over the past few years. Millions of people have read my writing. And my blog is now one of the top 20,000 websites on earth (according to Amazon's Alexa website ranking tool).

In this book, we will not focus on the "how to install WordPress" aspect of blogging. We will also not discuss how to build your own blogging software. (That's a fun exercise, but not as important as what I'd like to discuss.)

This book will instead focus on developing the right mindset. It will also show you how to get systems in place so that you can run your blog over a long period of time.

The hard part of blogging is doing it sustainably. How do you blog in such a way that you can publish consistently? How do you become a household name in your field? How do you hold your audience's attention over time?

A lot of bloggers struggle with these challenges. There are so many blogs out there with 1 or 2 posts. Or the last post is from 2018 saying "Sorry I haven't published for a long time." With planning and execution, you can prevent this from happening to your blog.

Also, you may be wondering how relevant blogging is in the 2020s. After all, YouTube, TikTok, and Instagram get a lot of headlines in the news. Well I'm here to tell you that blogs are still powerful when it comes to content marketing and getting organic traffic from Google.

The main goal of the book (and yes, you can read the book in its entirety here) is to help you get started with blogging in the right way. So grab a beverage and a comfortable chair. And bookmark this page so you can come back and review, in case you can't finish it in one sitting.

And if you prefer, you can download a PDF and ePub version of this How to Start a Blog book here.

Framing your blog for success
The benefits of having a successful blog
Pick a goal for your blog
Own your platform
Make the first step
Solutions to common problems
Content is king
Practical content suggestions
Create a system
How to get people to your blog
Expand your reach with an email list
Ups and downs
Making money with a blog
Final words

Framing your blog for success

People communicate and share information over the internet. We use it to look for help. Maybe we try to find the perfect recipe for dinner or the best book we should read this month.

A blog is a tiny website, made by one or a handful of people, with the goal of creating information that will help people.

On this blog, you will write posts. A post is a single page of the website containing some information.

The concept of a blog I'll talk about in this book is different from a diary, where you write about everyday things as they happen. That is something you can definitely do, but it's not what I'll be talking about here.

By blog, I mean a personal site, or a product/company site, where you regularly produce interesting content that can be beneficial to other people.

You want people to be able to find the solution to their problem on your blog.

I want to highlight this point because it's central. Your blog should be useful to other people. Without this fundamental concept, your blog has no reason to exist.

Why a blog does matter

Blogs are the fundamental building block of today's internet. Think about it: we have giant corporations that create walled gardens that people are constantly drawn to, like Facebook, YouTube, Instagram, and Twitter.

Those are places that are engineered get you addicted so that you consume, debate, consume, debate, consume. And if you are in the lucky 1‰, you will be one of the stars of those walled gardens, and you will profit from other people consuming, debating, consuming, debating, consuming.

What are those people consuming? Well, aside from the content, they're consuming their time.

With notable exceptions, much of the content created and shared on the internet isn't useful.

But a blog is one of those rare places on the Internet where you can create something of value without a giant corporation benefitting from your work. You are the owner of your little corner of the world.

I'll soon tell you more about the "own your platform" concept, but here's the gist: a blog matters because it's 100% yours.

Is blogging still relevant?

This is a legit question. Is blogging still relevant in today's world, dominated by social media and big platforms?

Can the underdog still find some space on the Internet? Don't we have too many sites already?

First, we'll never have too many sites. There's less than 1 person creating content for every 100 people. This is a rule for all media consumption: there are ~100 TV or radio stations in a country with 100 million people. Same for newspapers.

The same goes for the Internet. If you start creating, and you do your job well, eventually your content will surface and you will have success. Whatever success means to you.

This is possible with videos on YouTube, podcasts, and blogs, of course.

So why should you start a blog instead of making videos? It's a choice. We can't all be good at making videos, and we can't all have a voice made for podcasts. Similarly, we can't all be good at writing.

But if you happen to enjoy writing and you like the idea of having your own little corner on the Internet, then creating a blog might be what you are looking for.

Should I have a personal blog or a company/product blog?

If you are a freelancer, working solo, or you are a solopreneur, a company of one, you might have a tough decision ahead: should you create a personal blog or a company blog?

There's a big distinction in this. In my opinion, a personal blog is way better because companies and projects come and go. You might sell your company in 3 years.

Your personal brand, however, will stick with you wherever you go. The advantage I find in a personal brand is that you have the ability to experiment and pivot, if necessary.

If you create a brand that's too tied to a product or area, you can't switch without changing the name and domain, so it can be very confusing to people and it's very hard to make it work nicely.

And most likely you'll have a hard time finding a good idea, at first, so it’s always good to have more than one option. That way you don't have to start from zero.

Why a blog and not videos or podcasts?

In the last few years, videos and podcasts have grown tremendously.

Videos, in particular, are very popular. Kids want to become YouTubers when they grow up.

Both videos and podcasts are awesome. I watch YouTube every day and I am subscribed to several podcasts, too.

There's one thing I noticed about those platforms, however. Podcasts are very hard to discover. I only discover new podcasts if I see one mentioned somewhere. Or by word of mouth.

And in addition to having great content, as a podcast owner, a person's voice tone is a differentiating factor that makes me like a podcast or not. You are either born with a great podcasting voice, or you're not.

With videos, it's the same thing. A creator's personality is a unique differentiating factor in a great YouTube channel.

Plus, videos, if made well, require a huge effort in time, energy and equipment you need.

A blog, on the other hand, is something you can make no matter who you are, as long as you can write. You don't need to have that uniqueness that makes you liked on YouTube, and you are not trapped on one platform (YouTube). You also have a great channel for organic discovery of your blog posts (Google). More on this later.

But you don't have to choose one over the other, of course.

Many times creators use a blog alongside a YouTube channel, or a podcast. This is helpful if you use it more than just to cross-post content from one channel to another, but as a complementary tool.

When done well, it's a powerful combination.

Define who your blog's readers are

A blog that's successful and useful to other people is a blog that has a readership in mind.

I'm sure you've stumbled upon those blogs or sites that talk about a little bit of everything.

It all seems very random, and you don't find a reason for coming back to that site, so you forget about it.

If you happen to visit a website that talks just about your favorite topic, you might save it for later in your bookmarks, or leave the tab open to go back to it later.

This happens because the owner of the site is not just writing about everything that comes to mind: they have a specific kind of person they are talking to.

And this is what you should do, as well. Carefully define the kind of person you want to talk to with your blog.

You have to pick a niche.

How to Pick a Blogging Niche

Picking a niche is how you can define what your little corner of the internet will be all about.

It can be all about you, your hobbies, passions, and stories. But then not many people will find it very useful. Maybe one post can solve their problems, but will they ever come back? Probably not.

Because your blog's not about you, it's about your readers.

Pick a niche. A small subject.

Say you're a programmer. You can write a blog about the C++ programming language, write 2 posts a week, and never run out of topics for 20 years. It's probably even a niche that's too broad, not much of a niche.

A better niche would be C++ programming for embedded devices. Or using C++ to build games.

Then filter out this group of people a little bit more. Using C++ to build a 2D game engine.

You can write about that for years, too, but this time if a person is interested in this subject, they will bookmark the site and download everything they can because you are the expert (or at least more of an expert than they are) and they can get a lot of value from you.

Blogging is a a marathon, not a sprint

I want to give you another concept that will frame your blog for success: it’s not a sprint, it's a marathon.

As with everything in life, creating a successful blog takes time.

Creating a blog, per se, is a matter of hours if not minutes. This is why everyone can start a blog.

But creating a successful blog, depending on what you consider "success", can take years, and not many people welcome this fact with joy.

People like immediate, fast success. It almost never happens, unless you are very lucky.

Consider blogging to be your marathon.

The benefits of having a successful blog

We all have limited time to dedicate to our hobbies, families, and friends. So why should you set aside a number of hours every week to work on your blog? And it's not just a few hours here and there. If you want the blog to be successful, you have to dedicate a lot of time.

As with everything in life, you have to evaluate the pros and cons.

Let's analyze the benefits.

Personal satisfaction and gratification

First, blogging gives you personal satisfaction and gratification.

Many people like to build puzzles or to do crosswords during their free time. Or they like to tinker with woodworking or electronic gadgets.

Writing on your blog can give you the same feeling.

Plus, it gives you a sense of accomplishment.

Writing a blog post can be easy sometimes.

Other times it's really hard, maybe because of the subject, or maybe because you can't find your way through your writing.

But when you finally finish it, it's a really good feeling.

You can get your name out

Another thing that a blog can give you is discoverability.

When people search your name on Google, if you write under your own name people will find your blog as the first result. This gives a great impression at a job interview, for example.

And even if you are currently employed, having a blog is like an extension of your personal brand that can help you be perceived as a more knowledgeable person.

It's like writing a book. A book that no one reads is one thing – but writing a successful book that is read by many people is a completely different thing.

Blogs follow the same rule. Some blogs are not very popular, maybe due to the subject or other factors (we'll see more about this later). But some blogs are successful, and others are wildly successful.

You can get in touch with more people

By writing on your blog, you can publish things that are read by people all around the world, and your work can possibly help them achieve what they want.

Not only this is great for personal satisfaction and fulfillment. It's also a great way to be perceived as an expert in your field.

And the more people you can reach and impact, the better it is for you (and them!).

A blog is your platform

Your platform, your launchpad. In today's world, there's just too much noise.

We are bombarded with information from every medium, and it's really hard, as a creator, to stand out.

A blog can be a great starting point for your next project, your next adventure, your next (or first) company. It's yours.

The goal of any product is to be used by people.

Lots of people, possibly. Not everything can "change the world" Silicon Valley-style, but your little project, product, or service can have a big impact on a tiny slice of the people it targets.

But the first steps are always hard, including finding a good idea.

Your blog can be the way you find the initial users for something that you find worth creating.

Put the idea out there. See how people react to it.

You can become an active part of the community

In every community, there is a small number of people that lead, a slightly bigger number of people that contribute, and a larger number of people following.

Think about the community you are in. The 1%, or 0.1%, work on the "core". They organize an event, build a software project, host a podcast, work on a product. Another 9% will participate and be an active part of the community around it. 90% of the people will just consume.

As a blogger, even if you're not in the 1% that lead, because you don't want that responsibility or power or you can't make the commitment, you can still contribute. You can add your input, and be heard in a world that is eager for people that want to stand out.

Write about that thing you are so enthusiastic about. Create a helpful resource. People will be really grateful for that. Including the 1% or 0.1% that lead but that do not have time, resources, or will to create those resources.

A notable example is Jeffrey Way. He created Laracasts to build training screencasts for Laravel, a programming framework that was gaining traction.

He’s now an integral part of the framework ecosystem and a driving force for its popularity.

Pick a goal for your blog

You can start a blog for multiple reasons. No one has the same ambitions, the same drive, or the same starting point.

You want to get a job

One goal for a blog might be to help to get your first job.

Suppose you are getting ready for your first rounds of interviews as a Junior Frontend Developer. As you are learning the technology and experimenting, maybe following an online course, you document everything you are learning.

I think this is great for 3 reasons:

you reinforce your learning
you build up an online presence
you get better at documenting and explaining technology

As you approach the interview and send out applications, companies will see that you have a website. They'll find that you are great at explaining technology, you know how to communicate, and you definitely know your stuff.

And this is a great advantage over any other job applicant that does not have a website.

You want to get a raise or a better job

If you already have a job, you might want to step up your career and get better pay, or switch to another niche in the field you are interested in.

Having a blog that positions you as an expert in the thing you want to work on is definitely a big plus.

You can leverage your blog at your current company to reposition yourself as a senior developer.

Your colleagues will look up to you and your writing and will perceive you as an authority in the field.

You want to get better/more clients

If you are not interested in getting a job and prefer being the independent freelancer with a queue of prospect clients lined up, blogging can be a game-changer for you.

I experienced this first-hand when I started my career in tech.

I started my career by finding work on freelancing sites. It was hard to compete with freelancers all around the world who were much more experienced than I was in many cases. And sometimes they were located in a lower cost of living area, which allowed them to provide the same service at a fraction of my rates.

I started a blog about the subject I was specializing on, an open-source CMS, written in Italian, my own language, and people from Italy slowly started to perceive me as an expert. They were more than willing to pay a premium to work with a person that spoke their language, worked in their timezone, and was one of the few experts in the field in the country.

My blog was key to this because people searched for topics they knew they needed help with – and they found me.

At some point, I was even able to turn down client proposals because I had too many requests. I could choose the ones that I believed were better for my business and more interesting to me.

You want to demonstrate your expertise

A common benefit to either getting a job or freelancing clients is this: a blog helps you demonstrate your expertise and expose what you know to other people.

Some people are more naturally inclined to show off their abilities.

Sometimes, depending on culture and perception, we can even think of them as more capable than what they really are.

Some other people are less inclined, perhaps because of introversion or shyness.

Blogging is a great way to demonstrate your expertise even if you're not naturally inclined to raise your hand in public. This is because it's a medium that has very low friction compared to, for example, creating videos that show your face on YouTube.

You want to document your learning

A great goal for your blog could be to document your learning. Perhaps being more competitive in the job market is not something you are interested in right now, or you just want to write about your hobby.

A blog is a great track record for everything you learn.

I have a terrible memory, for example, and sometimes I just create a blog post to remember how I made something work.

I used to write notes on an app on my computer, but now I default to blog posts because I realized I can help other people by publishing my notes on the Internet.

You want to structure your thoughts and learn more

The way I used to learn best back in school was by creating very detailed notes about a subject.

However I only made them for subjects I was interested in, which in retrospect explains why I was good in some classes and bad in others.

You can use your blog as a way to learn better.

I am a huge proponent of learning through blogging because it works.

I use blogging as a way to learn a subject and at the same time help other people.

When I write a new blog post I am forced to create a mind map of the subject and I try to frame it, before writing about it.

In this way I learn much more than I do when I read a book or watch a course without taking organized notes about it. And as a side benefit, I end up with a new blog post I can publish.

You want to become better at explaining things

A great benefit of blogging is that over time you'll become better at explaining things.

You will take fewer things for granted, and you'll think more from the point of view of the person who is listening to you, rather than just writing a bunch of words to be perceived as an expert.

This will help you tremendously in your career and as a person.

You want to grow your audience

A great benefit of having your own blog is that over time you'll start to build an audience.

As with many things, the more time you dedicate to it, the more your audience will likely grow.

People might get to know you. Recognize your name. You will not become famous (except in rare cases), but this might not be what you want, either.

That's not what an audience is for. And honestly, I see many developers raise an eyebrow when marketing subjects come into play.

An audience is a great place to test your ideas. An audience can help you figure out something. An audience is your group of people, the people that trust you and that can help you move to the next level.

You want to express yourself

A blog does not need to be a means to an end.

My favorite blogs are the ones that are playgrounds for creativity and expression. Especially when applied to programming and computers in general.

A blog is a great way to have a track record of all your past creative projects.

Your own centralized creative hub.

Own your platform

Your blog is the operational center for your future. Your platform, your headquarters. Everything else should bring you to your site.

Your Facebook page, YouTube channel, Twitter, Medium, your guest posts on other blogs, and the content you stream – all are tools to connect people with the content of your site on the Internet.

The website can be made with any technology you want. It does not really matter, provided that it’s on a domain that you own, and that you can change as desired.

You should have complete freedom over it: you have to be able to contact your users whenever you want, you must be able to extract all the data from this platform. Also, whenever you want to, you should be able to move away to a different platform with all your content.

Lastly, you do not have to be at the mercy of other people decisions.

The platforms of other people

There are many ways to sell online. For each type of product, there are a number of options, and while sometimes you can sell things in the way you want, sometimes you need to work with a platform managed by someone else.

For example, if you sell digital books, you will, of course, sell them on Amazon Kindle, which probably represents 80% of the market.

Do you sell physical products? In addition to your own e-commerce, you will want to sell them on Amazon too, as it’s a huge market opportunity.

Do you make mobile apps? You will need to sell them on the App Store if you target Apple users, or on Google Play for Android.

Here, in some of these examples, it is clear that sometimes you have choices and sometimes you have to take a mandatory road to actually sell something.

You can’t distribute iPhone apps through your site. If you build desktop applications for Mac, on the other hand, this is possible, but you might also want to join the Mac App Store, which in this case is optional. Apple sets the rules, but it gives you some visibility that you would not get without being in the App Store.

All these great distribution systems such as the App Store, Amazon, Kindle, and many others like Etsy or Alibaba, are platforms. Other people’s platforms.

Benefits of using a platform managed by other people

There are, of course, benefits to using a platform managed by other people. It provides a virtually limitless user base, customers visiting the platform already have an account, and in many cases they just need to press the buy button.

In general, not managing your own platform saves you worry about having to manage a huge number of things.

Disadvantages of using a platform managed by other people

But there are disadvantages of using a platform, as well. You have to comply with the rules the owners impose, and the customers are not yours – they are the platform's customers. So you might struggle to create a relationship with your customers.

You also have little room for your branding, as everything could change from one day to the next. In some cases you have little control over your prices, and you'll have to pay commission to the platform for each sale you make.

The platform sets the rules

A platform is not just the place where people turn into customers, but it is also the place where you can find and interact with them. Facebook, Instagram, and Twitter are platforms, phenomenal platforms, but still platforms built by others.

A few years ago, having a Facebook page with 10,000 fans and writing a message on the page was enough to show this message to a vast percentage of those people. Unfortunately, this has changed today because the Facebook platform has changed. Now we are lucky if we reach 10% of our audience.

The only way to reach more people who like your page is to sponsor posts. So you have to pay Facebook to communicate with your own fans: this is an example of what it means to build on another property.

This is not to say that you should not have a Facebook page, that you don’t have to invest in Facebook Ads, or that you do not have to interact with people on Twitter.

You should do these things if you're trying to build an audience. The market imposes them on you, because you find people in these places. But always try to use these large containers to find people and bring them to you.

And it's important to always have a way out of a platform, and not to be completely dependent on it.

To do this, you have to push users to come to you through all the channels you can take advantage of.

You have to create your own platform.

Use your own domain name

Your domain name is very important. I use my own name for the domain: flaviocopes.com.

Your domain is like your address.

Except that a real-world address changes when you move somewhere else.

Your domain, on the other hand, is yours forever, regardless of your physical location. Like your email address.

When you publish things on your own website, under your own domain name, you are building virtual real estate and generating value that can last for years if not decades.

The way things work for search engines, now and for the foreseeable future, is that quality links pointing to your website make the domain more valuable.

If you publish under a domain name that's not yours, you are effectively working for other people, in exchange for something that might appear convenient for you, like a nice way to create the first page.

But if you take the time and put in some work beforehand to set up your own site and get your own domain, it can pay you a lot more in the future.

Make the first step

The first step is always the hardest. In anything you want to do. Running. Coding. Cooking. Blogging.

In this chapter, I want to make sure you are well equipped for your first step when you’re ready to dive into blogging.

Pick a domain name

There is one very important thing you need to do before you can create your blog. You need to choose a domain name.

You can notice 3 patterns for domain names. People have their own name/surname combination like I do with flaviocopes.com. Some people like to have a fantasy name or their nickname. Totally fine, too.

If it's cool and you can create a brand out of it, it's great. Like codinghorror.com. Other people like to have a more general brand, like css-tricks.com.

The good aspect of this is that people know the content of the blog just by looking at the domain. The downside is that you are kind of forced to stick to that topic forever.

For example, css-tricks.com has long stopped talking exclusively about CSS, and other topics like JavaScript, SVG and others are very often covered.

This is kind of controversial, but I think your own name, or brand name with no direct attachment to anything specific, is the best and most future-proof way to create a domain name.

With one caveat: if you use your own name, you'll never be able to sell the site to someone else, or transform it into something "more" than just yourself with some guest posts here and there. But there are notable exceptions as well, like raywenderlich.com.

If you create a specific domain name that reminds people of a technology or hobby in particular, on the plus side you'll be able to sell it when it's successful to a bigger brand.

I started posting on my blog frequently by talking about the Go programming language. I later switched to a completely different programming language, JavaScript.

But because I used my own name and domain, I did not have to change anything. If I had a domain name like startprogrammingingo.com or something similar, there's no way I could've just switched to talking about JavaScript, or Arduino.

The whole project would have sunk because the day I stopped my work on Go, the site would just end its life with that very specific domain.

Since I use my own name for the domain, whatever I want to write about 10 or 20 years from now will be perfectly fine.

If you already have a domain, maybe used in old projects, and you think it can work fine, that's even better.

Domain Authority

There's something called domain authority that is really important. Because that's how Google determines your site's value, and it's fundamental in how Google ranks web pages in its results.

One factor in domain authority is the domain's age. Older is more stable and more trustworthy to Google.

And when you're creating your domain, try to get the longest expiration date you can. That's a factor, too. Google basically detects your seriousness with the project. If your domain expires in 3 years and a competitor's in 3 days, maybe your domain is better in the long term.

I mean, we can't really know how the Google algorithms work, but we can try and make sure we tick all the checkboxes.

That can make the difference between a site that's never visited, and one that gets 10 visitors a day. Or one that gets a few hundred visits a day to one that gets tens of thousands.

Choose a blogging software (don't build it!)

I personally use Hugo to power my blog. It is built using Go, it is very fast, and has some limitations on the things you can do. This means I can avoid distractions and I can focus on the writing.

I see many people, especially developers, who start creating their own blogging software from scratch.

I think that this a bad idea.

Why?

Because the moment you start is the time that you have the most energy. There will not be another moment in the lifetime of your blog where you'll have the same enthusiasm and drive to work on it.

And if you channel this energy towards something so futile, in this case, like building the software, then when it's time to actually write the content you'll have very little time, very little energy, and very little drive to craft great content.

Plus, you'll have to work on bugs, handle updates, and more, on your own. It's much easier to let others work on maintaining popular software used by thousands of people rather than reinventing the wheel.

Choose a minimalistic stock design

The second mistake, I think, is to work on the design before working on the content.

Just as developers like to build their own software, design-oriented people want to create their own design. It's logical, I get it. But in this scenario, at the beginning, it's just a distraction.

My suggestion is: pick a stock theme, the simplest you can find.

The more minimal the theme is, the better.

Remember to keep the focus on the content. Not on the blog engine, not on the theme, not on plugins...on the content.

I have a couple blogs built using the default Ghost theme, which look very professional. In the niche they are built in no one knows what Ghost is – let alone do they know that it's the default theme.

Also, no one cares. Except you.

You can work on the design later on. There's always time for that.

Create the first 3 posts

Right after you have your blog idea, write the first 3 posts. You can write them in a normal plain text editor, and move them later to the blog platform you chose.

I like to use Bear (https://bear.app) to create my drafts. It autosaves, it is beautiful and intuitive to use. But it does not really matter. The thing I want you to focus on is those 3 posts.

Why exactly 3 posts?

Because now that you are so pumped to create your blog, it's the easiest time to write 3 great posts. If you create only one, maybe the second will be deferred until tomorrow, then to the day after.. and you'll be left with a blog with a single post.

Two posts... kinda the same. 3 posts seem like a good number to me.

Once you have those 3 posts, it's time to publish them. My advice, in this case, is not to publish them all together at the same time. Instead, you should schedule them.

Schedule the first 3 posts in advance

I've had several people ask me how can I be so consistent with my blogging. The best suggestion I have is to create a habit. Habits are a very hip and popular topic nowadays, with many books published on the subject.

I'm not an expert, but I noticed that once a habit is established, it's really hard to break it.

Use this little hack to force yourself to write blog posts. Once you decide your perfect schedule (twice a week, once a week, twice a month, once a month...) then schedule the 3 posts you wrote so that you make a little buffer.

Suppose you write once a week. Publish the first post immediately, the second next week, the third the following week.

Now, you can relax and have a little party because you can launch the blog. Plus, you already have content written for the next 2 weeks and you can start planning other posts.

All the other posts you will write will be queued after the posts you wrote in the beginning.

Don't be tempted to add a new post in the middle of your planned schedule: there will be times when you can't write due to limited time, or you will have a low energy week. The buffer will be helpful to keep a consistent publishing schedule.

One thing that is key here is this: once the schedule gets full enough and you can look back at a long streak of posts, all very consistent in their publishing date, and you will start to feel a little pressure to not break the streak.

Transform this little pressure into a positive push towards staying consistent. If you have a weekly publishing routine, at the end of the year you will have 52 blog posts written, which would be a major accomplishment.

Keep going this way

If you do the things I mentioned in this chapter and you just keep going, you will have 99% more success with your blog than anyone else.

Solutions to common problems

Who am I to write about this?

Let's say you are a student. By writing about the subject you are studying, you can reinforce your learning. Writing things down forces you to learn it really well.

Put your ego in chains: people don't care about you. People care about solving their problems. At least on their first point of contact with you, opinions, politics and controversial statements are detrimental to the user experience.

I don't know enough of the subject

You don't need to be an expert.

When I write a technical blog post, it does not really matter if I'm an expert at it. On the contrary, if I'm an expert in a field and I'm trying to write an introductory or beginner-friendly topic, I might not be able to explain that topic very well. This is because I cannot think like a beginner might when they don't know a topic, and so I might assume too many things and not explain that topic well.

If you're not an expert, do your best to absorb a topic and explain it to people that don't know about it. If you're an expert, on the other hand, writing content for other experts might be a good approach. Then you can mostly leave the entry-level content to people that might be in a position to explain it better.

Analysis paralysis

Just get it out there. Publishing a piece of content is much better than keeping it for months, revisiting it, thinking and thinking about it. Just do it.

It's ok to plan, but make sure you don't get trapped by analysis paralysis. The longer you think about it, the longer it will take you to start. Focus that energy on finding 3 good articles to write. That's the start.

Don't be afraid of failing

Resistance is telling yourself that you are not good enough, that you will fail. This happens because you're about to do some creative work, you are about to be exposed to the public, to the opinions of others, and others will think you are not good enough.

Resistance is a powerful force. Especially if you write opinions or personal facts in your blog.

I have two suggestions.

The first is to talk about a topic that cannot be judged. Pick facts. No one can rant that a fact is not correct. Explain something you learned recently.

The second suggestion is to read The War of Art by Steven Pressfield, which is a mandatory read, in my opinion, for everyone trying to do creative work. It really goes into the root causes of resistance, and why you feel it.

I am not good at writing

Are you sure? Or is this just an excuse to bail out of the work that will open so many doors for you, and get back to your room?

This might be resistance kicking in, giving you a nice excuse for not writing.

Are you good at making videos, or feel great at talking to a microphone? Then make videos or start a podcast instead, but don't try to avoid any work that makes you vulnerable to the other people, just because you fear it.

But if you are really not good at writing, your writing will get better in just one way: by writing more.

I don't know English very well

If you want to write for an international audience in the western world, then you should blog in English. I highly recommend doing so, but in some cases, it might make more sense to write in your native language.

For example, if the niche you chose is too crowded and there's no one talking about it in your native language, then it might be an interesting opportunity to position yourself as an expert

If you'd like to blog in English, don't take a lack of English knowledge as an excuse. First, if you are reading this book, then it means you can read English and if you can read it, you can write it.

Also, unless you explicitly write for native English speakers, most of your readers might not be native English speakers, either.

If you are afraid your English is not good enough, and never start practicing, it will never become good.

My suggestion is to just start, and have someone who's really good at English review your posts, so you can learn over time.

Don't give up too early

Most blogs fail. This is a harsh truth. Blogs are abandoned, people forget to renew the domain name, people move on.

Blogs get into this situation because people gave up. They gave up on writing content consistently and frequently, because they did not see immediate gratification from doing so.

If you want your blog to have the chance to become successful, you have to give it the time it needs, and you need to be prepared right from the start.

Don’t be overwhelmed

It's too easy to be overwhelmed by all the things you need to do. In addition to your day job and your family and friends, you need to find the time to blog.

But blogging is not just writing. You need to find the perfect image for that post, you need to share the post on social media, you need to reply to comments, think about future post topics, craft that perfect and eye-catching post title...the list never ends.

It's easy to feel overwhelmed.

That's why I take a minimalistic approach to blogging, which involves no pictures at all unless they're needed in the content of the post, and no comments.

Not having to manage comments frees up a lot of time and mental energy. It also has a nice side effect: I don't have to worry about what people think of my articles. I just focus on the writing.

One step at a time

Don't think you have to rush and do everything at once: open the blog, write 100 posts, create a Twitter account, a Facebook page, an Instagram account, make YouTube videos… it's just too much.

Start with the simplest thing you can do, create a habit, make that habit stick in your day to day and expand from there.

Content is king

Content matters. Content is the thing that matters the most, in the context of your blog.

Let's discuss some of the things I believe are fundamental pillars in a content-centered blog strategy.

Write to your people

Let's say you are great at cooking. Write about your craft: cooking tips, ingredients, recipes, talking to other people that love cooking. Do you love knitting? Write for other knitters about techniques and everything new that you learn about knitting. Love dogs? Create a blog for dog owners.

Anything you do, the important thing is that you identify a group of people that are as passionate as you about a subject, and you write for them.

There's no value in what you write if it's not valuable to other people. Sure, you can write about something that's only appreciated by you, perhaps. But then there's no purpose in spending so much time and effort creating blog posts, is there?

Focus on creating value

Once you identify the people you want to write to, it's key for you to focus on creating value.

Value can take many different forms, of course. It could be how-to posts. It could be sharing your specific experience with some technology. It could be teaching other people how your raw meat diet for your dog works.

It could be telling everyone about your recent trip and what you visited, in detail, so that when someone is searching for tips as they are organizing a vacation, they can find your useful information.

There is no fixed rule on what creates value.

Here's what I do to create value for the readers of my blog: I create easy-to-follow tutorials, written with a beginner's mindset. I do not take the perspective of an expert while writing them.

To do so, I learn a new thing, so I'm not an expert in it, and I create a practical guide.

I know it's very difficult as an expert to write for beginners about the thing we're expert in. This is because we've forgotten what it means to be a beginner and we make too many assumptions, forgetting to mention essential things that are key to understanding a topic.

Other times I describe how I fixed a problem that I just solved while working on some coding project. My memory is very fresh and I can remember what it's like to have the problem, so I can describe it very clearly.

Sometimes I create less practical posts where I talk about things that relate to my experience as a developer, or common struggles, or tips for productivity, for example. Those are the posts that are normally appreciated the most by my readers.

Focus on being useful and solving problems

Your posts must solve a problem: each post on your blog must have a very specific goal.

This is key, and the post title must perfectly address the problem and solution.

When people search for how to solve that problem, you want your post to be in the top results.

And your content must be awesome.

Exactly what they are looking for.

Focus on creating the absolute best, most valuable content.

Write the blog post that would have helped past you

One of my favorite things is writing a blog post that contains the solution to a problem I just solved.

Everyone else solves a problem and moves on.

If you dedicate 10 minutes to document how you solved the problem you had, you are helping other people that might have this problem next week, or next year, or 10 years from now.

They will be thankful that you wrote something that helped them.

And perhaps you can even help yourself in the future.

Sometimes I google for a problem and I find my own post, written many months ago. I completely forgot that I wrote it.

What not to write about

One thing I recommend that you not write about is anything that doesn't help other people.

It's difficult to draw a line in the sand, but you should think about what you are writing.

Don't think of a blog like a diary. You can use it like a diary, posting your rants or opinions or what you ate for dinner.

But is it really helping or creating any value for other people?

I personally only try to write about things that I assume will help anyone. Even if a post helps just one person, then it's a good post for the blog.

Teach everything you know

I learned this mantra, or motto, from Nathan Barry. He's famous for his book Authority and for being the founder of ConvertKit, a great tool for bloggers that have the need to build a newsletter.

He has this notion that building an audience is the secret hack to creating a successful business, and I really believe that. And to build an audience, the best way is to share, in one way or another, everything you know.

He did that in the form of books, first with two books about design, as that was his specialty. Then he wrote everything he learned about selling those books in another book.

I make my living teaching everything I know, and since there's a finite amount of things I do know at any finite point in time, I had to transition to teaching everything I learn.

I found that many people like the way I talk about stuff, with a very simple approach, and this beginner-oriented point of view has been beneficial to me.

Your approach can be different, but the “teach everything you know” mantra is one that you need to seriously think about.

Practical content suggestions

After discussing why content matters, and why you should focus on creating great content, it's time to talk about some practical suggestions.

Content length, how much is enough?

It does not matter how long your articles are.

The Internet is full of marketing blogs that tell you the content must be 2000+ words long, 10000+ words long, and so on.

But it does not matter as long as your content solves a problem for a person.

I have posts that solve the problem in 50 words, and if this is the solution to someone's needs, that's great!

There is no need to dilute the content with useless words, and I'm sure you immediately notice when a blog post is trying to transform a 5-line answer into a 200-line one.

The same thing happens with videos, right? You are looking for something, but you need to watch 15 minutes of intro to get to the meat of the subject.

Do the opposite. Do what's great for your readers.

Plus, Google does not care.

Keep posts focused

When I say that Google does not care about content length, it's because I've observed this first-hand.

Some of my most visited blog posts are very short, yet they take a problem and they solve it, quickly.

And Google notices it. The key is solving a problem. Google notices that you are helping it help its users, and that's what happens when you keep your posts focused on a specific topic.

Some topics will perform better than others, some might be less popular, but as long as it's focused on a little problem and it solves it, it's great.

Don't try to appeal to everyone

You can't write great content for everyone. Pick your ideal person, or group of people, and write for them.

Pick your crowd.

Pick your tribe.

Ignore everything else.

Don't aim for perfection

Done is better than perfect.

This is my mantra. As long as what I do is technically correct and does not have errors, it's all fine.

You don't need to overthink it. Focus on being good enough. That's when the point of diminishing returns starts.

Most of the time, good enough is already better than 95% of what's out there.

Don't let chasing perfection limit your production volume.

It does not matter if someone already wrote about it

There are thousands of water brands. Thousands of brands of wine and beer. Thousands and thousands of hotels.

The more people write about a subject, the more interest there is around it, and the more people read about that subject.

If no one wrote about something, it might not mean you are a pioneer or “first", it might just mean no one cares about that topic.

You don't need to bring something new to the table

If you worry that you don't have a unique spin on something, or a revolutionary idea, you might be limiting yourself.

Often, a 1% or 5% improvement over something that's already out there is enough.

Google was not the first search engine. It just worked better.

Basecamp was not the first project management tool. It just worked better.

Focus on being better, not new.

You can blog about anything

I am a programmer and I blog about programming. If you’re a programmer too, you don’t just have to blog about programming.

There’s space for everything.

The topic does not matter, as long as you are passionate about it. There's no way you can force yourself to write about one subject for a long time without burning out.

Anywhere there’s a problem, you can bring solutions.

For me the niche was programming, for you it might be something else. Also, programming is even a bad niche as most developers consider even a little bit of marketing to be spam and mostly hate receiving emails (as they're using email every day and probably already receive a lot of it).

I think blogging, properly done, can be even more successful in less technical topics. It can work, as long as people search for those topics on the internet and have a place where you can find them like a big subreddit, a big Facebook group, or a popular online forum.

Create a system

I am an engineer and I believe in systems. Humans are weak. Systems are strong. Humans with a system are on a good track.

If only we could have a system for our blog, everything would be simpler.

Turns out that we can definitely have a system, and in this section, I'm going to explain the system I use.

It might not be the perfect system for you, and I won’t pretend it’s a system that works in 100% of the cases. But it's a starting point, and by tweaking it you can create your own perfect system.

A system makes you consistent.

Consistency is key

Why is consistency so important?

Because consistency is deeply entrenched in our lizard brains.

You are the one that makes one blog post every Tuesday. You're not the one that tries to write a blog post consistently each week. You're the one that just does.

It's not me, Flavio, saying so.

Let me share something from Robert Cialdini, author of the amazing book Influence:

Once we have made a choice [...] we will encounter personal and interpersonal pressures to behave consistently with that behavior.

Once you have a series of 5, 10, 20 weeks of posting, you automatically become the one that posts every week. Or twice a week, or whatever schedule you chose.

That's the key to the system: consistency.

Have you ever heard of Rand Fishkin's Whiteboard Friday? That was a great video series about SEO that came out every Friday. Do you know about FunFunFunction? MPJ releases one video every Monday. Every one of his fans knows and waits for his "good Monday morning" every week.

I’m sure you know YouTubers that post on a pre-determined day. Like Saturday or Tuesday.

Everyone can find the time to create a blog post every week. But not everyone is willing to put in the work to create something every week. Will you?

Schedule posts ahead of time

As we just discussed, the single best thing you can do with your blog is stay consistent.

But staying consistent is hard.

One of the easiest ways to become inconsistent is to miss a day because you were sick, or because you went to a party, or because you took a vacation.

When you miss a day, and you forgive yourself for this, you will miss other days.

That's what I would do. If I let one day slip by without a post, well… nothing bad happens and I have a track record of missing one post.

Before I realize it, I am sure I will miss other posts, too. Just because I was too lazy one day, I ruined the consistency of my blog and now it's impossible to get that perfect streak of posts back.

How do you prevent that? By scheduling posts ahead of time.

Before you start publishing your blog, before unveiling it to the world and announcing it everyone, write 3 posts as we discussed before, and start building up your queue.

Have a queue

When I first started my blog, I discovered the notion of creating a queue by accident.

I happened to work on another project of mine, one that didn't take off as I expected it to.

This project involved creating some long guides, about topics I cared about.

So when I decided to shut down the project, I thought that it was a shame to abandon those long guides to their unknown fate.

So I cut each chapter into several blog posts, and I got about 15-20 of them.

I could have published them all on that day, but I randomly decided to queue them up. One today, one tomorrow, and so on.

A couple of days after that, I had an idea for a new post. I was a blogger now, right? And I queued it after all those posts.

The queue has never dried up since then, over 700 days ago. Some days I reached the end of the queue and I had to fill it up again from zero, but I never missed a day.

I just attribute this result to the system – the queue I've built up, and the shame that would result from having written all those posts in the past and then stopping.

I could not stop.

Pick a schedule frequency you can sustain over the long run

One key part of this scheduling and queuing system is frequency.

How frequently should you post?

My recommendation is to post with a frequency you can maintain over time, consistently.

Start with one day per week. Create a queue, as I suggested, and see if you can maintain this frequency over 2-3 months. Once you start having a queue that's too long, say a blog post you write today will be published 3 months from now, then you can start increasing the frequency.

It's always best to scale up the frequency than to post less frequently because you can't sustain the frequency you initially set.

The reason I focus a lot on consistency and frequency is that people get used to it and they learn to expect a post from you, and they look for it.

If you start missing posts and not sharing information as frequently, then people don't know when to expect a new post from you, and they feel lost and disconnected.

This happens with everything. I notice it with videos.

If you watch YouTube videos frequently, what do you think when a YouTuber that posts every day, and you watch every day, suddenly stops posting for a week?

I subscribe to a YouTuber that posts every Saturday, and every Saturday, unless I am out doing something, I'm there, at noon, watching his video.

Ignore quantity

If you know beforehand that you have 3 hours a week to dedicate to blogging, don't force yourself to create too many posts.

Do one post a week, but do it well. Don't create many posts that are irrelevant or low quality, create one that you can be proud of.

Quality is perceived, and people will associate your worth with the quality of your work.

Be known for creating high quality and helpful content.

Focus on the process, not the outcome

One recommendation I have to be productive is to focus on the process.

I am focused on creating the blog post.

I am focused on creating ebooks.

I am not focused on how many people will read the blog post, or if they will like it.

That's not something I have control over. The best thing I can do is focus on my work and make sure it is the best work I can perform today.

Keep the process lean

When thinking about my process, I like to simplify it.

I want to remove all the friction I can remove.

It all needs to be simple, fast, streamlined.

I don't want roadblocks.

I try my best to remove all the resistance and all that powers resistance.

There should be nothing between me and writing a great blog post.

Keep a list of topics

I don't always have the time to write about something.

Sometimes I have an idea for a topic, and I write down the title of the article in my favorite writing application.

When it's time to write a new blog post, and I don't have an idea ready, I go through the list of titles and find one that is appealing to me in that specific moment.

Capitalize high energy days

Some days I have really high energy for writing blog posts. Some days I have very little, if any, energy.

On those days when I have the fire, I can write a few blog posts in a row and code the rest of the day (as that's my job). I have fuel for everything.

I capitalize on those days. I sit there and I might write 5 posts, and put them in the queue.

The days I have low energy I am thankful for those high energy days and I am thankful that I did everything I could to get the most out of them.

How to get people to your blog

Having a blog is great and all, but having a blog that people actually read is deeply satisfying.

There’s a problem though: how do you get people to read your blog?

How Blog Traffic Works

In today's world, if you are not producing valuable and consistent content, you are invisible. There are just too many things pushed at us every day.

I dedicate from 30 minutes to 1 hour every day to the Internet. That means Social Media, mostly Twitter, RSS and content aggregators.

I always see the same people. Those people that are highly successful keep pushing out great content.

It might be an inspiring tweet, a great blog post that's shared a lot, or something that's just worth reading.

Unless you perform at the same level, you are not appearing in my feed because I only give it limited time. And I assume the vast majority of people do the same. People don't just spend the whole day on social media waiting for you.

Sharing your content is a great motivator especially when your blog is young and you don't have an audience yet (more on this later).

In this situation, you can't rely on organic traffic. To avoid losing motivation, it's key to get your first views by sharing your content.

You can do 2 things: share it with your own audience on social media, if you have an audience already, or use sites that provide an audience and try your luck.

Those sites include Reddit, Hacker News, Medium, and forums that specialize in the topic you are talking about. Word of caution: you might have your feelings hurt in some of those venues, so just be prepared for criticism.

Organic growth is the only reliable solution for long term traffic

You might have the proverbial lucky day, and your blog post goes viral in places like Reddit, Hacker News, or on Social Media.

But the key factor for your blog is organic traffic.

Organic traffic means Google will receive a search from a user and will decide that it should show them your blog post.

Organic traffic is a key factor to every website. Social media traffic is generally low quality, hard to get, and hard to maintain over time.

This is a long process. Google needs to trust you, and it can take some time.

My best suggestion to give Google a reason to show your blog posts is to consistently solve people’s problems.

Solve people’s problems

How do you get Google (and other search engines) to send loads of traffic to your website?

What matters to Google is that it satisfies its own users.

And those are people searching.

People search in order to solve their own problems.

I see SEO people who suggest that you write 3000+ posts to rank on Google.

That’s a great tip if their goal is to discourage you from writing more. They call it long-form content.

Now, as a non-SEO person, but as a person that does things and observes what works and what doesn’t, I can say that if you solve a problem for a person with a 4-line blog post, Google will thank you by sending you more people who have that problem.

They know using their algorithms when a person found the answer they needed. This is Google’s job. Their job is to solve people’s problems by providing the perfect content they are looking for.

If you can provide that, Google will help you.

Not every post on your blog can solve a problem, of course. But if you have posts that solve problems, you’ll start to notice, as those are the posts that will get the most visitors.

Not every post must be small of course, and if long-form content is best for you, do that.

The importance of links

When we were talking before about choosing a good domain name, I mentioned domain authority. I said that an old domain name will likely have more domain authority.

What is domain authority?

Domain authority is a sort of score that search engines use to set the importance of a website, and it's determined by many different factors. The specific algorithms and metrics used are not publicly available, but there's one thing which is key to domain authority: links.

The more links to it that a website has, the more authority it has. But it's not that simple. The more authority the domain has that the link comes from, the more important the link is.

Links have very different weights. A link coming from Wikipedia has more power than a link from a random tweet. And search engines do take social metrics into consideration, too. We can't know for sure, but a link in a tweet from an influencer in your field has more weight than a tweet from a Twitter bot account.

Google (I say Google because it's the most important search engine, but others might do a similar thing) is also careful about the topic. If I link to a kitchen recipe site from my computer programming blog, that link is not going to have much value.

If a famous kitchen recipe blog links to a smaller kitchen recipe blog, then that's more relevant for Google, and it will give that link more meaning.

When it comes to links, it's important to get links from relevant and on-topic websites.

This is only something you can get by providing great and useful content.

Expand your reach with an email list

Let’s discuss how to augment the experience you create for your blog visitors by using an email list.

What is an email list?

Blogs are closely linked to newsletters and email lists. The two often go hand in hand.

A newsletter is the most effective way you can get in touch with your blog readers over time.

If you are not already familiar with the email list concept, you may be wondering whether in the era of Facebook, Instagram, Snapchat, and Twitter if you still need to use an old-style system like email.

In fact, email is a fundamental tool for any online business. Blogs are no exception.

Sending emails to a list of customers is not a system by which people commonly spam, as you might be thinking.

Especially if you're a developer, you need to realize that email is useful, you are not evil for sending emails, and that people want to hear from you.

Email is a cool system where people interested in your content or products can have more information about them, or about new products that you could provide in the future.

Email marketing is one of the most effective systems with which people are converted over time from visitors to customers: people in your list have explicitly asked to receive more information from you in the future.

This does not mean sending an email after 8 months asking them to buy your new product. Instead, the right way to approach this is to ask yourself how you can help your customers, in a consistent way.

Through the list, over time you can build customer loyalty, you create a relationship, and you keep in touch.

Your task with the list is to train people on the subject you are talking about, and to foster anticipation about upcoming news. But try to keep the focus on the customer rather than on you. Remember that a person will not be on your list forever – just as long as you can keep interest high.

So how do you get a person to join your email list in the first place?

With a small gift, called the lead magnet, which can be for example a report, a free ebook, exclusive access to premium content, an email course, or really any gift you can make.

The concept is simple, but it is crucial that the gears that make up this mechanism are calibrated to perfection and oiled regularly. Don't leave anything to chance if you do not want to be amateurish in the eyes of your customers.

It’s fundamental that you offer people what they want. The email list is considered by most online business owners as the most important asset of a business, and the only one that really is 100% yours.

A typical use of an email list

Let's look at an example. This is the system that most successful blogs use:

a person reaches your site coming from search engines or Facebook. Then a popup appears (more or less invasive) with the request that they enter their email to get a small gift. Then you’ll send them the gift via email, and the person enters this cycle where they will be offered a variety of products over time.

Usually, when a person gets on your list, they enter a phase called the funnel. The funnel is an automated process of warming, that is, the person get "heated" and is brought from being a random visitor to becoming a possible customer via a series of emails.

As soon as the person signs up, they will receive an email. The next day they will receive another, after 3 days another one, all according to predetermined logic.

Typically, these e-mail series terminate after 7-8 mails where a story is told and in the end, they will be offered a product to purchase. If the person doesn't buy right away, emails will continue to flow, and so on until the automated sequence ends.

There are many kinds of different sequence types and usually people do not invent anything new. Instead they use well-tested systems (which you can easily recognize once you are trained).

Once this sequence is over, the person's email is placed in another sequence, or in the general list, which is no longer automated. Then, the person managing the list (you, for example), will send an update email from time to time, say once a month, to make sure the person don’t forget about them.

In short, the author of the list tries to sell a product but if the recipient does not buy it, they will still remain in the list until they cancel the subscription. Because you never know – in the future they could decide to buy and become a customer.

How to use an email list

Of course, there are several approaches to the list. Let's see some situations that you could apply in your case.

If you sell an ebook: your users are therefore your readers. You could add a link to your site, and use as a lead magnet a free ebook on a topic that you know the user is interested in.

On the list, you could initially present an upsell of other ebooks you've already written. Then you could insert the person into your monthly email, where you'll publish interesting links to the topic, and from time to time promote your new ebooks.

If you sell a product: for an info-product, it's the same process as a typical example used on blogs. Maybe as a lead magnet you use one or more chapters, or you have a video or something else related to the subject.

If you have a software product: the list could be made up of all the people who bought your software if you sell to them directly, which gets you their emails. Or you may want them to sign up for your application.

You could use the list to share updates, inform about the latest releases, cross-promote with other developers, and raise awareness on new products you’ll build over time.

Where to host your email list

To manage an email list you need a specialized software.

There are many different kinds of email newsletter management tools.

Some are simple. Some are way too complex for your needs. You just need to find the perfect one for you.

The first separation I want to make is between self-hosted software and SAAS. Sendy (https://sendy.co) is an example of a self-hosted software. You don't pay a monthly fee to use it, but you have to manage your own server, and you use a service, typically AWS, to actually send the emails.

ConvertKit is an example of a tool that is SAAS based. You pay them a monthly fee, and they take care of everything.

That tool, in particular, is targeted at bloggers, and it's really well made. I have used it for almost 2 years, and it's really great.

I have recently moved to Sendy, self-hosting my newsletter, because at some point the price, for me, was not sustainable.

To start with, I would definitely recommend ConvertKit. You don't need to overthink spending $29 or $49 a month if that's valuable to you.

But my list became big enough and I was not comfortable spending a lot of money on my email list hosting software.

And it's a business tool: I know several top-performing bloggers with great audiences that use it for lists in the hundreds of thousands, and I'm sure that the ROI (Return on Investment) is well worth not having to manage your own server.

Especially if you are new to managing servers.

ConvertKit is not the only service, of course. There's Mailchimp, Drip, and others.

Some tools let you start free. I think of TinyLetter (https://tinyletter.com/). That's what I started with, in the beginning, until I reached a few hundred subscribers. Then I moved to a tool called ButtonDown and I went from there.

Keep it alive

As with blog posts frequency and consistency, the best advice I can give about mailing lists is to keep them consistent.

Do you write every 2 weeks? Fine. Keep doing it.

Do you write every month? Fine. Keep doing it.

The exact frequency is really personal. Some people write a new email for every post they make on their blog.

Some people email once a month with the list of posts. If you write once a month, however, people might forget who you are. This happened to me: I might subscribe to a newsletter and forget about it if you don't email me quite frequently.

Since I write one post per day, I found my sweet spot at one email every week, on Tuesday, and I always respect this frequency.

People know that Tuesday is "email from me" day.

The lead magnet

We discussed how having a newsletter is essential. It's also essential to have people signed up for it.

How can you have people decide to give a thing so precious as their email address to you?

The best way I know is to give them something in return. Don't expect people to sign up without a clear gain for them

You need to give an incentive to people to sign up for your newsletter.

This is the lead magnet that we discussed briefly earlier.

It can be a 1-page PDF cheat sheet. A report. A short mini-course of 10 videos. An email-based course.

The sky is the limit when it comes to what the lead magnet should be.

And there is no reason you should only have one lead magnet. You can have multiple.

In the ideal case, every blog post should have a specific lead magnet, but this is of course not always possible. I tend to create a lead magnet for each category of posts I'm writing.

How I discovered lead magnets

At the beginning of my blogging adventure (a little more than 2 years ago), my blog had zero traffic and Google ignored me.

I shared my posts on Reddit, and some people came and saw the site. I shared my posts on Twitter, where I had like 500 followers, many of them probably bots or inactive followers that I had collected in the 10 years I had been on Twitter.

If I had 10 or 15 visits a day, that was a good day.

After a while, I decided to create a newsletter, with a simple promise: every 2 weeks I'd send you links to all the posts I published. Like everyone does. That was good to get an email subscriber every other day, but that was it.

After some months, traffic grew a little and I was getting 4-5 subscribers every day. This was better.

Then I realized that people will not subscribe to a newsletter if they don't gain an advantage from that. This is a key point. I rarely subscribe to a newsletter just to “stay in touch”. Sometimes I do, and when this happens to you, that’s a quality email subscriber. Someone that really wants to hear from you.

But to get to this level requires people to have received a lot of value from you already, in one way or another. Maybe they already subscribe to your YouTube videos or your podcast. It’s hard for a complete stranger to subscribe.

So I changed my strategy from asking to "Join my newsletter" to offering people something of value. This lets the conversation begin with me offering a valuable asset.

In my case, the valuable asset, in the beginning, was a little PDF with a collection of the best blog posts I had written on a subject, nicely organized as an ebook.

Most people coming to my blog didn’t read more than one page, so I thought that creating a nice little ebook was a good way to show them what I had to offer. This increased signups a lot.

Ups and downs

Having a blog is not all fun and games. There are many things that might give you a hard time on your journey.

Realizing this is a first step in the right direction.

Writer's block

Writer's block is a thing. I have no general advice on this, and whole books were written on the subject so there's a lot of better advice out there than what I could come up with.

My solution when it comes to not knowing what to write about is to pick a subject I want to learn, and start learning it in public. Right as I write this, I am learning a completely new thing (Arduino and electronics sensors) while re-discovering the old electronics topics I studied back in school.

I am shooting videos while I learn this thing, and writing blog posts on the topics that are better suited for blog posts (no, I'm not limiting myself to blogging, I also like doing videos).

If a topic is boring to me, I just don't write about it because if I'm bored writing, I will write a boring article. So I try to write about things I'm interested in and excited about.

Imposter syndrome

Every person, sooner or later, is going to suffer from this thing which we label imposter syndrome. You might have this feeling now, but you don’t know that it has a name attached.

Let me describe some situations where you might find imposter syndrome in the wild.

You are a developer, have no Computer Science degree, and you feel people that have the CS degree know a lot more than you, and you should get one too in order to be called a developer.

You work on a project and you call it a little side project, not a real project, because – you know – it’s just a simple app.

You constantly belittle yourself, and have low confidence in your abilities.

You think other developers know a lot more than you do.

You think someday someone will find out that you are not worth your job position, as you can’t solve the coding interview quiz #423 from a random book.

You think you don’t belong to the coder’s club.

In the case of blogging, you’d like to start blogging but you fear other’s opinions and even think that you can’t add anything new to the table, so you don’t even start.

What's the solution to this problem?

I don't know if it applies to you, but when I start to feel this way, I try to put myself in the learner's shoes. I am not teaching. I am learning in public. Most of the time.

If this is not enough, realize how far you have come from where you started. Look back. There was a day when you could not even figure out how to start the computer. What code even was. You didn’t know you could actually create programs and make the computer do what you want.

Look at you now. You are the best version of yourself and yet you can be perfectly sure that tomorrow you’ll be an even better version. You are improving. Just like your blog posts.

Working in public

Working in public can be nerve-wracking. Well, it is for me. You don't really know who is watching your work, and what they really think of it.

You're one step away from an intolerant expert judging your work as not relevant.

And maybe the creator of a library is looking at your tutorial on it, thinking you didn't get it right.

But looking at the opposite side of the spectrum, by learning in public you are forced to grow.

Step up the game.

You need to put a lot of effort to make your work great in the eyes of a lot of people.

Burnout

It's easy to feel overwhelmed by all the things you are doing. Thinking about new content, writing the actual content, writing guest posts, trying to promote the content as much as you can – but without being spammy, and replying to comments and feedback.

This is not unique to blogging, of course. I have seen this even more in the YouTube space. There, it's even worse to me. You are putting your face and voice in front of a lot of people, instead of just your words and pictures like in a blog post.

My best advice to avoid burnout is to choose a minimalistic approach and to pick a topic that deeply interests you.

If you write about things you are passionate about, you will never have a shortage of things to write about. Your list will be 3 miles long.

Choosing a minimalistic approach means that you have to cut down anything that's not essential. I do not have comments on my blog. I need to care less about what people think, which has the drawback of creating less community, but also has the positive of causing me less stress.

Also, I do not generally promote the content I write on social media or other outlets, except if it is a special article that I really want to be seen, and I do not usually write guest posts on other blogs.

Such activities can be limited once the blog is up and running and you get a fair share of visits every day. So with the increase of views and stress given by many people looking at your work every day, you get the benefit of focus.

Lower your expectations

If you keep your expectations low, you will never be deluded. Don't expect your blog to be an overnight success. It will not happen. Just like it does not happen with a YouTube channel or a podcast. It's hard. Except for some lucky ones, maybe.

This is why blogging about things you are passionate about is beneficial. If you write about things you always wanted to write about, and will even write if no one is reading, then you are on the right track.

Then if success will ever come to you, you'll be more than ready for it.

Trolls and negative feedback

The Internet can be a wild place, and I am sure I don't have to explain this to you. When people write comments online, they can be mean. Sometimes. Most of the time they are not.

I do not have comments on my blog directly, but I do receive feedback via email and on Twitter. And on YouTube videos.

And the rare day I get one blog post featured on Reddit or Hacker News, two sites relevant for my content, I get very stressed about looking at comments.

It must be me, and most of the times comments are wildly positive, which is great. But I heard somewhere that our brain is much more receptive to negative feedback, and I can certainly confirm that I remember bad feedback more than positive feedback. It can take 10 positive comments to make up for a single negative one.

I might be over-sensitive but removing comments altogether from my blog removed the handbrake. I do not have to worry if some content does not resonate with people.

I wrote it, it's like that, I did my best to make sure it's "correct" to my best judgment, and I am off to the next one.

Your mileage might vary.

Ignore vanity metrics

I have the incredible experience of having enough visitors to be surprised every day of the number of people visiting the blog.

I open Google Analytics at a random point in time during the day and I see the number of people. Then I get back to whatever I was doing. It's kind of addictive, but also useless.

Does that affect my day? No.

Does that change what I'm going to do next? No.

Same for email subscribers. Does it really matter how many people are on the list? No.

What matters the most is that people resonate with your ideas and learn from your work.

Even if it is just a handful of people.

The rest is useless.

Blogging is lonely

Blogging is lonely, in the same way that writing a book is lonely. Also working in your secret laboratory is lonely. Being a YouTuber is lonely. Being a remote freelancer is lonely.

There's not much of a solution for this.

Other than accept it, and realize that some people might be more happy to be lonely. I am definitely an introvert and I thrive in a lonely environment, spending days in the silence.

That's probably why I like blogging.

It takes time

Let's say it out loud: it's going to take a lot of time. There is no way that your blog will be an overnight success. It will take many months and possibly years before you will see a rising tide of visitors to your blog. Maybe. If you did it alright.

This is a harsh truth, but it's one I think is necessary because I don't want you to believe that success is easy to achieve, and I want to set the right expectations. Time, persistence, showing up every day. This is what it takes, for any kind of success in any kind of activity.

It's a long game, but one that will eventually give you a lot of satisfaction.

Making money with a blog

A blog can be a great launch point for various projects that can make you money.

There’s absolutely no need for your blog to make money if you don’t want it to. But it’s good to know what your options are. In this last chapter, I’m going to explain at a high level the main options for “monetizing” a blog.

Get more clients for your business

The first and easiest way, I'd say, is to offer your services.

This especially works with non-location specific services. For example, if you are a plumber it might be harder. Not impossible, especially in large cities, but other channels could work better.

But if your business or activity is not linked to a specific location, a blog can be a great promotion for your business.

You can write articles that position you as an expert in the field you work in, and people will get in touch using the tools you give them: email, chat, or whatever you want.

I’ve seen this applied countless times, and it can lead to big opportunities in consulting. I have also experimented this first-hand when I started my career.

Advertising, affiliates, and sponsors

When your blog starts to gain a consistent number of visitors, that’s when it can make you some money in what’s usually called “passive income”.

There are 3 ways, mostly: advertising, affiliates, and sponsors. This is the difference: advertising is banner or text ads that appear on your page. You typically add a code to the site and then forget about it.

There is a broker, like Google Ads or Mediavine or BuySellAds that will take care of everything for you. They'll find companies that want to show their ads, and their ads will be displayed on your blog. You get paid by ad views and/or ad clicks. It’s the simplest method you can find, although it usually requires a high number of page views to work.

Affiliates work in a different way: you get paid when people purchase a product coming from a link put on your website.

A common affiliate system is Amazon affiliate links. I’m sure you’ve seen them everywhere, under YouTube videos, under Instagram posts, and so on.

When Amazon makes a sale, you get a percentage of that. Same works for other smaller affiliate programs.

For affiliate links, you need to generate a specific link and depending on the frequency you have to do that, and the number of products or programs you promote, it will require more work on your part.

Sponsors work in a different way, and you typically need to get in touch with companies via email or phone. They will usually pay a flat fee for a month (or more) of sponsoring. You typically need to put a banner on the site or talk about their products in your posts.

Selling your own products

The system I like the most is using the blog to promote your own products.

It’s similar to promoting your services, but with products, it requires less work on your part and it can scale very easily.

Sure, you need a product beforehand. And you need a product that you know will be relevant and useful to people who read your posts.

But once you have it, you can promote it to your readers, without paying for ads, and without having to run an affiliate program yourself. Then, all your work – your blog and your products – are all aligned in the same direction: making useful things for the people you want to interact with.

Final words

I hope this book was useful to you, and I really hope it might be the inspiration you need to create your own blog.

Download a PDF and ePub version of the How to Start a Blog book here.

Technical Blogging Basics – How to Write Articles as a Developer

Tapas Adhikary — Thu, 15 Apr 2021 16:35:42 +0000

Software developers work on designing, coding, testing, and delivering the software we use every day. And whatever that developer's particular specialty, they know a lot about a lot of things – which means they should share that knowledge.

Publishing articles and creating video content are great ways to share what we learn as developers. You may have your own blog or you may write for a publication. In either case, you should follow specific processes to write well and feel great about it.

This article will cover the fundamentals of blogging to help you write great articles while not dropping the ball as a developer.

TL;DR

This tweet summarizes most of the points at a high level. However, we will talk about some real-life experiences and learning how to blog in more detail. Please keep reading and enjoy.

Know your purpose

Know your purpose

We all need a purpose when we start something and the motivation to continue it. The intent behind our actions and our motivation may be different for everyone. You need to find your intent or purpose that explains why you want to start a blog or share your content.

In most cases, the simple answer could be Passion. Fair enough! It could also be a business strategy, or perhaps you want to teach others. Maybe you want to keep learning – practically anything that gets you started will work.

As a developer, we learn something new all the time. It is close to impossible to memorize every piece of what we've learned. When we document those lessons and bits of information, we might as well make that knowledge reusable.

This is why writing an article about something you've learned recently is an excellent idea, and gives you very clear intent for your progressive documentation.

💡 Tips: Create a private GitHub repo with a markdown file. When you encounter something new, add a note about it (with code, if needed) in the file.

The contents of this file will then become an excellent source for your future articles. I maintain a file called TIL_2021.md (Things I Learned in the year 2021) for the same purpose.

When I decided on blogging, I intended to learn by sharing knowledge. If you want to learn something deeply, start teaching it. Blogging is a great way to do that.

Find Your Motivation

Do not give up, stay motivated

Motivation can do wonders when you have it, but it can be hard to continue without it. As a content creator, your biggest motivation is likely to hear feedback from your readers. Positive feedback and constructive criticism always help you improve the content you create.

But there is a problem. Initially, you may not have very many readers to give you feedback. The chances of disappointment are higher if you are an individual blogger. So it helps to have a lot of self-motivation to sustain and continue your work.

Remember – do not give up, stay motivated. As a developer, you have plenty to learn, share, and write about.

💡 Tips: If you want to start blogging as a developer, the developer community is helpful to stay connected and motivated. There are many incredible communities around like Hashnode, Dev.to, Codenewbie, Hackernoon, freeCodeCamp, GirlsWhoCode, and many more.

Do Your Research

Research is the key. Content rules all.

In blogging, content rules all. As developers, we may have multiple ideas, problem-solving steps, and new learnings we want to get down. But the most crucial part is being able to turn it into quality content. It's usually necessary to take the time required to research your topic thoroughly.

Let me take an example of content research here. Say you have solved a problem using Linked List, and it is the first time you have used one. You are so excited that want to share what you've learned. Here are a few points to consider:

You need to understand Linked List generically and beyond the context of the problem you have solved.
You need to understand both the pros and cons of using Linked List.
You need to set up a few examples that demonstrate how best to use it.
You need to make sure you explain the way you've solved the problem clearly so people can use it in their own use cases.

💡 Tips: Once you figure out what you need to know, you can learn about it from any well-established resource. Perform a search wionth Google, Quora, Reddit, and so on. Stackoverflow is another excellent platform to check for info on the topic as well.

Make sure you note down what you learn as you make progress. These notes will eventually turn into the article you write and publish.

Plan the Content Structure

Plan the content structure

Once you have your content research done, the next thing is to plan the structure of the article. Excellent article content can go ignored by readers if you have an inadequate and messy content structure.

Here are a few tips to help you structure your article content in a readable way:

Title: A compelling title can help influence many readers to visit your article. No matter what, people hardly miss reading the title of the article. Keeping it catchy will increase the traffic to your content.
Cover Image: A relevant cover image makes your article very attractive. When you share your articles on social media like Twitter, Linkedin, or Reddit, a creative cover image may attract your readers.
Introduction: this section describes the content at a high level. It can be an initial paragraph or a Tl;DR section explaining what you plan to cover in the article.
Headings and Sub Headings: You should break the content into logical sub-topics. To do that, create sections and provide relevant headings and sub-headings. For example, I have created multiple sections with headings like Know Your Purpose, Find Your Motivation, and so on in this article.
Graphics: "A picture is worth a thousand words." This is often true, so think of supporting your content with some graphs, pictures, and so on.
Summary: A summary section at the end helps your reader recap what they have learned from the article so far. It is also helpful for a returning reader to recollect the content by going through the summary.
Important Links: You may want to end your article with a list of related links for further reading. You can use the same section to list the links to your previously published articles as well.

💡 Tips: Try to use a consistent content structure for your articles. Your readers will get used to it and find it easy to follow.

Writing Tools

Using tools to make you efficient and smarter

Creating quality content takes time. You can make yourself a productive and efficient content creator by using some of the tools available for free. Here are a few that you may find helpful,

⚒️ Notion: this tool can help you manage your personal and professional work TODOs in an efficient manner. Anytime an article idea occurs to you or you solve an interesting problem, create a task in the tool. You can prioritize, schedule, and assign tasks with ease.

Task planner with Notion

⚒️ Grammarly: If you are a non-native English speaker like me, there are times when you might not be familiar enough with the language's grammar rules.

In this case, a tool like Grammarly is a life-saver in many ways. It detects grammatical and spelling mistakes, suggests re-phrasing for complex sentences, corrects passive to active voice, and more. You can start with the free version and go for the premium based on your usage.

Correction suggestion with Grammarly

⚒️ Hemingway Editor: This is another excellent tool to support you with your English writing. You can use this editor along with Grammarly if you want. I love the way it indicates inadequate use of adverbs, active/passive voice, and complicated words and phrases.

Categorized suggestions with the Hemmingway Editor

⚒️ Canva: Canva is a tool where you make designs, art, and unleash your creativity. You can create cover images, article graphics, animated gifs, and more without any prior experience with Canva. The generous free plan is sufficient to get started.

Create and organize your creativity using Canva

⚒️ Pixteller: This is an alternate suggestion for creating cover images, graphics, and so on.

Pixteller to create images

⚒️ ShareX: It is a super cool productivity tool for screen captures, making animated images, file sharing, and so on.

Create, gifs, screenshots, videos

⚒️ OBS Studio: this is a free, open-source video recording and streaming tool. You may be wondering, why do I need this for blogging?

At times, you may want to create a video, upload it to YouTube or Vimeo, and link to it from your articles. You can use the OBS Studio tool to create quality videos with lots of customization options.

Create high quality videos

⚒️ SERP Snippet Generator: SERP (Search Engine Result Page) is the page we see after entering a query into search engines like Google or Bing. A SERP snippet generator helps you finalizing a suitable title and meta description of your article post before you publish it.

See the image below to figure out a title and description within a limit to show the search result correctly.

SERP Generator

Do Lots of Proofreading

Review, re-review, re-re-review, and so on...

When you write something, you need to check for errors and get your article reviewed before publishing or sharing it. This process of checking and making sure your content is ready to publish is called proofreading. In general, you should check for:

Spelling errors
Grammatical mistakes
Formatting issues
Punctuation
Accuracy
Language Consistency

When it comes to proofreading and reviewing, here is a famous quote for some inspiration:

“I've found the best way to revise your own work is to pretend that somebody else wrote it and then to rip the living sh*t out of it.” ― Don Roff

Publish Your Article

Don't keep it to yourself, just publish it

If you are happy with the article after your proofreading, the next logical step is to publish it. You may want to schedule it to publish on a particular day of the week, or you may want to publish right then – it is up to you.

As a general principle, it is better to publish when an article is ready from your side. Similarly, you should never rush to publish an article to meet a deadline.

💡 Tips: Publishing your article should be part of the entire plan. If you have to publish an article by a specific date, work backward to plan the content accordingly. Do not compromise the quality of the content in the rush of publishing it.

Social media platforms are a big booster

Social media is an extremely powerful tool. And you should make positive use of it as a blogger.

Publishing your article may not be enough if you want it to reach as many potential readers as it can. It's therefore a good idea to share your article on various social media platforms.

Here a few platforms where you should share your article links:

There are a few more platforms where link sharing alone may not work very well. You can create a cover image/graphic suitable to the topic and upload the image (and share the link) to places like Instagram and Pinterest using the right hashtags.

💡 Tips: Make sure you follow the policies and guidelines specified by each social media platform when you share your blog link. If you don't, your account could be flagged or banned.

Another exciting way to share your content is by republishing it. You can republish your article on another blogging platform if you are allowed to do so. For example, an article written on the Hashnode platform can be republished on the Dev.to platform and vice-versa.

💡 Tips: You can set the Canonical URL to the link of the original article when you republish it. This is a way to tell the search engines like Google which is the original copy of the content and eliminate duplicate content.

Good Blogging Platforms

A Blogging platform to get you started

Alright, now we know how to write an article and share it so others can read it. Now let's learn about a few blogging platforms where you can get started.

Here are a few platforms to start blogging and grow as part of the community.

There are many publications and organizations who hire and pay content creators. As a developer-blogger, this may open up many freelancing opportunities and let you get compensated for sharing your content. You can also contribute to open-source documentation and other projects.

In Summary

To summarize,

Blogging as a developer is manageable as a side activity without compromising your work output.
Problems you've solved and your searches on Google, Quora, and Stackoverflow could be a helpful source of writing ideas.
Find your purpose before you start a blog and write articles. The intent behind your work can be trivial or more significant – either way is fine.
Stay motivated.
Use the right tools to make you a productive writer.
Plan your content structure, proofread your articles, and publish them.
Use social media as a tool to share your articles.
There are some fantastic blogging platforms out there. Give them a try and be part of the developer communities.
Keep learning, keep writing, and keep sharing.

Before We End...

I hope you've found this article insightful, and that it helps you start using these concepts more effectively in blogging.

Let's connect. You will find me active on Twitter (@tapasadhikary). Please feel free to give a follow.

Gatsby Starter Blog: How to Add Header Images to Posts with Support for Twitter Cards

freeCodeCamp — Tue, 29 Dec 2020 00:33:15 +0000

By David Good

If you're like me, you used Gatsby Starter Blog to kickstart your personal blog, made a few customizations, and then just rolled with it.

Adding new posts in the form of markdown is great. But it also means you rarely have a reason to look at the code. So when I decided to add header images to my posts with support for Twitter Cards, I felt lost.

My requirements were to be able to add a large header image with a caption to a post as you can see here:

https://davidagood.com/dynamodb-enhanced-client-java-heterogeneous-item-collections/

Furthermore, a tweet which contains a link to the post should "expand" into Twitter's Summary Card with Large Image, like this:

And finally, for posts which do not specify an image, a default image should be shown using Twitter's Summary Card. Here's what that looks like where I've used my website logo as the default image:

Note: Twitter's docs state that a website logo should not be used for a card image (see twitter:image section here). I'll leave it to you to decide whether it makes sense to use a fixed image as a fallback like I have here.

Getting Started

Here are the five high-level steps which I will be guiding you through. I'll attempt to explain everything in depth and provide links to other resources along the way. That way you will build up your knowledge of Gatsby which you can draw from to tackle the later, more complicated steps.

Add Document Metadata Tags
Source Default Image using GraphQL
Source Post-Specific Image Properties using GraphQL
Add Header Image to Blog Post Template
Add New Properties to Post's Frontmatter

The tools which we'll be using to accomplish this all come out of the box with Gatsby Starter Blog!

React Helmet - Used in the SEO component to add meta tags to the document head to support Twitter Cards and other Open Graph tags
Gatsby Source Filesystem - A "plugin for sourcing data into your Gatsby application from your local filesystem", images in our case
Gatsby Image - "a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. gatsby-image uses gatsby-plugin-sharp to power its image transformations."
Gatsby Plugin Sharp - "Exposes several image processing functions built on the Sharp image processing library". We use this for resizing images.

How to Add Document Metadata Tags

First, we will wire up the HTML metadata tags which can be read by Twitter and any other platform or tool which understands Open Graph such as Google, Facebook, and WhatsApp.

Learn more about document metadata here: What’s in the head? Metadata in HTML.

Open the SEO component in src/components/seo.js. The first thing to notice is that this is using React Helmet, and it already has many Open Graph and Twitter meta tags like og:title, twitter:description. It even has a twitter:card tag with a value of "summary" which enables a basic Twitter Summary Card with no image:

// src/components/seo.js
const SEO = ({ description, lang, meta, title }) => { 
// Details omitted for brevity 
return ( 
    <Helmet 
        htmlAttributes={{ lang }} 
        title={title} 
        titleTemplate={`%s | ${site.siteMetadata.title}`} 
        meta={[ 
            { name: `description`, content: metaDescription, }, 
            { property: `og:title`, content: title, }, 
            { property: `og:description`, content: metaDescription, }, 
            { property: `og:type`, content: `website`, }, 
            { property: `twitter:card`, content: `summary`, }, 
            { property: `twitter:creator`, 
              content: site.siteMetadata.social.twitter, }, 
            // ...

Let's update this component:

Add imageUrl and imageAlt parameters. These will be passed as props by the BlogPostTemplate component as we will see later. Note that that I've used "URL" in the prop name to convey the fact that this must be a fully-qualified URL. Relative paths are not supported for the OG image!
Construct the default image URL, defaultImageUrl. I've written a tiny utility function, constructUrl, to concatenate a base URL with a relative path. We will see where data.ogImageDefault comes from in the next section.
Add an ogImageUrl variable which takes the imageSrcUrl prop or, if that's not provided, defaults to defaultImageUrl.
Add objects to the meta array passed to the Helmet component: og:image, twitter:card, and twitter:image:alt

A few things to note here:

Twitter does have its own twitter:image meta tag, but per the docs, we don't need to add both the og:image and the twitter:image tag since Twitter's parser will fall back to the Open Graph tags.
Open Graph specifies the meta attributes property and content whereas Twitter specifies name and content, respectively. But again, the Twitter docs state that their parser will fall back to the Open Graph attributes. This is nice because we can maintain consistency and don't need a bunch of repetitive properties with the same values which we have to keep in sync.
Notable exceptions to using the property attribute on meta tags are any non-Open Graph tags like description which must use the name attribute. I encourage you to use Lighthouse which will identify basic issues with your SEO.

// util.js
export const constructUrl = (baseUrl, path) =>
  (!baseUrl || !path) ? null : `${baseUrl}${path}`;

// src/components/seo.js
// Step 1: Add props
const SEO = ({ description, lang, meta, title, imageUrl, imageAlt }) => { 

    const data = useStaticQuery(
        // This is explained next
    );

    // Step 2: Construct default image URL
    // ogImageDefault is explained next
    const defaultImageUrl = constructUrl(data.site.siteMetadata.siteUrl, data.ogImageDefault?.childImageSharp?.fixed?.src)

    // Step 3: Add this
    const ogImageUrl = imageUrl || defaultImageUrl; 

    return ( 
        // Step 4: Add new meta objects
        <Helmet 
            htmlAttributes={{ lang }} 
            title={title} 
            titleTemplate={`%s | ${site.siteMetadata.title}`} 
            meta={[
                { property: `og:image`, content: ogImageUrl, }, 

                // If a post has an image, use the larger card. 
                // Otherwise the default image is just 
                // a small logo, so use the smaller card.
                { property: `twitter:card`, content: imageUrl ? `summary_large_image` : `summary`, }, 

                // Add image alt text
                // Falls back to default which describes the site logo
                { property: `twitter:image:alt`, content: imageAlt || "davidagood.com logo", }, 
                // ...

How to Source Default Image using GraphQL

This is where Gatsby's filesystem and image processing capabilities come into play. Below is the useStaticQuery call GraphQL query from the SEO component. I've added the ogImageDefault portion and the siteUrl which is needed for the constructUrl call shown above.

// src/components/seo.js
const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            social {
              twitter
            }
            # Add this
            siteUrl
          }
        }
        # Add this
        ogImageDefault: file(relativePath: {eq: "icon.png"}) { 
          childImageSharp {
            fixed(height: 260, width: 260) {
              src
            }
          }
        }
      }
    `,
);

GraphQL File and Image Processing Query Explained

The top level node is ogImageDefault. This is a GraphQL alias for the file query which is applying a filter to find a file with relative path equal to icon.png. The name I've chosen, ogImageDefault, is completely arbitrary.

One key thing to understand here is what the relativePath is relative to. In other words, where is this file, icon.png?

Let me start by telling you the location of the file relative to the project root: ./content/assets/icon.png. In the query, I haven't specified any relative path, just the filename. So how does Gatsby know where to find it?

Enter [gatsby-source-filesystem](https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/). If you look in gatsby-config.js you will see some config like this:

// gatsby-config.js 
module.exports = { 
    // siteMetadata: {...}, 
    plugins: [ 
        // Other plugins omitted 
        { 
            resolve: `gatsby-source-filesystem`, 
            options: { 
                path: `${__dirname}/content/blog`, 
                name: `blog`, 
            }, 
        }, 
        { 
            resolve: `gatsby-source-filesystem`, 
            options: { 
                path: `${__dirname}/content/assets`, 
                name: `assets`, 
            }, 
        }, 
        // ...

What this is doing is registering these paths as "content roots" and giving them a name. So the name blog refers to ./content/blog relative to the project root. And the name assets refers to ./content/assets relative to the project root. You can use these names in queries by filtering on sourceInstanceName:

# http://localhost:8000/___graphql 
{ 
    allFile(filter: {sourceInstanceName: {eq: "blog"}}) { 
        edges { 
            node { 
                absolutePath 
                publicURL 
                sourceInstanceName 
            } 
        } 
    } 
}

The result of this query:

// Result of allFiles query with sourceInstanceName filter 
{ 
    "data": { 
        "allFile": { 
            "edges": [{ 
                "node": { 
                    "absolutePath": "/home/dgood/IdeaProjects/davidagood.com/content/blog/clean-code-and-architecture/index.md", 
                    "publicURL": "/static/40bb02d938c4faf7f977dd66c1a399d2/index.md", 
                    "sourceInstanceName": "blog" 
                } 
            }, 
            // additional results...

So back to ogImageDefault: the relativePath we provided was just icon.png, but the file is actually located at ./content/assets/icon.png.

Gatsby was able to resolve to the file because we configured a "content root" at ./content/assets. We could have specified the sourceInstanceName to remove any ambiguity as to which "content root" this file is located in.

In fact, I'm not sure how Gatsby would behave if the same relative path existed in multiple "content roots".

This would be a good opportunity to dig into the Gatsby's source code to understand how this all works, but I'll leave that to you!

Next up: what is childImageSharp? "Child" refers to this being a child node of a File node. "Image" is just like it sounds. "Sharp" is referring to the Sharp image processing tool and corresponding Gatsby plugin, gatsby-plugin-sharp, which enables these image processing features.

fixed means we want transform the image into an image of a fixed size. We specify the dimensions by passing parameters like this: fixed(height: 260, width: 260). There are a few alternatives to fixed which we could use, one of which we will see below.

Finally, we only need the src property for the purposes of the Open Graph image meta tag.

How to Source Post-Specific Image Properties using GraphQL

Following from above, we must update the BlogPostTemplate component to pass the imageUrl and imageAlt props to the SEO component. Again, we use the constructUrl utility to convert the relative path, src, into a URL. I explain the origin of these props' values below.

// util.js
export const constructUrl = (baseUrl, path) =>
  (!baseUrl || !path) ? null : `${baseUrl}${path}`;

// src/templates/blog-post.js
const BlogPostTemplate = ({ data, pageContext, location }) => { 
    // Details omitted for brevity
    return ( 
        <Layout location={location} title={data.site.siteMetadata.title}> 
            <SEO 
                title={data.markdownRemark.frontmatter.title} 
                description={data.markdownRemark.frontmatter.description || data.markdownRemark.excerpt} 
                imageUrl={
                    constructUrl(
                        data.site.siteMetadata.siteUrl, data.markdownRemark.frontmatter.image?.childImageSharp?.fixed?.src
                )} 
                imageAlt={data.markdownRemark.frontmatter.imageAlt} />
        // ...

Sourcing the image alt text is straightforward: we add imageAlt as a property to the frontmatter portion of our BlogPostTemplate component's GraphQL query. This query is exported as a GraphQL tagged template.

The name of the exported constant is arbitrary. In my case it's const pageQuery.

This query gets executed for us by Gatsby, and the results are passed to the BlogPostTemplate component in the data prop.

This is explained in the Gatsby docs here: Querying Data in Pages with GraphQL.

In order to source the actual image, we use childImageSharp again but in a slightly different way than we saw above:

// src/templates/blog-post.js
export const pageQuery = graphql`
    query BlogPostBySlug($slug: String!) {
      site {
        siteMetadata {
          title
          siteUrl
        }
      }
      markdownRemark(fields: {slug: {eq: $slug}}) {
        id
        excerpt(pruneLength: 160)
        html
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
          description
          # Add this
          image {
            childImageSharp {
              fixed(height: 600, width: 1200) {
                src
              }
              fluid(maxWidth: 700, maxHeight: 500) {
                ...GatsbyImageSharpFluid
              }
            }
          }
          # Add these
          imageAlt
          imageTitleHtml
        }
      }
    }
`;

Here, image must match the name of the property we intend to set in the post's frontmatter. And the value of this property must be a path to a file relative to the post markdown file.

This is similar to what we did above using a GraphQL alias and the file query, but here it's implicit and being handled behind the scenes by Gatsby.

We specify the dimensions in the parameters to the fixed field. When choosing the dimensions, make sure any image you use is at least as big as the dimensions you specify here, and use these guideline from the docs:

Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels

We have also added the fluid property and a GraphQL fragment, ...GatsbyImageSharpFluid, which retrieves all of the properties available on this node without having to enumerate them one by one.

The Gatsby Image component is designed to be used this way in order to provide a responsive image experience using HTML's native responsive image capabilities.

How to Add a Header Image to your Blog Post Template

With the GraphQL query updated and the results being passed to our component by Gatsby, we're ready to add the Gatsby Image import and the JSX for the header image and caption:

// src/templates/blog-post.js
import Image from "gatsby-image";

// Details omitted for brevity

{data.markdownRemark.frontmatter.image?.childImageSharp?.fluid &&
    <>
        <Image
            fluid={data.markdownRemark.frontmatter.image.childImageSharp.fluid}
            alt={data.markdownRemark.frontmatter.imageAlt} 
        />
        <div
            style={{
                textAlign: "center",
                fontSize: "14px",
                lineHeight: "28px",
            }}
            dangerouslySetInnerHTML={{ 
                __html: data.markdownRemark.frontmatter.imageTitleHtml 
            }} 
        />
        <br/>
        <br/>
    
}

If the image or imageAlt properties are not set in a post's frontmatter, it won't cause any issues. Those properties will just be null in the post's data prop, for example data.markdownRemark.frontmatter.image and data.markdownRemark.frontmatter.imageAlt.

For that reason, I've used optional chaining when passing the imageUrl prop to the SEO component: data.markdownRemark.frontmatter.image?.childImageSharp?.fixed?.src and when optionally adding the header image component tree: data.markdownRemark.frontmatter.image?.childImageSharp?.fluid.

How to Add New Properties to a Post's Frontmatter

Now all that's left is to add the actual image file, typically in the same directory as the markdown where we want to use it. Then we add the image, imageAlt, and imageTitleHtml properties to the post's frontmatter.

I've taken the suggested attribution HTML directly from Unsplash and used it for the imageTitleHtml.

Remember: in this case, the image path is relative to the post markdown file.

--- 
title: "Working with Heterogeneous Item Collections in the DynamoDB Enhanced Client for Java" 
date: "2020-12-07T01:51:34.815Z"
description: "Working with heterogeneous item collections with the Java SDKs can be tricky. Here we see how to handle 
them with the AWS SDK v2 for Java's Enhanced Client."
image: "./kevin-mueller-gGUiw8GNIFE-unsplash.jpg"
imageAlt: "Water droplets on black background"
imageTitleHtml: '<span>Photo by <a href="https://unsplash.com/@kevinmueller?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kevin Muellera> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplasha>span>'

--- 

// Markdown here...

Conclusion

That's it – you did it! We covered quite a few concepts in this article. You should now be able to add header images to your blog posts and get nice Open Graph-based preview experiences on Twitter, Facebook, Google, WhatsApp, and more.

You can find the completed code on GitHub here:

Once you've implemented this and deployed it, you can use the Twitter Card Validator to test the behavior before actually tweeting a link.

Coincidentally, I did experience some issues with cards not being displayed in tweets even though the Validator showed that they were working.

In one case, I tweeted a link in a reply, and there was no card at all—just the raw link. The next day, I tweeted the same link, and this time the card worked fine!

In another case, I was looking at my Twitter Profile page, and several of my tweets had the cards but the image was not being displayed. So I opened a Chrome Incognito window, and in that window the images were displayed as expected.

How to Start a Blog for Free with WordPress – Tutorial for Beginners

Jim Campbell — Mon, 30 Nov 2020 17:54:27 +0000

This article will discuss how to start a blog with WordPress. WordPress is the world’s most popular blogging software and content management system in the world.

If you need an introduction, you can learn all about the basics of WordPress in my previous article here.

In this post, we will discuss:

Blogging basics
Why you should choose WordPress
Starting a blog for free with WordPress.com
Starting a self-hosted blog with WordPress.org

Before discussing the steps to use WordPress to create a blog, I will start by taking time to explain the basics of blogging.

What is a blog and why should you start one?

A blog is a discussion or informational website published on the internet. Blogs can be funny, informational, or inspiring and can be published for highly targeted and niche audiences or a broader array of readers (like freeCodeCamp.org/news).

A blog (a truncation of "weblog") is a discussion or informational website published on the internet consisting of discrete, often informal diary-style text entries (posts). - Wikipedia

If you are looking to start a blog (and I was once in your shoes) there are a few reasons that might be motivating you:

It’s fun and educational.
You are super passionate about a topic and want to share your thoughts with readers about it.
You want to use your blog as a website to generate money.

When I created my first blog it was a mix of wanting to share my perspective on a topic and learn more about publishing online (I was 13 and created a blog on GeoCities about video game cheat codes).

That experience has led me to create dozens of websites and now I create websites primarily with WordPress.

The current environment also serves as a catalyst to start a blog. People have more time at home, are reconsidering careers, thinking about pursing graduate school, and learning new programming languages in completely new and unexpected trends.

With the massive rise in working from home, people have had more time to devote to side projects and entrepreneurship. I expect that most people who are starting blogs today are doing so either because they have more time without a commute or they are taking the path of entrepreneurship as the world changes.

Getting started on a new venture has never been easier with a platform like WordPress. Companies like SuperHuman and EarlyBird are able to set-up simple websites that collect pre-registrations. A CMS like WordPress will allow you to start small and expand the capabilities of your website easily over time.

From small ideas to full digital transformation of your business, WordPress comes packed with power to achieve your dreams. No matter how small your idea, it’s easy to get started with WordPress.

Why should you choose WordPress?

WordPress is the most popular blogging software and content management system in the world. It currently powers about half a billion websites.

39% of the web is built on WordPress. More bloggers, small businesses, and Fortune 500 companies use WordPress than all other options combined. Join the millions of people that call WordPress.com home. -WordPress.com

If you are looking for blogging software, WordPress is an obvious choice with 60% of the market.

You have probably heard about or looked at other content managements like Joomla, Drupal, Squarespace, Shopify, and Wix. These content management systems offer great products, but here are 3 reasons to choose WordPress.

500+ sites are built each day using WordPress while only 60-80 per day are built on platform like Shopify and Squarespace
You can get started for free.
WordPress has an incredible developer ecosystem and you can build your web development skills quickly with WordPress.

So if I’ve convinced you to use WordPress, let’s discuss how to actually get started.

Starting a blog with WordPress.org.

How to start a WordPress blog for free on WordPress.com

Most people choose to use WordPress.org to create a self-hosted website. More on that below. But you can get started for free by signing up at WordPress.com. You can learn more about the differences between WordPress.com and WordPress.org at WPBeginner.

The free WordPress.com platform is a good choice to get started with WordPress. It is very user friendly and you will not have to worry about updates or backups. It’s free for up to 3GB of storage space. Beyond 3GB you will have to pay for more space.

WordPress.com’s free blogging platform will allow you to quickly get started.

Get started here and enter your email, username, and password.

Once you are setup, you will see the WordPress admin backend. Here you can edit your site's contents, select a Theme, and review your site's stats.

WordPress.com dashboard for a free prototype of a website I built.

After customizing your site with easy-to-use visual editing tools, you are all set up to start publishing posts and sharing your content with the world!

The free platform available on WordPress.com is very much freemium and is designed to get you to upgrade to a paid plan. It is a great way to start playing around with the tool and get familiar with adding pages, posts, and editing content.

All free sites are given a domain name of {something).wordpress.com. You can upgrade your plan to select your own domain name or transfer it from another service if you already own one.

The real power of WordPress is unlocked with a self-hosted version.

How to start a self-hosted blog with WordPress.org

WordPress.org allows you to create a fully-functioning website with the same features as WordPress.com and no restrictions. WordPress.org is open-source and 100% free for anyone to use, but you will need to pay for two things before getting started.

To get started self-hosting your WordPress, websites you will need three things:

A domain name
A hosting provider
A willingness to learn (that’s why you’re on freeCodeCamp!)

You can purchase a domain name from a variety of registrars like NameCheap, Bluehost, and GoDaddy. Domains cost about $20 per year.

There are hundreds of hosting providers to choose from. It is easy to choose the same host as your registrar like Bluehost or GoDaddy. Recently, there has been a rise in WordPress-specific hosts like Kinsta that specialize in WordPress.

Once you have your shiny new domain name and hosting provider, you need to install WordPress. Your host will help you do this.

For the advanced developers, you can install WordPress on your own server to have total control over your WordPress installation for better speed and security control.

When installing WordPress, you will usually need to provide some basic site and user information:

Site title (easily changed later)
Site tagline (easily changed later)
Admin username (can not be changed, pick something secure)
Admin password
Admin email

When WordPress has been successfully installed on your website, you can access the backend at yourdomain.com/wp-admin. Enter in the login information you provided and you'll be taken to the new admin dashboard of your very own website!

Via What Is the WordPress Admin Dashboard?

WordPress comes pre-installed with a theme (which is updated every year) and usually some demo content like a Sample Post and a Sample Page. This content is already available at your domain.

The next steps after successfully accessing the admin dashboard should be to add your customizations to the site. Start with a Theme and then edit your Pages and Posts.

How to choose and install themes

Themes are a fundamental part of WordPress. A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a website. They are the look and feel of your website.

Themes can be endlessly customized, but starting with a great theme will make your life very easy. You can select from thousands of themes available on ThemeForest and WordPress.org.

Themes can be easily installed by uploading a zip file into the Wordpress dashboard. Changing the look of your website is as simple as clicking "activate" on the newly installed theme.

After adding some style to your WordPress website, it’s time to add your content.

How to add Pages and Posts to your Wordpress site

Pages and Posts make up the majority of your site’s content. Pages are your webpages like your homepage, about page, contact us, and so on. Posts are the more frequently updated “blogs” that can be constantly added and organized under WordPress Categories.

Whatever you need your WordPress blog to be, it all starts with the content.

Whether it is a simple landing page to collect emails like Superhuman, a publishing superpower like TechCrunch, the official site of Sweden, a financial comparison website, or The Official Star Wars Blog (all of these are WP websites), people want to see your content! So get started by adding pages and posts.

Wrapping it all up

WordPress is one of the most popular software platforms in the world.

It is easy to set up and is endlessly customizable, making it a great choice for starting your own blog and website. Your web development skills will grow with your content and ideas as you get them out into the world.

Whether you use the free WordPress.com or a self-hosted version, WordPress is a great tool to use. So go get started!

How to Build a Blog with Gatsby and Netlify CMS – A Complete Guide

freeCodeCamp — Tue, 06 Oct 2020 15:16:00 +0000

By Mohammed Asker

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 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:

html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Managertitle>
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 tags. And the second file to add the tag is the public/index.html file. This one also goes in between the 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.

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.
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.
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:

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.

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.

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

React

How to Grow Your Audience and Share Your Content with the World

Colby Fayock — Thu, 11 Jun 2020 14:45:00 +0000

Building quality content can be a really rewarding task. But for those just starting out or those who don't yet have a large audience, that content can easily get buried amongst the other million tweets on Twitter. How can we expand our reach and help our content impact more people?

Creating our content for the masses
What do I mean by building an audience?
Leveraging larger platforms and publications
Syndicating with other platforms
Contributing to other publications
Sharing on content curation platforms
Other notable places

Creating our content for the masses

Every content creator has been there – you just wrote an article that you're super excited about and think it's going to be a massive hit. But you quickly find that overnight success never came when you wake up hoping to find thousands of likes on the tweet only to find none.

But that might not have anything to do with your article. It could absolutely be groundbreaking, but unfortunately there's not many people around to see it.

Social networks don't tend to prioritize their feeds based on how good your article is, but how much interaction and engagement that post received. While that kind of makes sense, that doesn't play well for people just starting out.

So how do we expand that reach? While the obvious route is to buy your way to the top with ads, I'm going to focus on more natural ways we can build our audience.

What do I mean by building an audience?

Your favorite web developers or social media influencers didn't start with 100,000 followers – most of them worked really hard to get where they are. That process is what building an audience is all about.

By creating content, you're working to find others who enjoy your take or get inspired by it. Ideally, those same people will follow you on their favorite platform with the hope that your next piece will inspire them just the same.

Your audience is those people who followed you or are actively engaging with the content you create. The ones who are supporting you by giving a thumbs up to your new video. The ones who subscribe to your newsletter because they're eager to see the awesome work you did that week.

By working hard on your content, being consistent, and finding your voice, you'll naturally build that audience. But to build that audience, people first need to see it. So how can we get it in front of people?

Leveraging larger platforms and publications

While your new blog might not have anyone subscribed to your RSS feed, there are platforms out there with large audiences that are actively looking for more authors.

By leveraging these audiences, you're helping to get your foot in the door. While you might need to give up a little bit of ownership of the article by writing it somewhere that's not your own blog, you're providing a means for more people to read your content and find out who you are.

This process can take many forms, but I'm going to focus on a few things:

Syndicating with other platforms
Contributing to other publications
Sharing on content curation platforms

Syndicating with other platforms

Syndicating your content can be one of the more effective means of getting access to a larger network while holding on to a lot of the benefits of hosting your own content.

Not all platforms are the same, but most of the ones I'm going to go over allow you to provide a canonical link to your own website. What this does is allow you to publish your work on different platforms all while the "SEO juice" ultimately flows back to your own blog.

While it's important from an SEO perspective, it's also generally a good way to keep your content hosted on your own website where you know you'll maintain it for the foreseeable future. If one of those platforms ends up closing down, you still have all of your content safe at home.

So what are some platforms that we can syndicate with and how can you set it up?

Dev.to

Dev.to is the choice platform for developers who want to share their knowledge and open up conversation to the larger tech community. They provide an incredibly welcoming and safe space where developers experienced and new can publish their work.

The great part about it is that everyone seems to get a bit of a fair chance at getting their work out to the world. While they have similar features to other networks where you can follow your favorite authors, newer authors still show up in the content feed giving you a chance to be seen.

To syndicate on dev.to, you'll want to set up the canonical link in the post configuration. When editing the content, you'll want to look for the settings icon, where you'll then be provided with an input where you can add the original URL for your post.

Adding a canonical URL to a dev.to post

Medium

Medium has suffered a lot of criticism lately due to its aggressive tactics and monetization strategies, but it's still an effective platform for newcomers who don't have an audience to get in front of.

Medium's large network of users and content curation makes it a great platform for expanding your reach. But it doesn't stop at posting there.

To be effective with your Medium posts, you want to look to get published with an existing Medium publication. Better Programming is one of the larger developer publications that are always looking for new authors to contribute.

Submitting to a Medium publication will help you take advantage of not only Medium's network, but that publication's network that gives you a better chance of getting selected by Medium's curation team and landing in someone's newsletter inbox.

Adding a canonical link to your Medium posts is a bit trickier though. To do this, you must "import" your story rather than copy and pasting it in. The good news, is Medium also tries to import all of the content, ideally making it a bit easier to add (remember to review all of the formatting!).

On your Stories page, you can find the Import button.

Importing a story on Medium

Once it's imported, you won't really be able to see much, but once you preview the page, you can view the source and find the canonical link added.

Canonical link in Medium post source

Contributing to other publications

While you might have to give up ownership of your content, writing for other publications or writing as a "guest post" is a great way to get started and gain some ground where you might not have had any before.

Depending on the publisher, you might not ever get the opportunity to post it on your own website, but you're trading that for the privilege to get your work out to potentially millions of people instead of the 10 unique visitors from the month of May.

This can even open up the door to more opportunities. This helps give your name recognition and authority that can help in your job search or simply another chance to write for the same publisher or a different bigger one.

The good news – is there's an endless supply of big name publishers that you can submit your work to. Here are a few you can get started with:

freeCodeCamp News
Smashing Magazine
CSS-Tricks
Sitepoint
Tuts+
Web Designer Depot
DZone
Pluralsight Guides (See "Teach" in footer)

Each of these publications have different processes of getting published. So be patient and keep working hard at your content.

Note: know of another publisher that offers writing opportunities? Let me know and I'll add them above!

It would be great if we all had a massive Twitter following where we could post about our new blog, but that's typically not the case. So while you should absolutely set up a social media profile and get your content out there, I'll focus on other platforms here.

Though there are certainly rules about self-promotion depending on the subreddit, Reddit's a massive community of real people who are curious and eager to learn about something new.

Learn about the different tech or webdev subreddits that are out there. Start getting involved with other people's posts. Develop a relationship with the people there and show why your content has value.

Hacker News

Hacker News is tough. It's hard to get noticed and on the front page. And even when you get on the front page, there's a good chance you'll get a lot of criticism you never expected to get.

But if you can have thick skin and learn to take the heat should you get noticed, Hacker News can be an incredible way to broadcast to the world. People have turned into overnight successes by ending up on the front page of Hacker News whether they're the ones who posted it there or not.

More platforms

While those are two of the big ones, there are a ton more. Here are a few more to get you started:

Other notable places

Chat-based Communities

There are a ton of communities using platforms like Slack or Discord that are incredibly supportive in helping each other grow. While you shouldn't simply spam your content, try to start a conversation around it. Talk about why the topic is important to you or how your tutorial can help others in their code journey.

Newsletters

This is something a lot of people regret not starting earlier – myself included. It's not too much effort to start a newsletter with a platform that has a free tier and keep it in your back pocket until you see some growth. No one's going to judge you for waiting a few months to put out content, but once you begin to grow your audience, they'll be excited to see all of your new work.

Other people's newsletters

You don't have to have your own newsletter to get into someone's inbox, there are already a ton of newsletter curators doing a lot of hard work to find great content around the web, but if they don't see it, how can they include it?

Most newsletter publications love to receive submissions. This helps their publication grow and include content from people who might not have a good opportunity on their own.

While you can Google around and find a newsletter that makes sense for you, here are a few that I follow along with that I know would love to see your work:

All Cooperpress Publications including Javascript Weekly, Serverless Status, and a bunch more
Web Tools Weekly
CSS Weekly

Building your "brand"

"Brand" is a funny word and can come sometimes come with negative connotations. But really as an author, your goal should be to build a presence that you carry with you consistently through all of your different outlets of work.

For instance, when possible, try to always use the same username when creating author profiles. You can find me mostly anywhere at @colbyfayock – it makes it easy for people to find me on a new network.

Also try to use the same picture. While it's definitely fun to customize your different profiles depending on who's there, the benefit of using the same picture is people will come to recognize you by that picture. They'll instantly be able to remember they saw your blog post when they see your tweet come through their feed.

Be patient, your time will come

You're not going to find an overnight success without spending a lot of money, so be patient. Content development is hard, it takes time to both build an audience and figure out your voice.

But chances are, if this is your first article you've ever written, maybe that first publisher you sent it to wasn't interested in it.

THAT'S OKAY! Don't give up! Send it to another publisher and try the original one for your next article. When I first started out, it took a few articles before I got accepted as an author to freeCodeCamp's Medium publication.

The more you write, the more you'll learn about what's effective. It's not a sprint – be patient and just keep up the hard work.

Most of these things aren't easy to do. The idea that you might have to face critical feedback of your work is absolutely scary!

But overcoming this fear is an important step of the process. I personally struggled with this when I began writing, but the more you put yourself our there, the less scary it becomes and you'll quickly notice there aren't as many bad people out there looking to say bad things about your work.

Instead, you're opening yourself up to an opportunity to learn and grow. Though not everyone's the same, the tech community can be overwhelmingly welcoming and supportive. The more you share and put yourself out there, the more receptive people will be to wanting to hear what you have to say.

Let me know on Twitter!

blog - freeCodeCamp.org

How to Create a Table of Contents for Your Article

Table of Contents

Browser Dev Tools

JavaScript Console

Understanding the DOM Structure

Dev Tools

How to Create the ToC in Markdown

How to Create an HTML ToC

Copy the HTML code for the editor

What to Do If I Don’t Have Headers?

How to Create a Table of Contents for DEV.to

Overview

Conclusion

How to Build a Blog with the Ghost API and Next.js

Table of Contents

Why Use Next.js for the Front End and Not a Ghost CMS Theme?

Project Requirements

How to Set Up Ghost CMS

Additional Ghost CLI Commands

How to Set Up Ghost CMS with the Cloud

How to Get the Blog Template

How to Set Up Next.js

Node packages to install:

What to Know Before Following This Tutorial

Vercel

Sakura Dev

Tuomo Kankaanpaa

Piyush Garg

Folder Structure

How to Configure Ghost CMS and Next.js

Understanding the Next.js 13 App Folder

Examples

Demo Data for the Project

How to Build the Blog

How to Build the Header

How to Build the Footer

How to Build the Layout

The data look like this:

BlogLayout component

How to Build the Homepage

The data look like this:

"why-do-we-use-it">Why do we use it?

"where-can-i -get-some">Where can I get some?

"kg-header-card-header" id="product">Produc t

"kg-header-card-subheader" id="my-blog-list">My blog list

"kg-header-card-header" id="thank-you">Thank you

Card component

"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"> {item.title}

How to Build the Reading Page

"mb-4 text-3xl font-extrabold leading-tight text-gray-900 lg:mb-6 lg:text-4xl dark:text-white"> {getPost.title}

How to Build the Author Page

"mb-4 mt-4 text-4xl tracking-tight font-bold text-center text-gray-900 dark:text-white"> {getAuthor?.name.split(" ")[0]} "font-extrabold"> {getAuthor?.name?.split(" ")[1]}

How to Build Single Pages

"mb-14 text-3xl font-extrabold leading-tight text-gray-900 lg:mb-6 lg:text-4xl dark:text-white"> {getPage.title}

How to Handle Pagination

The returned api.posts.browse({ limit: 10 }) data look like this:

Next.js SEO

How to Enable Search

Error Handling

"mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500">Something wrong

How to handle 404 errors

"mb-4 text-7xl tracking-tight lg:text-9xl text-primary-600 dark:text-primary-500">404

How to Rebuild Your Static Site with Webhooks

How to get the webhook from Vercel

How to integrate Vercel webhooks in the Ghost dashboard

Conclusion

How to Build a Table of Contents Component for Your Blog

How to Get Heading Text from the Frontmatter

How to Use extract-md-headings

How to Add Click and Scroll-based States

Why the Stress? IntersectionObserver Fixes This Issue

Wrapping Up

How to Add Categories to a Ruby on Rails Application

How to Generate the Blog Scaffold

How to Generate the Categories Scaffold

How to add an association between the blog and category models

How to display categories as a dropdown in the new blogs page

Listing each category's blogs

Categories

The returned `api.posts.browse({ limit: 10 })` data look like this: