Introduction

How the whole idea started?

I saw one very interesting T-Shirt the other day … It was designed to be worn by a programmer. Few stages were written on it like the ones that follow:

0. I can’t fix this
1. Crisis of confidence
2. Questions career
3. Questions life
4. Oh … it was a typo, cool

A lightning fast thought reminded me of all those times I have felt the same. It feels like you’re not as good as the colleagues/top programmers you follow on Twitter. You know of whom I'm talking about. The ones that dictate the future of our always developing and expanding universe of web development. The ones who always praise or just showing off (well deserved though) of what they just did, invented or reshaped almost every day.

At that moment you ask yourself …

Should I really write blog posts or articles?

-- almost every developer

What I can say to this world that already knows everything? Another friend of mine said that he writes blog posts to keep track of stuff he did or stumble upon … kind of like keeping bookmarks of interesting stuff he uses. Still this was not something that can push me to start writing a blog.

It was something else though: I saw a very interesting kind of self-helping article saying that

... there will always be people who know more than you, and people that will know less than you.

-- someone clever

So you can think of the people that know less than you and write articles to help them using your knowledge and experience. That’s why I decided to start this writing-bookmarking thing called “blog” on my site.

Note: I know this is my first article that I’m writing and I’m still not sure how technical it will become. I’ll try not to focus on the small details but to make an overview of the process I took from creating to deployment of the project. I am aware that I’m starting with a more broad view of the process and I hope in the future my articles to become more specific tackling interesting stuff I stumble on my road ahead.

Why I decided to make a website on the first place?

Was it really necessary?

I was dealing with the Internet since the dawn of the dialup era. Me and my brother were one of the first testing users of the dialup internet the Technical University of Varna started back in ‘93-’94 and let me tell you - the websites were pretty ugly and static to describe them in the most polite way. Netscape was king and Macromedia Dreamweaver was not yet invented.

Since then I have built dozens of web sites and web apps and I was OK with that, until I started to accept the idea that I don’t really have a website of my own and now I think I should build one for me. I’m not talking about my own side projects. I have them around and I try to participate as much as I can. I'm talking about a small place of this ocean we call Internet that will show who am I and what I do to the outside world. So I decided to build something small that can be that place for me. It will be like my own tamagotchi in a way that I should care about.

Domain choosing

Do you like naming stuff? Variables? Classes? Kids?

OK. Let's start ... But what name I should put on it? I love naming stuff like most of the developers. Variables, Classes, Folders, Projects … but this is something different. This is the name that will be a label for me. So TheMostKnowledgableAndProfessionalDeveloperEver.com is not the one to go for, althought it is very descriptive, I admit. It has to be simpler and more personal. Probably having my name in it. So I came up with two options:

a) martindonchev.com

b) mdonchev.com

And here comes the paradox of choices: If there was only one available I would feel that I don’t have any choice and I will just buy it, but now … I have full spectrum of options. And after giving them some weight I decided to get the shorter one: mdonchev.com and immediately after I bought it I felt hesitant if I made the right choice, but now I believe I did it.

What content to place inside it?

Content is king ... that's what everybody says

As we all know

Content is king

-- everybody

so the decision of what to put on my website as the content had to be carefully thought. From one side it has to have some sort of information about me like a small CV or something, but on the other size blogging and writing articles is one of the purposes of this website too. So I had to combine them both.

Speaking of CV, one of the important parts are the skills which I develop. I’ve seen plenty of CV websites using some sort of scaling (% bars, or rating) to represent certain skills and I leaned to just list the important skills that I think should be listed and put some evaluation in terms of percentage of … of what? Then I quickly realized that there is no 100% of skills in our web dev universe. As the real universe our web dev one is also constantly expanding. You can never achieve 100% knowledge of any language or technology in our field. They are constantly being developed, expanded, extended and so on. At the time you think you’ve mastered Angular 7 - version 8 is in beta and in few months Angular 8 is the official version. So I’ve decided to separate the knowledge/skills into two main sections - one to represent the knowledge I have of technologies I’ve been working with and another one showing the topics I actively explore and self improve. So in conclusion I’ve decided to put some CV parts on the website as well as blog section where I can put my bookmarks/thoughts/posts.

Template or on my own

Which aproach is better?

Great. I now know what content to put on this small website but .. which way should I go? My out of the bat thought was: OK. There are plenty of templates out there. I’ve done so many websites and there is no need to do another one - just grab a template and fill the content in and you’re ready.

But then when you realize that if you go to a shoemaker and they show you a pair of shoes made by someone else but claiming that they can do the same, you start to hesitate trusting that one shoemaker. So I’ve decided that I should build my own website without using a ready made template.

Using Behance, Dribbble and some other designers-show-off websites I’ve gained some inspiration to quickly do something in Sketch and I was ready to go. I’ve started slicing it into an HTML using SASS in the best possible way and within a couple of days the website filled with some temporary content was ready including media queries for the different form factors like tablets and mobile phones.

Optimization

How important is that for a site of that size?

OK. The static template is composed but before we begin to slice it and do something with it, we have to make sure it is optimized to the best possible level.

So, the great optimization started. Google have developed a great tool called Lighthouse integrated in Chrome’s Web Developer Tools under the Audit panel. It helps you discover things that you can optimize on your website in order to make it lighter, faster, better for the users to use and interact. All the suggestions are separated into sections like Accessibility, Performance, Best Practices etc. So I’ve spent some time using it to fine tune whatever is possible to achieve the highest possible scores.

Discovering Jekyll

Something to speedup the maintenance of the site?

Back in the days prior 2010 we (the web developers) tended to develop backend solutions on our own. Almost every company had their own backend developed in some sort of PHP Framework/MySQL scenario. But lately there are flexible enough solutions out there that can provide the functions you need with fast and easy installation and usage. So my initial thought was - let's jump into one of these like WordPress or some other backend/frontend solutions that I can install setup and maintain on my hosting. After all I’ve done it many times for clients, so why wouldn’t I do it for me this time? But the time implementing this solution, as well as the resources they will use in order to serve this small piece of HTML is kind of overkill and unjustified.

Another reason for moving away from these big enough solutions is that I wanted the website to fast and secure. So we have to try to limit the processing on the server as much as possible. Even eliminate it if there is a way to do that. And the train of thoughts came to the static site generators. After a bit of research I’ve decide to jump to the Jekyll site generator.

One of the things I like about Jekyll is how minimal it was. How simple it was to start - you just had to pick a theme or write your own and drop in your posts in markdown format and you're ready to go. There is clear separation of concerns between the content and the site design. One nice feature of Jekyll is that pages, layouts, and categories are just small building blocks that are composed together to build a website, making it easy to maintain. So naturally I’ve read all the documentation of that tool, installed it and started to experiment and test in order to understand how it works. After all I will use it to compose my own website and I had to feel comfortable using it.

Only HTML and SCSS

Start from scratch and build up from there

So after gaining some fundamental understanding of how Jekyll works I transformed my HTML+SASS solution into Jekyll template and built it without much trouble. I had to use some filters in order to make the paths working as I wished, but at the end of this I had my very own website generated by Jekyll which was the “Hello world!” of using this tool. I knew I would have to deal with separation of the sections of the HTML file at some point but that will come later.

Making _layouts

OK. What kind of pages whould we use?

/_layouts

When I was thinking of how to present the content on this website, I’ve decided to put the main CV portion on the homepage with a section called Blog that will list my latest blog posts as well as a constant right hand side area showing “Featured” blog posts. Another part of the website would be the Blog page that will list my blog posts and another one would be the article/post page itself.

So I quickly produced three separate HTML files out of the original for the home page, the blog listing and the blog post. Jekyll uses special feature called “Layouts” allowing you to declare layouts in form of HTML using Liquid template engine which you can use in your site generation process later on. So, that’s what I did. I separated my files as layouts and fixed the navigation so that I have the desired website structure.

