Introducing SHanC - A Static Hacker News Clone

I read Hacker News (HN hereafter) daily. The way I read is that, I skim through titles and open 5~10 stories and actually read 2~5.

Two problems I have with HN.

1. Each HN page shows 30 stories only and
2. having to click on "more" for a post-back seemed too much of a pain

And I don't need real-time updates of the story.

So I created SHaNc, a Static page Hacker News clone.

I will only introduce you SHaNc in this article. Details on how it was built and problems faced while building it will be discussed in the next post.

❓ Why?

It solves two problems mentioned above.

1. Skimming through 30 pages at a time takes focus away
2. Loading next page with a post-back is slow

SHaNc loads all stories in one page (solves the first problem) and fast as it's a static page and also learn GatsbyJS & Styled Components along the way.

🤷 What?

SHaNc is a static page, which displays all stories (Best & New story pages planned), which solves both problems - loads all stories & fast (for being a static page).

A static page is by definition doesn't change. So the page is rebuilt every hour on the hour. So you will probably be at most 1 hour behind.

🤔 How about other static HN clones? 😕

There are other two awesome static HN clones.

1. Nuxt Hacker News
2. Hacker Next

They are fast but I still had the problem of having to load next page manually, which takes your focus away.

🏭 Tech Stack & Architecture

Nothing fancy.

1. GatsbyJS - a static site generator using ReactJS
2. Styled Components - CSS in JS
3. Netlify - deployment & Build WebHook
4. Azure Functions - triggering site build via Build WebHok every hour

Hand-drawn on a piece of paper 😝.

[caption id="attachment_1028" align="alignleft" width="1024"] SHaNc architecture[/caption]

🏃‍♂️ Parting Words

If you have a similar HN reading style, I hope SHaNc can help to address your problems.

Please leave a feedback, issues, suggestion on GitHub page (MIT licensed).