Technology Overview of This Website
Introduction
In this blog post, I will do a detailed introduction on all the technologies used to develop and deploy this blog website, including hardware, software, framework, process, etc.
(Virtual) Hardware
In order to host a website that is accessible by anyone on the Internet, we need a server machine with a public IP address.
Instead of buying a physical server hardware and renting a rack space in a datacenter, it's common for individual site owners to rent a VPS (Virtual Private Server) due to its lower cost and easiness to set up.
Like many other blog websites, jen.ms also runs on a VPS. More specifically, it runs on a droplet rented on DigitalOcean.
I chose DigitalOcean instead of other VPS providers like Vultr, because DigitalOcean provides a wider range of cloud services, such as database hosting, object storage, VPC networks and monitoring services. Since I also use this server for other purposes than website hosting, these cloud services at DigitalOcean are indeed very helpful.
Also, although full-fledged cloud services such as Amazon Web Services or Microsoft Azure provide even more features than DigitalOcean, they are more expensive and require a lot more effort to set up and maintain. Per my own use cases, they are simply not worth it.
In summary, DigitalOcean is probably the best option for individual developers with similar needs like me. If you'd like to try it out, click on this referral link and you'll get $100 credit for FREE.
CDN (Content Delivery Network)
Since this website is hosted in a datacenter somewhere in the San Francisco Bay Area, if someone visits it from Singapore or South Africa, she or he has to wait for all the data packets to travel across the oceans before they can see a single character on this website. That usually leads to long loading time and hence hurts usability.
A solution to this problem is to use a CDN service with cache servers all over the world. With a CDN service set up as a Web proxy, a person in South Africa has a better chance to retrieve the data necessary to render this page from a local cache server in South Africa, instead of having to wait for the data packets to travel across the Continental US and then the Atlantic Ocean.
Also, since most of the traffic are handled by the cache servers, and the cache servers only retrieve the data from your host server if there is a cache miss, the amount of bandwidth used by your server can be greatly reduced. Even though outbound bandwidth are not expensive nowadays (e.g. $1 per 100 GB after the initial 1000 GB), it's always good to save.
Another benefit of using a CDN service is that it automatically hides your host server's IP. If you do not have a lot of experience in network security, you probably do not want to expose your server's IP address on the DNS server, because it would definitely increase the risk of being attacked by hackers.
For this website, I use the free CDN service provided by CloudFlare. Although this tier doesn't include some premium features such as run-time image optimization or cache analytics, it does allow me to use its global network for content delivery for free.
Blog Framework
With all the logistics figured out, the next problem is to how to create the actual content of this website.
Of course, one could manually write all the HTML/CSS/JavaScript as she or he wishes, but it fairly inefficient for the purpose of running a blog if you have to manually do so for every blog post you write.
On contrary, a fully managed blog service such as WordPress eliminates all the needs for coding. However, it is not flexible enough for someone who knows about web development and wishes to do a lot of customizations.
Hence, I use a blog framework called Hexo, which is a sweet spot in between. It requires decent coding knowledge and capability during the initial setup and customization, while it makes writing blog posts as easy as writing a new Markdown doc. There are also various plugins available, from source minification to image compression.
The initialization process would require solid understanding of Node.js and npm. You can find any existing themes you like or create one on your own. Or, if you are like me who likes some features provided in a particular theme but does not like some other features, you can easily customize the theme by writing and injecting your own CSS, JavaScript and .ejs template files.
However, there is a drawback of this framework - it's not easy to upgrade to the latest release. The official documentation on upgrading suggest that you should make a copy of your configurations and then manually resolve the conflicts after a git pull. Also, based on its release history, breaking changes are not uncommon.
Anyway, this would only be a problem if you always crave for new features in the latest releases. If you are a casual blog writer, and you are pretty happy about your current blogging process, you may not even bother upgrading the underlying framework.
Web Server & HTTPS
The contents of this website are served by an Apache2 server. I'll skip this part as it is a well-known technology. However, by default, Apache2 only listens on the 80 port and handles HTTP requests, instead of the commonly desired HTTPS.
In order to enable HTTPS for a website, we first need a valid SSL/TLS certificate issued by a Certified Authority (CA). I still remember in the early days when I was back in middle school, an SSL/TLS certificate used to cost a big fortune.
Now, things have totally changed. Let's Encrypt is an organization sponsored by large corporations, and it issues free SSL/TLS certificates to ordinary individuals like you and me.
In order to acquire a SSL/TLS certificate from Let's Encrypt, you first need to turn off the Web proxy on the CDN service, because it will need to use HTTP challenges to verify that you are indeed the domain owner.
Then, for Apache servers, simply let the sudo certbot --apache command to automatically acquire a certificate and configure the server.
Development & Deployment Process
When I create new blog posts or do customizations on the theme, I use the hexo server command to create a local HTTP server at localhost:4000. It also listens on any file changes during the development, and automatically re-render the content.
After all the coding is done, the deployment process is as follow:
- The
hexo clean && hexo buildcommand generates all the static HTTP/CSS/JavaScript files that are ready to be deployed to a Web server. - Then, the
hexo deploycommand uses my predefinedrysncconfiguration to transfer the files to my VPS. - Finally, a
curlcommand sends a RESTful HTTP request to CloudFlare in order to purge all previously cached site contents.
The entire deployment process is executed as an Alfred workflow I defined.
Conclusion
Thank you for reading this blog post!
I hope you have enjoyed it, and I hope now you have a better understanding of how this website works.
If you have any question regarding setting up your own blog, or using any of the services introduced above, free feel to leave a comment below. I'll answer your questions with my best knowledge.