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

SHaNc architecture (Hand-drawn on a piece of paper 😝)

🏃‍♂️ 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).

---

The post Introducing SHanC – A Static Hacker News Clone appeared first on Slight Edge Coder