Add a custom homepage

Inspiration

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!

Setup

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) {
      fetch(`/_next/data/${buildId}/blogs/${slug}.json?slug=${slug}`);
    }
    ...
   
    ...
    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 your.domain.com/my-blog-post).

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

The idea here is to redirect the user to your.domain.com/blogs/your-blog-post. 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 your.domain.com/your-blog-post, redirect them to your.domain.com/blogs/your-blog-post

• If a user is trying to navigate to your.domain.com/blogs/your-blog-post, do not redirect (take a look at the negative lookahead in the regex pattern)

...

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