In our previous post, we actually went in details to understand how did Medium set up their architecture to allow high scalability and high performance at the same time! That has always been a challenge but that execution there was just amazing. You can check out the post here. Have you wondered how you can create your own online publishing site just like Medium? Here’s the place for you.

Over the years, I believe the best way to learn is to actually do it. We will be going through how we can create our own online publishing site similar to Medium as well. In this article, there will be a few sections:

#1. What are the ways for you to create your own site?

There are broadly two different ways to create a site. It can be dynamic and static generated sites. The end goal is the same: a site for people to visit and check out your own creation but two distinctive different paths.

#2. What are the key components required?

In this section we will go a little deeper on some of the essential components for us to create our own site. We will get to understand what role does these components play. You can definitely just not bother about all these and just let Wordpress or Medium handle all these for you. But different from these services, whatever you create is solely your own and you will have something you can call your own!

#3. Where can you get these resources and of what cost?

I will be sharing some of the more common resources for each of the 6 components i believe is essential for your own content generating site. It can be challenging with new domain terminologies and perspective towards servers and site hosting. But it will definitely be a meaningful learning journey.

#1. What are the ways for you to create your own site?

There are many ways to go about creating a publishing platform. But for our own personal use, let us consider static site generators.

A static site generator is essentially a set of tools for building static websites based on a set of input files

These sites are different from the usual ones where you are required to have a backend server and a frontend website. Static sites as its name suggest are static, and does not change unless there is a new deployment. This blog is created using a static site generator as well. And I update this site by updating the content in an organized format before I deploy it up into my own static web server.

I’ve included in a video talking about the difference between static and dynamic web pages for you to have a better understanding of the differences.

#2. What are the key components required?

Of the many tools tech giants have, we just need a few essentials to actually create a quick and accessible website of your own! There are 5 essential components I’ve identified as useful for you to create your own site.

1. Your own virtual server

Your server is kind of like your receptionist. People access your website, they will come in and ask for your website to be served to them. And this receptionist will then pass you the website for your browsing.

In the technical sense, it is basically a computer with its own CPU, RAM and processing power to serve your website to anyone that requests for the site. The difference between your computer and a server is a server is set up to run 24/7.

Do you have your own server to host your website? In order for public to access your website via a browser, it has to first be reachable by the user. In simple and straightforward cases, this is done by the server.

2. A file server

Now imagine your server to be your own computer. How are you planning to open up a word document? You need an application that is able to open and perform this particular task of opening this .docx type file. So you need to download this application to perform this particular task. This is the same for a file server.

In the technical sense, your server needs to have a file server in order for it to serve static files based on its domain and context. Here’s are 3 different examples to illustrate the some of the different possibilities you can configure your web server.

• Set file server based on domain

I am able to set my file server to actually serve a site when someone reaches the root context “/“. That means there are no other paths in the URL. In more simple use cases, domain names are usually tied to one IP address and thus one virtual server, but this generally isn’t the case for giant technology companies.

 https://phuaxueyong.com/

• I can set file server based on a sub-domain

 https://blog.phuaxueyong.com/

Now i can get my file server to serve a different site based on the subdomain. Sub domains are basically what you choose to put before your domain name. In this case, blog is my subdomain, and phuaxueyong is my domain name.

• I can set file server based on a specific context

https://blog.phuaxueyong.com/post/2020-06-12-code-smart-code-safely

This is the URL of one of my posts. The context we are referring to is all that after my domain name - indicating its a post along with its title.

3. A static site generator

After you have gotten your own ‘computer in cloud’ (aka the server) and a file server to actually serve that a particular file. What you need to do is to create the file that is to be served! In this case static site generators as its name describes allows you to generate sites that does not change (static!) and thus does not need to connect to a database or stores information. Largely, it is basically like a paper served to your browser for your viewing purpose.

4. Domain name

After you have gotten your own virtual server, you are usually given an IP address for you. Now domain names are basically human readable names that are linked to these IP addresses.

For fun, I’ve added in a list of google’s IP addresses here.

