10
4 Comments

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!

  1. 2

    That's nice. You should convert this as a paid service for folks who need to migrate from substack to their own site.

  2. 1

    Great writeup. Quite a good idea I suppose. I didn’t realise they had an embedable signup form.

    I’ve also mostly been enjoying Substack for my newsletter, though two things are a big limitation:

    • There is currently no API
    • They don’t support markdown

    Which makes it impossible to do any form of automation. Every week I have to tediously manually copy and paste loads of links from my linkblog to create the weekly newsletter.

    1. 1

      Yeah, not having markdown support is really frustrating - both for inputting formatted posts from another text editor and also for exporting the posts while maintaining the format and style.

  3. 1

    Nice way to take advantage of Substack as a managed email service without giving up on having your own website! My site currently uses an email service I made, which wasn't exactly effortless. Thanks for sharing!

Trending on Indie Hackers
Feedback on my (not yet published) about page 24 comments Vegans, vegetarians, and anyone with an allergy, food intolerance, or just a preference, I need you! 18 comments Open Sourcing my SAAS Starter Kit 12 comments A house in Germany is being sold as an NFT 9 comments Nerdogram - A photo sharing app for Github nerds 5 comments Free Python Books Went Viral on Hacker News 5 comments