But first, let me answer your likely question: “Why host a blog yourself when there are hundreds of blogging platforms available? “

One answer: Next.js.

Table of Contents

• What is Next.js?

• What is Sevalla?

• Building and Deploying a Next.js Blog

  • Building the blog

  • Deploying the blog

  • Adding a custom domain

• Conclusion

What is Next.js?

Next.js is a web development framework built on top of React. While React is a library for building user interfaces, Next.js adds extra features to make building websites and web applications easier and faster.

Next.js gives you full control. You own your content, your design, and your SEO strategy. Unlike Medium or Substack, you’re not limited by platform rules or branding. You can optimise every part of your blog, from how fast it loads to how it looks on Google search.

Next.js isn’t just a tool to build a blog. It’s a platform to build your entire brand. That’s why developers and indie hackers love it.

What is Sevalla?

Sevalla is a Platform-as-a-service provider that I have recently fallen in love with. Built by the team behind Kinsta, the popular WordPress hosting platform, Sevalla combines powerful features with a smooth developer experience. They offer application hosting, database, object storage, and static site hosting for your projects.

Unlike platforms like Heroku, which provide almost all features via additional integrations, Sevalla gives you exactly what you need to build and deploy an app to your users.

Imagine if someone took just the essential features from cloud platforms like AWS or Azure and put them into a single, easy-to-use dashboard. That’s exactly what the Sevalla admin panel has. A clean, simple interface with everything you need, and nothing you don’t.

In a nutshell, Sevalla handles all the heavy lifting of deploying and scaling your app, so you can focus entirely on building it.

Building and Deploying a Next.js Blog

Now let’s build and deploy our Next.js blog. We don't have to build one from scratch – there are many templates available for us to use, like this one.

We will do three things.

• Clone the repository and set up the blog on our local machine.

• Deploy the site to Sevalla

• Add a custom domain.

Building the blog

First, fork the Next.js blog repository.

Once you have forked it, clone it to your local machine.

git clone <repository url>

Once you have cloned the repository, go into the directory and run npm install . Make sure you have the latest Node.js and Next.js installed on your machine.

Now let’s run the blog on our machine. The command is npm run dev . Once the server is running, go to localhost:3000 to view the site.

You should see the above page. Now let's add our own blog post to it. Go to the content/blog directory. Every page in the content directory is your blog post, and you can use Markdown to style it. Save the file with the extension .mdx

Add the following text (the first part is the metadata for the blog to understand the title and date of publication):

---
title: "My New Post"
date: 2025-07-07
---

Welcome to my first blog post using Next.js and MDX!

Reload the home page, and you should now see two posts – the default post and your new post.

So every time you want to publish a new article, you create a new page using Markdown. It's that simple.

Commit this new file and push it to your repository.

git add .
git commit -m "new post"
git push origin main

Deploying the blog

Now create an account on Sevalla (use GitHub login so that you don't have to re-authenticate again).

Once you log in to Sevalla, you’ll see the Static site option. Click on it to create a static site.

Like other hosting providers, not all Sevalla products are free, but it comes with generous free credits. Unless you have a reasonable number of users that access your blog, you will not incur any costs for blogs/small projects. But when it comes to static sites, you can host up to 100 sites completely for free.

Select the repository from the list. Check the “Automatic deploy on commit” option. So every time you push code, Sevalla will automatically deploy your new post to the server.

In the “build settings” page, keep the defaults. Click “Create site”. In a few minutes, the app will be pulled from GitHub, deployed to a server, and you should see the button visit site .

If you visit the site, you should see the below page:

Yay! Your blog is live. You can also see detailed build logs under the “deployments” tab and see if there are any issues deploying your app.

Adding a custom domain

Great. For the last step, let's add a custom domain to our blog.

Go to the “domains” tab, and click “add domain” under custom domains. I'll be using a subdomain next from my private domain manishshivanandhan.com, but the instructions are the same for root domains as well.

Once you click “add domain”, Sevalla will give you the instructions to add the TXT records for verification and CNAME/A records for pointing the new site to your domain.

Once these are done on your domain provider, check back after a few minutes.

Hooray! You’ve created your own Next.js blog. Here is the sample site I built for this project – http://next.manishshivanandhan.com

Conclusion

And that’s it! Your very own Next.js blog is now live on Sevalla.

In just a short time, you’ve gone from cloning a template to publishing your first post and deploying it to the world with a custom domain. With Next.js, you get full control over your content and brand, and with Sevalla, deployment becomes effortless and smooth.

Remember, every time you want to publish a new article, all it takes is creating a simple markdown file and pushing your code. Sevalla handles the rest, so you can focus on what truly matters: writing great content and building your personal brand.

Hope you enjoyed this article! I’ll be back soon with more tutorials on building with Next.js. Feel free to connect with me on LinkedIn to stay in touch.

A blog sounded like a good solution for this, so I set out to build one. In this article, I will walk you through how I did it with Next.js.

The basic idea here was to build a website where I wouldn’t need to write code in the future. I just wanted to be able to add the URL of a new article to a JSON file, and the website would extract information like the title, date, cover image, and description and then update itself with it. No database.

To understand how I would go about it, I checked the metadata of the HTML text from each of the platforms I considered. I used my articles, of course, like the one in the project folder. I found out that most of them used Open Graph metadata. So, that was easy to scrape. But, I also found out that some information wasn’t in the meta tags – instead, it was in the JSON-LD. At the end of the day, I ended up using both in my functions.

What we’ll cover:

1. How the Blog Site Works

2. The Structure of an Article on the Blog

3. How the Search Feature Works

4. The Project Structure

5. Steps to Build the Blog

6. Conclusion

Pre-requisites

Understanding this article requires some knowledge of programming and web development. You need to have basic knowledge of HTTP, HTML, CSS, JavaScript, and React to be able to follow along easily.

If you don't have those skills, you may still be able to understand the general structure and working principles.

How the Blog Site Works

The project consists of client components and server components. It is a website, so ideally, it's just a front-end. But it has to fetch data from URLs – and doing that from the client-side won’t work due to CORS blocking, as the requests will be emanating from a browser. So, it has to run on the server.

The fetchArticles() function runs on the server – then this happens:

The fetchArticles() function accesses the URLs, extracts and processes the HTML and JSON Linked Data objects from the response, and returns an array of Article objects to the Home page.

The HomePage component is a client side component that has another component in it, named HomeClient. This HomeClient is a client side component. It has to be because it has useState hooks.

But the HomePage component calls the fetchArticles() function and sets the articles constant (which is an array of Article objects, as defined by the interface in the ArticleCard.tsx file). The articles constant is then passed down to the HomeClient component as a prop.

Inside the HomeClient component, there are two components – the Hero component, and the MainBody component. The Hero component shows the welcome message, and also has the search bar. The MainBody component is where the tags and the article grid are. Logic for filtering articles are also in the MainBody component.

Inside the MainBody component, there is the ArticleCard component that takes the filtered array of Article objects from the MainBody as props, and renders an article card for each. These cards are rendered inside the grid in the MainBody component.

What does an article look like?

The articles are defined by an interface:

export interface Article {
  id: number;
  title?: string;
  description?: string;
  publishedDate?: string;
  url: string;
  imgUrl?: string;
  siteName?: string;
  tags?: string[];
}

The interface, as shown above, specifies that the object will have eight properties, of which only the id and url are compulsory. Those compulsory properties are actually what’s needed in the JSON file from which the web server will read.

When the URL is visited by the server, the title, description, and other properties (except the tags) are obtained automatically and populated. Then the object is created.

The article cards consist of the article’s cover image, the name of the platform where it was published, the date published, the title, and a description. All of this is wrapped in an anchor linking to the URL. The tags are not visible on the cards, but are used in filtering operations.

How does the search feature work?

There's a reason why the Hero component and the MainBody component are in the same parent component. That wasn't my initial design, but after I saw that the search bar would look better in the Hero component, and that I needed to set the searchTerm state in the Hero component and use it in the MainBody component, that became the best option for me: to put both of them in the same parent, so I could pass down the useState hook as props into both of them.

The search feature works basically by filtering the articles array based on the tags selected, or the search term entered. Here is what the code looks like:

 useEffect(() => {
    const anyTagActive = isActive.some((val) => val);

    const filtered = articles.filter((article) => {
      console.log('Search term: ' + searchTerm || 'searchTerm');
      const searchMatch =
        article.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.tags?.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase())) ||
        article.siteName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.publishedDate?.toLowerCase().includes(searchTerm.toLowerCase());


        console.log('This is the searchMarch: ' + searchMatch || 'FALSE searchMatch');
        console.log(article.title || 'article.title no wan show');

      const tagMatch = article.tags?.some((tag) => {
        const index = tags.indexOf(tag);
        return index !== -1 && isActive[index];
      }) || false;

      if (anyTagActive) {
        return tagMatch && searchMatch; // Only return articles if tag is active and search matches
      }

      return searchMatch; // If no tags active, return all that match the search term
    });

    setFilteredArticles(filtered);
  }, [articles, searchTerm, isActive]);

Here, we use a useEffect() hook to monitor for changes in the articles, searchTerm, and isActive constants. isActive is a useState() hook that has an array of boolean values the length of the tags array.

const [isActive, setIsActive] = useState(tags.map(() => false));

Here, the filtered constant is equal to the filtered values of articles.

const filtered = articles.filter();

Inside the filter method is where the arrow function with the logic for filtering is written – (article) => {//logic}. We have two constants: tagMatch and searchMatch. The searchMatch constant is true when the title, description, tags, site name, or published date includes the search term. Else, it's false. The tagMatch constant is true when any tag from the article's array of tag is present in the tag list, and also has a corresponding isActive value of true.

If any tag at all is active, then the results for both tagMatch and searchMatch are returned, but if no tag at all is active, then only the searchMatch is returned as true.

The filtered article list is what is then passed into the ArticleCard component.

<ArticleCard articles={filteredArticles} />

Project Structure

This is what the project file structure looks like:

At the root, we have the config files and node_modules which is not displayed here. The public folder holds all the images and icons. Then, in the src folder, we have app, component, and utils.

The components folder holds the files for the components – the nav bar, footer, hero, main body and article card. The utils folder has all the functions that run in the background and do not need to render anything. The fetchArticles function is there, along with other functions for extracting the date published, title, description, image URL, and others from HTTP responses gotten from the article URLs. The app folder has the favicon, the global CSS stylesheet, the page and layout files, articles.json which is the JSON file where I add new article URLs for rendering, a test HTML file (wsl.html), and the about/ and api/ directories.

Inside the about folder, we have the about page, and inside the API folder, we have tthe folder, metadata-local-test which is no longer relevant to the project. I used it initially to create an internal API to fetch from the URLs. But I later restructured the codebase.

Steps to Build the Blog

1. Install Next.js

To install Next.js, navigate to the folder where you want the project to reside and open that location in your terminal. Then type the following:

npx create-next-app@latest

You're going to be met with the following prompts:

2. Navigate to your newly created project folder and install dependencies

In the newly created project folder, run the project in development mode to preview your newly created Next project. You will be shown a message directing you to localhost on port 3000. Now, it's time for us to start creating what we want.

Now, one more thing you'll need to do. In the project, I used lucide-react to get one of the icons, and cheerio to extract data from the HTML. So, you’ll need to install those dependencies.

To install lucide-react, use this command in the project folder:

npm install lucide-react

Then install cheerio:

npm install cheerio

3. Change the title and description in the page metadata

The title is what shows up at the top of your browser tab when you open up the website. Right now, it should be showing 'Create Next App.' We don't want that.

Since this is not just HTML, there is no index.html to change the title in the header element. Rather, Next.js provides us a Metadata object we can use to change things like that. And it'll be in the layout.tsx file in the app or src folder. Head over there and change it to whatever you want the title to be. I’m using “Chidiadi Portfolio Blog”.

4. Create the necessary components

Navigate to the side panel, and under the src folder, create a components folder. This is where the components will live. Here, create the article card, footer, main body and nav bar.

For the Navbar, this is the code:

export default function Navbar(){
    return(
        <>
        <div className="text-3xl md:text-base flex w-[100vw] md:w-[98.2vw] lg:w-[98.8vw] h-[60px] bg-black text-white px-0 md:px-7 md:py-2 items-center justify-center md:justify-between">
            <h1 className="font-bold">CHIDIADI   ANYANWU</h1>
            <div className="hidden md:block flex space-x-4">
                <a href="/" className="hover:text-gray-400">Blog</a>
                <a href="/about" className="hover:text-gray-400">About</a>    
            </div>
        </div>
        </>
    );
}

Here's what the Hero component looks like:

"use client";

import { Search } from 'lucide-react';
import { useState } from 'react';

interface HeroProps {
    searchTerm: string;
    setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
  }
export default function Hero({ searchTerm, setSearchTerm }: HeroProps) {
    const [buttonColor, setButtonColor] = useState('');

    return (
        <div className="bg-[url('/img-one-1.jpg')] bg-cover bg-center bg-no-repeat flex flex-col items-center justify-center h-[400px] relative">
           <div className=" absolute inset-0 bg-black opacity-60"></div> 
            <h1 className="text-4xl text-white font-bold text-center z-10">My Portfolio Blog</h1>
            <p className="mt-4 mx-4 text-xlarge text-white md:text-xl text-justify md:text-center z-10" style={{ fontFamily: "Cormorant Garamond" }}>
                My name is Chidiadi Anyanwu. I am a technical writer with a strong background in networking. 
                I write about Networking, Cloud, DevOps, and even sometimes web development like this one. I built this
                website with Next.js, and there's also an <a href="/" className="text-blue-500 hover:text-blue-700 hover:underline">article about that.</a>
                  This website holds my technical articles in one place. It is a repository of my written works.
            </p>
            <div id="searchbar" className="h-9xl mt-4 flex align-items-center justify-center w-full" >

                <form onSubmit={(e) => {e.preventDefault();  setSearchTerm(searchTerm);}} className="group mt-4 relative w-[70%] md:w-[50%]">
                    <input  value={searchTerm} onChange={(e) => setSearchTerm(e.target.value) } onFocus={()=>{setButtonColor('bg-blue-500'); console.log('input focused')}} onBlur={()=>{setButtonColor('');}}type="search" placeholder="Search Chidiadi's articles" className="h-[50px] w-full px-[48px] border-3 border-blue-300 rounded-[25px] focus:outline-none focus:border-blue-500 text-black bg-white"/>
                    <button className={`h-[42px] w-[42px] absolute right-0 mr-1.5 mt-1 rounded-[50%] bg-blue-300 ${buttonColor}`}>
                        <Search  className='m-auto text-white'/>
                    </button>
                </form>

            </div>
        </div>
    );
}

In this file, we created the HeroProps interface to accept the search props. Then we deconstructed both searchTerm and setSearchTerm from it as props to the Hero component. We’ll make it a client component 'use client' because of the buttonColor useState() hook that changes when the search bar is clicked and sets the search button background color.

The MainBody component looks like this:

"use client";

import { useEffect, useState } from 'react';
import ArticleCard, { Article } from './ArticleCard';

interface MainBodyProps {
  searchTerm: string;
  articles: Article[];
}

export default function MainBody({ searchTerm, articles }: MainBodyProps) {
  // Get articles from JSON file and create array of article objects

  const [filteredArticles, setFilteredArticles] = useState<Article[]>([]);

  const tags = ["Networking", "Cloud", "DevOps", "Web Dev", "Cybersecurity"];
  const [isActive, setIsActive] = useState(tags.map(() => false));


  // Filter articles based on search term and active tags
  useEffect(() => {
    const anyTagActive = isActive.some((val) => val);

    const filtered = articles.filter((article) => {
      console.log('Search term: ' + searchTerm || 'searchTerm');
      const searchMatch =
        article.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.tags?.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase())) ||
        article.siteName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        article.publishedDate?.toLowerCase().includes(searchTerm.toLowerCase());


        console.log('This is the searchMarch: ' + searchMatch || 'FALSE searchMatch');
        console.log(article.title || 'article.title no wan show');

      const tagMatch = article.tags?.some((tag) => {
        const index = tags.indexOf(tag);
        return index !== -1 && isActive[index];
      }) || false;

      if (anyTagActive) {
        return tagMatch && searchMatch; // Only return articles if tag is active and search matches
      }

      return searchMatch; // If no tags active, return all that match the search term
    });

    setFilteredArticles(filtered);
  }, [articles, searchTerm, isActive]); 

  console.log(filteredArticles);

  return (
    <div className='scroll-smooth'>
      <div id="tags" className="flex w-full h-[200px] md:h-[60px] justify-center gap-5 py-4 flex-wrap max-w-[100vw] scroll-smooth">
        {tags.map((tag, index) => (
          <p
            key={index}
            onClick={() => {
              const newIsActive = [...isActive];
              newIsActive[index] = !newIsActive[index];
              setIsActive(newIsActive);
            }}
            className={`h-[48px] w-[140px] border-3 rounded-[40px] px-2 py-2 text-center font-bold ${
              isActive[index]
                ? 'bg-black border-black text-white hover:bg-gray-700 hover:border-gray-700'
                : 'border-blue-500 hover:bg-blue-500 hover:text-white'
            }`}>
            {tag}
          </p>
        ))}
      </div>

      <div id="articlegrid" className="w-[100vw] md:w-[98vw] grid gap-2 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 mt-5 px-3 py-3">
        <ArticleCard articles={filteredArticles} />
      </div>
    </div>
  );
}

