Restarting My Blog

30 Apr 2019 | 1 Comment | 11 Min Read

Well, a restart means there has been a start before. Wow!

To get to the story of the blog, I will have to go back to the origin of my site hosting. Due to the fact that I was rather cheap, and also more importantly didn't have the extra money to spend on hosting services, which cost on average around $3/month for the cheapest services available, I tried to find free hosting services.

There are actually many such services available at your disposal, especially if you are a rather experienced developer. Few examples are Github Pages, Netlify, or Google Firebase etc. But I'll come back to them later.

So anyway, I was totally new to web development at that time. A total beginner, still learning the basics of HTML, JS etc. Also, it was completely self taught, looking for resources and learning from the Internet. Bless the web!

As a result, my progress were rather slow, partly due to the lack of a better self-discipline. Oops. So essentially I knew very very little things. Even though it was web development, everything was still 'offline'. I had completely no idea about domain names purchasing, where to do so, what steps to take, let alone a free hosting service for serving our website. Damn, what did hosting mean even really?

Now it may be slightly exaggerated, but that was roughly my situation. Everything started to change when I began to try a project, and got out of that 'tutorial' zone. It was a simple game. I was inspired to try on a ping-pong-style game, or Fireball-like game, where we basically tried to bounce a ball on the screen to prevent it from going past the screen border. And so I began typing away in a text editor. It was the Sublime Text.


Ping Pong JS by Chris DeLeon on Udemy

I was implementing the 'movement' of the 'ball' in JS with setInterval, adjusting fps, blabla, etc., when I got another idea. Seeing the potential in these simple statements/functions of ball movement, I diverted away from the ping pong game, to one where I could control the character movement. Then, I thought of 'snake'. Hmm, what if my character can eat something and grow as well? So then, 'Feeding Frenzy' struck my brain. I was inspired by the idea of having a character in a game where its sole purpose was to grow bigger and bigger and eventually be the biggest amongst everything including the enemy, so that it could eat everything and win. Long story short, I finished 'Spacecoon'. If you check it out in my website home page or here, you can see it is really simple. But for me at that time, it was a big achievement. Gotta start somewhere right?

<Your internet connection cannot connect to Imgur photos>
Spacecoon by Me.

From Game to Hosting

So from just knowing how to loop or process simple DOM elements, I managed to utilise JS to create a game, albeit a simple one.

Then, the moment came when I finally got into researching about this hosting matter. (Took quite a while here huh). Basically, I just wanted to deploy my game so I could show it to my friends, let them try it, and basically made it accessible anywhere, without having me to shove my laptop on to their faces everytime. So essentially, making it 'online'.

Then the big question. How to put this on a website??? Like one where I can just type in the URL and then access it? Well, I managed to find how. It was also during an internship, and one of the projects concerned with web development. So I had to learn a lot and research a lot by myself to better prepare for the tasks. I had also started to obsess over deployment or doing something that was not only accessible in my personal laptop. This might seem like weird or trivial, but remember I was a complete beginner.

Anyway, thanks to the web, again! hahaha... So, one solution where I did not need to pay anything was to use Hostinger's free hosting service called the 000webhost. Sounded weird and scammy at first, I know. But it was awesome, especially since I didn't want to pay anything and also didn't mind the domain name suffixes. It was a quick solution.

From then on, I kept using that service. Not only for my own game, but also for quick testing of websites/projects I developed to simulate a production environment. I later puchased justkenny.club. Why I chose this domain is another story for another post I guess. Before long, I created my own sort of portfolio site using React JS framework as a practice as well. This was without the blog site yet.

For obvious reason, I hosted my site in another free hosting company, freehosting.com. Here I could register my own domain for free, that also came with PHP and MySQL support. Such hosting was quite rare to come by. The only downside was that SSL for a 'secure' site (https) here was a paid add-on, which I only realized its importance later. So my site went 'Not Secure' for almost a year. To be fair, it was not such big of a deal, especially for amateur site like mine where the only visitors were probably me, my laptop, my phone.

The Blogging

Around a few months after I created my own website, I decided to start blogging. So I used the most popular platform to help me do so, that was the Wordpress. I had had some experience with Wordpress development also thanks to previous works and internships. As a result, setting up a blog in my own site domain was not that hard at all. It was powered by Wordpress and all is well.

But that was not the story of THIS blog. No.

