“I’m going to start blogging soon”
You may have seen me tweet this kind of message 2 years ago. Yet, no blog post was ever written.
I’ve been thinking about blogging for a long time, but only started being more serious about it 2 or 3 years ago. As I’ve been an early React adopter (early 2014) and have a few years of experience, I feel that I have useful and uncovered knowledge to share with the world. I’m not really confident to give conference talks (yet), and blogging seems to be the perfect medium to get started with public exposure.
Lately, I’ve also been a fan of Learn In Public. When someone ask me a question, I’d rather try to answer publicly so it can help others. I also want to publish opinionated things, and get read and corrected by others, so that my ideas and skills can improve other time, and be helpful to others. This is weird, but many times, I’ve read blog posts about stuff I already knew, just to tell the author he is wrong about a tiny detail. I want people to do that for me too. I may not agree with them, but definitively want constructive feedback on my posts, and will eventually change my mind and edit the original article.
I already share my thoughts, ideas and tips on Twitter, and I’ve been helped/corrected so many times. This week, about Suspense mistakes by Dan Abramov, or about Typescript by Mateusz Burzyński
How to fail at writing
If you too want to start blogging, here’s the perfect recipe to fail, like I did for many years:
- Don’t use an existing platform, and make something custom
- Think about your blog’s technical choices for 1 year
- Use cool new technologies, many you never used before
- Finally end up struggling to make them work together 2 years later
2 years ago, I wanted my blog/website to be a showcase of my skills, and use all the cool techs together.
I also wanted to have a “static mobile app” with all my articles: not that it would actually be very useful, but mostly because it was cool.
Here is the list of things I wanted:
- Gatsby
- Gatsby-image
- MDX
- React-Native-Web
- Apollo
- ReasonML or Typescript
- LernaJS
- Expo
- Storybook
- Dark mode
- Post categories
- Search engine
- Translate each blog post in 2 languages with proper SEO
Long story short, here are a few problems I encountered:
- How to make React-Native-Web work with Gatsby?
- How to setup the Lerna monorepo to share RNW components between web and mobile, as RN/Metro does not follow symlinks?
- What are the best practices for RNW? How to handle :hover, focus, links? Should I use Gatsby-link? Is it ok to mix html elements with RN elements?
- Can React-Native-Web work well with ReasonML / Typescript? The TS typings do not really reflect support for RNW, but only RN
- Should I use the existing TS compiler, or the brand new TS babel plugin?
- Can I share the same code to generate my gatsby pages and my static mobile app react-navigation navigator?
- How to implement the dark mode in Gatsby so that on refresh the page does not blink from white to black?
- Should I use Algolia or FuseJS/Lunr?
- Should I generate static pagination / category pages, or make them dynamic?
- How to handle blog post translations
- Probably many things I forgot
The result is 0 blog post was even written before. But it was not totally useless:
- Gatsby convinced me about the JAMStack
- I felt in love with Typescript
- I brought React-Native-Web support to Gatsby (I’ll blog about it later)
- It got me excited about the React Flare project, which I think will be huge
How to succeed at writing
Obviously I’m probably not the best to give advices as it is my very first blog post. But if you read this, it’s not a total failure either.
This time, my strategy is to focus on the content first, and the technical details afterward.
I’ve been convinced for a long time that I don’t want to blog behind a platform like Medium (see Goodbye Medium by Kent C. Dodds), and hosting a Gatsby site on Netlify is easy and free.
Recently, Gatsby released its theme feature. Themes are like Gatsby configuration presets. It’s like Create-React-App/react-scripts for Gatsby. You just drop the theme dependency, and everything is configured for you out of the box.
You don’t actually need to dig deep into Gatsby plugin configuration anymore, as long as the theme supports the features you want. Even if it does not, choosing a popular theme is nice because you can expect it to be enhanced over time by the community (or your own PRs).
Gatsby organized recently the “Gatsby Theme Jam”, a contest to invite developers to create Gatsby themes. The released themes are showcased here.
I’ve noticed several themes that can actually be nice to start a blog:
- https://geekscreed.com (clone of Ghost/Casper)
- https://gatsby-casper-theme.netlify.com (another clone of Ghost/Casper)
- https://amsterdam.netlify.com/
- https://nehalem.netlify.com/
- https://novela.narative.co/
I actually choose Novela for a few reasons:
- It is beautiful and polished by default, I can put it online as is and focus on the content
- It has MDX, so I can do some cool code demos directly in my blog posts
- It has not won the contest but has been highly acclaimed by the community, and I’m sure it will be maintained and enhanced over time
So, in less than an hour, I took this theme and put it online AS IS to my Netlify production domain. I only updated the site metadatas so far.
I replaced my legacy/weird online presentation page with a hello world, and a single Lorem Ipsum article, but at least I have something online and I can start writing without feeling paralyzed. This site is open-source, as you can see there’s very few configuration to handle.
Having this Lorem Ipsum blog post online actually incites me to write my first blog post sooner. As I’m writing, this site still have the default Narrative header logo and favicon, but I don’t care for now.
And here it is, 2 days later, I’m publishing this blog post.
I should be able to use code snippets like this one:
1import React from 'react';2import AppButton from 'components/designSystem/AppButton';34export const TestMDXButton = () => (5 <AppButton onPress={() => alert('button pressed')}>6 Press me!7 </AppButton>8);
And I should be able to actually run them:
With all those things provided to me for free, I can now focus on writing :)
What’s next
As a freelancer, it’s important for me to develop my personal branding, and be known enough to be found by customers. Writing is for me a good opportunity to do so, and is quite natural for me: I’ve already wrote a lot on StackOverflow.
Over time, I’ve collected a list of about 50 blog titles I’d like to write. I’ll cover various technologies in the React ecosystem, including React, React-Native, Expo, React-Native-Web, React-Navigation, Apollo, Typescript, Gatsby, Formik… and probably some broader topics as well.
I will also open a newsletter soon, add some other pages to the site, and see how far I can go customizing this theme (eventually submitting a few PRs)
But the next move will be to add a few MDX files to the ./content folder
For more content like this, subscribe to This Week In React and follow me on Twitter.