Here, we have props from the parent component too, but we only need the articles fetched and the search term. We don't need to set the fetch term from this component.

To render the tags, I first created the array of tags and an array of boolean values to record the states of the tags (whether they're active or inactive).

const tags = ["Networking", "Cloud", "DevOps", "Web Dev", "Cybersecurity"];
const [isActive, setIsActive] = useState(tags.map(() => false));

Then, inside the return statement, I mapped through the tag array to render them one by one. The onClick event handler also works here to make sure that the isActive state for that particular tag is toggled when it is clicked.

So how does this work? It creates a new array called newIsActive that is a copy of the isActive array. It then gets the particular tag by index number and inverts it. Then it sets the isActive array to this new array.

{tags.map((tag, index) => (
          <p
            key={index}
            onClick={() => {
              const newIsActive = [...isActive];
              newIsActive[index] = !newIsActive[index];
              setIsActive(newIsActive);
            }} . . .

This is the code for the ArticleCard:

import React, { useState } from 'react';
import Image  from 'next/image';

export interface Article {
  id: number;
  title?: string;
  description?: string;
  publishedDate?: string;
  url: string;
  imgUrl?: string;
  siteName?: string;
  tags?: string[];
}

interface ArticleProps {
  articles: Article[];
}

const ArticleCard = ({ articles }: ArticleProps) => {

  return (
    <>
    {articles ?

      (articles.map((item, id) => (
        //anchor tag for the link
        <a key={id}  href={item.url} className='max-w-[350px] mx-auto mb-5'>
            <div className="sm:w-[350px] hover:brightness-70" data-title={item.title} data-description={item.description} data-published-date={item.publishedDate} data-tag="Networking" data-site-name={item.siteName}>
            <Image
              src={item.imgUrl || '/img-2.jpg'} 
              alt={item.title || 'Article Image'}
              width={350}
              height={400}
              className="object-cover rounded-[10px]"
            />
            <div className="flex h-[43px] text-[14px] text-gray-500 gap-2">
                <p id="Platform" className="py-2 h-[42px] md:text-sm mt-auto mb-auto">{item.siteName}</p>
                <div className="h-1 w-1 bg-black rounded-full mt-auto mb-auto bg-gray-500"></div>
                <p id="publishedDate" className="py-2 h-[42px] mt-auto mb-auto">{item.publishedDate}</p>
            </div>
            <h1 id="titleOfArticle" className="font-bold text-base md:text-3xl">{item.title}</h1>
            <br/>
            <p className='w-full md:w-[350px]'>{item.description}</p>
            </div>
        </a>
      )))
      :

      ( Array(6).fill(0).map((item, id) => (
        <div key={id} className="w-full md:w-[350px] h-[350px] bg-gray-500 mx-auto mb-5 hover:brightness-80 rounded-[10px] animate-pulse"></div>
      )))
    }
    </>
  );
};

export default ArticleCard;

Here, we defined and exported the Article interface so that we can create Article objects in the MainBody. Then, we created an interface to pass down the props of an array of Article objects.

Next, there's this part to ensure it renders something even if for some reason no Article object was passed:

{
    article?
    ( {/*If article exists, render this*/} )
    :
    ( {/*Else, render this */} )
}

Our fail-safe here is an empty array of six objects with the Tailwind animate-pulse:

 ( Array(6).fill(0).map((item, id) => (
        <div key={id} className="w-full md:w-[350px] h-[350px] bg-gray-500 mx-auto mb-5 hover:brightness-80 rounded-[10px] animate-pulse"></div>
      )))

I could have made this part much better, but I was feeling a little lazy. I also used the Image from Next, instead of the regular img. This requires that you edit the next.config.ts file. I had to go add all the paths that the images could possibly be loaded from:

Just like in the screenshot above, the syntax is:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
        {
            protocol:"https",
            hostname:"licdn.com",
            pathname:"/**"
        },
        {
            protocol:"",
            hostname:"",
            pathname:""
        }
        ],
    },
};
export default nextConfig;

It takes a remotePatterns array that consists of remote pattern objects, which have a protocol, hostname, and pathname property. Make sure the protocol and hostname properties are not empty like in the second object in the code sample above. That would cause errors. It’s either the objects are populated properly or they’re deleted.

The Footer looks like this:

export default function Footer() {

    return (
        <footer className="bg-gray-100 text-center py-4 mt-10">
            <div className="flex align-items-center justify-center text-sm text-blue-400 font-bold">
                <a href="/" className="hover:text-blue-600">Home</a>
                <p> &nbsp; &nbsp; | &nbsp; &nbsp; </p>
                <a href="/about" className="hover:text-blue-600">About</a>
            </div>
            <p className="text-sm text-gray-600">© {new Date().getFullYear()} Chidiadi Anyanwu. All rights reserved.</p>
            <p className="text-sm text-gray-600">Built with Next.js and Tailwind CSS</p>
        </footer>
    );

}

This new Date().getFullYear() helps me get the current year all the time.

5. Place the components properly

The nav bar and footer components are things that will not change no matter the page you visit. So they should be placed in a more permanent and untouched location. We can put both of them in the root layout.tsx file like this:

 <body className={`${geistSans.variable} ${geistMono.variable} antialiased scroll-smooth`}>
      <Navbar />
      {children}
      <Footer />
  </body>

{children} is where the contents from page.tsx will enter. So, we sandwiched all the other content in the Nav bar and footer. Apart from adding <link /> tags for fonts (because this is where the root HTML is), we really don't have business with this file again.

Now, in the same app/ folder where this layout file is, create the <HomeClient /> file. This is how it looks:

'use client';

import { useState } from 'react';
import Hero from '../components/hero';
import MainBody from '../components/mainbody';
import { Article } from '../components/ArticleCard';

interface Props {
  initialArticles: Article[];
}

export default function HomeClient({ initialArticles }: Props) {
  const [searchTerm, setSearchTerm] = useState<string>('');
  const [articles, setArticles] = useState<Article[]>(initialArticles);

  return (
    <div>
      <Hero searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
      <MainBody searchTerm={searchTerm} articles={articles} />
    </div>
  );
}

Then, put the HomeClient component inside the page.tsx file:

import { fetchArticles } from '../utils/fetchArticles';
import HomeClient from './HomeClient';

export const revalidate = 3600;

export default async function HomePage() {
  const articles = await fetchArticles(); 

  return <HomeClient initialArticles={articles} />;
}

The server is set to fetch the articles at build time, and fetch again (revalidate) every hour (3600s). So, it doesn't fetch the articles from the URLs upon user request of the page.

Initially, it worked by fetching any time the component was mounted, but I noticed that this caused the page to load very slowly. The articles didn't pop-up on time, because there's a lot of fetching to be done.

In that same app/ directory, create an about/ folder, and create the page.tsx for that route:

import Image from "next/image";
export default function About() {
    return (
        <>
            <div className="flex items-center justify-center">
                <div className="margin-auto w-[90vw] md:w-[60vw] lg:w-[50vw] h-[450px] hover:bg-gray-100 border-1 md:border-2 border-gray-200 shadow-sm flex flex-wrap  items-center justify-center gap-2 mt-10 mb-10 rounded-lg">
                    <Image
                        src="/MyPhotoChidiadi.jpg" 
                        alt="Avatar"
                        className="rounded-[50%] h-30 w-30"
                        width={120} 
                        height={120} 
                    />
                    <div className="w-[90%] mx-auto">
                        <h1 className="text-xl text-center my-1 font-bold">About Me</h1>
                        <p className="text-justify my-3">
                            My name is Chidiadi Anyanwu. I love breaking down complex concepts.
                            I write about Networking, Cloud, DevOps, and even sometimes web development. 
                            You can connect with me by following any of the links below.
                        </p>
                        <hr className="border-gray-300 my-3" />
                        <div className="flex gap-7 w-full my-3 justify-center"> 
                            <a href="https://github.com/chidiadi01">
                                <Image src='/github-icon.svg' alt="github logo" width={24} height={24} />
                            </a>
                            <a href="https://linkedin.com/in/chidiadi-anyanwu">
                                <Image src='linkedin-icon.svg' alt="linkedin logo" width={24} height={24}/>
                            </a>
                            <a href="https://x.com/chidiadi01">
                                <Image src='x-2.svg' alt="x logo" width={24} height={24}/> 
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

6. Create the utils folder and all the functions

The next step is to create all these files.

Under the same app/ directory, create the utils/ folder. app/utils/. Then start with the fetchArticles() function. The fetchArticles() function is what accesses the API route in the project to obtain the array of Article objects from an array of URLs. The fetchArticles() function returns an array of those objects which are then stored in the articles variable. It looks like this:

import { getPublishedDate } from './getPublishedDate';
import { getTitle } from './getTitle';
import { getImageURL } from './getImageURL';
import { getDescription } from './getDescription';
import { getPlatform } from './getPlatform';
import articleFile from '../app/articles.json';
import { Article } from '../components/ArticleCard';
import * as cheerio from 'cheerio';

export async function fetchArticles(): Promise<Article[]> {
  console.log('Fetching articles...');
  const results = await Promise.all(
    articleFile.articles.map(async (item) => {
      //Validate URL first
       if (!item.url || typeof item.url !== 'string' || item.url.trim() === '') {
        console.warn(`Invalid URL: ${item.url}`);
        return null; // Skip this item
      } 
      console.log('The URL: ' + item.url);
      let data;
      try {

        // Fetch metadata and HTML from the URL
        const response = await fetch(item.url, {
          headers: {
            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36',
            'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
            'Accept-Language': 'en-US,en;q=0.5',
            'Referer': 'https://www.google.com/', 
          },
        });

        console.log('Fetched: '+ item.url);

        if (!response.ok) {
          console.error(`HTTP error! Status: ${response.status} for URL: ${item.url}`);
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const html = await response.text();
        const $ = cheerio.load(html);
        const jsonScript = $('script[type="application/ld+json"]').html();

        console.log('Gotten HTML response');

        if (!jsonScript) {
          throw new Error('No JSON-LD script found on page');
        }

        const metadata = JSON.parse(jsonScript);
        console.log('Gotten metadata');


        // Combine metadata and HTML into a single object
        data = { metadata, html };
      } catch (error) {
        console.error(`Failed to fetch metadata for URL: ${item.url}`, error);
        return null;
        console.log('The default empty object has been returned here');
      }

      // Use the combined data (metadata and HTML) to construct the article object
      if(getTitle(data) && getDescription(data) &&
         getPublishedDate(data) && getImageURL(data) &&
         getPlatform(data) || (item.title && item.description &&
         item.image)) {
        return {
        ...item,
        id: item.id ?? 0,
        tags: item.tags ?? [],
        title: getTitle(data) || item.title || 'No title',
        description: item.description || getDescription(data) || 'No description',
        publishedDate: getPublishedDate(data) ?? 'No date',
        imgUrl: getImageURL(data) || item.image || '/img-2.jpg',
        siteName: getPlatform(data) || data.metadata?.publisher?.name || 'Unknown site',
        url: item.url || '',
      } as Article;
      console.log('Proper item returned');
      } else { return null; }
    })
  );

  // Filter out null values and sort the articles by published date in descending order
  const filteredResults = results.filter((article): article is Article => article !== null);
  const sortedResults = filteredResults.sort((a, b) => {
    const dateA = new Date(a.publishedDate || '').getTime();
    const dateB = new Date(b.publishedDate || '').getTime();
    return dateB - dateA;
  });
  console.log(sortedResults);
  return sortedResults;
}

It maps through the articles in the articleFile, which is the JSON file with an array of objects with article URLs. For each of them, it sends a request to the URL, and from the data gotten, returns an Article object. Then, the array of objects created, results, is first filtered to remove null objects, and sorted in descending order by their date properties. So, the latest article shows up first.

It’s then assigned in the HomeClient component:

 const articles = await fetchArticles();

In the fetchArticles() code above, you can see that some other functions were used to extract the properties from the URLs, and assign them. Also, during deployment, I found that Substack couldn’t be accessed by the server, so I’m going to add code to allow creation of Article objects from an RSS feed. That will be in the project repository.

Now, let's talk about the other functions.

The getTitle() function:

import * as cheerio from 'cheerio';

export function getTitle(data:any): string {
    if(!data) return 'Title Loading . . .';

    if (data?.html) {
        const $ = cheerio.load(data?.html);
        const ogTitle = $('meta[property="og:title"]').attr('content') || $('title').text();
        return ogTitle;
    }

        return 'The Title of The Article';
    }

This is a very simple function. It takes the data parameter, and if there's no data, it returns Title loading . . .. But if there is data, it checks to see if there's HTML in the data. If there is, it then uses cheerio to load the HTML text and extract the title from the Open Graph title metadata or from the <title> tag in the HTML header. Else, it returns The Title of the Article.

Here, we use jQuery-like syntax $ to select the HTML elements, like in $('title'). The data taken as a parameter is the response gotten from a HTTP request to the article's URL.

The getDescription() function:

import * as cheerio from 'cheerio';

export function getDescription(data: any): string {
  if (!data) return 'Description Loading . . .';

  if (data?.metadata || data?.html) {
    const $ = cheerio.load(data?.html || '');
    const description = data?.metadata?.description ?? $('meta[property="og:description"]').attr('content') ?? 'No description found';
    return description;
  }

  return 'No description found';
}

The getURL() function:

import * as cheerio from 'cheerio';

export function getURL(data: any): string{
    if(!data) return 'url';

    if(data?.metadata || data?.html){
        const $ = cheerio.load(data?.html);
        const url = data?.metadata.url || $('meta[property="og:url"]').attr('content');
        return url;
    }
    return 'url';
}

This function is not really used to get the URL of the article for use in the object. Rather, it is used to get the URL for another function, getPlatform(). It works the same way as the ones we discussed before.

The getPlatform() function:

import { getURL } from './getURL';

export function getPlatform(data: any): string {
    if (!data) return 'Platform1';

    const url = getURL(data);

    if (data?.html) {
      const regex = /^(?:https?:\/\/)?(?:www\.)?([^\/\n]+)\.(?:[a-zA-Z]{2,})/;
      const platform = url.match(regex);
      return platform?.[1].toUpperCase() || 'Platform2'; 
    }

    return 'Platform3';
  }

This function is meant to extract the name of the platform where the article is posted. I toyed with various ideas for how this should work. One of them was using the siteName property in the OG meta tags, but I realised from my inspection that not all platforms had it populated in a helpful way. So, the results gotten from that method would be too unpredictable.

So I decided to use regex (Regular Expressions) to extract the site name from the URL. As you can see from the code, I didn't achieve a perfect result, but it is usable.

First of all, it gets the URL of the article with the getURL() function. Then, it uses regex:

/^(?:https?:\/\/)?(?:www\.)?([^\/\n]+)\.(?:[a-zA-Z]{2,})/

Here, / and / at the beginning and end are to start and end the regex string. The caret ^ marks the beginning of a line.

Then, we have four groups ()()()(). The first one is a non-captured group (?: ). That means whatever text that matches that should be grouped together in a string, but should not be captured to be assigned to the variable. It captures any text with a 'http' in it, with or without the s s?, and with two slashes after. The forward slashes were escaped with backward slashes so they can be recognised as literal characters. Then, the whole group itself is made optional by adding the question mark after it (...)?. So, whether such a group is matched or not, the code works.

The second group is also a non-capturing group, also denoted by ?: being the first thing inside the bracket. This one matches any 'www.' in the string. It's also optional. A URL may not necessarily be written with it.

The third group is a capturing group as it doesn't have ?: inside the brackets. Rather, it has a character class in it []. But it's a negated class [^ ]. It makes sure that the class does not contain a newline character n (the newline character n is not a string of letter n – that's why it is escaped) or a forward slash /, because a URL is supposed to be one line, and not multiple lines. The + means one or more characters, ([^\/\n]+). Whatever is in this group will get captured in the variable.

Then, the next one matches a dot (it is escaped with a backslash \.). After that is the last group which is also non-capturing and matches any character which is alphanumeric, capital or small letter [a-zA-Z], that occurs more than two times {2, }.

So, if we have 'https://www.linkedin,com' we would have an array of captured groups ['https://www.linkedin.com','https://','www.','linkedin','com']. Group 1 = 'https://', group 2 = 'www.', group 3 ='linkedin', group 4 = 'com'. But since only group 3 is a captured group, others will be discarded, and we have an array with only two items, the full string, and the captured group: ['https://www.linkedin.com','linkedin'].

So, here, we return the second item in the array. The first item is always the full string we matched.

return platform?.[1].toUpperCase()

This doesn't account for sub domains, though. This is tricky because sometimes you want to use the name of the subdomain (as in my Substack), and sometimes you want to use the name of the domain. So, I left it like that.

The getImageURL() function:

import * as cheerio from 'cheerio';

export function getImageURL(data: any): string {
    if (!data) return '/img-2.jpg'; 

    if (data?.metadata || data?.html) {
        const $ = cheerio.load(data?.html);
        const ogImage = $('meta[property="og:image"]').attr('content') || data?.metadata.image;
        return ogImage || '/img-2.jpg'; 
    }

    return '/img-2.jpg'; 
}

This function works just like others, and obtains the cover image URL from either the Open Graph image meta tag $('meta[property="og:image"]').attr('content') or || the image property in the JSON-LD data data?.metadata.image.

The getPublishedDate() function:

import * as cheerio from 'cheerio';

export function getPublishedDate(data: any): string {

  if (!data) return 'Date';

  const publishedDate = data?.metadata?.datePublished;

  if (publishedDate) {
    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
    return new Date(publishedDate).toLocaleDateString('en-US', options);
  }

  if (data?.html) {
    const $ = cheerio.load(data?.html);
    const ogPublishedTime = $('meta[property="article:published_time"]').attr('content') ||
                            $('meta[property="og:published_time"]').attr('content') || 
                            $('meta[name="pubdate"]').attr('content');

    if (ogPublishedTime) {
      const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Date(ogPublishedTime).toLocaleDateString('en-US', options);
    }
  }
  return 'Date';
}

This function is especially useful because of the need to convert the date from the ISO 8601 format (2025-04-07T10:47:19+00:00) to the more readable format I want (April 7, 2025). Here, I used the .toLocaleDateString() JavaScript function to make it work (see the (MDN).

7. Create your JSON file

Now, remember that we're building this to be able to pull URLs from a JSON file to put together and render the web page. That JSON file is the starting point of everything. I believe by now you're getting an error concerning that. So we need to create the JSON file.

In the app/ directory, create a new file and name it articles.json.

Then populate it like in this file below – an array of objects with id, URL, tags, and so on. Even though we are not trying to get the title, description, and everything from this file directly, I put in that feature. If you go back to our fetchArticles() function, you'll see that for most of the properties, whatever you write here will override what was gotten from the URLs.

It was partly a fail-safe because I thought that LinkedIn would block all requests, and as you can see from my blog already, some description tags were not well organized. So, we can replace them later with a cleaner description just by modifying this file.

{
    "articles": [
        {
            "id": 1,
            "url": "https://thenetworkbits.substack.com/p/an-overview-of-json",
            "tags": ["Web Dev", "DevOps", "Cloud"],
            "title": "",
            "description": "",
            "image": ""
        },
        {
            "id": 2,
            "url": "https://websecuritylab.org/how-safe-is-public-wi-fi-a-network-engineer-explains/",
            "tags": ["Networking", "Cybersecurity"],
            "title": "",
            "description": "",
            "image": ""
        },
        {
            "id": 3,
            "url": "https://www.freecodecamp.org/news/automate-cicd-with-github-actions-streamline-workflow/",
            "tags": ["DevOps"],
            "title": "",
            "description": "",
            "image": ""
        }
    ]
}

Here, we have an "articles" object with an array of objects, each of which have "id", "url", "tags", "title", "description", and "image" properties. You don't necessarily need the values of all of these except the ID and URL, but the keys have to be there to prevent errors.

8. Add the finishing touches

Now you can add your own favicon in the app directory. It could be a 24px by 24px file, or 48px by 48px file. It doesn't necessarily have to be in the app directory or be an icon file or be named 'favicon' – but I did it that way. You can just add this in the HTML header of your layout.tsx file which is your Next.js version of index.html. The favicon is the icon that shows on the tab in your browser when you open the page.

<link rel="icon" href="/favicon.ico" sizes="any" />

You can also read the Next.js documentations on that here: Metadata Files: favicon, icon, and apple-icon | Next.js. Then add your images to your public/ directory. Be sure to name them correctly, and reference them correctly.

Now, if your development server was down, spin it up again to see your end results!

npm run dev

Conclusion

If you've read this far, then you must be really interested in seeing the results of all this :) I already have that covered. Here's the blog. You can go through it and interact with it.

Also, this is the codebase. Feel free to fork it, clone it, and interact with it as well. If you enjoyed the article, please share it with others. You can also connect with me on LinkedIn or X. Thanks for reading.

It can also simply be the place where you build a loyal audience within your niche, share your knowledge and ideas, and help other devs.

The benefits of having a personal blog as a developer

In this article, I'll share why I blog, as well as why I think it's a great idea for you, too.

Why I Write Technical Articles

Here's something I've learned over the past five years of blogging: don't start by telling the audience why you wrote a blog post. Instead, tell them why they should read it, and then do your best to prove yourself right.

I recently revamped my blog and began writing consistently, to the point where I now write a new tutorial once a week. And I’ve already seen a lot of good results.

I've also started paying more attention to my analytics. This helps me give people what they want, answer their questions, and keep them coming back for more. I'll talk a bit more about analytics later.

I found my mission in teaching developers about topics like how to start your own blog, how tools such as React, Angular, JavaScript, and TypeScript work, and so on. I release a new article every week on my blog theankurtyagi.com, explaining all I know about a specific topic.

If you are into React or developing on the Web, you won't want to miss it. And I just started creating a new React writing boot camp where I share my 14 years of tech experience and how I've built multiple applications.

Now I'll share my thoughts on writing technical tutorials, and why I think you should have your own blog as a developer.

Table of Contents:

• Understand Your Tech Abilities and Soft Skills
• Doubts You May Have Before Starting a Developer Blog
• How to Start Writing Your Own Blog
• Why Writing is Helpful for Developers
• How Writing Can Help Advance Your Software Engineering Career
• How to Write an Effective Technical Blog

Understand Your Tech Abilities and Soft Skills

If you’re working in tech, you can take advantage of the skills you already have and share your knowledge with the community. Do any of the following statements apply to you?

• You excelled at much of your past work, and you know that companies (or people) will pay for that work.
• People ask you for advice based on your past work.
• Somebody said, “You should write something or record a video to document your experiences because you offered me so much value when you mentored me or helped me in a peer programming session or saved me from that production bug while reviewing my PR pull request”

The value you bring to your audience comes from a combination of your perspective and your interpersonal skills.

Think back to what other people have asked you to do, or what you've volunteered to do in your career—because you're good at those activities.

But don’t stop with technical skills. While core technical skills are useful, they are not all you'll need for long-term success as you move up in your tech career. That’s because the more responsibility you take for your client’s growth and results, the more the more helpful you can be to other people’s work. And this often starts with communication skills – so don't neglect them.

Doubts You May Have Before Starting a Developer Blog

I am not an expert writer

Every developer has a unique angle and a perspective on something worth sharing.

You may believe you don't know as much as senior developer X, but junior developer Y may have much less experience and would benefit from reading about your career journey and learnings.

Also, the best time to teach something is right after you've learned it because you remember how it feels when you didn't know it – so you can more effectively teach a beginner about it.

In this case, you can write for a student who has recently learned something new. Every day, I learn something new.

Approximately 80% of what I end up writing these days is something I discovered while researching a topic on the internet.

I’m just a good enough writer

I'm not a professional writer, but that doesn't bother me. Remember that you will never become a better writer unless you write every day for years. If you practice enough, and actively try to improve your writing, you'll eventually improve your writing skills.

To create something good, just start writing. To create something exceptional, write, revise, and revise again. The key to producing excellent writing lies in dedicating significant time and effort to the rewriting process.

All Developers Fear Criticism

Some things are fragile and break with a sudden shock, like a water glass.

Some things are not fragile and remain intact even when faced with a sudden impact or shock, like a teddy bear.

And some things, like our immune system, are anti-fragile, meaning they improve when subjected to a shock. Your immune system does not develop properly if you are not exposed to a series of smaller shocks as a child.

Similarly, to become a better developer in tech as a result of criticism, you must develop an anti-fragile attitude towards criticism. That is, with every bit of critique you receive, you can learn to use it to become better.

If you do not learn this, you will remain at your current level. You can do this at the meta-level as well: become anti-fragile in dealing with criticism in general, and become a better human being as a result of it.

Empowering self-hacking starts with cultivating a heightened awareness of your own emotional state. Recognizing anger, for instance, weakens its hold on you. When angry, you may engage in actions you otherwise wouldn't. (Anger can sometimes serve as a signal that our boundaries have been crossed.)

Certain online platforms, like Reddit and Hacker News, are known for their unfiltered feedback. Embrace this as an opportunity for growth. Remember, you only truly evolve when faced with challenges.

You also have the choice not to engage if you prefer. Concerned about potential negative comments on a controversial post? You can always disable comments altogether.

Also, remember that not everyone gives valuable criticism in tech.

• Some people just don’t connect with your work.
• Some people won’t like what you’re writing.
• Some people aren't yet ready to critique your work.
• Some people are just mean.
• Some people like your style of writing. Others won't.

And sometimes when people stare at screens all day, like those of us in tech, they can unwittingly be more harsh and direct. It's not a great way to communicate, but it might not be malicious.

If you can get past the sting of the critiques and use them to improve your writing, you'll have a lot to offer the developer community through your tutorials.

How to Start Writing Your Own Blog

Rich people might seem to have it all – money, power, influence, and whatever else they crave. But there’s one thing they want that money can’t buy: good ideas.

Writing is how you share your ideas, and if you do it well, you can often gain access to a coffee or dinner with almost any tech CEO in software engineering.

I've been writing for around 5 years, so here's my take:

• Just start writing: If you've been wanting to start your own blog, stop thinking about it, and just do it. Open a blog on WordPress and start writing. That's my first advice to anyone. Don't waste time on the technicalities, just write. You can move your blog to another platform later.
• Be consistent: This is hard. I fail to follow this rule most of the time. But a successful blog is a blog that's been going on for ages, and where the creator posts regularly. I've posted 100+ posts since 2020 on my blog and 100+ for various startup developer tools – and that's why it has been working well for me.
• Don't try to be perfect: You are not writing a book. A blog is to share knowledge quickly or to share what's on your mind. No hesitation, once you have something, publish it. People might call you out for saying something wrong, fine – that's free publicity and you'll have learned something new.
• Mix short posts with long posts: It's difficult to keep writing high-quality content and long blog posts all the time. So write small ones from time to time to fill in between more in-depth guides. This is what makes people keep going to your blog. It's like a Twitter feed, it needs to have something every time people check it.
• Write on current/popular subjects: What did you learn recently that could be helpful to other people? What did you have trouble learning because there was no good resource on the subject? You could be that resource. What is Google Trends saying? Are there any trendy topics in your field? What are people talking about recently?

I generally start with an idea instead of a title. Then I write down what I know about it. Next, I put those thoughts in an order that I can use to tell a story. Finally, I research to confirm that what I think I know is indeed true and correct. That is where it becomes interesting.

Sometimes I'm completely wrong, and the story becomes about that. The truth is often more interesting than the assumptions.

Sometimes I discover things about what I knew that are more interesting than the original idea. Sometimes what I thought I knew turns out to be true and I just back it up with facts and the idea alone was interesting enough to begin with.

And lastly, sometimes the idea is actually not worth sharing, and I shelve it until the time feels right or I find a new approach to the subject.

Why Writing is Helpful for Developers

You learn much faster

Writing is a great skill for a developer for many reasons, including:

• You learn by doing.
• You learn faster.
• You build a lot of connections which can generate future leads and opportunities.
• You can work on different tech stacks
• It’s a great form of self-expression.
• It encourages creativity.
• It helps to connect with your imagination.

I enjoy writing because it forces me to read more. And as a result, I learn a lot and stay sharp while working and collaborating with others.

One of the best ways for me to learn is by doing. I pick a topic about which I believe I know something and drill down through things I didn't know or hadn't even considered.

My best tip for anyone willing to start a blog: Read, read, read, write, write, write, read, read, write, write, write, write, read, read, read, read, write, write, write, edit, edit, edit, edit, edit, edit, edit, read, read, read, write again.

They say you never fully understand a topic until you can explain it.

And blogging is often low-hanging fruit.

Every developer should make a habit of blogging about their learnings in software engineering. Writing helps you discover if you understand a topic as well as you think you do.

Teaching and writing are great ways to learn, and they're good habits to start because you already have firsthand experience. Just commit to writing 12 blog posts a year, see what happens, and plan your next steps based on that.

As David Perell says, “Read to collect the dots, write to connect them.”

How writing is a low hanging fruit for experienced developers

Writing involves critical thinking

So many things never fully connected for me until I wrote about them. And so many other things I thought I understood well in my head turned out to be half-baked when I start writing about them.

My blog "A Software Developer's Guide to Writing" is a complete guide on how to start a blog.

Writing is a form of self-expression that can be therapeutic, even if you never intend to publish your work.

How Writing Can Help Advance Your Software Engineering Career

I’ve elevated my career in software engineering thanks to my writing.

It was 2017, and I'd begun writing about small things I was learning while building a few web applications for fun as a side project. I'd also gotten the opportunity to contribute to internal developer docs in my previous job as a tech lead.

That old blog has since died — I stopped writing on it a long time ago, and the content, which is now completely obsolete, has vanished. But I doubt I could have imagined starting my current small writing business without it.

Through my current blog, I have a lot of connections and opportunities for freelance gigs and part-time roles. It's also helped me in my consulting career.

Writing tutorials can help you learn a new tech stack

Writing helps in learning a new technology stack this is something I've done a few times with my writing. If I am interested in one type of technology stack and then become interested in another, I will write several posts about it.

For example, last summer I wrote about multiple developer tools in this article: How to Create a Powerful Next.js E-commerce Store.

How to build an e-commerce store with Medusa a blog by Ankur Tyagi

Other benefits of technical writing

Writing about technical topics is a great way for you to show what you know and what you're able to do. It can also help build your authority in tech by establishing your reputation and building your personal brand.

It can also improve your opportunities for networking and career advancement, as more people read your tutorials. And the more you write, the better your communication and collaboration skills will become.

Another benefit I discovered from sharing my writing publicly is that it caught the attention of many company founders, who then offered me writing jobs. They found me through my blog posts online, even though I hadn’t applied to work with them. Take a look at the below inbound cold email I received.

An inbound cold email from a tech founder

So having a blog is an effective way to demonstrate that you are passionate, know your stuff, and can communicate effectively in writing. The simplest way to begin is to write posts about topics that have interested you or problems you've solved.

How to Write an Effective Technical Blog

Keep your topics consistent

I only follow blogs that have a clear focus or theme.

In my case, I talk about Web Development, React, Developer Tools, and so on, and I subscribe and consistently read other developers' blogs that are focused on a particular area of tech.

Don't just rant about anything that comes to mind. Use a professional tone and cultivate your own unique writing style.

Setup a routine

If you aim to write a blog post weekly, make sure you follow through. Writing two posts a week is even more ideal. I write every day because I know that if I skip one day, I will skip another, and so on until I stop posting altogether.

Write blog posts in advance

Don't post the same day you write. Instead, schedule your content for a week later and review it the day before.

This is a big deal. By waiting a week before you post and looking at it again, the quality of your content will improve. A lot!

Write it a week or more in advance. Even if you take a few days off or are sick, you are less likely to miss a blog post day. It's also a good idea to make your posts public ahead of time. WordPress makes it very simple, and it is also possible to schedule a specific time and day to write on a consistent basis.

If you write down 5 ideas per day, that will amount to 1,825 ideas in a year (assuming it's not a leap year). Among these ideas, you're likely to find a few outstanding topics for your blog posts. Try to maintain a roster of potential blog post ideas. When inspiration strikes, you'll find the perfect topic for that day in your backlog.

In your articles, take things a step further and make your content 10x better by telling your audience the "why" of things. This is much harder to do.

If your writing is poor quality or inconsistent, you'll end up with the wrong audience. Write with intention and purpose. Write to become better. Instead of writing more, start editing more.

Build your writing, not your website

You can use big blogging platforms to increase your visibility. Think long-term. In the next ten years, every blog post you write could be worth thousands of views.

When a developer comes to me and says, "Hi Ankur, I'm a developer and want to start a blog. What should I do?", here are the two options I discuss with them:

Option 1: start publishing your articles on an established blogging platform

Option one is starting with a platform like Medium, Hashnode, DevTo, HackerNoon, or Dzone.

You can start writing articles and publishing them on one of thoes platforms, and work on building your credibility as a writer. Set a goal for yourself – for example, try to get to 100K+ post views/year.

Then you can start learning about and implementing SEO strategies, especially if you start writing on your own blog.

One potential challenge with this approach is that you may not technically own the content you publish on other's sites (check their rules). The company could even go out of business or shut down their service, and you may lose all your articles.

So here's my advice on how to handle this: if you stick with writing for a year, then it's time to start moving slowly onto your own website and posting your articles there.

Another challenge is that you don't necessarily want to spend all your time building a personal blog and just have one post titled "How I made this beautiful blog with X framework" to show for it. Instead, you could've had dozens of blog posts on rented spaces (like Medium, Hashnode, DevTo). Build your brand before building a house.

You can treat Medium, Hashnode, Twitter, and other platforms as traffic-acquisition channels rather than a home for your long-form content. Because no moderator can delete your blog posts from your own website.

Option 2: create your own blog site from scratch

Option two involves starting with your own blog website from the beginning. You can either build your own or use something like Ghost/WordPress/ any CMS of your choice. Then you can syndicate your articles to existing blogging platforms until enough people learn about your own blog. After that, you can stop syndicating content if you want.

But I'd advise you to write 2-3 blog posts every month for a year before you even think about building your own fancy, tech-savvy website and publishing there.

Treat every blog post as a mini side project and see how it feels. If, after a year, you find you're still enjoying writing, then continue doing it. If not, blogging may not be for you.

One challenge with this second approach (building your own blog and starting there) is that many developers with full-time jobs find it hard to spare time and energy, even though they want to write. So I think it's better to start small – and maybe share your posts on an existing platform at first – to avoid this common pitfall.

Again, it's better to focus on building your personal brand and your reputation as a writer first, before investing time in creating a dedicated website.

While it can be harder to reach a large audience on your own personal blog, you have to start somewhere.

Another challenge with this approach is the tendency to over-engineer a simple static blog website, and spending too much time perfecting that site instead of writing.

When I was starting a blog, I actually got caught up in it all – but one of my friends guided me through the process and showed me WordPress, which was a lifesaver. In the case of your blog, people are often interested more in your storytelling than your actual blog website.

In my opinion, in the end, being the owner of your own blog space >>> always using rental space. Just make sure you prioritize your tasks and focus along the way.

If you're curious about my blog post writing style, I invite you to check out this post: How I Write My Blog Posts.

Building an audience

This is related to the previous point. If you're just getting started, you might get 1 or 10 or 100 visitors per week if you share your posts (unless you go viral on a sharing platform like Reddit, Hacker News, or Twitter).

Search engines like Google can often provide consistent traffic (SEO), but this is a very long game to play. It's easy to get discouraged if you write but no one reads your blog posts.

The initial years of writing can be tough and boring. Despite very good writing, your blog will likely grow slowly. Big views may seem to be a distant dream. The effects of writing kick off only after a certain amount of time when your blog may start to build up momentum. Patience and persistence are key.

So, actively look for an audience. Write on your blog and republish your blog posts to Medium, Hashnode, DevTo, and Hackernoon (remember to add a canonical tag back to your site so that you don't annoy Google with duplicate content). Having an audience will boost your enthusiasm and determination.

Promote your content

When you hit the “publish,” button you’ve only done 50% of the work.

• You had an idea
• You’ve done writing along with researching the topic
• You’ve looked for typos and fixed grammar errors
• You made sure to have no plagiarism

Now it's time to promote your writing.

Post on Twitter/LinkedIn if you have a following, otherwise try to share on HN, Reddit, and so on.

Here's what Arnold Schwarzenegger said about why marketing your product is equally as important as making the product:

Whenever I finished filming a movie, I felt my job was only half done. Every film had to be nurtured in the marketplace. You can have the greatest movie in the world, but if you don’t get it out there, if people don’t know about it, you have nothing. It’s the same with poetry, with painting, with writing, with inventions.

It always blew my mind that some of the greatest artists, from Michelangelo to van Gogh, never sold much because they didn’t know how. They had to rely on some schmuck (some agent or manager or gallery owner) to do it for them. Picasso would go into a restaurant and do a drawing or paint a plate for a meal. Now you go to these restaurants in Madrid, and the Picassos are hanging on the walls, worth millions of dollars.

That wasn’t going to happen to my movies.

Same with bodybuilding, same with politics—no matter what I did in life, I was aware that you had to sell it.

As Ted Turner said, “Early to bed, early to rise, work like hell, and advertise.”

In a similar way, whenever I finished writing a blog, I felt my job was half done.

I wanted every article to be distributed across multiple platforms. You can write the best blog in the world, but if you don't get it out there and people aren't aware of it, you're out of luck. It's the same with a book, a course, a community, a product, a startup, and your writing.

Marketing boils down to caring: Don’t confuse the word “marketing” with advertising, announcing, spamming, or giving away branded crap. Really, “marketing” just means being considerate. Marketing means making it easy for people to notice you, relate to you, remember you, and tell their friends about you. –Derek Sivers | @sivers

Your blog is your media platform

Don’t just think of it as a blog. See it as a startup: the goal of a blog is to disseminate information that drives sales and future opportunities.

Sales may make you uncomfortable, but think of it as selling ideas or your own expertise.

Set up an email collecting form or a newsletter

A big Social media following is a business card, but a big email list gives you longevity.

In reality, you don't have full ownership of your Twitter, LinkedIn, or Medium following. Your true ownership lies in your email list. I recommend SubStack; it's user-friendly, free, and exceptional.

A blog should be professional, not personal

Your audience isn't primarily interested in you. They visit your blog in anticipation of problem-solving (if they arrived from a Google search) or seeking valuable information to aid them in specific tasks. Write with their needs at the forefront to be truly helpful.

Don't use ads at the beginning

Don’t put ads on your blog. I don't think it's worth it unless you have 10,000+ visitors a day.

Watch your analytics and use them to guide you

Peter Drucker said, "You can't manage what you can't measure."

If building an audience was a piece of cake, everyone would do it. Here are my tips on how to use your analytics to improve your blog and the content you create:

Find Out What People Like to Read: Look at the pages that get the most visits. What are they about? This is what your audience loves the most. Write more about those topics.

Understand How People Find You on Internet: Examine the search terms that lead people to your site. This tells you what they're interested in and what questions they have. Answer those questions in your writing.

Know What Keeps Them Reading: See which pages keep people on your site the longest. This is the content that really grabs them. Use that style or topic as a model for your other posts.

Learn From the Bounces: On the flip side, see which pages have the highest bounce rate. These are the ones that might need a bit of tweaking.

Ask yourself, "Why are people leaving?" and then make changes accordingly.

My blog's analytics

Read books, Blog posts, Twitter, Reddit, and HackerNews

Keep yourself up to date on the topics you want to write about. I write about software engineering, and Twitter is a never-ending source of topic ideas. The same is true for books and blogs. freeCodeCamp is also fantastic for this.

Every day, I spend 1-2 hours scrolling Twitter for inspiration. It's not a waste of time. It's the catalyst my brain requires to see things I would never have seen in offline life. Luck is not as random as you think. Before a lottery ticket can win a jackpot, someone has to buy it.

My daily screen time

Wake up early if possible

Set your alarm clock, get up, and begin writing. I used to get up at 7 a.m. because I haven't had to commute since 2020 (I only work remotely), so I could take it easy. I now get up at 5 a.m. and have a new post scheduled for the following week by 7 a.m.

When you finish a task, such as writing a new blog post, by 7 a.m., you feel energised to tackle the rest of the day. If you can, get up even earlier (I can't, or I'll spend the rest of the day in a zombie state).

Start using DND (Don't Disturb) Mode

It's all too easy to become distracted while researching for a blog post on the internet. I've turned off all notifications on my phone. Writing, like programming, is best done without interruptions so that the task at hand can occupy your entire consciousness.

My advice is to set aside dedicated time on your calendar, disable notifications, set your phone aside, and commit to your keyboard or typewriter, pen and paper, or whatever.

These are the only notifications which are "ON" on my mobile:

###

Thanks for Reading!

That's it for this tutorial. I hope you learned something new today.

If you did, please share so that it reaches others as well.

You can connect with me on Twitter.

Want to read more interesting blog posts?

You can read more tutorials like this one on my personal blog here.

I also write on Hashnode, but recently I was thinking about whether there is any way to backup my published articles to GitHub. Fortunately, I have found an easy way to do that directly from Hashnode itself.

So, in this article, I will share the process so that you can also create an automatic backup of your articles to your GitHub repository. There's no harm in trying something new, right? 😊

✨ I have also created a full length video showing the process of creating that automatic backup to your GitHub repo. I have attached the video later in this article. You can also check that out.

Firstly, let me show you my Hashnode account. This is just a sample of a typical profile there.

I have published only one article (as of today, 15 May 2022). But I still want to create an automatic backup process for this account so that whenever I write something new, all of the articles get copied into my selected GitHub repository as a backup.

So let's do that, shall we? 😁

How to Backup Your Hashnode Articles to GitHub

Go to your GitHub account. We need to create a special repository first where we will create an automatic backup process.

Now simply click on the + button on the top right of the webpage.

Now click New repository.

Now we have to create a new repository. The process is similar to creating any other repository.

You can make the repository Public or Private as you see fit for yourself. I am making it a Private repository, but you do not have to do that if you don't want to.

Give the repository any name you want.

For the latter, you can select anything you want. For this article, I am keeping it simple as it was.

Then click Create repository.

After that, you actually do not need to do anything in that repository for now.

So, I am keeping it as it is right now.

Now, head over to your Hashnode account.

Click your profile icon on the top right of the profile page.

Select the blog you want to backup. For me, it is https://fahimbinamin.hashnode.dev/.

Click Blog Dashboard.

The blog dashboard will appear before you.

Simply scroll down until you find Backup. You will find that on the lower left side of the webpage. Click on that.

You will find the GitHub Backup page now.

Click on Back up all my posts.

Select where you want to install it.

As I am involved in 5 GitHub organizations right now, it's suggesting all of them to me. As I want to create the backup on my personal GitHub account, I will select my profile FahimFBA.

The install and authorize section will appear.

By default, it will select "All repositories". But keep in mind, that you shouldn't select All repositories, as that will rewrite all of the repositories you currently have in your personal GitHub account.

Select "Only select repositories", and find the repository which you have created for backing up your Hashnode blogs.

Simply click and select the repository.

If everything is okay, then you can click "Install & Authorize", but again keep in mind that you must not select All repositories.

Provide your GitHub account's password if it asks for that.

If will redirect you to Hashnode to continue the installation process.

You've now created your automatic backup. If you want to back up the existing posts, then you have to click "Back up all my posts".

It will backup every post you had before creating the automatic backup.

Now, if you simply refresh the GitHub repo webpage (the repo you created only for backing up this Hashnode blog), you will see that it has been updated as well!

You can even read the article directly from your backed up repo.

That's it!

If you want to watch a video that covers the whole process, then you can check out the following video that I made:

Conclusion

Thanks for reading the entire article. If it helps you then you can also check out other articles of mine at freeCodeCamp.

If you want to get in touch with me, then you can do so using Twitter, LinkedIn, and GitHub.

You can also SUBSCRIBE to my YouTube channel (Code With FahimFBA) if you want to learn various kinds of programming languages with a lot of practical examples regularly.

If you want to check out my highlights, then you can do so at my Polywork timeline.

You can also visit my website to learn more about me and what I'm working on.

Thanks a bunch!

In this post we're going to get all the headings from a freeCodeCamp blog post to make a Table of Contents (ToC) in Ghost CMS.

I recently published quite a large post here on freeCodeCamp and needed to add a table of contents to the post.

There's a really good supporting post written by Colby Fayock on how to do this. It details the process really clearly.

You can check out the video and really comprehensive guide on that for all the details:

Colby's post details why you would want a Table of Contents (ToC) and how to create one using the Ghost editor (the editor used for writing this post in the Ghost CMS).

The thing is, I had 33 headings in the post I needed to add links for. And the thought of scrolling through a 10,000 word document to get a heading then scroll to the top to add it to the table of contents made me wonder if there was a better way to do it!

Table of contents:

• JavaScript to the rescue!
• Get the element properties
• Get the element id and innerText
• Filter on the localName
• Conclusion

JavaScript to the rescue!

With this thought in mind I did a quick search and found a Stack Overflow answer that I could use. Here's the snippet:

var ids = document.querySelectorAll('[id]');

Array.prototype.forEach.call( ids, function( el, i ) {
  // "el" is your element
  console.log( el.id ); // log the ID
});

So, let's hop on over to the browser now and try that out.

I'll go over to that published post now in the browser and open the developer tools. (In Chrome and Edge it's F12 to open the dev tools.) Then I'll paste in that example code into the console and hit enter, here's the output:

Get the element properties

Not bad but I want the heading title as well, so one quick way to see the properties of the elements is to wrap the el in some curly braces:

let ids = document.querySelectorAll('[id]');

Array.prototype.forEach.call(ids, (el) => {
  console.log({el});
});

You'll notice I've cleaned up the function a bit, replacing the inline function with an arrow function and replaced var with let so the syntax is more modern.

Running that snippet in the browser now gives me the object for each element:

I can then expand out one of the elements now to get all the properties relating to it. From here I'm going to want to get the id (which I already know was there) and also the innerText which is the heading title:

Get the element id and innerText

Let's add the innerText element to the snippet we're working with and see what that looks like now. Here's the snippet:

let ids = document.querySelectorAll('[id]');

Array.prototype.forEach.call(ids, (el) => {
  console.log(el.id);
  console.log(el.innerText);
});

And here's the output we get from that:

Ok, so that is really noisy as it's showing the innerText of every element in the document with a lot of irrelevant information on there. All we're really interested in is the title of the heading and it's id.

Filter on the localName

All the headings I use in the post are h2 headings so I want a way to filter that. So from the {el} properties I'll need to grab the localName which denotes the type of the element h2 in the case here.

So let's use an if function to see if the localName includes h2 and if it does log that out. I'll also use a template literal to add the anchor id # to the beginning of the id:

let ids = document.querySelectorAll('[id]');

Array.prototype.forEach.call(ids, (el) => {
  if (el.localName.includes(`h2`)) {
    console.log(`#${el.id}`);
    console.log(el.innerText);
  }
});

Let's take a look at the output now:

Much nicer!

Now I can use that output to start making my ToC!

Conclusion

We took what could be quite an extended process and turned it into a handy snippet we can use in the browser console every time we need to create a ToC for our blog posts.

That's it, hope you found it useful! 🙏

If you like the content you can check out much more from me on my blog and you can follow me on Twitter.

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.

Table of Contents

1. Framing your blog for success
2. The benefits of having a successful blog
3. Pick a goal for your blog
4. Own your platform
5. Make the first step
6. Solutions to common problems
7. Content is king
8. Practical content suggestions
9. Create a system
10. How to get people to your blog
11. Expand your reach with an email list
12. Ups and downs
13. Making money with a blog
14. 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:

1. you reinforce your learning
2. you build up an online presence
3. 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.

Share your work where the people are

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.

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.

Share Your Article on Social Media

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:

• Twitter
• LinkedIn
• Reddit
• HackerNews
• FaceBook

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.

• Hashnode
• DEV Community
• freeCodeCamp News
• HACKERnoon
• daily.dev
• Codenewbie Community
• Educative Edpresso Shorts
• CoFoundersTown

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.

You may also like these articles:

• How to find blog content ideas effortlessly?
• Where to begin? Some practical tips from a beginner
• Why do you need to do Side Projects as A Developer?
• 16 side project GitHub repositories you may find useful
• How to Learn Something New Every Day as a Software Developer

I wanted to set up a fun project for myself to learn some new technologies. And this time I decided I wanted to learn a bit about Static Site Generators (SSGs).

My goal was to build a blog using an SSG and have it deploy any time the code repository changed. You can see the result at https://caliburnsecurity.com.

Blog Requirements

Below are the requirements I put together when determining what I wanted my blog to support.

• Support Markdown for content generation
• Syntax highlighting
• Code line numbering
• "Serverless"
• Ready made themes/plugins - I am so NOT a frontend developer
• SEO capabilities
• Browse by keyword/category
• Search support (because this is statically generated, searching is through Google's index - there are other articles that discuss how to add a dynamic JavaScript powered search)
• RSS support
• Version controlled
• Static - no dynamic content (with a neat side effect of shrinking the site's attack surface and improving security)

So what actually is a Static Site Generator?

In short, an SSG is a framework designed to manage your website and transform it into a site serving only static pages.

Why use a SSG to build the blog?

One thing that took me some time to comprehend was why I would use a static site, if I already had a CMS. There were so many articles online about using an SSG with a headless CMS...but why?

Best I can tell, the benefits are simply that you have more flexibility using familiar frameworks such as React or Vue, while using a CMS to handle all content.

However, as I am by no means a frontend developer, I was close to scrapping this project. I thought "Oh well, I should just use Ghost - it's only $5/month if hosted on a platform like DigitalOcean, and is an all-in-one platform to serve content as well as manage the content".

However, I really wanted to try to learn something new, and see if I could just deploy a blog for free using only Markdown.

As always ends up happening, what I was hoping would take a few hours took quite a bit more time as I went down the rabbit hole of research into various technologies.

I played around with several different technologies, such as (not all of these are SSGs, more on that later):

• Pelican (Python)
• Hugo (Go)
• Hexo
• Gridsome (Vue - JS)
• VuePress (Vue - JS)
• Ghost
• Gatsby (React - JS)
• Jekyll (Ruby)

Why I Chose Hugo

I won't go in too much detail on all of the technologies I looked at. But in general, I found Hugo to be super quick to set up and build, and just the SIMPLEST of all the options.

While I know this is similar to Jekyll, I really just didn't want to deal with configuring a Ruby environment, and the speed of Hugo left everything else in the dust.

How to Start Building the Blog

For this exercise, let's build a static blog hosted by Netlify (free!).

Note: I'll be using PowerShell on my Windows box for this tutorial, so please recall that if copy/pasting.

Make sure you have these dependencies:

• Git
• Visual Studio Code (or your preferred editor)
• Hugo binary

Here's a high level overview of our workflow:

1. Download/Install Hugo
2. Create a Hugo project
3. Add and configure a theme
4. Add to Git
5. Deploy to Netlify
6. (Optional) Configure the free Netlify CMS

Download or install Hugo

To install Hugo, I went over to their GitHub Releases page and downloaded their standalone Windows x64 binary. I placed it in my Projects directory, where we will be creating our site (you can always install it properly/add the binary to your PATH, but I wanted quick).

How to Create the Hugo Site

To create a new site, simply run the below commands:

.\hugo.exe new site hugo-blog
mv .\hugo.exe .\hugo-blog
cd .\hugo-blog
.\hugo.exe server -D --gc

We now have our project created, and have just started the Hugo server. We used the -D flag to tell Hugo to show draft content, and I typically add in --gc to ensure that cleanup is run each time by clearing the cache.

You can access your site at http://localhost:1313.

Understanding the directory structure

You should now see the following directory structure:

|__archetypes
|__assets *this will not show up by default
|__config *this will not show up by default
|__content
|__data
|__layouts
|__static
|__themes
|__config.toml

• archetypes: Content template files with pre-configured front matter. We won't really be touching this.
• assets: Store any files processed by Hugo Pipes. This is out of scope for this tutorial.
• config: Optional directory to store configuration files. We won't be doing anything too crazy, so we will just use the default config.toml file.
• content: This is where your content lives - your posts and pages. The top level folders within this directory are treated as a section.
• data: Contains configuration files used by Hugo. I never had a need to touch this directory.
• layouts: Stores partial or full page HTML templates for the site. Anything in here can overwrite a corresponding entry from your theme, allowing you to customize the theme without modifying the theme's actual files.
• static: Store any static content, such as images, CSS, or scripts. Anything in this folder is copied as-is, without any modification or interpretation by Hugo. This is where you will store your media, such as images, for reference in your blog posts.
• themes: The directory where you will install any Hugo themes.
• config.toml: The default site configuration. You can use a separate directory if you want to separate different environments.

How to Add Your First Theme

For this blog, we will use the tale theme for Hugo. Run the following commands from the root of the project:

git submodule add https://github.com/EmielH/tale-hugo.git .\themes\tale

We will NOT be editing any files from the theme, but will make all modifications in the layouts folder discussed above. This will let us always update the submodule to update our theme without worry that we will overwrite any changes we have made.

To initialize the theme, edit the config.toml in your root directory and add the following lines (while also editing the defaults):

# Theme Settings
theme = "tale"
[params]
  Author = "Aaron Katz" # Add the name of the author (this theme only supports one author)
[author]
  name = "Caliburn Security" # Used by the foot copyright

There we go, the theme is now active! (Note that in many cases, themes will require you to copy and paste the theme's theme.toml file into your config.toml)

Go ahead and check out your page – every time you save a file Hugo rebuils the site live.

How to modify theme files

One issue with the current theme is that non-post content will be displayed in the homepage list.

To change this, let's copy the .\themes\tale\layouts\index.html page to .\layouts\index.html.

Once there, replace: {{range (.Paginate .Site.RegularPages).Pages}} with {{ range where .Paginator.Pages "Section" "post" }}. This will ensure only the "post" section will be displayed in the list.

I also wanted to add a brief footer, so go ahead and create a new file at .\layouts\footer.html and add the following code:

<footer>
    <span>
    &copy; <time datetime="{{ now }}">{{ now.Format "2006" }}</time> {{ .Site.Author.name }}
    </span>
</footer>

How to Add Google Analytics

I also wanted to add some Google Analytics to my blog, and I noticed the theme didn't incorporate this functionality.

Luckily, Hugo makes adding analytics extremely simple. Open up the config.toml file and add the following line:

googleAnalytics = "" # The UA-XXX number from Google Analytics

Once the configuration is saved, copy the .\themes\tale\layouts\partial\head.html file to .\layouts\partial\head.html and add the following code right below the head tag:

{{ template "_internal/google_analytics_async.html" . }}

There we go, now we have Google Analytics working. Cool!

How to Write Content

Let's add a nice About page so people know everything there is about me. :)

.\hugo.exe new about.md

To ensure that this page is added to the main menu, add the following line to the page's front matter: menu: main.

Note: To build Hugo, which will generate the content under the .\public folder, simply run .\hugo.exe

What is front matter?

This was a new term for me. Essentially, front matter is just structured metadata for your content.

By default, your template will add the following metadata fields to each page or post you create:

• title
• date
• draft

Other potentially useful front matter elements are:

• description - This allows you to enter a description for the content.
• expiryDate - Set a datetime for when the content should no longer be published.
• keywords - The meta keywords for the content.
• lastmod - The datetime for when the content was last modified (if you are using the enableGitInfo configuration command, this will be automatically set as the last time the file was mofieid in Git)
• markup - When set to "rst", you can use reStructuredText instead of Markdown (this feature is experimental)
• publishDate - Set a date in the future for the content to be displayed.
• slug - The tail of the output URL. Defaults to the filename if not specified.
• summary - The text used when providing a summary of the article. I find this useful if I don't want the first paragraph to appear in the summary, which is the typical default.
• - Use the plural form of the taxonomy index, such as tags or categories.

How to create an archetype for blog posts

Let's go ahead and change the default front matter we see for blog posts. In the archetypes folder, create a new file called posts.md and add the following:

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true

slug: {{ .File.BaseFileName }} # Will take the filename as the slug. Feel free to change this to any format you like.  I like including this, so that I remind myself I have the option to change if I want.

summary: "" # Remove this if you want Hugo to just use the first 70 (configurable) characters of the post as the summary.
description: ""

# Lists
keywords:
tags:
categories:
---

Now let's do one final build with .\hugo.exe and get ready to configure our Git repository.

How to Configure Git

Time to configure the project for Git:

git init
git remote add origin <YOUR GIT URL>
git push -u origin master

Great, we now have our code stored within our repository, and we are ready for deployment!

How to Deploy Your Blog

Now that we have our site stored in Git, it's time to deploy! Almost done - I'll now show how to deploy to Netlify in under 10 minutes.

First, we need to create the Netlify application (feel free to create an account using any method available):

Next, we need to create the site and tell it where our Git repository is for our Hugo content:

Tell Netlify where your site is located

Select the repository

These can be left at the default settings

Next up, we will set up a custom domain for our site:

Select the custom domain option

Enter your custom domain

You should now see your domain with a message saying to Check DNS configuration. Click on that, and enter the provided DNS record information into whichever service provider manages your DNS records:

Example configuration within my Cloudflare account

Once complete, wait a few minutes for the DNS settings to propagate, and then select Verify DNS configuration:

Behold, your site is now live!

Example of my new blog hosted on Netlify!

Last, we should set up SSL for our site as a best practice. Netlify offers the option to use Let's Encrypt to automatically provision a certificate for your application. To do so, simply select Provision certificate:

Note: It can take quite some time for the certificate to be generated, so just be patient.

Netlify deployment settings

We have one final step before we are truly ready to use Netlify. Unfortunately, the version of Hugo used by Netlify is somewhat outdated by default. However, we can fix this by creating our own configuration for Netlify to follow when deploying our site.

First, create a file called netlify.toml in the root of your repository, and then add the following configuration:

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.74.3"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.74.3"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.74.3"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.74.3"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

All that's left to do is select Deploy site within the Netlify console, and your site is now live on a custom domain with SSL!

Wrapup

Whew! That was a lengthy blog post, but hopefully this shows how quick it is to get up and running with a "serverless" blog. Let's see what I learned :)

What I loved

• Super simple to build, just run hugo serve
• Live reload - make a change, save, and the page will reload
• Just simple in general - I didn't need to deal with grunt, gulp, webpack, or others
• Customizable output formats let you generate your static site, as well as a Google AMP site, JSON files, and so on.
• FAST. Did I mention fast?
• Can be deployed just about anywhere - whether using Netlify (my current choice), Amazon S3 & Cloudfront, Heroku, GitHub Pages, and more.
• Shortcodes are available if Markdown isn't enough
• Continuous deployment - everything is version controlled, and deployed when I publish to the master branch
• Allow commenting and sharing of posts

Challenges

• Hugo is sometimes too simple. No plugins or extensions at all, etc.
• Using Go is less intuitive and the shortcode feels messier than something like Vue
• Not too many themes available, but I expect the library to keep growing, as there is a very active user base

So do I need a CMS?

After all of this, I still had this question in the back of my mind. And the answer is, "it depends".

If I were to incorporate a lot of media, such as images or videos that I need to upload, it would certainly get tedious adding and organizing them all to the images folder in static.

At that point, I would look into a headless CMS such as Ghost, Netlify, or Sanity to manage the content, as long as I could still write my posts using Markdown.

References

• https://medium.com/backticks-tildes/hugo101-getting-started-with-hugo-and-deploying-to-netlify-9a813fe23b94
• https://blog.risingstack.com/static-site-generator-hugo-netlify/
• http://cloudywithachanceofdevops.com/posts/2018/05/17/setting-up-google-analytics-on-hugo/
• https://www.sitepoint.com/premium/books/a-beginner-s-guide-to-creating-a-static-website-with-hugo/read/1

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:

1. It’s fun and educational.
2. You are super passionate about a topic and want to share your thoughts with readers about it.
3. 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.

1. 500+ sites are built each day using WordPress while only 60-80 per day are built on platform like Shopify and Squarespace
2. You can get started for free.
3. 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:

1. A domain name
2. A hosting provider
3. 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!

“The basic WordPress software is simple and predictable so you can easily get started. It also offers powerful features for growth and success.” - WordPress.com

In short, WordPress is a reliable way to create a powerful website.

WordPress is easy to install and comes packed with functionality out of the box. The core features of WordPress have everything that you need to set up a website with pages, blog posts, navigation, and user management.

But the real power of WordPress is the extensive options to quickly design a beautiful website with pre-built Themes and add incredible functionality with optional Plugins.

In this article we will cover the basics of WordPress including:

• WordPress’ origin and popularity
• Building the basics with Pages and Posts
• Improving design with Themes
• Extending functionality with Plugins

Why is WordPress So Popular?

WordPress is used by about half a billion other websites, including recognizable names such as TechCrunch, The New Yorker, Variety, the official site of Sweden, and The Walt Disney Company.

Tip: to see if a site is running WordPress, you can View Page Source and search for “WordPress” or “wp-” and if you see directories such as “wp-includes” or “wp-content”, the site is running WordPress.

WordPress is still growing like crazy with over 500 new sites built everyday.

Over the past three years, WordPress’ market share of software powering websites has grown by about 8% from 27.3% in 2019 to 35.2% in 2020.

Amazingly, WordPress now powers more websites than websites that do not use any CMS:

Percent of All Websites Not Using a CMS vs. Percent of Sites Using Wordpress. There are more websites using WordPress than websites powered by a CMS. Source: w3techs

One of the main drivers of WordPress’ popularity is that it is free. WordPress is licensed under the GPLv2, which means it is free to use and modify by anyone.

WordPress is estimated to have had over 100 years of developer time contributed to the open source project.

WordPress Basics – Pages and Posts

Setting up a WordPress website involves selecting a domain name, finding a hosting provider, and installing WordPress.

Installing WordPress sets you up with a fully functioning website. But unlocking the real power of WordPress comes with installing Themes, Plugins, and customizing the site.

But let’s start with the basics.

Upon installing WordPress, you will be asked for a username and password. Your credentials can be used to access the admin backend of your website. This can be accessed at yourdomainname.com/wp-admin.

The admin section looks like this:

The WordPress admin backend. Source: WordPress

As you can see, WordPress comes loaded with features that are accessible via the left navigation. For the purposes of this article, let’s discuss the two important content types Pages and Posts.

WordPress Pages

Pages allow you to quickly build web pages. By adding this type of content, you can create webpages at yourdomain.com/newpage.

WordPress has a built in editor that you can use to quickly format text and multimedia into a great looking webpage. The editor is built with “blocks” so that instead of worrying about the alignment and organization of the content, you can focus on creating.

This is what editing content and adding blocks in WordPress looks like:

Easily insert different “blocks” like code into your Pages and Posts.

While the default WordPress Editor is great, it can be enhanced with Plugins and even replaced with content builders that make it easier to drag and drop content in a visual way such as Elementor, Visual Composer, or WP Bakery. The beauty of WordPress is that it is infinitely customizable.

Whatever editor you choose to use, using WordPress’ built-in Pages allows you to easily create dynamic and gorgeous web pages.

WordPress Posts

The Posts section has the same Editor as the Pages section, except this content category creates blog posts. Posts are at the core of WordPress because the software began as a blogging tool.

Posts utilize the same content Editor as Pages, so creating Pages and Posts is the same experience.

The main difference between Pages and Posts is volume. Let’s say a typical small business website will have 5-10 core pages (Home Page, About Us, Contact Us, Services, and so on). That same company could have 100s of blog posts.

To manage the high volume of Posts, WordPress comes with extensive categorization and hierarchy management. Posts can be easily organized into Categories.

Example of categories to organize posts.

Example of hierarchies to organize posts.

You can add and nest as many categories as you need. With Categories, content can be displayed hierarchically on your website such a yourdomainname.com/guides/best-business-practices/yourcontent.

Since WordPress is so highly customizable this "permalink" structure can also be easily changed in the Settings tab.

Custom Post Types (advanced)

WordPress comes pre-loaded with the two main content types (Posts and Pages) but many users want to further customize their content types.

For example, if you want to build a travel website that has a directory of hotels, a custom post type called "Hotels" would be a great addition.

These custom post types leverage WordPress' built-in Editor, categories, and other features of the Posts and Pages. As such, custom post types are a way to quickly develop a dynamic website.

Custom post types can be added via a Plugin or by adding some code into the core functions.php file. These additions are great example of how WordPress is extremely customizable and a great platform to develop your coding skills.

Custom posts like Hotels and Products can be added into WordPress to better organize content and enhance the functionality of your custom WordPress site.

WordPress Themes - Looking Good Is Easy

Once you’ve set up your WordPress website, the next step is selecting a Theme.

A theme is a collection of templates and stylesheets that define the appearance and functionality of a WordPress website.

WordPress comes preloaded with a standard Theme but very few websites actually use this Theme (or hundreds of millions of sites would look the same!)

Themes allow WordPress users to very quickly have a great looking website. In about 10 minutes you can have a website that has the same backend, engine, and look like great sites such as TechCrunch. All that’s missing is the content!

One of the best parts of building a WordPress website is selecting a Theme due to the variety of designs and options. There are thousands of themes available.

Premium Themes can typically be purchased for between $20 and $60. You can download a zip file and easily upload it to WordPress. Once the Theme is activated, your WordPress website adopts the templates and stylesheets. And just like that, you have a professionally designed website!

A word of caution: Theme selection can be tricky and there are many things to consider before installing. I would recommend looking for Themes that have high ratings (someone else has tested it), minimum Plugin dependencies, and are fast.

To test the speed, find a demo of the Theme on the developers website and run it though Google Page Speed. If the Theme performs poorly, don't use it.

Once you select a great base Theme, you have the option to endlessly customize it. You can completely customize your site by editing the Theme file with HTML, PHP, CSS, and JavaScript.

The easiest way to do this is to install a child theme so that you can still update your theme with the latest version.

With a great Theme, you can have a beautiful website. Plugins add the power.

WordPress Plugins Make it More Than Just a Blog

WordPress’ history is rooted in personal publishing and blogging. The project started in 2003 when Mike Little and Matt Mullenweg began working on an “elegant and well-architected personal publishing system.”

But WordPress is now much more than just a blog.

WordPress has over 50,000 Plugins available. WordPress Plugins are PHP scripts that extend the functionality of the core content management system. They can add entirely new features to your site.

Plugins are developed by volunteers and companies. They are typically free and many have premium versions.

Beware of installing too many Plugins, as maintaining the updates can be a never-ending task for WordPress webmasters.

Plugins can be uploaded and updated directly from the admin backend.

Wrapping It All Up

WordPress is a great tool to use to build a website. It is fast, reliable, and extendable.

While WordPress started as a simple publishing tool, it has grown far beyond its humble beginnings. Whether you are looking to create a personal blog, an ecommerce store, or a website for your business, WordPress is a great option.

Additionally, WordPress is a great way to start learning more about web development.

When you start building in WordPress you will be coding with HTML, CSS, Javascript, PHP, and MySQL. Since WordPress is open source and insanely popular, there are a ton of free resources (including right here on freeCodeCamp) to go as deep as you want.

Technical writing might also be for you if you love learning by teaching others, contributing to open source projects and teaching others how to do so, too, or basically enjoy explaining complex concepts in simple ways through your writing.

Let's dive into the fundamentals and learn about what you should know and consider when getting started with technical writing.

Table of Contents

In this article, we’ll be looking at:

• What Technical writing is
• Benefits of Technical Writing
• Necessary skills to have as a Technical Writer
• The Technical Writing Process
• Platforms for publishing your articles
• Technical Writing Courses
• Technical Writing forums and communities
• Some amazing technical writers to follow
• Final Words and references

What is Technical Writing?

Technical writing is the art of providing detail-oriented instruction to help users understand a specific skill or product.

And a technical writer is someone who writes these instructions, otherwise known as technical documentation or tutorials. This could include user manuals, online support articles, or internal docs for coders/API developers.

A technical writer communicates in a way that presents technical information so that the reader can use that information for an intended purpose.

Benefits of Technical Writing

Technical writers are lifelong learners. Since the job involves communicating complex concepts in simple and straightforward terms, you must be well-versed in the field you're writing about. Or be willing to learn about it.

This is great, because with each new technical document you research and write, you will become an expert on that subject.

Technical writing also gives you a better sense of user empathy. It helps you pay more attention to what the readers or users of a product feel rather than what you think.

You can also make money as a technical writer by contributing to organizations. Here are some organizations that pay you to write for them, like Smashing Magazine, AuthO, Twilio, and Stack Overflow.

In addition to all this, you can contribute to Open Source communities and participate in paid open source programs like Google Season of Docs and Outreachy.

You can also take up technical writing as a full time profession – lots of companies need someone with those skills.

Necessary Skills to Have as a Technical Writer

Understand the use of proper English

Before you consider writing, it is necessary to have a good grasp of English, its tenses, spellings and basic grammar. Your readers don't want to read an article riddled with incorrect grammar and poor word choices.

Know how to explain things clearly and simply

Knowing how to implement a feature doesn't necessarily mean you can clearly communicate the process to others.

In order to be a good teacher, you have to be empathetic, with the ability to teach or describe terms in ways suitable for your intended audience.

If you can't explain it to a six year old, you don't understand it yourself. Albert Einstein

Possess some writing skills‌‌

I believe that writers are made, not born. And you can only learn how to write by actually writing.

You might never know you have it in you to write until you put pen to paper. And there's only one way to know if you have some writing skills, and that's by writing.

So I encourage you to start writing today. You can choose to start with any of the platforms I listed in this section to stretch your writing muscles.

And of course, it is also a huge benefit to have some experience in a technical field.

The Technical Writing Process

Analyze and Understand who your Readers are

The biggest factor to consider when you're writing a technical article is your intended/expected audience. It should always be at the forefront of your mind.

A good technical writer writes based on the reader’s context. As an example, let's say you're writing an article targeted at beginners. It is important not to assume that they already know certain concepts.

You can start out your article by outlining any necessary prerequisites. This will make sure that your readers have (or can acquire) the knowledge they need before diving right into your article.

You can also include links to useful resources so your readers can get the information they need with just a click.

In order to know for whom you are writing, you have to gather as much information as possible about who will use the document.

It is important to know if your audience has expertise in the field, if the topic is totally new to them, or if they fall somewhere in between.

Your readers will also have their own expectations and needs. You must determine what the reader is looking for when they begin to read the document and what they'll get out of it.

To understand your reader, ask yourself the following questions before you start writing:

• Who are my readers?
• What do they need?
• Where will they be reading?
• When will they be reading?
• Why will they be reading?
• How will they be reading?

These questions also help you think about your reader's experience while reading your writing, which we'll talk about more now.

Think About User Experience

User experience is just as important in a technical document as it is anywhere on the web.

Now that you know your audience and their needs, keep in mind how the document itself services their needs. It’s so easy to ignore how the reader will actually use the document.

As you write, continuously step back and view the document as if you're the reader. Ask yourself: Is it accessible? How will your readers be using it? When will they be using it? Is it easy to navigate?

The goal is to write a document that is both useful to and useable by your readers.

Plan Your Document

Bearing in mind who your users are, you can then conceptualize and plan out your document.

This process includes a number of steps, which we'll go over now.

Conduct thorough research about the topic

While planning out your document, you have to research the topic you're writing about. There are tons of resources only a Google search away for you to consume and get deeper insights from.

Don't be tempted to lift off other people's works or articles and pass it off as your own, as this is plagiarism. Rather, use these resources as references and ideas for your work.

Google as much as possible, get facts and figures from research journals, books or news, and gather as much information as you can about your topic. Then you can start making an outline.

Make an outline

Outlining the content of your document before expanding on it helps you write in a more focused way. It also lets you organize your thoughts and achieving your goals for your writing.

An outline can also help you identify what you want your readers to get out of the document. And finally, it establishes a timeline for completing your writing.

Get relevant graphics/images

Having an outline is very helpful in identifying the various virtual aids (infographics, gifs, videos, tweets) you'll need to embed in different sections of your document.

And it'll make your writing process much easier if you keep these relevant graphics handy.

Write in the Correct Style

Finally, you can start to write! If you've completed all these steps, writing should become a lot easier. But you still need to make sure your writing style is suitable for a technical document.

The writing needs to be accessible, direct, and professional. Flowery or emotional text is not welcome in a technical document. To help you maintain this style, here are some key characteristics you should cultivate.

Use Active Voice

It's a good idea to use active voices in your articles, as it is easier to read and understand than the passive voice.

Active voice means that the subject of the sentence is the one actively performing the action of the verb. Passive voice means that a subject is the recipient of a verb's action.

Here's an example of passive voice: The documentation should be read six times a year by every web developer.

And here's an example of active voice: Every web developer should read this documentation 6 times a year.

Choose Your Words Carefully

Word choice is important. Make sure you use the best word for the context. Avoid overusing pronouns such as ‘it’ and ‘this’ as the reader may have difficulty identifying which nouns they refer to.

Also avoid slang and vulgar language – remember you're writing for a wider audience whose disposition and cultural inclinations could differ from yours.

Avoid Excessive Jargon

If you’re an expert in your field, it can be easy to use jargon you're familiar with without realizing that it may be confusing to other readers.

You should also avoid using acronyms you haven't previously explained.

Here's an Example:

Less clear: PWAs are truly considered the future of multi-platform development. Their availability on both Android and iOS makes them the app of the future.

Improved: Progressive Web Applications (PWAs) are truly the future of multi-platform development. Their availability on both Android and iOS makes PWAs the app of the future.

Use Plain Language

Use fewer words and write in a way so that any reader can understand the text.‌‌ Avoid big lengthy words. Always try to explain concepts and terms in the clearest way possible.

Visual Formatting

A wall of text is difficult to read. Even the clearest instructions can be lost in a document that has poor visual representation.

They say a picture is worth a thousand words. This rings true even in technical writing.

But not just any image is worthy of a technical document. Technical information can be difficult to convey in text alone. A well-placed image or diagram can clarify your explanation.

People also love visuals, so it helps to insert them at the right spots. Consider the images below:

First, here's a blog snippet without visuals:

Here's a snippet of same blog, but with visuals:

Adding images to your articles makes the content more relatable and easier to understand. In addition to images, you can also use gifs, emoji, embeds (social media, code) and code snippets where necessary.

Thoughtful formatting, templates, and images or diagrams will also make your text more helpful to your readers. You can check out the references below for a technical writing template from @Bolajiayodeji.

Do a Careful Review

Good writing of any type must be free from spelling and grammatical errors. These errors might seem obvious, but it's not always easy to spot them (especially in lengthy documents).

Always double-check your spelling (you know, dot your Is and cross your Ts) before hitting 'publish'.

There are a number of free tools like Grammarly and the Hemingway app that you can use to check for grammar and spelling errors. You can also share a draft of your article with someone to proofread before publishing.

Where to Publish Your Articles

Now that you've decided to take up technical writing, here are some good platforms where you can start putting up technical content for free. They can also help you build an appealing portfolio for future employers to check out.

Dev.to is a community of thousands of techies where both writers and readers get to meaningfully engage and share ideas and resources.

Hashnode is my go-to blogging platform with awesome perks such as custom domain mapping and an interactive community. Setting up a blog on this platform is also easy and fast.

freeCodeCamp has a very large community and audience reach and is a great place to publish your articles. However, you'll need to apply to write for their publication with some previous writing samples.

Your application could either be accepted or rejected, but don't be discouraged. You can always reapply later as you get better, and who knows? You could get accepted.

If you do write for them, they'll review and edit your articles before publishing, to make sure you publish the most polished article possible. They'll also share your articles on their social media platforms to help more people read them.

Hackernoon has over 7,000 writers and could be a great platform for you to start publishing your articles to the over 200,000 daily readers in the community.

Hacker Noon supports writers by proofreading their articles before publishing them on the platform, helping them avoid common mistakes.

Technical Writing Courses

Just like in every other field, there are various processes, rules, best practices, and so on in Technical Writing.

Taking a course on technical writing will help guide you through every thing you need to learn and can also give you a major confidence boost to kick start your writing journey.

Here are some technical writing courses you can check out:

• Google Technical Writing Course (Free)
• Udemy Technical Writing Course (Paid)
• Hashnode Technical Writing Bootcamp (Free)

Technical Writing Forums and Communities

Alone we can do so little, together, we can do so much ~ Helen Keller

Being part of a community or forum along with people who share same passion as you is beneficial. You can get feedback, corrections, tips and even learn some style tips from other writers in the community.

Here are some communities and forums for you to join:

• Hashnode
• Dev.to
• Technical Writing World
• Technical Writer Forum
• Write the Docs Forum

Some Amazing Technical Writers to follow

In my technical writing journey, I've come and followed some great technical writers whose writing journey, consistency, and style inspire me.

These are the writers whom I look up to and consider virtual mentors on technical writing. Sometimes, they drop technical writing tips that I find helpful and have learned a lot from.

Here are some of those writers (hyperlinked with their twitter handles):

• Quincy Larson
• Edidiong Asikpo
• Catalin Pit
• Victoria Lo
• Bolaji Ayodeji
• Amruta Ranade
• Chris Bongers
• Colby Fayock

Final words

You do not need a degree in technical writing to start putting out technical content. You can start writing on your personal blog and public GitHub repositories while building your portfolio and gaining practical experience.

Really – Just Start Writing.

Practice by creating new documents for existing programs or projects. There are a number of open source projects on GitHub that you can check out and add to their documentation.

Is there an app that you love to use, but its documentation is poorly written? Write your own and share it online for feedback. You can also quickly set up your blog on hashnode and start writing.

You learn to write by writing, and by reading and thinking about how writers have created their characters and invented their stories. If you are not a reader, don't even think about being a writer. - Jean M. Auel

Technical writers are always learning. By diving into new subject areas and receiving external feedback, a good writer never stops honing their craft.

Of course, good writers are also voracious readers. By reviewing highly-read or highly-used documents, your own writing will definitely improve.

Can't wait to see your technical articles!

References

Introduction to Technical Writing‌‌

How to structure a technical article‌‌

Understanding your audience, the why and how

‌‌Technical Writing template

I hope this was helpful. If so, follow me on Twitter and let me know!

But what, on the other hand, can over-engineering our personal projects like our blog do to help us grow as developers?

What do I mean by over-engineering a blog?

When people assert that a blog is over-engineered, they're often referencing the fact that blogs are typically made up of groups of static data. Because that data is static, it can be statically generated without needing any kind of Javascript framework on top like React.

Shipping Javascript can be expensive. There’s no question about that. When using tools like React, you’re immediately introducing performance implications by simply shipping more Javascript.

If you’re just dumping out static content to a page, why do you need Javascript in the first place?

How can over-engineering help you learn?

While over-engineering websites and apps that you ship can ultimately be costly, especially from a user experience perspective, not all circumstances are the same.

One of the best parts about the development world right now, or arguably one of the most frustrating, is that there are constantly new tools being created.

This is great for a few reasons: as a community we’re constantly pushing tools to become better, and as developers we always have new options that might fit our use case better than the last.

But finding ways to learn those new tools can be challenging. While there are a ton of articles out there that walk you through building demo apps, there’s a good chance you don’t find that particular demo topic interesting or it just doesn’t excite you because it’s, well, a demo.

How can we use personal projects as a learning outlet?

By funneling that eagerness to learn into our personal projects, we are immediately given a chance to put those tools to use with a real-life project using real-life data.

Progression of my personal portfolio over the years (not all were published)

Personal projects are near and dear to us. I’ve spent countless hours redesigning, rebuilding, and tweaking my personal blog before I settled on something simple because I was content with it.

Because of this deeper meaning, we invest ourselves into constantly making it better. With this investment, it’s an easy outlet to keep learning new things.

Learning new things is ultimately how we grow as developers. We’re not all lucky enough to work at jobs where we have countless new projects that afforded us the ability to try a new framework on each. So what better way to learn than to build up our online presence while learning that cool new tool?

What's the excuse for bad user experience?

Frankly there is no excuse. A bad user experience isn’t acceptable anywhere.

But the intent here isn’t to argue whether or not a bad user experience is okay or not. The intent is to argue it’s okay for your personal project that admittedly doesn’t get much traffic to be slightly slower, which doesn’t necessarily equate to a bad UX.

Calling everything “bad UX” is a catchy blog title, but the real world implications aren’t always so dramatic.

Chances are, your personal project isn’t css-tricks.com pulling in tons of traffic every day. Being able to learn from mistakes on your blog (where the impact is profoundly smaller) and not from those on your company’s or client’s app makes it a much lower risk exercise.

Learn about those mistakes when it doesn’t matter as much or when you won't lose the business money for accidentally bringing the site down. Put those lessons learned in practice to make a difference in people’s lives when you’re building new science-based tools for the web.

Your personal blog doesn’t need to have cutting edge performance with 100’s across Google PageSpeed. While that’s a great goal, there’s more you can do to help yourself personally succeed, grow as a developer, and ultimately bring in more traffic than focusing solely on shaving 100ms off of your page load.

So where does that leave us?

Go learn new tools and break things on your personal projects. Have fun with it – that's why we're all doing this in the first place, right?

It’s okay to mess things up sometimes. Just learn from those mistakes so the next time it really matters, you'll help make a lasting impact with your work.

• 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!

Sharing on content curation platforms

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.

Reddit

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:

• Echo JS
• RubyFlow
• Golang News
• Web Designer News

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.

Overcoming the fear of sharing your 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.

How do you share your work?

Let me know on Twitter!

Why should we write in the first place?

Maybe you've never thought about writing before or maybe you're looking for a little more motivation. Whatever the case, there are a lot of good reasons why writing can help us grow.

Helping others to learn

Coding can be tough. And we all started somewhere at the beginning.

It's a long journey that each of us go through and it's even harder to go at it alone. Luckily, we've had websites like freecodecamp.org and css-tricks.com along the way that have made that journey more manageable, but there's always going to be a challenge that just doesn't make sense.

CSS-Tricks around 2011 when I got my first official coding job via Way Back Machine

This is where we have an opportunity to share our experiences to help others grow. While our favorite coding sites have tons of amazing tutorials, maybe they're missing a key point someone needed to fully grasp the solution.

Whether you're at the beginning or middle of your journey, every experience, big or small, can help another developer on their own journey.

And this is where it can be rewarding. One of my favorite parts of writing has been getting a Twitter DM from someone about how one of my tutorials helped them learn. It's a great feeling knowing you helped someone else on their journey.

Take this as a way for you to give back to the community that helped you learn and grow.

Reinforcing your learning

Thinking back to your grade school Spanish class, one of the tricks to helping the students learn was to reinforce learning. Teachers use different methods like reading, writing, speaking, flashcards, or even that Cinco de Mayo fiesta where you learned about and celebrated Mexico's heritage to help make the language stick.

This applies to development concepts as well. While your solution is still fresh in your head, write it down! Being able to teach what you've learned by writing about it will help those concepts stick in your head.

And just because you write it, it doesn't mean you have to share it. If you're not comfortable sharing it with the world, just keep a copy in a private notebook. You'll always be able to reference it yourself and still reinforce what you know by writing it down.

Documenting our experiences

Doubling up on reinforcing your learning, by writing about your experiences, you're kind of creating your own personal StackOverflow with a list of problems you've already solved.

As much as we had hoped we would remember how to speak Spanish from the classes we took, 10 years goes by pretty quickly and you suddenly realize you can only correctly say "hola" in Spanish.

_Hola sign from Jon Tyson on Unsplash_

If you were the ambitious type, maybe you saved all of your notes. If not, maybe you remember a good website that has flashcards.

Either way, having resources to go back to, whether it's your own notes or that website you still have bookmarked, helps us to quickly reference challenges we've already come across. By writing down your experiences, you're adding to that digital notebook that you know you can always use to remember that quirk you fixed.

Growing your personal network

Everyone has their own reasons for wanting to write and share content – and that's okay! While some of us might be doing this to help others learn, others might be simply trying to get a job or grow their Twitter following.

One of the benefits of sharing your experiences is that you're immediately growing the network of developers that have a little more insight into who you are and the work you've done.

This doesn't guarantee a job, but it certainly can help. All teams are a little different in how they recruit. Smaller teams tend to include other developers more in the beginning of the process who are probably more likely to open your blog and not only read a little bit, but actually understand it.

But even if you don't immediately get hired, you're playing the long game. Opportunities will start to come in small ways that lead to bigger opportunities down the road.

Why you might be hesitating and how we can look at it another way

Sometimes motivation isn't enough. We all have our personal challenges that might prevent us from doing something we want to do. But sometimes it's a matter of finding a different perspective to give you that bit of inspiration to finally dive in.

Imposter syndrome – who am I to write about this?

This is something I've personally struggled with for the majority of my career. Whether I was confident in my ability to do my job or not, I never felt like it was enough to be one of the people writing guides for others.

My website and blog

It wasn't until another team member brought another perspective to this argument (thanks Marquet) – everyone learns differently and maybe my way of telling a story can help someone learn.

If someone doesn't read my work, what are the consequences beyond a little bit of wasted time? On the other hand, maybe my blog post resonated with someone in a way that other blog posts didn't and they were finally able to solve their problem.

And this goes for any level of experience. As Swyx says, the fastest way to learn is in public. If you're not helping someone else, you're at least helping yourself grow.

Finding time – it takes a while to write a post

Time is a funny thing – it becomes an excuse that we use when we don't want to admit the real reason we're holding back.

Of course that's not always the case. Realistically a lot of us have a ton on our plates already whether we work, take care of a family, or are volunteering to help others. It can be a struggle to not want to just sit on the couch after a hard day's work.

But consider the free time you do have. Can you spare 10 minutes jotting down a few notes or even starting an outline of some things you want to say?

While 10 minutes won't write a whole post, if you start the habit and write another paragraph or two every day, you'll slowly end up with a blog post that you can feel good about sharing.

Just don't set the bar too high. If you start off with an unrealistic goal, you're likely to burn out fast and end up back in the same position you're at now.

No topic – not knowing what to write about

From speaking with other developers, I've noticed this seems to be tied a little bit to imposter syndrome. Maybe you're getting confident enough that you're more willing to write, but you're struggling to find what to write about. Is it because you can't think of a topic or is it because every topic you think about, you don't think you're enough of an expert to write about it?

Not having a topic can be a legitimate problem, but there's inspiration all around us. If you're working every day as a developer, you're working on problems that you ultimately need to solve. Why not write about those problems? And if you can't write about the problems due to contract concerns, what about writing about them in an abstract way without any sensitive information?

Inspiration for me comes from my experience talking with others. I'm lucky to be on a team that encourages growth of junior developers and during my time helping them out, their questions lead me to think about topics that I took for granted.

Whenever a topic like that comes up, I immediately note it down for later. This topic was on that list! Over time, my list of topics has grown to a point where I don't think I'll even finish it by the end of the year.

My personal list of topic ideas

While that could feel overwhelming, it's also motivates me to have a bigger selection of what I'm in the mood to write about rather than forcing myself to both think of a new topic and write about something I don't want to write about each week.

Whatever the case, find your source of inspiration. You don't need to be an expert on it. It doesn't matter if someone more experienced already wrote about it. Write what you know. Share your experiences. Maybe you'll help someone see the problem from a different perspective.

Finding what motivates you

At the end of the day, writing is something that each of us will need to find our own motivation to do.

Try to evaluate your goals. What are you looking to achieve? If writing is something you truly want to do, you'll need to find your own source of inspiration.

While some reasons might be more valid than others, it's easier to find reasons not to do something than it is to do it.

You got this! ?

In my experience, supplementing study with practical exercises greatly improves my understanding of a topic. This is especially true when I can test my knowledge as I go and receive instant feedback for each question.

The multiple choice quiz format is perfect for this. I developed a method to embed multiple choice questions in the math articles I write for freeCodeCamp, and I want to show other authors how to do the same.

How to add code to your article

The Ghost editor allows you to embed blocks of code throughout an article. The code editor can be accessed by clicking the round button with a plus sign (+) used for adding images, YouTube videos, and so on:

Click on the "HTML" button to add an editor to the article. The editor supports HTML, CSS, and even JavaScript.

Once you start adding code, click anywhere outside the editor frame to render the code and view your progress. Double click on the rendered output to reopen the editor window:

To test the functionality of your code, save the article by pressing Ctrl/⌘ + S, then click on the "View Preview" button that appears in the bottom left corner:

Your article will open in a separate tab where you can see how your code will be rendered once your article is published. Take some time to check on the styling and functionality of your multiple choice quiz.

Boilerplate code for the multiple choice quiz is available in the next section. All you need to do is paste it into your own article and change the question and answers.

How the multiple choice quiz works

You can add as many different questions as you want. However, while your article might have multiple quizzes, they're all contained within a single HTML body behind the scenes. Each question element starts with the following code:

<div style='transform: scale(0.65); position: relative; top: -100px;'>
  <h3>WRITE YOUR QUESTION HERE</h3>
  <p>Choose 1 answer</p>
  <hr />

Each of the following div elements contains a possible answer:

  ...
  <div id='block-11' style='padding: 10px;'>
    <label for='option-11' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='6/24' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      ANSWER 1</label>
    <span id='result-11'></span>
  </div>
  <hr />

  <div id='block-12' style='padding: 10px;'>
    <label for='option-12' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='6' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      ANSWER 2</label>
    <span id='result-12'></span>
  </div>
  <hr />
  ...

At the time of writing, Ghost's embedded code editor does not support template literals, so some things have to be hard coded.

Remember that all the questions are essentially loaded together behind the scenes, so the two digit numbers in each id represent the following:

• The first digit indicates the order of the multiple choice question in the article (1 is question one, 2 is question two, and so on)
• The second digit indicates the order of each possible answer within its question block (1 is answer choice one, 2 is answer choice two, etc.)

For example, block-12 represents question 1/answer choice 2, while block-43 is question 4/answer choice 3.

This indexing convention is necessary for different question blocks to function independently from each other.

Similar logic applies to the function names responsible for interactivity. The code that handles user interaction is placed within <script> tags and consists of two parts. First part is the function that evaluates answers and displays results:

function displayAnswer1() {
    if (document.getElementById('option-11').checked) {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correct!'
    }
    if (document.getElementById('option-12').checked) {
      document.getElementById('block-12').style.border = '3px solid red'
      document.getElementById('result-12').style.color = 'red'
      document.getElementById('result-12').innerHTML = 'Incorrect!'
      showCorrectAnswer1()
    }
    if (document.getElementById('option-13').checked) {
      document.getElementById('block-13').style.border = '3px solid red'
      document.getElementById('result-13').style.color = 'red'
      document.getElementById('result-13').innerHTML = 'Incorrect!'
      showCorrectAnswer1()
    }
    if (document.getElementById('option-14').checked) {
      document.getElementById('block-14').style.border = '3px solid red'
      document.getElementById('result-14').style.color = 'red'
      document.getElementById('result-14').innerHTML = 'Incorrect!'
      showCorrectAnswer1()
    }
  }

Like the name suggests, the displayAnswer1 function handles the first question within an article. If there's a third question in your article, displayAnswer3 will handle it.

In the example above, option-11 is the correct answer, and the styling in the first if block is updated to show the right answer was selected. If any of the other incorrect answers are selected, the styling is updated to reflect that.

Feel free to play with the displayAnswer_ functions in your own article. Just remember to attach the appropriate styling to the correct and incorrect answers.

Here's the second part of the code that handles user interaction:

function showCorrectAnswer1() {
    let showAnswer1 = document.createElement('p')
    showAnswer1.innerHTML = 'Show Corrent Answer'
    showAnswer1.style.position = 'relative'
    showAnswer1.style.top = '-180px'
    showAnswer1.style.fontSize = '1.75rem'
    document.getElementById('showanswer1').appendChild(showAnswer1)
    showAnswer1.addEventListener('click', () => {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correct!'
      document.getElementById('showanswer1').removeChild(showAnswer1)
    })
  }

This function is called showCorrectAnswer1 because it handles the first multiple choice question in the article. You'll have to add showCorrectAnswer2, showCorrectAnswer3, and more if your article has more than one question.

Please play around with the styling and dimensions used throughout the code, and customize it to your taste. Also, I'm sure there are other ways to implement multiple choice quizzes, but this is mine, and I'm happy to share it with you.

Here's the full code and a working example:

<div style='transform: scale(0.65); position: relative; top: -100px;'>
  <h3>What fraction of a day is 6 hours?</h3>
  <p>Choose 1 answer</p>
  <hr />

  <div id='block-11' style='padding: 10px;'>
    <label for='option-11' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='6/24' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      6/24</label>
    <span id='result-11'></span>
  </div>
  <hr />

  <div id='block-12' style='padding: 10px;'>
    <label for='option-12' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='6' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      6</label>
    <span id='result-12'></span>
  </div>
  <hr />

  <div id='block-13' style='padding: 10px;'>
    <label for='option-13' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='1/3' id='option-13' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      1/3</label>
    <span id='result-13'></span>
  </div>
  <hr />

  <div id='block-14' style='padding: 10px;'>
    <label for='option-14' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='1/6' id='option-14' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      1/6</label>
    <span id='result-14'></span>
  </div>
  <hr />
  <button type='button' onclick='displayAnswer1()' style='width: 100px; height: 40px; border-radius: 3px; background-color: lightblue; font-weight: 700;'>Submit</button>
</div>
<a id='showanswer1'></a>
<script>
  //    The function evaluates the answer and displays result
  function displayAnswer1() {
    if (document.getElementById('option-11').checked) {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correct!'
    }
    if (document.getElementById('option-12').checked) {
      document.getElementById('block-12').style.border = '3px solid red'
      document.getElementById('result-12').style.color = 'red'
      document.getElementById('result-12').innerHTML = 'Incorrect!'
      showCorrectAnswer1()
    }
    if (document.getElementById('option-13').checked) {
      document.getElementById('block-13').style.border = '3px solid red'
      document.getElementById('result-13').style.color = 'red'
      document.getElementById('result-13').innerHTML = 'Incorrect!'
      showCorrectAnswer1()
    }
    if (document.getElementById('option-14').checked) {
      document.getElementById('block-14').style.border = '3px solid red'
      document.getElementById('result-14').style.color = 'red'
      document.getElementById('result-14').innerHTML = 'Incorrect!'
      showCorrectAnswer1()
    }
  }
  // the functon displays the link to the correct answer
  function showCorrectAnswer1() {
    let showAnswer1 = document.createElement('p')
    showAnswer1.innerHTML = 'Show Corrent Answer'
    showAnswer1.style.position = 'relative'
    showAnswer1.style.top = '-180px'
    showAnswer1.style.fontSize = '1.75rem'
    document.getElementById('showanswer1').appendChild(showAnswer1)
    showAnswer1.addEventListener('click', () => {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correct!'
      document.getElementById('showanswer1').removeChild(showAnswer1)
    })
  }
</script>

You can also find the complete boilerplate code here on GitHub.