Hello! In today's blog entry I will be teaching you how to to create and upload a static website to the internet.
There are many options and methods for creating a website. In today's tutorial, you will:
- learn the difference between a Static and Dynamic website
- download the free tools needed to create a static website
- write HTML & CSS files for a website
- upload the website to a free host.
There are many tutorials on the internet that go into an enormous amount of depth on how to code a website. This is not one of those tutorials. Rather, I intend to supply you with the guidance and direction so that you can use high quality tools and educational resources that already exist.
Static vs Dynamic websites
When you enter a URL into your browser, you are connecting to a computer. These special purpose computers are called web servers.
Your computer will send a request for information to the web server. How the web server responds to that request depends on if you are visiting a Static or Dynamic website.
A static website will respond to your computer's request by sending back prebuilt files. Your browser can read these files as a blueprint for how to build the webpage that you see.
These files will typically be a combination of HTML, CSS, & JS files.
The prebuilt files may be written by hand, or written by an automated tool like a static site generator (SSG)
In any case, the files were already created ahead of time before your computer sent a request to the web server.
A dynamic website will
- receive a request from your computer
- proccess information about the request
- generate files specifically for your request
- respond by sending the custom files to your computer
Dynamic websites are generally more expensive to run, and more complicated to handle. These sites must be programmed in a server side programming language like PHP, Python's Django framework, or Node JS.
While they are a bit more trouble, Dynamic websites are just about the only way to handle sensitive information or computationally expensive operations. Third party plugins/widgets are available to abstract away most of these concerns for you on a Static Website, but they may come with a $$$ price.
If you need a website that handles user login, secure information, or anything that you would not want everyone to access, you will almost certainly need to use a dynamic website with server side code or a third party service.
Structure of a static website
A static website is typically written in two or three languages
HTML is the foundation, structure, and backbone of your website. You can think of it as the bones of the human body or the steel beams of a building.
CSS controls how you see the website. It can be thought of a person's make up / cosmetics or the facade of a building.
You may notice that I am linking to MDN (Mozilla web docs) in most of my links. This is because MDN is the definitive resource for high quality documentation on HTML, CSS, & JS. If you have a question about something in one of these languages, it will be documented here.
To build a website, we first need an environment to create it in. You wouldn't cook food in your bathroom, and you wouldn't code in a word document.
You need an effective and functional place to write code. With the correct tools you will write better code in less time.
- Download Visual Studio Code (VS Code).
- Install & Launch VS Code.
- Watch and follow the first 9 minutes & 20 seconds of this YouTube video to familiarize yourself with the user interface.
- Disregard everything after the 9 minute 20 second mark, in this tutorial will be using a different set of extensions.
- If the video is a bit slow for you, change the playback speed to 1.25 or 1.5
- Go to File > Preferences > Settings and search for "auto save". Open the drop down menu and select "onWindowChange".
These extensions are required for building a website
These extensions are optional, but extremely useful
Learning to code
Listed below are a few fantastic sources for learning to code:
I recommend following the Codecademy tutorials until you understand the basics. Then, try try try! Follow your imagination. The more you fail, the faster you will learn. The only way to truly learn to code is to just start coding and learn while you do it! The MDN Web Docs will be your best source for figuring out how things work.
All of the code you need to get started will be provided here. You are encouraged to modify and add your own code as you feel comfortable with doing so.
First, create a folder. You can place it anywhere you want, but I recommend placing it on your desktop. Name the folder
websiteProjects. Open the folder and inside of
websiteProjects create another folder named
myWebsite. All of the content of the website you are building will be contained in the
myWebsite folder. This is known as the root folder of your website.
Inside of VS Code click File > Open Folder > Navigate to
myWebsite and open the folder. click Select Folder.
On the left side of the screen in the Explorer, you will find a tab named
myWebsite. This represents the root folder of your project. Right click
myWebsite and select New File. Name this file
index.html This will be the homepage of your website. It is named
index.html because that is the standard convention that browsers know will refer to the homepage.
Alright, lets put your programming knowledge to the test and add some code to
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css">
<title>This is myWebsite!</title>
<h1>Hello! Welcome to myWebsite!</h1>
<p>This is a paragraph!</p>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
Notice the highlighted line #7? This will be important in the CSS section!
Awesome, pat yourself on the back because you have your first website! It's not much, but it's a website. To see it in your own browser, save the
index.html file by clicking the Ctrl + S keys. Next, click + Ctrl + Shift + L.
This should have opened a live preview of
index.html in your default browser. Make a change to the page and save it. Watch how the preview automatically updates your changes!
If you followed step 4 under Tools you do not need to press Ctrl + S to save the file. The moment you click any window other than VS Code, such as your browser, the file will save.
When in doubt, always save your files using Ctrl + S to prevent lost work.
Create a file named
styles.css inside of the
myWebsite folder. This should be on the same level as
index.html. Copy / Paste the following code into
font-family: monospace ;
border: 1px solid #777777;
Fantastic! Now you are getting the hang of this. Lets revisit the HTML code from above. Lets look at line 7.
<link rel="stylesheet" href="./styles.css">
This link connects the CSS document to the HTML document. The href part is the file path that points to where the document is located. In this case, both documents are in the same folder. Sometimes you may want to move files to subfolders for organization. Remember to target the file using a URI file path
Uploading to the internet
Now that you have the basics of a website, an HTML file and a CSS file, lets upload the website to the internet!
Create a free account at Neocities. This is a free host for static websites. In addition to being a host, Neocities is home to a large community of individuals making personal webpages on the Internet. You will make many friends on Neocities during your WebDev journey.
Once you are logged in, find the Edit Site button.
Upload your HTML and CSS documents to the file section.
Visit your website at https://yourName.neocities.org. The web address to your website is also displayed in the Edit Site page.
This blog article is a work in progress! Last edited: May 1, 2022