Add a custom homepage

Add a custom homepage

This article discusses creating a custom home page and displaying it as a landing page for your blog


Throughout my software engineering career, I have consumed many articles and videos on YouTube. I am sure as engineers, we can all admit to having done so. Over the last few months, I feel like I want to voice my thoughts and opinions, and give back to the community. Hence, here I am. Writing my first blog post!


Note: This article assumes that you have a Hashnode's headless CMS set up and running and are familiar with Hashnode's UI interface and have some programming experience.

Note: This article uses the Hashnode theme, so all changes will be under the Hashnode theme directory

Creating a home page

  1. Go to your Hashnode account -> Blog Dashboard -> Pages

  2. Click on "Create new page"

    • Update the page with information that you would like to display on your home page

    • Update the page slug with a meaningful name like - home, homepage, about-me etc.

      Good-to-know: Hashnode uses the page slug for routing

    • Click on "Update Page" once your are done

  3. Run the forked instance locally

  4. Navigate to (packages/blog-starter-kit/themes/hashnode/pages)

  5. Create a new directory called blogs and make a copy of the index.tsx file and place it inside the directory.

    Note: We will leave this directory for now and revisit this later

  6. Copy the contents of [slug].tsx and replace the contents of index.tsx with it

  7. Delete the getStaticPaths() function (Why?)

  8. Update the getStaticProps() function

  • Delete the params if-check since we will not be receiving any query

  • Replace the value of slug to the page slug that you set earlier (We are using home)

  • Set the isHome prop to true in the Header component

      <Header isHome={true} />
      export const getStaticProps: GetStaticProps = async () => {
        // Hardcode to 'home' since this page will only be rendered for a home page
        const slug = 'home';
      <Header isHome={true} />

You should now see your browser display your home page when you first load

Updating blog path

Since our app now loads our home page when a user visits our website, we want to move the blog to a separate URL path that semantically makes sense. A common approach is to define a path like blogs/your-blog-post

So we are going to use that approach for the remainder of this article. You can choose to name your path however you see fit.

  1. Navigate to packages/blog-starter-kit/themes/hashnode/components/publication-nav-links.tsx and update the entry on the navigation items list

     const navItemsRef = useRef(
           { label: 'home', url: '/', isActive: !currentActiveMenuItemId && isHome },
           { label: 'blog', url: '/blogs', isActive: currentActiveMenuItemId === 'blog' },
         ].filter((item: any) => item),

    Note: The url (/blogs) should match with the directory name since Next.js uses the directory name to determine the component to render

  2. Open the index.tsx (blogs/index.tsx) file and update any imports (if needed).

    Update the props and pass the current menu ID so that the menu is correctly highlighted

     <Header isHome={false} currentMenuId={'blog'} />
  3. Move the [slug].tsx file to the blogs directory and update any imports (if needed)

  4. Finally, we need to update the post URL and the pre-fetch URL for the article in the packages/blog-starter-kit/themes/hashnode/components/features-posts.tsx file.

    Note: These need to reflect the directory name (i.e. "blogs" in our case)

     if (buildId) {
     const postURL = `/blogs/${post.slug}`;
  5. You can now upload your article and all of yours posts will rendered from blogs/your-blog-post

If you have any questions, feel free to leave a comment. Thank you for taking the time to read this article.

Note: This article does not discuss updating the nav bar for mobile viewports. This will be something that I might update later.

Update: There was a small bug with the application wherein if a user were to view a blog post from Hashnode itself, it would redirect to my headless instance. Since we are using the path /blogs/my-blog-post it would not redirect to the correct URL (i.e. it would navigate to

The solution for is to setup redirect in Next.js within the next.config.js!

The idea here is to redirect the user to We use regex matching here to ensure that the user is correctly redirected to the correct URL.

Few things to keep in mind

  • If a user is trying to navigate to, redirect them to

  • If a user is trying to navigate to, do not redirect (take a look at the negative lookahead in the regex pattern)


return [
      source: '/:path((?!blogs)[^/]+)',
      destination: '/blogs/:path*',
      permanent: true