Under the hood
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.
Markdown Compiler: Remark / MDX
Both MDX and Remark can convert .md files into HTML.
- Remark: can be extended via plugins (https://remark.js.org/)
- MDX: can embed React components in Markdown.
Frameworks: Next.js
hackingnote.com is using Next.js.
Compared to Gatsby: Gatsby.js uses GraphQL to query data; Next.js allows you to use any data fetching method.
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.
Domain and DNS: CloudFlare
I used to use GoDaddy for registering domains, but later moved to Google Domains, then after it gets shutdown, domains were transfered to CloudFlare. 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 Search Console
I'm using Google Analytics and Search Console 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