Under the hood

Updated: 2021-10-10

This page lists tools being used for both building and serving this project. You will see that it is more than just building a static website.

Content Format: Markdown

Simple yet powerful. The author should only care about the content, not if the font size is 14px or 24px. Even without any formatting or compilation, pure plain-text markdown files are very easy to read.

Frameworks: Gatsby.js / Next.js

The main site (https://www.hackingnote.com) is using Gatsby.js, while the interview question solutions (https://interview.hackingnote.com) is using Next.js.

Gatsby is a very popular static site generator. It is based on Node, and of course npm is used for package management.

Two Facebook originated projects were being used by Gatsby: GraphQL is used to query the content at compile time, and React is used for the visual part.

UI: MUI v5

Originally used Bootstrap, but so many sites were using Bootstrap so they all look something similar, and it depends on jQuery, which WAS awesome but should be deprecated now.

Now it uses MUI (previously Material-UI, now https://mui.com/) instead ("material" is the design language of Google).

There are themes available online. This site does not use any theme though.

Source Control: GitHub

Originally all the code and markdown files were in a public GitHub repository, after some forks I realized it is not very wise to open source the immature or personal content - it is unlikely that the forked content would get further development. I converted some repos to BitBuckets to keep them private, and learning about GitLab as an alternative, then suddenly GitHub allows free private repos, so I'm back on GitHub.

Domains: Google Domains

https://domains.google/

I used to use GoDaddy for registering domains, but later moved to Google Domains, which looks cleaner and more trust-worthy. A .com domain costs $12 a year, not too bad. The hard part is find a good AND available name for your website. You may need to pay a premium if you want a shorter name, some hotter keywords, or some other top level domain (TLD) than .com.

Read more: Domains

Deployment: AWS / GCP

The biggest benefit of static site is that you do not need to maintain your server and database; instead the HTMLs are pre-compiled, you just need to upload them to some online storage like AWS S2 or Google Cloud Storage, and enable serving static site, then your website is up and running. Also it is super fast to visit, because it simply retrieves the requested page, no need to query the database and assemble the response on the fly.

CDN: CloudFlare

One way to make it even faster is to use CDN. CloudFlare has an awesome free plan for your small sites, also it can help with "upgrading" from HTTP to HTTPS.

Google Analytics and Webmaster

I'm using Google Analytics and Webmaster to monitor the traffic, and you can also drop in a Facebook Pixel if you do any advertising in the social media. Currently I'm not in a rush to sell anything, so I just wait for the search engines to pickup the content. You can do some SEO to make it rank better in search results.

Monetization

I've tried to use Google Adsense and Amazon Associates to monetize the content, though the income is neglectable for now.

Read more: Monetization