➡️ Gatsby, SEO, Jeff Goldblum & z-index - Issue 2
Hi, everyone!
I trust you all had a wonderful February! We were surprised with a nasty snow storm here in Texas leaving many without power and water for several days. Thankfully, my power never went out and I only had minimal water complications. Needless to say, I’m glad it’s over -- for everyone! ❄️
I’ve got some cool things lined up for this newsletter! Let’s hop right in!
Gatsby & MDX 🖊️
Last month I announced that my blog was hosted with Hashnode which, I believe, is still the best way to rapidly start your blogging journey and reach an engaging technical audience. I love writing and to improve SEO (search engine optimization), I wanted my articles to live on my portfolio instead of a subdomain. And so, in the spirit of continued learning and building blazing fast websites, I built a blog system on my portfolio powered by MDX.
MDX is a format that allows you to write markdown and inject React components into the content. Pair that with Gatsby, and I can query content wherever I’d like. It’s SUPER COOL and having this flexibility allows me to add features to my blog that spruce it up and add a flare of personality. For example, I used MDX to write my article content and then injected cool callout boxes and code blocks in my articles. Here’s a preview of the callout boxes when I was building them:
You can view my blog over at https://braydoncoyer.dev/blog.
(BTW, I also added a bunch of other cool things to my blog. For a full list, see my new changelog page: https://braydoncoyer.dev/changelog)
My articles will still be available over on my subdomain, but because Google treats subdomains as a separate site, SEO should return better results if they live on my actual website.
The SEO Journey 👟
Speaking of which, have you dabbled in SEO? I really haven’t had to worry much about it in the past because my work has mostly been directed towards internal client web-apps. But let me tell you — SEO is no joke; it’s the driving force of organic leads for your website and content.
There’s so much to learn when it comes to optimization. It’s difficult, too. I feel like I can spend as much time learning how to improve SEO as I have learning web development and programming.
Even though SEO has a huge scope, there are simple things you can do to improve optimization.
If you use React, I highly recommend installing Scott Spence’s react-seo-component.
Add the component to your pages and supply the appropriate information.
<SEO
title={title}
titleTemplate={siteName}
titleSeparator={`-`}
description={description || 'My Website'}
image={image}
pathname={siteUrl}
siteLanguage={siteLanguage}
siteLocale={siteLocale}
twitterUsername={twitterUsername}
/>
I had a lot of issues with the image property of this component (which boils down to a <meta> tag on the DOM) when building my portfolio and blog. It sounds dumb, but I didn't know that images I wanted to be publicly accessible (a social sharing banner when I post my website on Twitter, for example) needed to live in the static folder of my repository. I mean, it makes sense -- I just didn't think through it!
I was trying to source images in different directories and couldn't figure out why my social sharing cards weren't appearing when I posted on LinkedIn or Twitter! Oops! A silly mistake, but a simple one. I read tons of articles on how to create social sharing banners and yet none of them mentioned that images need to live in the static folder. 😂
Personally, I’m looking forward to taking Sam Larsen-Disney’s SEO course and diving deeper into the subject. The course is free and promises to help your website rise through the SEO rankings. I signed up because, honestly, it seems like a no-brainer. I left the link down below in case you want to sign up, too.
What I’m Writing 📚️
I wrote four articles in February and I’d love for you to check them out!
- A Web Developer's iPad Setup for Productivity
- 6 BEST Fonts for Programming in 2021
- Code on Your iPad Pro
- Display an Apple Music Playlist on Your Website
Preview of Upcoming Content 🤫
One of the benefits of signing up for my newsletter is that you get exclusive previews of my upcoming content - blog articles, new courses, giveaways and more!
Today I have an article draft to share with you. I started writing this draft one afternoon; it’s not complete and I’m not sure yet if I’ll be publishing this one. Give it a read and help me decide if this one is worth putting out there by replying to this email! I’d love to hear your thoughts!
Content from the Community 💫
As always, I want to share some content from the community that I’ve found mind-blowing, helpful or thought-provoking. Let’s take a look!
If you aren’t following Josh Comeau, you sure need to be! He’s constantly putting out quality content about CSS, Gatsby and more. This recent post about z-index, in particular, was very insightful and worth the read!
https://twitter.com/JoshWComeau/status/1363892488793112576If you’re quickly blocking out a website and need some content-filler, don’t grab a few paragraphs of Lorem Ipsum! No! Turn to Jeffsum, a text placeholder generator of Jeff Goldblum awesomeness!
Wrapping up 🙌
I hope you enjoyed this issue! I’m still working on the format and I’d love to know what you think — just hit reply and share your thoughts!
Until next time,
-Braydon
Do you know someone who would benefit from this newsletter? Send them the link below!
https://buttondown.email/braydoncoyer
If you liked this email, please share it: