The cover is San Francisco Golden Gate Bridge, taken by Tom Zhao in Dec 8 2018 16:32.
Technically, this is not the first attempt that I’ve tried to make my own blog. I have blamed myself several times for not having any time to build one myself and making it run on my server. Now, with the current COVID-19 situation, I have to say it is absolutely the best time for doing something that I’m really interested in.
Now, let’s dig into the details of how I started this blog.
First thing first, as many less geeky people might not expect, you have to rent / own / be allowed access to a server with a public IP address to run a blog on your own from bottom up. For me, I have been using Peter Zhang’s server on which he installed a Linux VM(Virtual Machine) to grant me access. For most part, I just use remote ssh to install anything valuable like I’m accessing a normal server.
You can use flask to test your site locally. It’s a python library that allows you to start a simple server for testing and light production. It is not recommended to use flask in real production because this framework isn’t that good and stable at handling heavy traffic and requests. To install flask, you need to install python first, and then run pip3 install flask. To start the server, put the main page in the template folder(this is included in the flask tutorial) and then run flask run —-host=0.0.0.0. Setting host to 0.0.0.0 is telling flask to listen to all network interface. You can visit your site at http://localhost:8080. 8080 means the port for http requests. Now, you can run your website on your server and any devices connected to the network as well. There are other ways to create a simple server locally, and flask is one of the easiest I’ve found.
Next, you have to buy a domain name. There are handful of websites that allow you to buy a domain name, such as godaddy.com (annd of course plenty of other sites), which allows you to pick any domain name that has not been taken for a certain price. I bought my site name at 2.99USD/year, which is decent.
Carefully preserve the domain name and your payment method. The domain name you choose might be valuable in the future(though highly unlikely).
For the third step, you may want to register your domain name with a safe DNS server provider. This allows your domain name to be resolved by DNS server to point to your server with a public IP address. An example would be Cloudflare, a DNS provider that works like a reverse proxy. It also provides many safety features that prevent your server from attacks.
On the Cloudflare website, you can configure how to link your domain name to your server content, and choose whether to use proxy to redirect. You can also redirect http requests to https in case some browser thinks your site is unsafe. Notice that you are advised to turn off the temporary caching during development because when refreshing the page, you might get the temporary content from Cloudflare server rather than your updated server content.
Finally, you have to set up nginx(or Apache) on your server in order to run your website. Again, this is another type of reverse proxy staying locally on your server. If you are using servers provided by third party, such as a server from school, you don’t have to configure nginx because the provider has helped you to configure.
To install nginx, go to this page. For Linux users(Ubuntu etc.), it is as easy as running apt-get install nginx . After installation, you have to go to /etc/nginx/sites-available and find the default file and change the server_name to your domain name, and root to the absolute path of your homepage.
After doing all the steps above, your website should be running well! Now comes to the maintenance part: you might want to get a certificate for your website in order to make sure that it’s safe to visit for other people. This is not a required step, but would rather be recommended.
There are much more detailed steps into building a decent personal website, such as the design and font choices, better structure of files and folders, lazy loading to reduce the loading time, and much more. However, I’m not really a top expert into front end development. You might discover more things than me when you learn things along.
Feel free to drop any questions if you have one. I will reply as soon as possible! : )