Porchy Web Development

Regex, Netlify, Gatsby and swapping links

caveat: this is an “I don’t really know what I’m doing but it’s working, so….” post.

This blog is on Netlify and uses Gatsby to build it from the a WordPress install (I’m typing this on the WP install, it’ll get built by Netlify and published there.) Because I’m a lazy sod, I’m just leaving the images on the WordPress install for now. And sometimes I want them to be linky so it’s possible to see the full size images.

I had a js bit that took the content and switched any links to the WP blog to the netlify one so that internal links on posts went to the correct place. Like this link to the post on improving fucking Gravatar. I’ve made a link as I’m typing to the post on the WP install and the js looks for it and makes it a link to the post on Netlify when it’s built there.

That was working well but I realised that I needed to keep the links to the images because those are hosted here / there (depending on whether you’re me typing this or you reading it). So I’ve added a bit to look and see if it’s an image link or not.

I also was having some insecure content warnings on the images and added something to look for “http:” on images and replace it with “https:”.

This isn’t abstracted for your situation or particularly robust but it works well enough for me right now. I’m not great (!!!) at regex and found https://regex101.com/ super helpful. If you are decent at regex, you will probably be “wow, what exactly is going on there” but I’m learning bit by bit. 😊

This isn’t a great explanation but here’s the function:

Join the newsletter

Subscribe to get the latest content by email.

Powered by ConvertKit. If you give me your email address, you may receive emails from me (JJ) about posts on this site. You can unsubscribe at any time.

Porchy Ltd is a company registered in England, no. 12035925

VAT Registration no. 331196421

Built with WPGraphQL and Gatsby

© 2019 - 2021