COVID19 Lockdown Dev Log – Day 1, Gatsby Intro
What I Worked On
I am working on a new portfolio site and have decided to make one using Gatsby, a static site generator build in React. I want to be able to add projects dynamically, so the end goal is to hook it up to a headless CMS and add it from there.
What I Learned
I learned how to create a basic site with Gatsby using their CLI. I installed the CLI using NPM. Through it you can run the following command:
gatsby new [name-of-project] [url pointer]This will create a folder containing the name of the project and the files requested from the GitHub url. The files added depend on which starter (url pointer) you use from Gatsby. If you omit the url, it will use Gatsby’s default starter.
Just like you need a starter template in WordPress, you need a starter template in Gatsby. You provide the starter by selecting which one you want from their ‘starters’ repo at GitHub.
I setup a simple site and was introduced to CSS Modules. I have never used this approach to CSS before, so I read up on it (link in Resources). Basically it scopes the styling to be local and generates unique class names to avoid naming colission – cool!
After tinkering and messing around with the above mentioned things, the result ended up being this beautiful website:
What Distracted Me During The Day
- My phone (Messenger pings)
- LinkedIn – mindless scrolling the feed
- YouTube – watching content from channels I sub to
- Instagram – meme stories