ChatGPT and AI tools offer excellent new ways to create prototypes of web pages quickly.
Now, with the Netlify Drop Plugin for ChatGPT, you can publish your AI-created web page directly from ChatGPT.
I wrote a detailed blog post about creating a landing page with ChatGPT, including a video tutorial. In that tutorial, I proposed an alternative solution: to save the HTML locally and manually publish it to Netlify Drop (or any web hoster).
This manual step is no longer necessary.
Heres how to use the Netlify Drop ChatGPT Plugin:
Step 1: Get ChatGPT Plus and activate the Netlify Drop Plugin
Only Plus users get access to the plugin marketplace. So first upgrade your free account if you haven’t already.
Now you can browse to the plugin store. Start a new conversation, select GPT-4 and click the arrow next to “no plugins enabled”. Scroll down and select Plugin store.
In the plugin store, search for Netlify Drop. Select Install. Done.
As a last step, ensure it no longer says “no plugin selected.” Or select Netlify Drop in the dropdown menu.
Step 2: Ask ChatGPT to create the web page
Your prompt can vary a lot in the amount of details you provide.
For this purpose, I am using a straightforward prompt:
Create a website with lorem ipsum copy, with the layout of a newsletter landing page
Step 3: Use Netlify Drop to publish the page
After ChatGPT provides the HTML/CSS for your page, you get asked if you want to publish the page.
You got to answer one question now: “Would you like me to deploy this to Netlify for you?
Type one word, and you get the page live: Yes.
Now the Netlify Drop plugin does some magic trick and your page is live.
The result looks like this:
Step 4: Update and fine-tune your page
Of course, the above page is very basic. For example, it lacks images. You might want to add image placeholders if you work on landing page prototypes. You can ask ChatGPT to add them.
And again, I get asked if I want to publish the result online.
This is what the page looks like with placeholder images.
In most cases, you won’t be happy with the first result ChatGPT provided, so you will tinker around to get to a page you like. Here are some more ideas on what you can ask ChatGPT to do:
- Add the exact content you want to be shown on the page – you can provide all the copy in the initial prompt
- Add a testimonial section.
- Add specific images that you provide links to
- Use a particular font, and offer more input on the styling of the page.
- And much more.
Here is another example of a landing page with specific content, layout, and images created with ChatGPT.
To see an advanced use case, you can check my tutorial on how to create a landing page using ChatGPT.
Step 5: Claim your page, or it’s gone (optional)
I usually tinker around and take screenshots of generated web pages. But if you want, you can claim the generated page by creating a Netlify account. ChatGPT sends the message that the page will be gone if you do not claim the URL.
If you sign up for a Netlify account, you can connect your domain, and your page will be live instantly under your domain.
But do not worry about the 1-hour timeframe. You can always return to the ChatGPT conversation and type: Redeploy page. After that, the page is again live for an hour.
Conclusion
It was never easier to create a landing page without knowing how to write HTML/CSS, thanks to ChatGPT. The Netlify Drop Plugin also makes the last technical step obsolete: saving the file and uploading it to a web hoster. These tools enable creators and marketers to prototype web pages quickly.
More Content on how creators can use ChatGPT: