Domains to Dollars: AI Landing Pages with n8n (30+ Sites!) 🚀 - Part 1

Here is a brief summary of the key points from the transcript: - The speaker is Hunter Snead, founder of Getting Automated, an automation consultancy. - He bought over 30 domains related to automation for different industries, but hasn't done anything with them yet. - He wanted to create industry-specific landing pages for the domains to attract leads, but traditional methods like landing page services, WordPress, and custom development were too expensive, time-consuming, or not scalable. - He decided to use a React template and generative AI to quickly generate landing page content configured through a JSON file. - He built a n8n workflow to generate landing page sections using Claude AI, output it as structured JSON, and compile into a React config file. - The workflow takes less than a minute to generate content for a landing page. The React site loads the config file to render the content. - The sites built this way cost pennies per month to host and load very fast. - Next steps are detailing the React implementation and deployment automation. In summary, the speaker leveraged generative AI and React to rapidly build low-cost, fast loading landing pages for his unused domains, solving his business problems.

Welcome to the confessions of a domain hoarder and how I used AI to generate industry specific landing pages and websites for my automation business. Alright, so as a quick background, I'm Hunter Snead, the founder of Getting Automated. Getting automated is intended to teach small and medium sized business owners, as well as those working in those businesses, how to use the power of automation to streamline operations, drive revenue, so on and so forth. Additionally, I run an automation consultancy called workflowsy that provides automation services to businesses that are looking to try and introduce automation into their everyday workflows and processes and procedures. But that's not what we're here to talk about today. So I have a bit of a confession to make. So my name is Hunter Snead and I have a domain buying problem. For any of you indie hackers out there or anything like that, you'll understand the problem. Buy the domain first when you have the idea and then the domain sits for what feels like forever and then you probably don't actually ever stand anything up on that domain. I fell victim to that myself and as a result had this idea a little while ago to buy a bunch of different domains that I thought would rank for the business that I have. And basically the idea was let me buy automation four and then Xdev, and with those I could stand up different landing pages and whatnot, have different use cases, and it would all apply for specific industries and use cases that I would like to try and service as part of my automation consultancy. So what does that actually mean in practical terms? It means that I accrued over 30 domains and spend over $500 a year to continue to renew to those domains. But I'm not actually using those domains in a productive way or really at all right now. So I wanted to go ahead and figure out how I could change that to have a more impactful outcome for my business. So when I talk about the domains, just to kind of give you a preview, essentially what I'm talking about is again, automation for Airbnb logistics, retail, realty, e commerce, staffing, so on and so forth. There's a list much longer than this of all the different domains that I have, again specific to automation for whatever that industry may be. So again, what do I do with those? When I bought those, I had the right idea and I had the right intention. I figured if I could have highly targeted use cases for those specific industries and for those specific businesses, that that would be valuable and that could be a way to kind of get a top of funnel lead feeder where I could attract people by speaking to their industry and kind of the pain points that they faced and, and then have that again, drive net new leads and conversations for my business workflows. That said, again, haven't done anything with that yet. So what has helped me back in the past, it's really kind of the traditional methods that are available in terms of standing up landing pages didn't really work well for me. And there's a couple reasons why. Where I first started was I wanted to look at the landing page specific services. There's a bunch of them out there that are really dedicated to just building out a landing page that serves as again, your top of funnel to go ahead and drive leads. That said, a lot of these landing page services limited how many domains or how many sites you could have. When I have 30 plus and probably some growing from there as well, I'm pretty limited in terms of what package I can buy that would actually accommodate that and the monthly fee on a lot of these Washington, well beyond $100. We're talking two, three, four, even $500 a month to have these landing pages created, which felt well outside of what I was comfortable spending, given that I didn't even know if this approach will work or not. So then I kind of thought about WordPress. And while I love WordPress and build a lot of sites on WordPress, WordPress is kind of heavy. It's got a lot of problems with plugins and security and whatnot. And for a site that I kind of want to set up and forget about and not have to go ahead and maintain often WordPress just really wasn't a great option for me, again, in terms of just hosting as well as maintenance associated with WordPress sites. Now there are some DIY website builders out there, wix, squarespace, so on and so forth. But again, kind of the same issue was these sites are pretty expensive at scale to go ahead and have 20, 30, 40, maybe even 50 different domains with specific content on it. Not to mention they're also not very automation friendly in terms of actually setting them up and having the content be automatically created and whatnot. So then the last option that I looked at was individual custom website development. And while that's great, my issue is individual website development is pretty laborious and again is not really automation focused. And while I thought there was something to be said about the custom website development, I had to figure out what was a good way to go about it. That made sense to again enable this at scale and also make it cost effective to host as well as maintain over time. So bottom line, none of these really solved the problem that I was having. And so I wanted to figure out what makes sense in terms of how I can build a solution for this. So really kind of the key criteria of what I was looking for was trying to combine a couple different things. I wanted to go ahead and generate websites quickly for these landing pages. I didn't expect them to be perfect when they were generated, but I figured I could get probably 80 90% of the way pretty quickly with generative AI. If I outlined the sections that I expected, it was able to generate content associated with it. So I kind of had this 90% done in 90 seconds. Rule of thumb. Beyond that, again, I wanted it to be cost effective to build and host. And so when I'm thinking about this, I'm thinking pennies not dollars. I wanted it to be less than a dollar a month, even maybe less than that per site if I could, to ensure that it wasn't running up a crazy bill per month. Again, for a marketing strategy that I'm not even sure will work, then performance was a big part of it as well. I know that bloated landing pages don't typically rank well in Google. I wanted to make sure that the performance that I got from these sites was quick and that it was something that was snappy and that people wouldn't be deterred from waiting for a page to load to not actually go ahead and check out the content and the off breaks that I have on that given page. That was again my criteria of how I thought about all of this. So what I thought about and what this has led me to is over the past couple of years I've seen a lot of hype around this static site creation and generation, and there's a lot of great web frameworks that enable this. I've used a bunch of them, but one of my favorites is react. Essentially the idea behind a static site is that you use typically some sort of JavaScript framework. Again, there's a bunch of them out there. React is my go to for this. What you do is you're able to programmatically create the content and all the different functionality of the site in a very intuitive interface and programming language. Again, if you're familiar with JavaScript, very intuitive. What you can do is with some of the programmatic capabilities that come from it, you can go ahead and actually rapidly create different sites with different functionality and whatnot, and export it all to a static output. And that static output is a mix of HTML files, CSS files, and JavaScript files. And so that static output is all pre rendered. And it's one of those things where the sites load really fast because again it's been optimized for that static output. Typically they refer to that as the build process that you can then go and host on a lot of cheap website providers such as AWS S three with Cloudfront, where again it'll cost you less than, I don't know, probably less than a dollar for most sites, depending on the amount of traffic that's being driven to it. This is really something that's quite popular for websites that are operating at scale as traditionally for websites like WordPress, they're much more server and resource heavy. And that's something that again doesn't tend to scale well as you get spikes in traffic depending on what your website's actually doing. I don't anticipate big spikes in traffic based on these landing pages, but the principle applies that if you can build something that can handle that without having to do any sort of operational work or maintenance on that, that's a win. And so that was something that I thought was a big advantage for what I'm trying to do here. So what does this actually mean in terms of performance? I went ahead and did some average metrics for different cmss and different platforms that I've used before. One of the things that I noticed was WordPress on a good day, loaded in two and a half seconds and even that was pretty optimistic, whereas a custom CMS, it's maybe a little bit less bloated. Again we're looking at sub 2 seconds, but again, even that's optimistic. But static sites a lot of times will load in under a second. And again that's because they've been optimized and pre built and pre rendered and everything else like that. To be able to load in a very short time again really just felt like the right option for what I was trying to do. How does this actually work and what are the key components that go into it? Let me go ahead and cover that. Essentially what we're doing is I built this all out in n eight nde. What I have is my react site has a config file and that config file contains all the content for my site. And so essentially all I need to do is give an n eight n automated workflow some context on my site. So what is the site name, what is the use case, what is the industry? And then all of those different variables are passed into a prompt that then goes and generates the different sections of the site. And so I predefined again kind of context about the site and then sections as well that I expect to be in my landing page that are then passed into a config file. The config pile is what then? What actually generates the content out for the react site. This will make a little bit more sense in my next video where I go over the react site, how it all works. But basically the native end workflow is designed to go ahead and use generative AI. So whether that's Claude, whether that's OpenAI really could be any of them. Llama Three doesn't matter. You basically use that generative AI to create the config file. I pass that config file into my react template from my landing page, and then from there what I do is I actually then am able to go and deploy that and make it a live site that people can access. What's pretty cool about this is I'm able to generate config files in less than 60 seconds for the different landing pages that I want to. Again, it's not meant to be a final version. It's something that I'm going to go ahead and review and edit and make some modifications too, but it's way better than if I would have had to start from scratch and typically does a great job on the first pass of getting the initial content where I don't have to spend that much time to actually go ahead and modify the content. To do that, what I'll go ahead and do is I'll flip over to n eight n right now and show you this workflow and break down what's happening at each step. So that way you're able to understand how it's all working and what that end state config file looks like. So as you can see, I've got an n eight n landing, or I've got an n eight n landing page content creator workflow up here. Let me show you some of the prompts and some of the background information that's going on here. Going ahead and for this specific demo, I'm building out a landing page for staffing. What that is, is I want to go ahead and have a staffing use case. I worked with the staffing company recently to automate their entire payroll and timesheet collection and approvals and all of that. I want to go ahead and replicate that as a use case that I can go ahead and try and sell and promote to other folks the domain. Again, automation for staffing the intended audience I talk about how I want to go ahead and have it be owners of staffing companies, what that all looks like, the title for the site, the company type, and then again the use case details. And so again, timesheet collection approval, invoice generation, payroll automation. And this is something that just about all staffing companies have to deal with and is really kind of a quite a painful process, especially if you're doing weekly invoicing and weekly timesheets and all that. And so that is something, again, that we are looking to try and target and kind of make an offer for it to alleviate some of the manual work that goes into that. So now what I have is I've got a bunch of different prompts here within NAN that are just basically set as variables that I'm going ahead and predefining kind of different components that I want to go ahead and create. So I've got a hero section on my site. I've got a hero subtitle called action, so on and so forth. And so each one of these represents a different section within my site that I want to go ahead and generate. You'll see that some of these have context passed in around the site title that I just defined, domain, the company type, so on and so forth. All of this information comes from a site that I can go ahead and reference in my description, but basically it's on a site called marketing examples that outlines how to go ahead and create the best performing landing pages. And I use that as my guidance for how I actually wrote these prompts in the sections that I what and created for this. And so I won't go through all of the prompts, but I can go ahead and make this available if you want me to and basically share out the prompts again that I'm using. But I have a bunch of these different prompts in here that go ahead and create different sections. So then what I do is with an n eight n, I want each of these to be their own item and make think like bundles is typically a good way to associate it. But yeah, basically splitting them out into their own items. So each one of these tool go ahead and run in a loop on their own iteration versus passing in all the variables as a single item, which doesn't really help me. I do have some custom JavaScript code in here. There are some different ways to do this with n eight n, but this was what was producing the most consistent results for me. This is what I went ahead and went with. You'll see that it runs once for all items. So it's not like I'm running for every single variable in that last variable block or setblock, but rather just running at one time. I do that and then the component. I'm going ahead and I'm getting some basic information about the actual input for my loop. And let me go ahead and I'll actually flip over to a prior execution to show you exactly what that is. So basically what this is doing is this is going ahead and it's pulling the prompt and it's actually, you can see that it's populating the variables that we had in there before with the actual variables that we predefined earlier that works. So I've got that all in here. I've got a meta title. Basically what I'm trying to do is specify an input of not only the prompt, but also the meta title. So that way when it's being outputted, I'm able to easily map the output of that section that was generated to my config file. It makes it easier to know what that meta title is of that section that I'm generating. Really what the meta title is is all of this stuff on the left here, how I can map that again to the actual output within my config file. This will make more sense in just a second. Basically, I'm doing a loop on every single one of those, or every single one of those items. You can see them all right here. So again, the header title, the subtitle, how it works, faqs, all of that is being created as part of this workflow. And so I go ahead and one of the reasons I chose n eight n for this is n eight n has by far the best generative AI kind of chat generation capabilities. A lot of that is because it's using LangChain under the hood in a lot of cases. And so you have a lot more flexibility around output parsers and all sorts of kind of integrations that again, your makes your make dot coms of the world and your zapiers don't have natively. And so Nadine is definitely my go to for this. And so what I have here is a really simple prompt that basically says, hey, your landing page generator. You're going to go ahead and generate components of the landing page. We'll go ahead and pass in relevant context for that component and then go ahead and do that. And there's some other lines in here as well around having breaks in there. So that way there's breaks between all the content, but as a whole it should be pretty straightforward. Nothing that should really blow you away. Here I've got that. Then I've also got my user prompt. This is really serving as a system prompt, and then this is serving as the user prompt. And all I'm doing is passing in the instructions in the meta title, so that way it knows what to do and what section this is associated with. And then I am using anthropic. In this case I'm using Sonnet 3.5. You can use whatever model you want to. I typically for content generation will recommend anthropic. I think it's one of the best, or if not the best right now. But I also think it's best at following the prompts that I'm looking for in terms of consistent output in this, whereas if you use an older model like say, GPT 3.5 turbo, you may not get as consistent results. And that makes parsing a lot more difficult when you're actually doing it. And so I've got my andropic account loaded in here. It goes ahead and it creates the outputs for all of these. You can see that there's 14 that are all associated with the various outputs or various inputs for the prompts that I had, and you can see that each has different content within it. One thing that I really, really like about Nan is, again, this ability for a structured output parser. Basically what this does is it allows me to go ahead and get a JSON payload back that's consistent. That way I'm able to consistently parse it and have some peace of mind that the results that I'm going to get back are going to be in a format that I expect them to be in. With this, I've went ahead and written up a JSON schema for what I expect. I know this might look a little bit complicated, but you could actually generate just about all of this with a little bit of Claude or chat GPT to get you a baseline and then making tweaks until it works as you expect. But basically what this is saying is it's going through and it's denoting a couple different things. There's some properties that will be outputted, such as the section meta title, the section contents, as well as there's for some edge cases, stuff like the FAQ content. That's only one of my prompts is the FAQ output, but I needed to go ahead and account for that, as that was going to be one of the kind of 14 outputs that I get from this actual workflow that I need to go ahead and parse and pass into my endstate landing page. I've got all that here. Again, what that allows me to do is, you see, the output is nice and clean. I've got my section meta title and I've got my section content. This is all just a JSON payload that I can then go and parse accordingly. Essentially what that allows me to do is again, go ahead and stick it into my config file. That will make it easy for my react site to actually read and render properly. I take all of that, I run the loop, it goes ahead and it completes all the loops. It aggregates all of the results with this aggregate field here. And then what we do is we actually create the raw config file. This may look intimidating, but it's really not too bad, really. What I have here is I've got a config file that outlines all the different sections of my site for my landing page, and I'm just mapping the content that I just generated to those actual areas within my site. As you can see here, I've got stuff for the header, if you look over here, header automation for staffing if you look again, title automate staffing, workflows and you percent less time right on timesheets, invoices and payroll, so on and so forth. It's got the how it works, the how it works steps, faqs, all the stuff that I expect in here. And so I've got some static stuff that's in here right now as placeholders. Don't worry about that. Some of this stuff just can't be generated like going ahead and passing in image URL's not something you can really generate in a consistent way, at least when it comes to like actual testimonials and users and that have had this automation with you. So again, don't worry about that. And so I do a raw version of this and I had some issues with some of the text formatting that existed in this. As you can see, this backslash, backslash, forward slash, whatever n is appearing quite a bit there. What was causing it to happen was the output wasn't quite right for the config. And so I have a little formula here that goes ahead and parses the newline characters appropriately and goes ahead and cleans up the config. So that way it is valid JSON that I can go ahead and pass into my react app and have it load as expected. This right here is the final product. This is what we want. And this controls all the content for an entire landing page. You don't have to go and edit any react components or any HTML components or anything like that. As long as it is in this JSON file and you pass that into the react application for your site, then this is exactly what you'll get. This makes it really easy and really modular to go ahead and update content accordingly with your site. This was just for the staffing site, but I could do this for automation, for ecommerce, automation, for Amazon Etsy again, so on and so forth. Really kind of just depends on what the domain is and what the use case or subject matter is for that. So let me go ahead and pull up the react site and what it looks like just to give you a quick preview of how this all works and then we can go from there. Here I am in cursor, my new favorite ide. And what I've got here is my config file. You can see config JSON and it's got the config file. There might be slight differences from what I was just showing was generated from Nan, but really this should be pretty darn similar to what we had before. What we can do is we'll go ahead and we will go into that directory and we'll go ahead and just run a demo of what this looks like. It should be NPM run start I believe. Yeah, okay, it'll start up takes a second and this is really just for development purposes. Once you're ready to actually go and run this on AWS or whatever your hosting provider may be, you would then actually go and you would do a build to render all this out. So what you can see here is I've got automation for staffing and so all of that content that you just saw on the test or the JSON file is all being rendered in here. And so I've got sections about again, what it's actually doing, why it's valuable, how the automation speaks for itself, how it all works, some social validation that I need to go ahead and add into this as well as faqs. And again, this is not a done state landing page. There's still some modifications that I need to make, but as a whole I'm really happy with how quickly I'm able to churn these out and make minor modifications as I need to. And just to show you that this is actually live, let me go ahead and I will make a quick change over here. So let me pull this over. Automation for staffing 123 and there it is. So again, can modify this anyway we need to, but I've got all these different components and everything else over here that I don't need to go into at all to actually change the content of the site. And to me that's really the powerful part of this. So anyway, back to our presentation. So that's kind of the high level of, again, you've got your Nadine workflow that works with some sort of generative AI. In this case, we're using Claude. Doesn't have to be cloud, could be a different one. Whatever your preference is, that's fine. We create the config file. The config file then is what is used in the react site to actually go and generate the content. And then we build the site and we have our actual live site that we can use. So what does that actually look like and how do we get here? So it all started with an idea for a domain for industry, again, automation for staffing, then from there again triggering Claude, creating the content, creating the config. I showed you the sections that it goes ahead and actually generates, and in my next video I'll go into a little bit more detail around those and how I built those all out using a react, but as a whole tried to go ahead and mimic or replicate common sections that you would see on a landing page that has a high conversion. And I don't believe, no, I actually didn't run any that app. So let me go ahead and run that app real quick just to show you how quickly this works. As you can see. 57, 54, 51. I'll go ahead and run it again just to kind of show it real time. You can see each item going through, it's incrementing four and then five, so on and so forth. This is pretty quick. Again, typically less than a minute. I don't think I've ever seen it more in a minute. But if you had more content or more sections, it would be a little bit longer. But as a whole is pretty efficient at generating content. If we click into here, we can see if it doesn't kick me out. No, it doesn't have we're generating different sections and all of those in a second will be aggregated and then we'll be put into the config raw and then again made whole in the final step. And so we'll give it just another second and this should be done. And then we can go ahead and look at the final output. Okay, very last one. Perfect. And we've got our output here, which looks scary, but really it's just a JSON payload at the end of the day. Ok, so let's go back here. All right, we can skip this. All right, so what does this actually mean? So with this I'm able to build sites and host sites for less than a dollar. In most cases. These sites are a couple pennies, maybe 1015 month, as long as I'm not getting crazy traffic to them. And so it's a really cost effective way for me to scale this model out where I can have a bunch of different domains and use cases and not have to worry about, again, the overhead associated with it. The overall time for development, yes, there was some time put into the reacts template upfront, but that's something that you have to do once and then really it's just content driven creation at that point. And so my overall time to go ahead and create new landing pages is less than a minute as you saw around the actual content. Then I can take that, config, tweak it and really in just a matter of minutes have a functional landing page that I can go ahead and deploy as I see fit or change as I see fit over time and then load time, load times crazy fast. Again, this is nothing super representative because it's running in my dev server, but if you look at the refresh, I mean it's right there. Again, it would be a little bit different if I was hosting it on AWS S three and it had to go out to the Internet. This is just a local server rendering, but you get the point. So yeah, really this trifecta of really great metrics was solving the problem that I had initially set out to solve. So just looking at what lies ahead, the next video will be around the react template and we'll go into some of the components and how I design that and how it can be used. And then the last will be the automation deployment. We'll get into how to use something like Cloudflare as well as AWS s three and AWS Cloudfront to host your site in a really cost effective way for your static sites like the one that we're building with this actual react implementation. I know there's probably some questions around how to actually use this. This is something that I do offer to businesses. I won't get into the pricing, everything else like that, but it's all pre built out. So it's really something that's easy for me to stand up for. Customers of mine, I don't mind doing it at all. But yeah, you can use existing domains, we can customize it for your content. It is SEO friendly, all the stuff that you would expect with a good landing page, and it does have analytics built in as well for each site. So that way you have your Google Analytics or whatever, your analytics tool of choice is to be able to go ahead and integrate that and see metrics on how these sites are performing over time. All right, so to wrap up, hopefully this was helpful. If you have any questions about it, go ahead and leave a comment. Definitely subscribe. Any support that you can show really means a lot to me, but feel free to reach out to me via email on my website getting automated or just going ahead and actually connecting with me on YouTube at getting automated or with my new channel handle which is hunter a snead and be on the lookout for. Net new content that comes out over time as well. Continue to release the parts for this as well as new content focused around business and automation. Again for your small and medium sized businesses. Thank you so much. Have a great day and good luck automating going forward.