DEV Community

Cover image for Introducing SHanC – A Static Hacker News Clone
Sung M. Kim
Sung M. Kim

Posted on • Originally published at slightedgecoder.com on

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 😝)

architecture

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

Top comments (2)

Collapse
 
thejoezack profile image
Joe Zack

Look the look'n'feel, and I really enjoy seeing your drawing for the project!

Collapse
 
dance2die profile image
Sung M. Kim

Thank you for the feedback, Joe~