Summary of first week

So I completed the first challenge of 100 Days Of Gatsby Challenge. I already started learning Gatsby some months ago and completed some tutorials. I even changed my old personal WordPress site to Gatsby as a test project.

I joined this challenge because the best thing to learn something is to practice on a daily basis. The challenge is a good starting point for developers that already know something about React.

The first weekly challenge is to build a blog using no starters and track the challenge progress. You can read more about it on the official post Challenge - Track Your Coding Progress with a Blazing Fast Blog.

This week is finished and I completed the challenge but I will be improving the blog on the next days (and weeks), it's not a dead end project. For example, there are no images but I will add support for them. There's no contact form or comments at all, but I plan to add them. And will write how to do it :-)

Day 1

The first day I just setup the repo https://github.com/JuanJavier1979/gatsby-challenge-static-blog. I could not spend to much time on it because the challenge was published very late for me.

As I said before I already started playing with Gatsby a couple of months ago and the challenge requires to not use any starter. So, I followed the steps on this tutorial Quick Start to create a blank Gatsby site.

If you do want to start building Gatsby sites on your computer you will need to follow the steps on this tutorial Set Up Your Development Environment.

Day 2

I added some plugins I will be using on next days. The plugins added were:

• gatsby-image
• gatsby-plugin-react-helmet
• gatsby-plugin-sharp
• gatsby-remark-images
• gatsby-remark-relative-images
• gatsby-source-filesystem
• gatsby-transformer-remark
• gatsby-transformer-sharp

To know more about Gatsby plugins read this documentation Using a Plugin in Your Site.

Link to day 2.

Day 3

On Friday I added TailwindCSS as frontend framework. I recently had the chance to start a new project and the client wanted to use this framework. It's very flexible and customizable, it has a utility-first approach and has a plugin community and one thing I like most: I can control the output size via purgecss.

Tomorrow I will add a post on how to integrate TailwindCSS on a Gatsby site from scratch.

Link to day 3.

Day 4

Even I am taking this challenge daily I won't stop doing my daily routines, and day four it's Saturday so I spent most of the day with my family.

Fellow developers, do not spend all your time in front of the computer, take some time for you, your family and your friends.

In the morning I only started to componentize the layout of the blog.

Link to day 4.

Day 5

Added support for Markdown files. I will not be using a CMS to write my blog this time. I will be using just plain text files.

For that I added a custom single post template and created the Gatsby nodes to create each URL for the homepage, and all single blog posts.

I also started customizing TailwindCSS with some Google Fonts, custom text sizes. And did some adjustments on the layout.

Link to day 5.

Day 6

I finished writing the first blog post and setup the single post template using TailwindCSS classes.

I also added a SEO component to have dynamic SEO tags, such as the page title, meta description and other meta tags.

To finish the day I deployed to Netlify and added the DNS records on my domain.

Link to day 6.

Day 7

It's today! Finally

To end the week I fixed a minor styling issue, added Google Analytics and wrote this post.

Link to day 7.

What's next?

• Add image support
• Add offline support
• Add comment system
• Add contact form
• Add navigation sysyem
• Add post navigation
• Write tutorials