How did I create my website for free?

January 01, 2019 General #github #jekyll #bootstrap

Creating a website is not easy, isn’t it? but by the developer community and the technology is made easy. Yes, the developer community helps other developers to create free static websites for the purpose of the portfolio, blogging, projects and organization sites with their open source contributions. Yes, for free, that’s good, right? That’s the power of open source.

Okay… Let me tell you little secrets, yeah, maybe secrets ;) that how did I create this website for free. But you may think about hosting where you can host your website for free. It’s also possible with Github Pages.

I have used the following free tools or libraries to create my website.

  • Jekyll - for the magic :), the static site generator and blog
  • Bootstrap - for the UI design
  • Unsplash - for free images
  • Font Awesome - for free icons
  • Github Pages - for the hosting
  • Github - for the repository management & version control
  • Grammarly - for the writing

I would like to keep the design as simple as possible and it should be easy to navigate by the visitors. Therefore, I have started to create the design on my own from scratch using Bootstrap. The Bootstrap 4 giving us the power of CSS flex boxes to easily craft the layout and the alignment of the HTML blocks with the least work and responsive as well.

The Jekyll and some of its plugins help me to transfer my crafted design into completely a static website with the blog. Yes, Jekyll will transform your plain text and block of HTML into a static website and blog. Because it’s simple and like a file-based CMS. Therefore, you don’t need to worry about a database or admin panel to manage your content. Jekyll works with Markdown, so you can start your writing easily with plain text.

The developers who have a background of PHP and WordPress may think that the Jekyll will be hard and don’t know Ruby language to work on it. Because the Jekyll is created by Ruby. If you have that mentality right a change it. Because you’re going to mostly work on the front-end side technologies such as HTML, CSS and JavaScript. Trust me, I also had that mentality before I started with Jekyll because I’m a PHP developer and if you’re interested to know more about me you can visit here. Apart from that, you’re also going to work with the Liquid template engine like Twig, Blade and Smarty for PHP. So you know how easy it will be when you’re using a template engine.

One of our simple and basic requirement is when we create websites we need some images to visually represent or to get the attention of visitors or at lease to attract the visitors. Yes, I do use images and I found Unsplash that hosted tons of free photos by the community of photographers and I used it. Unsplash offer variety of API services to the developers to use those photos easily. And also I used Font Awesome which is offer more than 1000 icons for the icon needs.

Grammarly is a writing assistance tool that will help you to write without spelling and grammar mistakes. I’m not a native English speaker or writer and therefore this tool assists me to fix whenever I do mistakes in writing. It’s available to use as a desktop application, Chrome extension and Office add-ons. They are providing a premium service as well for advanced grammar mistakes.

Finally, when the website is ready for the launch, we’re going to host it on Github Pages with the help of a Github repository. So we need to create a Github repository for the website. As a good practice, we should create two branches which are ‘master’ the default branch and ‘development’. You can use the master branch to deploy the website to the Github Pages and the development branch will help you to do the development and testing. Whenever you do updates you just need to make a commit and then push it to the development branch and make a pull request and merge it into the master branch. That’s it the updates will be online.

The resources are not limited only with what I have used or shared here, there are some other good alternatives too. But it’s completely up to you to choose the right option for your needs. I’ll write another blog post soon which will guide you through the detailed steps to start with the tools & libraries which I have used. Share your thoughts below and enjoy your holidays.