I built a website for my Substack newsletter in a day using Netlify and Gatsby.js

I started a newsletter on Substack back in August. Overall, I really like Substack. It was really easy to get setup and writing. One downside is that Substack wants to be the website/homepage for your newsletter. With this you lose some control and flexibility.

One limitation was that I couldn't publish a new post without sending it as an email to all my subscribers at the same time. Another limitation was how frustratingly limited the analytics was.

I like the idea of having a more unique, custom landing page for my newsletter as well as the ability to expand it to have a better archive experience (some form of search/filtering would be great).

I've also been wanting an excuse to use Netlify and Gatsby.js for a static website, so this was the perfect use case. A nice bonus was that my use case fit nicely into the free tiers for both Netlify and Gatsby.js Cloud (after further learning, I don't actually need Gatsby Cloud, but it did make the initial set up even easier).

Steps I Took

1. Sign up for Gatsby Cloud - https://www.gatsbyjs.com/dashboard/signup/

2. Add a new site from the Gatsby Starter Blog template - https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog

3. Sign up for Netlify - https://app.netlify.com/signup

4. Create a site in Netlify from the Git repository from step 2

5. Set up my custom domain with Netlify - (I use Namecheap so this tutorial was a perfect refresher for me: https://dev.to/easybuoy/setting-up-domain-with-namecheap-netlify-1a4d)

6. After a few hours (waiting for DNS to update) I was able to add an SSL cert with a single button click in Netlify - this makes it so the website works with "https://"

7. Added embeddable Substack signup form to each page (Substack Dashboard > Settings > Import your email list > Embed email signup form on other websites). The iframe can be added to its own component and reused throughout

8. I was able to easily set up Plausible.io analytics in lieu of Google Analytics. I just had to install this Gatsby plugin: https://www.gatsbyjs.com/plugins/gatsby-plugin-plausible/. (Side note: Plausible.io is a great privacy focused web analytics tool that I have been wanting to try for some time)

9. The most tedious part was porting over my existing Substack posts to display on my new site since Substack doesn't export as markdown. I did come up with a decent process:
   a) Edit post
   b) Copy content from post
   c) Paste content into Notion page (Notion nicely persists almost all of the formatting)
   d) Export Notion page (it exports as markdown)
   e) Paste exported markdown as a new blog post in Gatsby (needed some minor formatting tweaks after)

That's pretty much all it took. I haven't finished porting over all my archived posts. I'm also not done polishing the look and feel of it, but I plan on gradually improving it over time. I really want to add some rich search functionality across my archives - would be both fun and useful to add.

You can check out my new website here: https://www.smalltechbusiness.com/

Hope this was helpful to some!

This post was originally published on www.jkchu.com