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.
- Each HN page shows 30 stories only and
- 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.
- Skimming through 30 pages at a time takes focus away
- 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.
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.
- GatsbyJS - a static site generator using ReactJS
- Styled Components - CSS in JS
- Netlify - deployment & Build WebHook
- 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).