All these IP addresses are all hidden behind probably the most accessed domain ever. www.google.com. This domain name is linked to the IP addresses of the servers. It helps to make your own site presentable.

5. Cache mechanism

Here’s an illustration to help us understand the concept of cache. Imagine you have a huge store room. Someone came forward to ask you for an item that is buried deep in the store room. So when someone requires for for the item, you will spend a few seconds accessing the store room and pass it to the user. Now you decided to take a stake of these items that are requested at the entrance of your store room, so whenever the next person requests for the same item, you can simply just hand over the item to the request at the instant. This is the essence of a cache.

A cache retains the information that was requested by a particular user in memory, so when the user were to request for the site again by refreshing or revisiting the website, your server has already stored a cached version and can simply serve this cached site from memory at the instant, providing a high speed page load. Just give it a try, to refresh this page and you will find this page to load a ton faster than the first load upon visit.

Just a note. Content Delivery Network are often considered to be an essential tool for delivering content globally. This is to address issues where your server may physically reside in United States and you are trying to serve your Japanese users your website. That latency can be significant with geographical distances. And CDN addresses these issues but we will not be covering them in this article! Do check them out on your own if you wish to!

Here we have it, this list is what i consider the few key components needed to create your own content creation site. What Medium did well was to dissect each component of the entire web delivery process and pick a tool that is best suited for that task.

Whichever the case is, choose the right tool for the job.

#3. Where can you get these resources and of what cost?

1. Virtual server

You can find virtual servers from Azure, AWS, or you can follow mine at LaunchVPS. This is an affiliation link. I’ve also attached a link to all the free Sass you can utilize as a developer here. Hope you will find these resources useful.

For my case, I purchased a 512 RAM & 5GB SSD LXC special. These specs are not great but they are sufficient for static generated sites anyways. With this server specs, you can pay an annual rate of $13.95 USD to get a decent server to host your static sites.

2. File server

There are the 2 popular and mature tools in the market. One will be NGINX. Another will be Apache! They are usually free for its basic features, which actually aren’t that basic. They have a ton of features that it could possibly take years for one to master and utilize to its fullest potential. Once you have your virtual servers, you can simply just download them!

3. Static site generator

I came to search and realized there are aplenty of these static site generators. Personally for me, I quite enjoy using NUXT.js for the ease of use and good documentation to understand the steps required. Its really neat. I love it. You can consider that.

Here’s where you need to do a little bit of coding, or you can choose to outsource this coding bit to a web developer to get it done for you. The choice of static site generators are usually dependent on the language in which one has to code, so its more of a developers preference.

4. Domain name

Once you have gotten your virtual server, you will need to map your server’s IP address to a human readable domain name. So there are many places you can buy domain names. For me, i’ve used namesilo this is an affiliation link.

I really like it for the price of 8.99USD per annum. Technically that brought me cost of hosting my own website to about ~22USD per year. Thats basically 5 bubble tea drink (a fav drink in Singapore) and that covered my hosting cost.

5. Cache mechanism

This is the beauty of the file servers. More often than not, a file server does not only serves the site but also enables you to add in caching configurations to help ease your file server’s workload. With just a one liner configuration, your file server can also cache the files that are served to your viewers. Sweet! (:

TLDR

There you have it. If you want to create your own website for you to add and create your own content, the bare minimal components needed are indicated above and if you want to serve your sites with high performance, consider a cache configuration to get your sites cached for quicker delivery for the same user on the next load.

Medium has definitely done content publishing many folds better, but you are not far away from your own site hosted on your own server as well. If it has always been your goal to create something and proudly call it your own, I hope this has been useful to help you achieve that goal! There are many challenges and learning curves to climb, but what’s most important is the first step you take! Go for it fellow creator!

I’ve also came across an interesting article to give you a deep dive into React and how you can write clean code in React as well. You can check out the article here!

P.S. I use Nuxt.js to create my own static site and it has been really useful and has easy to reference documentation. You can check out more about NUXTjs from the video here as well.

Resources:

• Cover image is by unsplash
• gohugo a static site generator
• Nuxtjs static site generator in Vue.js
• Nextjs static site generator in React.js