My Sweet & Simple Site Setup!

Mar 6, 2019 05:21 · 2440 words · 12 minute read gitlab forestry netlify forestry cloudflare blog

Welcome to my new Blog!

The following post is ^NOT Beginner/Noob Friendly.

The Need for a new Blogging Platform

So, I have used almost every blogging platform out there- Blogger, Wordpress, Tumblr, Medium, you name it! I already had a domain name, a few bucks lying around in a Digital Ocean account somewhere, and even a template ready - the problem was - I didn’t want to use any template. I wanted to create my website from scratch with some pretty good animations. But that, required time - which as a medical student I clearly didn’t have.

Responsive Design-First Option: Webflow

Webflow stood out as a great option - I could design a website from scratch having all my creative freedom without worrying about the code all that much but there was a problem. There is always a problem. I couldn’t expand much. The CMS (Content Management System) options were just introduced and I wanted the website hosted on my VPS (Virtual Private Server) - Webflow allowed export of only ‘non CMS’ code, if I had to use blogging, store, or any other of those features in my website, I needed to host my website on Webflow’s servers - which I wasn’t comfortable with.

Why? Well,

  • First, it was paid, and expensive - coming at a minimum of 16 USD with CMS.
  • Second, I already had more than 50 USD in my Digital Ocean account, another 10 in Linode & Vultr both.
  • Third, as I said before I wanted it on my personal VPS. I could also use the VPS for a ton of different things.
  • Fourth, Being on Wordpress or any other platform gave way more features.
  • Fifth, There is a strong developer community that is dedicated to Wordpress support - it’s tried and tested - and yes, it’s showing age now (more on that later), but I could easily find docs/threads if I encountered any problem - which I was certain I would - given the fact that I haven’t coded in a long time.
  • Sixth, Time. Webflow - with all the awesome design features it had made me want to go “All In.” But to do that, I needed time. I’d come back from class, eat supper, head to the library, then go for running, and by the time I came back to my dormitory, it’d already be 22:00 and I’d be - (pay attention, I won’t be using this slang again) “Hella Exhausted.” I’d be in no position to code yet alone have my creative mind running.

So now Webflow was out of question. I started exploring my other options.

Why not the typical blogger’s darling, Wordpress?

I thought of just pushing a website on Wordpress, but it too had it’s drawbacks:

  • First, Template. I wanted to create my Wordpress website from scratch and as my previous website was also hosted on WP, I wanted it to look entirely different. Why? Well,
    1. My previous website was constructed 6 years ago - when the trend of ‘Minimalism’ had just started. In 2019, it’s way too evolved. Back then I remember focussing on choosing a ‘color palette’ that was “pleasant to the eyes,” incorporating parallax into images and other elements, etc. A lot has changed since then. While, some things do hold true now as well, I absolutely detest how the ‘blog’ page looked on that website - according to the current design trends.
    2. My Previous template was ‘Portfolio’ first.’ It highlighted me, and only me. I remember being pretty cocky, and boastful in that portfolio website - but that’s not the subject. Even though I wanted my new website to be about me - I wanted it to be more about my thoughts - rather than my accomplishments or my skills. I wanted it to be an escape for all my thoughts, a place where I can write freely about Tech, Medicine, Fiction, anything! I wanted the new website to be a ‘blog first’ and wanted to plan a portfolio for some other day, month, maybe year. When I think about my portfolio, I think waves, text moving all over the display, smooth cards that react to the mouse - ain’t nobody got time for that (another phrase you probably won’t be hearing again!)
  • Second, Speed. You know what my last 5 Websites built on Wordpress have in common - they’re all terribly slow! After a ton of image & database optimization, and making sure that everything was cached properly - I still have to wait for a few seconds every-time I press enter on the address bar. Using a CDN (Content Delivery Network) did help speed things up a little - but dynamic websites inherently have to process content and query databases - and hence are relatively slow.
  • Third, Resources - or to rephrase it - Need for a good VPS altogether. Even though I had a few bucks lying around in DO (Digital Ocean) & other VPS Deployment platforms, I wasn’t sure I was ready to use all that money on $5 droplets that I’ll eventually have to scale up due to high processing requirements of Wordpress. All my self-hosted Wordpress websites have used the LAMP Stack (Linux Operating System, Apache HTTP Server, My SQL RDBMS, and PHP Programming Language) in the past. But the problem was, every-time the Apache Web server received a request - it had to start a PHP Runtime process, even for images, javascript and CSS. I could use LEMP Stack (Linux, NGINX, MySQL, PHP) - which would use less resources and also bump up the speed a little as NGINX uses FastCGI which lets PHP run as a service - separate from the server - that means that the requests would only be sent for dynamic content & static content would load up much faster - But still that’d be me waiting for a catastrophe to happen - I know I’d be running out of RAM eventually and get my databases crashed. Also, using LEMP Stack would require me to regularly reconfigure plugins that use .htaccess file.
  • Fourth, Maintenance. Wordpress gets updated way too often. Well, most of the plugins I use are quite popular and they do get updated really often to match the latest Wordpress releases, but there is always a chance that a new update could ruin the look or even the functionality of my website. It also means that I’ll have to make sure my customizations are compatible with every major Wordpress release.
  • Fifth, Security. Having a database means it can always get hacked.