Separation in _includes

Stop repeating your self

/_includes

Of course in order to optimize the whole project I had to transform all the repeating parts of the HTMLs into Includes. This very helpful feature allows me to place some code into a separate files that I can include anywhere in my layouts to avoid repeating and to make the project more maintainable. The parts I made as includable are the tag of the HTML as well as the navigation, the right hand side area with the featured (latest for now) blog posts and the footer containing the Google Analytics code and a script link to a small javascript function I built to monitor the progress of the scrolling of the page. It all worked like a charm so far .. an easily managed static website.

A little bit of Liquid (to make the featured blog posts list)

We have to put some logic after all

So far so good … but I had to put some logic into the code … on two important parts: a) the blog section of the home page had to show me my latest blog post b) the right hand side section had to list the featured (or latest tree) blog posts In order to do this Jekyll uses the Liquid template engine which I haven’t seen before. But I’ve been working with several template engines so far so I was sure it would not be a steep learning curve. So with a little bit of reading and testing I managed to extract the blog information and print it to the HTML.

And ..

I am almost ready

-- silly me

There is one markdown formatted blogpost placed under the /posts folder for an example made by Jekyll which I had to change in the proper way and generate the site.

Using a plugin

Lets add some useful information to the articles

/_plugins

One thing that I bear in my mind was the very useful “minutes to read” on some of the articles around Medium and some other blogs that I really wanted to implement in mine. I found this information as useful nowadays as the date of the post. Not rarely can you find an article on the internet that will have no date and you won't be able to tell how actual the article is. The same level of importance I can give to the “minutes to read” information in terms of the more urgent lifestyle that we have lately. It’s good to let the person know how much time reading the article will take.

So by the time I was reading the Plugins section of Jekyll I knew I would be using this to extend its functionality with something that can count the words and tell me how much time it will take to an average reader to read the article. I don’t have experience in Ruby and the plugins in Jekyll are written in it so I had to rely on help from the Internet. Of course it was easy enough to find similar plugin and to modify it a bit to fulfill my need and now I was able to display the “x minutes read” label wherever my blog posts are listed/displayed.

Automatic the deployment

It's 21st century so lets automate whatever we can

OK. Now everything is ready. I can write my first post and deploy the website. I can do it in the old-fashioned way by using the FTP client and manually upload the site, but wait … we are 2019 after all. There are other - more modern ways of deploying even small static sites like this one. So naturally I was focused to look around for possible solutions. Since I was using BitBucket for this small project, naturally I looked for the Pipelines that they offer.

I’ve stumbled upon and old (2016) article but holding the information that I really needed at this time: Deploying websites with BitBicket. And more specifically the git-ftp tool that can either upload the whole repository to a given ftp server, or can just upload the updated files. That’s exactly what I needed. So I quickly setup the bitbucket_pipelines.yml file following instructions on another article and gave it a try .. Within couple of tries ot worked as expected. Now my automation-desire was fulfilled and everytime I write a blog, regenerate the site with Jekyll and then deploy the changes to my repository - BitBicket pipeline will push the files to my FTP server.

Jekyll is built in into GitHub Pages. So naturally we can use it to deploy the site and host it there with ease. All you have to do is to follow these simple instructions or these even simpler instructions and your site will be up and hosted in no time. However, I'm not sure if I will still use Jekyll in the long term so I will stick to the bitbucket pipeline solution for now.

Conclusion

What will probably happen next?

I know Jekyll is still maintained and kind of popular and that’s why I jumped into it in order to use that tool to generate my static small website. But going forward on that path I’m pretty sure I will soon face something which I would like probably more, which will explore some new ways of maintaining small static websites. That means pretty soon I will be writing about a new approach that I will stumble upon to upgrade my website. I will write another blog post about that tool as well :)

Thanks Jekyll for helping me in the process

-- happy me