This tutorial is for creating a static website using cPanel, or any apache file host with a file manager.
This tutorial assumes you’ve already set up a domain with your website.
Creating your homepage
- Log in to your webserver dashboard
- Click on File Manager
- Open the folder called public_html, which should be in the file preview or in the left sidebar.
Everything inside of the public_html folder is public to the internet. You can create multiple folders in order to create multiple different websites! If you only want to use your server for ONE website, you can skip creating a folder for it, and just create your index.html (below) inside of your public_html folder.
- Click on + Folder to add a new folder. Name it something you can use to refer it as your site.
- Inside of that folder is your root directory for your website.
- Create a new file and name it index.html.
- Copy the HTML boilerplate structure on this page.
- Edit your index.html file and paste the code in.
- If you’re not sure how to build your own layout:
- Hop on over to my layout maker and create a layout structure that you think looks good, using the tools at the top of the page. When it looks good, click generate HTML and copy the code to your clipboard.
- Paste the code from the layout generator in between the <body></body> tags.
- Save your file.
- You can preview your live page at https://yourwebsite.com/yourfolder/ using the folder name of the website you just created.
- You can go back to index.html and check the :root variables at the top of the <style></style> tags to customize the colors. You should do this before proceeding (because you’ll be copying and pasting this site ‘template’ for other pages).
Creating other pages
Okay, so index.html is your homepage, but what about your other pages? You have to make them!
How you create your pages will impact how your links look when you share them.
- Go back to your folder you created in your file manager.
- Create a new file and name it about.html
- Then, go to https://yoursite.com/yourfolder/about.html
- There’s your page! Now you can go back and edit that file to make it look how you want.
- Here is where you will copy your customized website layout template.
But what if you’d rather have your url look like this?:
Then, instead of using your about.html file, create a New Folder. Name it about.
Inside of that folder, create a new file. Name it index.html.
Then, go to https://yoursite.com/yourfolder/about/
Voila! You’re done! Repeat this process for however many pages you’d like to create, and most importantly: have a good time!