So now, my workhorse - Wordpress was also out of question.

Not giving time to the new chick on the block, Ghost.

Now I started looking elsewhere- into platforms I’ve never used before. I came across ‘Ghost’ at a time when I was way too busy with University Work. But even that required a VPS and the 5 USD monthly droplets do add up over time.

Then I postponed the idea for a while and started working on developing new skills: iPhone Photography & Color Grading. This was a year ago.

When this year began, I wanted to get back into writing. I started maintaining a journal with the start of Chinese New Year but I couldn’t showcase my writing to the world and the idea of showing my private journal to anybody else was even more daunting.

Coming across ‘Static Site-Generators

Then I started looking at my options and found a whole new world of Static Site Generators like Jekyll & Hugo. At first I was planning to go with Jekyll, as it was more aged: which meant a stronger developer community, more templates, more plug-ins & customizability, more users, but when I saw the benchmarks & built-in features, Hugo stood out as the clear winner. While all static generators are fast - compared to a dynamic generator, they’re not all created equal. The loading speed of the Jekyll compiled static pages is indeed fast, but it does take time to compile/generate them in the first place. Hugo on the other hand generates pages in milliseconds rather than seconds. Plus, it supports a lot of functionality (like auto-reload features, pagination, etc) right out of the box, while Jekyll requires specific plugins to do the same.

My Current Blog Setup: Gitlab, Netlify, Hugo, Forestry

So after comparing all my choices, I went with Hugo. So now, this very blogging website is generated using a Static Site generator called Hugo, hosted off a repository on Gitlab, deployed using Netlify, and all the posts and pages are managed on a Content Management System (CMS), Forestry. I’m still hosting my Domain Name System (DNS) with CloudFlare instead of Netlify. Netlify itself is a DNS Service Provider but I never really had any issue with CloudFlare to begin with - the record updates have always been instantaneous and I don’t really like hosting my DNS & website with the same provider - no technical reason here - oh wait, there is one - If my website goes down, atleast I’ll still be able to receive emails? - I just don’t like it, hence I stuck with CloudFlare. I do however switched my CDN from CloudFlare to Netlify. You see, the only way I was going to take advantage of Netlify’s free SSL was if I switched to them as my CDN Provider. CloudFlare was equally good, and I’ve never really had any problems with them too, in-fact even they offer a free SSL which I did use in the past. Maybe it’s the fact that Netlify started all this ‘JAMstackTrend and they specialize in static websites? I don’t know, maybe I’ll switch back to CloudFlare CDN if I have any issue.

