Blog renewal with Gatsby

Jan 14, 2020

Starting new year 2020, I decided to renew my blog. I built my previous blog with jekyll. It was almost 4 years ago, and at that time, I wasn't a Front-End developer. So I did not know well about web technologies. (I was quite interested in web technologies though.) Now I'm working as a Front-End developer and wanted my personal sites looks better.

Followings are skills that applied to build this blog.

Gatsby (React)

Gatsby is a open source framework based on React to build your site as static files which is similar to jekyll. The reason I chose Gatsby is that it is based on React, which is I use everyday.

And also it

  • Allows to use markdown files as articles.
  • Provides many useful official plugins.
  • Uses GraphQL. (I haven't used GraphQL, so wanted to experience how it works.)

Gatsby's blog starter

The skeleton of this blog site is forked from Gatsby's blog starter. There are many starter Libs so that developers start to build right away without worries about boilerplate.

The Gatsby CLI tool lets you install these starters like below.

gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GIT_REPO]

With the blog starter, I remove some plugins I don't use, and modified some layout(Sidebar, Pagination and etc.).

Bootstrap

Bootstrap is widely used CSS framework and I also like it. I know basic of HTML and CSS but not an expert, so using this kind of CSS framework makes me build UI design fast and neat. Without Bootstrap, I might build UI like shit.

Google Fonts

Noto Sans from Google Fonts is default font of this blog. There is no specific reason I chose the font. Just it looks alright. 😂

Google Analytics

This blog is not that popular or famous (🥺), still I want to know how many people visited, and which post was useful. Gatsby provides its official plugin for Google Analytics, so all I had to do was just inserting my GA tracking ID.

Last year(2019), I wasn't active on this blog, but I look forward to writing more on it.

Welcome to the twenties.