The fastest way: Make it yours
Every template with a live preview here has a Make it yours button. Type your business name, pick a color and a font, watch the preview change, then download. The files you get are already changed, so you can skip straight to step 4.
Step 1: Download and look
Download the template and unzip it (double-click the zip on a Mac, or right-click and choose Extract All on Windows). Inside you will find index.html, style.css, script.js and a fonts folder. Double-click index.html and it opens in your browser, exactly as visitors will see it.
Step 2: Change the words
Open index.html in a text editor. Good free choices:
- Visual Studio Code for Mac and Windows. It colors the code so the words are easy to spot.
- TextEdit on a Mac. Choose Format, then Make Plain Text, before you edit.
- Notepad on Windows.
Only change the words between the tags. In <h1>Fresh bread every morning</h1>, change "Fresh bread every morning" and leave the <h1> parts alone. Save, then refresh your browser to see the change. Use Find (Cmd+F or Ctrl+F) to jump straight to any sentence you see on the page.
Step 3: Pick your colors
Open style.css. The first lines, under :root, set the colors for the whole site. Change --brand to your main color, using a hex code like #e11d48. Any color picker will give you one. Save and refresh: every button and link updates at once.
Step 4: Add your photos
Copy your photos into the template folder. Our Premium templates use drawings made in code, so they stay light and fast. To swap a drawing for a photo, replace its <svg ...> ... </svg> block with <img src="my-photo.jpg" alt="A short description of the photo">. Only use photos you took or have the right to use.
Step 5: Make the contact form work
Forms in templates show a thank-you message but cannot send email on their own, because a plain website has no mail server. The easy fix is a form service with a free plan, such as Formspree. Sign up, copy the address it gives you, and in index.html change <form data-demo> to <form action="the-address-you-copied" method="POST">. Our Premium templates already give every field a name, so messages arrive complete.
Step 6: Put it online
You have three easy options, and none needs special software:
- Your web host's File Manager. In cPanel or your host's dashboard, open File Manager, go to public_html, upload the files and folders (or a zip of them and use Extract). Our guide on putting a template online has more detail.
- Netlify Drop. Go to app.netlify.com/drop and drag the folder onto the page. You get a free web address in seconds and can connect your own domain later.
- GitHub Pages. Create a free repository, choose Add file, then Upload files, drag everything in, and switch on Pages in Settings.
Your own domain name
A free host gives you a temporary address. To use your own, like yourbakery.com, you register a domain name and point it at your hosting. Our guide on how to launch a website explains domains, hosting, HTTPS and getting found on Google, step by step.
Let AI do the writing
ChatGPT, Gemini, Claude and other AI assistants can write all the words for your template and make careful edits for you. See how to build a website with AI and a free template for prompts you can copy.
Before you share your site
- Replace every sample name, price, phone number and address.
- Only show real reviews from real customers, with their permission.
- Change the page title and description at the top of index.html. Google shows them in search results.
- Keep the LICENSE file in the folder. For MIT templates that is the only rule.
- The footer credit link on our templates is optional. Keep it if you can; remove it if you like.
Missing something?
Wish a template existed that we have not made? Pitch the idea and we will consider building it.