Advantages of using Hugo with my current setup:

  • First, it’s fast. Like, crazy fast! As Hugo is a static site generator, it pre-renders all the pages. There are no database queries to run, no templating and processing whatsoever on every request. The entire freaking site is just a group of static HTML files, stored on a server - waiting to be served. So when a user requests a website - the user is served back with the HTML code which the browser renders almost instantly.
  • Second, resources - or its redundancy thereof. The Web development architecture I’m using here is: JAMstack, which is based on - this is important - ‘Client SideJavascript, reusable APIs, & prebuilt Markup. This reduces the need for a powerful web server and the website can be served from almost anywhere! The only thing I’m paying for in this whole site setup is actually the domain name itself. In fact, Netlify offers a free sub-domain too, so if I wanted, I could have got the costs down to absolutely ‘zero.’
  • Third, it’s secure. Like, super secure! There are no databases, plug-ins or softwares running on a server. There are just web servers and HTML Files - not much to mess to begin with.
  • Fourth, maintenance - or its redundancy thereof. There are no plug-in or software updates to keep my website up-to-date. Even if Hugo ever released a new version, it wouldn’t matter as it wouldn’t update on the web server and the web-server will keep generating the static-pages according the older version of Hugo on which the website was first created. Any new Hugo update wouldn’t break functionality or look of my website. And because it’s already secure - there is no need for updates altogether! Ever heard of - “If it ain’t broke, don’t fix it!”
  • Fifth, Markdown. Hugo uses Markdown for content files and it makes writing blog posts a breeze. While WYSIWYG text editors are generally good - most of them are not available offline. That’s a huge problem as if I type a long-ass blog post on a word-processor and then try to get it on my online WYSIWYG editor, they won’t translate well on export. Because Hugo uses markdown, I can type on Ulysses or Bear almost anywhere - on my iPhone, iPad Pro or Macbook Pro - whether or not I’m online, and I can just upload the files exported by the same and use them as-is on my blog. The minimalist design of most markdown writing apps help focus more on content while most word-processors and WYSIWYG editors are feature-rich up-to a point that it gets distracting.
  • Sixth, Version control. With Git behind it all, it keeps track of everything I stage and commit. I can work on multiple things at the same time - by pulling independent branches and then merge them with master whenever I’m ready and all those branches are independent of each other - they’re sandboxed. Just plain Brilliant! While I can use Git with Wordpress as well, but it can be challenging - keeping track of what to commit and what to ignore. With static sites: it just works! It’s simple and efficient. In fact, right now, as of this instance, when I’m clicking ‘save draft’ on Forestry, Forestry is automatically committing all the changes to my git repository on Gitlab - I don’t have to worry about anything at all! I can later preview all the different versions of this very blog post on Gitlab, see all the changes I made, and revert back to an older version if so desired.

Disadvantages of using Hugo with my current setup:

  • First, personalization or lack thereof. I can’t have dynamic content - which changes for each and every user.
  • Second, customization or lack thereof. There are not a ton of themes and plug-ins available for Hugo - atleast when compared to something widespread like Wordpress. So if I want something custom - some added functionality - I need to do it on my own, and given the fact that I’m a medical student, I don’t know if I’ll have time for that.
  • Third, support, or lack thereof. Because my whole website is distributed along different services, I can’t ask any single website for help/support. I’m left on my own devices. Hugo, is relatively new. While there is a ton of documentation available online and while building this website I came across some really nice and helpful people, I still believe that once I get into more advanced stuff I might get into problems that’ll be difficult to solve due to the small user base.

What’s Next: Roadmap

I do have added functionality planned down the line — once I have a few more posts, and time.

  • PostCSS, Webpack + Babel
    For compiling and transpiring CSS and Javascript
  • Site Search
  • Dark/Night Mode
  • On Site voluntary BitCoin Mining
    For those who want to support the website while reading articles