How I built and hosted my blog in under 1 hour?

Using Github pages and Jekyll

Posted by Tanya Dixit on February 12, 2020 · 4 mins read

One particular day, as in today, I was feeling very unproductive. I couldn't study much of a research paper I had planned to study today and was really frustrated at myself. After talking to a fellow Master's student, who gave me the idea of starting a blog for writing technical posts, I decided to try it out.

Using blogspot.com was not an option as I read several articles detailing why it was bad. Also, I had previously used for a personal blog of mine, and there were many weird visits (bots I guess) which was skewing the traffic of the website. So I decided to go with a static generator like Jekyll and a simple hosting - Github pages (which is free of cost as well). Jekyll being a static page generator, doesn't process any PHP (cannot), which makes my website pretty secure and I don't have to worry about any PHP/database security vulnerabilities. Also, it's fast as it doesn't use any database (no database calls at every request).

Steps:

I first installed Ruby using a simple Windows installer for Ruby

The next step was to install jekyll and bundler : gem install jekyll bundler

Check if jekyll is installed using : jekyll -v

I created a directory called blog: mkdir blog

Now before we proceed, I did not want to create a jekyll website from scratch. So what I did was I forked this repository: Bootstrap Clean Blog Jekyll into my github and I cloned it into my "blog" directory on local machine. I changed some important configurations by editing the _config.yml file:

    title: Byte-Sized ML
    email: tanya2911dixit@gmail.com
    description: A blog dedicated to all things ML
    author: Tanya Dixit
    baseurl: "/byte-sized-ml"
    url: "https://coderkhaleesi.github.io"

Since I did not want to use the forked "BlackrockDigital" repository, I created my own repo on github. The steps were:

  • Click "New Repository"
  • Name the repository same as your baseurl in the _config.yml file. Name it so that when you access your webpage it will be in the form : url/baseurl
  • Create a new branch in this repo called "gh-pages". Make this the default branch by going in the repo settings
  • clone this repo in another folder on your local machine, let's say "final-blog" and copy all the files from the "blog" folder to this folder
    • I know I took the longer route, but I was trying this for the first time. If you want, you can directly download the files from the bootstrap theme into this repository.
  • Run "bundle install"
  • Run "bundle exec jekyll serve". You will get something like this:


    • Configuration file: C:/Users/hp/byte-sized-ml/byte-sized-ml/_config.yml
    Source: C:/Users/hp/byte-sized-ml/byte-sized-ml
    Destination: C:/Users/hp/byte-sized-ml/byte-sized-ml/_site
    Incremental build: disabled. Enable with --incremental
    Generating... Jekyll Feed: Generating feed for posts done in 17.17 seconds.
    Auto-regeneration: enabled for 'C:/Users/hp/byte-sized-ml/byte-sized-ml'
    Server address: http://127.0.0.1:4000/byte-sized-ml/
    Server running... press ctrl-c to stop.
Open "http://127.0.0.1:4000/byte-sized-ml/" in your browser. Your website should be ready. Now go to _posts folder and add your posts in the .md format. Remember, posts in the future time won't be visible, so make sure your date at the top of the post (between the dashed lines) is correct.

Uh uh uh...!!! It's still not up. Just push to your repo that you created following the steps above (don't forget to make gh-pages as the default branch) and then navigate to url/baseurl. Github will host your website.

<

Happy Coding!!!!

References

Placeholder text by Space Ipsum. Photographs by Unsplash.

Next Post →