Coding a personal website from scratch
TMI sharing
I have always wanted to have my personal website. Why? Because I think I have so much to say. I had some random experiences previously of building a website such as using WordPress.com when it's still free to use your own domain (not anymore). At that time, as far as I recall, I was about 26 years old, and I didn't have much experience with society, nor did I have much experience with social interaction or self-exploration. I rented a domain for 1 year and started to use some templates from WordPress to build it up. And after it was initially done, I suddenly realized I had nothing to say about it. I just graduated from my master's degree and started working in Shanghai. Life has been generous to me during that time. So I guess when you are not in pain, you don't have so much say :)).
But now is different.
I am going through such a painful process right now, facing a ton of life crisis after crisis and I have finally had the courage to share my experience and learning all the way, especially regarding the tech industry or as a human being that has vulnerabilities. This website will probably be my journal/blog where I can vent whatever I think is insightful or worth sharing to write about. Now let's get back to the topic of building the website from scratch.
Building the website (my steps)
1. Domain (not free)
Of course, I started again with renting a domain. But this time, I did a little bit of research. I used https://porkbun.com/. At this platform, the good thing is that every year the rent fee is the same, unlike other platforms that give you special offers for 1st year and some almost invisible text telling you it's gonna be much more expensive from 2nd year. I spent around 10 USD per year for the domain.
2. Choose website builder or build it myself?
2.1 Website builder (it's not free so I ditched this route)
When you search on the internet for "building a personal website", there are so many articles and blogs from some website builders like Wix or Squarespace. I originally was very curious about it but then I found out I need to pay some monthly fee to use them. I gave up. I am very broke and I need as minimum cost as possible. So into the next option.
2.2 Server, database, and others (it can be free!)
I then got to know wordpress.org can be used for free but you need to set up your own web server and database to make it work. In the spirit of "I really need free stuff", I spent a solid 5-6 hours of learning how to use them and just found out it's too much work and trouble to do so. For example, I need to find a free web server vendor where I can upload my WordPress files to be able to set up. And the free web server file management system has some upload file size limitations. So I went to multiple dead ends and gave up. Sometimes it's not so bad to give up, isn't it.
2.3 Hosting and Deployment
Honestly, I don't have much experience with hosting websites so far and so forth. So at the beginning, I jumped into WordPress again because that' 's what I am familiar with. But I found out it's not free anymore if you want to use your own domain for content management. So I asked a friend.
Here is where vercel comes into my mind. Vercel offers you an easy-to-use to use platform to host and deploy your code using Next framework, which they invented themselves. (That's so cool!) And the important thing is, they have free plan for small users like me. The platform looks very neat and beginner-friendly, so I dived in.
2.3.1 Connect vercel <> github
Since vercel is a platform that can help you to deploy your code, you need to connect your GitHub account so Vercel can automatically help you create git repositories and also get your code when you have done with git push. This is an easy step for me.
2.3.2 Use a template or write from scratch?
Sorry, I might just use a very wrong title in this post. I didn't write from scratch. I used a template because I am not yet very familiar with front-end development and communication between FE and BE. Plus, my main focus in my website is to be able to write and post blogs. I really don't want to or don't know how to code a text editor from scratch. So I use a template. You can find the link of this current template here.
2.3.3 Start to look into the code and do some customization
I really tried. With the 2-3 hours I spent today, I only managed to change the margin size and title font size (what a typical day of a developer). But as I study more, I think I will be able to add more functions and sections later.
2.3.4 Git push and deployment
After all the changes have been done, you can start to push your code into GitHub and once it's done, vercel will start to deploy the changes automatically. This has been a very smooth process for me. Thanks, Vercel!
3. Future plan
Content-wise: I definitely enjoyed writing so my biggest goal is to post more blogs even maybe no one will ever read them.
Tech-wise: I want to add more functions to the website like at lease some navigation section. And be able to do customization. Get familiar with the code.
Design-wise: I have to admit I don't have the best taste in design, but it will so much fun to design the website by myself and use my tech skills to make it happen.
You have reached the end of my first blog post. Thanks for reading :)). I am grateful for your visit.
