Create a Free Website Using ChatGPT: Step-by-Step Guide for Beginners
I’ve been really experimenting with GitHub and Replit and website creation. Today, I’m gonna teach you guys how to make a fully functional website using ChatGPT step by step. While I do it too.
Before we start, I want to let you know to keep it as authentic and basic as possible, I’m gonna create the article alongside me writing this, I haven’t even started yet.
Step One: Account Creation
This is probably the most annoying easy but time consuming step. It should take around 3–5 minutes but then you are all ready. First step is to go to github.com and create an account. If you have an account skip to the next paragraph. This should be pretty easy. Click Sign Up in the top right corner. Then chose your method, I use google, and follow the process. It’s very simple, if it asks you types of things you will be doing just click continue. Noting you say here really matters. The free plan is all you need. Once your in and your account is created close any tutorials or something that may pop-up and open a new tab.
Next head over to replit.com. If you have an account make sure it is linked to your GitHub account if it isn’t either just make a new account by following my process or go to this tutorial. If you don’t have an account it’s very simple. Just click sign in with GitHub and follow the process of signing in. It will open up to a page where you will sign into your github account. Then you will authorize the replit to have full access to GitHub and vice versa. Fill out the form with your name and whatever steps replit requires. The free plan works fine. Click explore replit if it asks you to make a project. If you don’t click a button which says authorize, I would follow the tutorial I attached once you sign into replit.
Now that everything is ready to go lets get started.
Step Two: Creating The Project
If your on the home page of replit click “Create Repl” In the options it give you search: HTML, CSS, JS. It should have an orange logo that has a 5 on it. You can add a title and then click Create Repl. X out any tutorials that may popup. You don’t need them. Open a new tab and open ChatGPT. First think of what you want to male. Note* using online features through server things and stuff may be too difficult if you don’t know basic coding knowledge. If this is your first time, I would stick to a simple one time offline website. Mines gonna be a place where people can see games I’ve played and my review. I’d copy and paste this prompt into ChatGPT: Hi there, I’m using Replit with HTML, CSS and JS to create a website. The website is about _____. I want you to style it like _____(exisiting website or detailed description) Generate me the index.html, style.css, and the script.js (Put a very detailed explanation of what the website is). In my prompt i told it is about games I’ve played on my xbox, style it like discord, and I attached a doc which I made of the ratings of games I’ve played.
It is important you are using the latest model of ChatGPT because coding is still one of the hardest things for it so if your on a free plan, use all the limited free messages on the coding aspect of the website. ChatGPT should then give you code for three files. Simply copy and paste that code into the corresponding file in replit. You can see the file names on the left hand side. Once you’ve done that press run in the top. See your website on the right and then talk with ChatGPT to generate the code the way you want the website to be. Once you’ve done that it’s time to put it for the world to see.
Step Three: Deploy it with GitHub
Once you’ve got what you want, where you see the what the website would look like there should be a plus that looks like you are adding a new tab. Click it and type git. A tool should put up and have the description: Version Control for your Repl. Click it and then click Initialize Git Repository. Then press Settings View. If it is stuck loading just click the refresh button on it.
Click Connect to GitHub, Install and Authorize, then you may have to sign into your GitHub account. After that you might have to refresh the page or refresh the entire website then click the refresh button and click settings view again until you see the next image.
Enter a Repository Name, make it Public then click Create Repository on GitHub. There can be no spaces in the Repository Name if you get an error. Reload the entire page and then there should be something that says push or publish or something on the Git thing. Press that
Once you click create then navigate back to GitHub.com. Reload the page and click on your profile image in the top right and choose your repositories. You should see the new repistory from replit. Click it, go to settings, pages, then change the branch to main. Click save once you do that.
Right under the save button, once it’s saved you should see a hyperlink that is GitHub-pages, it takes you to the link of your knew website. If you can’t find it just look at the url in the browser. The format of your link is: USERNAME.github.io/REPONAME. USERNAME is the name after the first slash (/) in the url and the REPONAME is the text after the second slash (/). Mine would be: https://santaclaus774.github.io/Vivaan-sGameReviews/. Check it out if you want to see my game reviews.
There you go, you’ve know built a basic website.
Important Notice: Links included in the article may be affiliate links with commissions for the writer.
Thanks for reading! If you enjoyed this, follow me on Medium. I try to write weekly and frequently. Feel free to email me at: vivaan.shahani@gmail.comfor partnerships and suggestions. Subscribe by email on Medium to receive exclusive content. Stay tuned for more stories!
