How to Start a Blog with Gatsby - Nightcap #1

October 13, 2020
8 min read

Start a Gatsby blog with how-to, watch full React course, learn medieval economic theory, try KanbanMail, and read How I Built This by Guy Raz

Start a Gatsby blog with how-to, watch a full React course, learn medieval economic theory, try KanbanMail, and read How I Built This by Guy Raz.

This is the first in a nightly series where I simply post the things I consumed or produced for the day. There will be weekly recaps as well.

If you want to see the content mentioned in the title, it is right below this “table of contents.”

Nightly Recap

Bought
- Tech: lucaspuskaric.com to make this website.
- Book: Better Web Typography for a Better Web (2nd Edition)
Watched
- the first 3.5 hours of Full React Course 2020
- An Economic History of the World since 1400 Episode 3
- Finished Pokemon Gold & Silver and started Pokemon Ruby & Sapphire Advanced series
- Premiere of The Bachelorette
- Continued Love Island Season 5
Tried KanbanMail
Read How I Built This By Guy Raz.
Ideas

Bought

lucaspuskaric.com Domain

How to Start a Daily Blog with Gatsby

I use to own this domain. With it, I hosted a basic portfolio. It outlined past/recent projects. I had it when I was first looking for a job. Using Google Analytics, I realized no one read past the first project anyway.

I’ve thought about starting a micro-blog for awhile. The services that existed seemed defunct. I thought it would be good to journal about my day-to-day. Why add limits to it? Here we are.

I set up the blog using the Gatsby Starter blog. I’m currently working on starting a personal finance information/software business with a static site. I originally made a prototype in Vue but had to make a React app for a job interview.

It inspired me to create the final site with React. I only used React before hooks and not extensively. It was interesting to make a full React single-page app. This prompted me to want to use React Hooks over Vue 3’s new Composition API.

Using Gatsby allowed me to have static site generation, get a personal profile, and segue using more React.

It took a tiny amount to go through the docs and set this up. I daresay it was faster than signing up for another blogging site.

It will be hosted on Netlify since it is easy to drag and drop or deploy from a git repository.

To quickly set up your own blog,

Install Node/NPM installation, if you don’t have it already

Install gatsby-cli globally

npm install -g gatsby-cli

Copy the Gatsby blog starter, or follow the steps on their Github page.

gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

Run the server

cd my-blog-starter/
gatsby develop

The blog is running! Customize the gatsby-config.js to set the blog’s title. Edit the posts in the blog/ folder

With some modification, you could hook up your own CMS. There are many posts online about starting up a blog from scratch, but this was much faster.

If this is still too much work, check out Hashnode. They offer free blogs for developers.

Better Web Typography for a Better Web (2nd Edition)

I was looking for a typography book for awhile. I had been following Matej Latin and was subscribed to his email list. He just released the 2nd Edition, and I couldn’t resist any longer.

People say typography is the majority of web design, so I figured I should get better at it. Plus, the book just looks beautiful.

I reached out to him to ask if the code samples come with the physical print book (I assumed yes, but I wanted to try).

He replied! It does, for the record.

Get it here.

Watched

Full React Course 2020

Learned more about nesting components and inline CSS.

    <Book>
        // everything in here can be accessed with props.children
        <p>Bob</p>
    </Book>

    const Book = (props) => {
        console.log(props.children) //<p>Bob</p>
    };

There were also some interesting points on object destructuring with props—mostly different forms. I already knew about object destructuring but never had much cause to use it. Professionally, I’ve worked on a lot of legacy non-ES6 code.

It is a couple minutes long starting here.

Here is a paraphrased example:

    // version 1 - separate props for each props parameter
    <Book img={img} title={title} author={author} />

    // version 2 - no object destructuring
    <Book books={book} />
    const Book = (props) => {
        // verbose references
        console.log(props.books.img);
    }

    // version 3 - pass all props, then destructure
    <Book books={book} />
    const Book = (props) => {
        const { img, title, author } = props.books;

        console.log(img);
    }

    // version 4 - same as version 3 but destructure in the parameter
    <Book books={book} />
    const Book = ({ img, title, author }) => {
        // use img, title, author directly
        console.log(img);
    }

    // version 5 - use object spread operator 
    //basically replaces book={book} with {...book}
    <Book {...books} />
        const Book = (props) => {
        const { img, title, author } = props;
    }

Watch it for free here!

An Economic History of the World since 1400

This is much cheaper through Amazon Prime. It is $7.99 a month, but I’ve got the free trial. I’ve been switching between watching this and Critical Business Skills for Success.

Episode 3 Recap

Manorial Society in Medieval Europe

The last episode laid the groundwork for how Europe becomes relevant in terms of economics. People seem to think Western society was always the center, but that could not be further from the truth.

This details how wool-cloth production shifted to European powers. It outlines how artisan guilds and other institutions were established.

Canon law (church law) did not allow for interest. The workaround banking institutions and merchants had was to do currency exchanges. Things had to be repaid in full but in a different type of currency. If you borrowed 100 Mexican pesos from me today, I would expect 100 US dollars sometime in the future. This is essentially an interest. At the time of writing, 2141.60 Mexican Pesos = $100 USD. So that would be quite a hefty “interest.”

I’ve heard most of this before, but it enlightened the path from Silk Road to medieval times.

While not directly connected to this, a book that recently came out that I want to check out is Ravenna: Captial of Empire, Crucible of Europe. It goes more into early medieval history- particularly the so-called Dark Ages.

The next episode is “How Black Death Reshaped Town and Field.”

Tried

KanbanMail

I’ve been trawling Product Hunt in my spare time. It is interesting to see how people set up and market their own products.

As I’ve been preparing my own personal finance advice business, it has been insightful to see other people’s products and how they reach audiences.

Using KanbanMail has been a fun time. I don’t usually describe email as fun, so I think that says all it needs to.

It is basically a collection of simple columns. You categorize emails based on whether they are worth looking at, when you need to do them, and what you are currently looking at.

Read

How I Built This

Finished it! Pretty quick turnaround since this book was only just released on September 15th, 2020.

I almost did not pre-order this book, but I am thrilled I did. I was worried it would be too similar to the podcast. The How I Built This podcast talks to entrepreneurs about their journeys. These are big companies you’ve heard of. Their first-ever podcast was interviewing Sara Blakely, of Spanx fame.

I shouldn’t have been worried. The podcast is edited down from several hour conversations, and the book injects a lot more detail. My two favorite aspects:

1. Guy Raz’s personal stories wrapped in.

I tend to forget that Guy Raz himself is very impressive. You don’t get to be the person interviewing these great people by sheer luck.

2. The ordering of the chapters.

It is set up like an entrepreneurial hero’s journey.

Here’s an Amazon link.

Ideas

Spellchecker for Devs/Designers (Chrome Extension)
- There are spellcheckers for inputs, but not for generally checking an entire page. Or rather, the ones that exist seem poorly made and poorly reviewed.
Prime Video Channel for Programmers
- It seems like one company, Packt, offers a small selection for $35 bucks a pop. But it isn’t a simple subscription package.
GUI to search git blame for specific author/other parameters
- GIT stats programs and GUI lookups exist, but not too in-depth on the blame functions. It would be interesting to “ask” a code base “how” it would do something. Basically, combine Natural Language Processing (NLP) with git blame.
Personal Twitter/Micro-blog
- These existed but not in a way that captured enough attention. I’m not sure what the value proposition should be here.
Interactive Financial Path
- What to do in order, such as “build up an emergency fund.”