That was Wordpress. While it had all been very good, it was when the free hosting server went down for few days that made me realised this important fact. That I technically did not have any backup of my blog posts. That I did not 'own' the posts! Also, even to have one locally would later be quite troublesome when performing migration to another Wordpress hosting if necessary. Aaand it might fail and then I lost all my posts. Again, that was Wordpress.

--- What is this then? ---

This is my own homemade blog. No, I don't mean just the posts. That is obvious duh, who else writes this right? So what I mean is the whole entire platform itself. Made with my own blood, sweat and tears. Of course there are helps from the Internet as usual. The result is... this proud blog of mine, powered by Jekyll. I was glad I found out about this. I will probably write another post about Jekyll and the static sites, which what my blog essentially is as well.

So yep, this blog is full static! What? Well, basically to put it super simply, we don't use databases for the posts etc. like those in Wordpress, which is developed in PHP. The consequences of this? Well, for one thing, you can host static sites for free in many places. Github Pages, Netlify, Firebase, Heroku, etc. Many also let us use our own domain names! I even have https now! (After moving, I could use certificate from Let's Encrypt in these static sites serving! yay... my previous free hosting did not allow that). So much win. Static sites are also generally lighter and thus, load faster. There are many advantages, and also disadvantages when going static. One weakness is obviously the lack of database and well, you can do many many things with database system... so yeah.

But for personal sites, I think it does the job. In fact, it is very well and recommended. Unless you want to set up e-commerce or whatever as well in your personal sites. As you can see, my personal blog here has almost all the basic functionalities of a normal blog, except for maybe like RSS feed, different accounts etc. But if this is really personal, who needs different accounts for posting the blog right?

I even managed to include amongst other things: search, archives, tags, pagination, sharing, comments and a decently beautiful image driven blog lists in my blog site. It looks and functions like a typical Wordpress site now, well.. aside from few things lacking that I mentioned before. So I am quite proud of it hahaha... All being said, you can actually create a beautiful site in Jekyll pretty easily like in Wordpress. There are many themes available and ready to be used, for sites or blogs. You just need to find one and use it directly, or you can create one yourself like me. I just want to maybe attribute the layout of my blog itself to the Flex theme in Jekyll. At first, I was inspired to do some thing like the Journal theme, which is a premium and very expensive theme in Jekyll. But a very nice one.

So I eventually settled on imitating the basic layout of the Flex theme. Initially, I just thought of using themes and templates like how it's usually done in Wordpress. But I was lazy to browse through so many themes, only to find one with a feature I liked, but lacking in another feature I wanted, which was present in another theme instead. It was like discovering pieces of a thing you want, but scattered in many different places, and not one whole of the thing itself. You get what I mean, hopefully.

I then discovered the Flex theme. What I liked was the layout it has (the split for sidebar on the left and content on the right). That was exactly what I had planned for my blog even before finding it. So I decided to download and inspect it. It was a very simple theme indeed. In the end I decided to recycle a bit of HTML, CSS, and JS of the themes for the base layout of my blog. Primarily for the responsive sidebar on the left because I was too lazy to deal with having to write the whole HTML and CSS from scratch for this feature. That was all! Once I set the split screen and the sidebar (thanks so much to Flex creator), I started hacking away at my whole blog layout and its contents.

Here is a green photo to relax your eyes before continuing reading. Hopefully.


Photos by Johann Siemens on Unsplash

I added Disqus comment, archives and tags features, pagination, sharing and also search function for my blog. I chose Disqus because it was the most popular and widely used service for commenting. It was also very easy to include in. I actually wanted to set my own commenting system without relying on a third party like Disqus, and actually found people on the web documenting how to do so. But it was quite troublesome and required the use of Azure Functions App to help create a pull request or something every time there is a comment. The upside is I can really 'own' my whole blog, including the comments, with this, as they will essentially just be stored like text files in my repo.

But well, don't think for now it matters so much, considering I would be lucky if 10 people even read my blog and write comments. Anyway Disqus is also good for me to help with my online presence first. I am also not really expecting to go big with this blog. As long as people who somehow find it and read it are helped in some ways, just know it would make me happy already.

Sooo... that is all for now I guess. That's the story of this blog. Thanks for reading :)

(p.s. Also, the main reason for not doing the own comment thing is because the Azure thing requires me to have a portal account in Microsoft, and to sign in for the free services also requires credit card. Well I don't have one yet lol. Even my domain purchase or any purchase on the internet is due to the fact that they accept debit card payment oops hahaha)



Published on 30 Apr 2019 Find me and chat or collaborate!