How to Build a Website in Less than 10 Minutes for Dummies
Hello! You are probably thinking “how the &%*#” am I going to build a website. Fair enough, but don’t worry! I am a Senior Management Information Systems major at Uconn, and I will be working full time in tech post-grad. I’ve had roughly 3 years experience in tech- you’re in good hands.
This article will also take you from ground zero (knowing nothing about the cloud or programming) all the way to launching a website for anyone to view (or annoy). It is assumed that the you have basic knowledge in operating a computer and navigating the internet, however.
Step 1: Website Components (HTML and the Cloud)
What is HTML?
We are going to create a very simple website using HTML. HTML is the basic, barebones structure for a website’s design and is incredibly straight forward; without any knowledge of programming, one can infer what is going on. For example, the HTML code <title> means title, obviously.
Just to give you an idea, is what the “code” of HTML looks like and its output.
Oftentimes, for more in-depth and stylish websites, developers will combine HTML and CSS (another way to style). Sometimes, they will go beyond that and add in other technologies. For the purposes of this article, we aren’t going that deep.
Like I said previously, don’t worry about not knowing any programming, and don’t even worry about learning HTML- we are going to make things easier by using an online HTML generator.
Cloud Hosting
In order to actually let our HTML file have a URL (AKA a link) and be seen by other people, we are going to need to host the website on the cloud. After all, why make a website if you can’t annoy your friends with it?
The cloud is a service we can sometimes use for free (more intensive services cost money); the cloud abstracts away the physical, technological, and human costs in using technology. If we didn’t use the cloud, we would have needed to do a LOT of work in networking, making a server, etc. When we use the cloud, all of that is handled by the cloud provider. There are various providers like Azure via Microsoft, or AWS via Amazon. With this project, we are going to be using AWS.
Step 2: Generating your HTML file
Great! After a brief background in website components, lets set the ground work for how we are going to make our HTML file using an online generator.
Use the link below in order to generate your HTML file- simply type in whatever you want to pop up in the website, and you can download the HTML file by simply clicking the download button at the bottom. Whatever you typed will be translated into HTML and saved as the file “html-code.html.”
Step 3: Setting up the Cloud- AWS
What is/Why AWS?
AWS is short for Amazon Web Service- when people talk about “the cloud,” they likely are referring to AWS (or other cloud services). I am choosing AWS as it has a very generous free tier with its products. In addition, AWS is a market leader for the cloud; it would be more worthwhile to interact with AWS to gain valuable skills. You might not be expecting to be working with AWS or the cloud, but one day you might. For example, people in urban planning, utilities, and insurance likely were not expecting to interact with AWS as those are not tech-related industries; but they been using AWS Ground Station in order to launch satellites to aid them in their work.
Part 1: Creating an AWS Account
Alright! Time to really dig into the work. Let’s start by creating an account.
Follow the link below, and at the top right click the orange “create an AWS Account” and follow the directions. After creating your account and going through the journey, click the second link and login with your information. Sign in as a “root” user (it should be pre-selected). Here, you will be entering the management console.
Part 2: AWS S3 Bucket Configuration
Now we are really going to get into the nitty gritty of configuring our storage and getting it prepped for the code. Bear with me as we go through this (please don’t accidentally launch a satellite).
- Once you are inside the AWS management console, scroll down to the storage section. Locate and click the button called “S3.”
- A weird and confusing interface will pop up. Do not worry! Click the orange “create bucket” button. The bucket is amazon’s cloud storage that also allows you to host websites.
- After clicking “create bucket”, another interface with various options will pop up. All you have to concern yourself with is naming your bucket in the text field and checking off the “ no public access” checkbox to enable public viewing (do so at your own risk, I am not responsible). Finally hit the create button and you will exit the interface.
- After your bucket is created, it should appear in the “Buckets” section with the name you just gave it. Woo hoo! You just created storage in the cloud. Click on your bucket via the name you just gave it (should be highlighted blue). Your bucket’s settings interface should pop up.
- Locate and click on the “permissions” tab from the bucket settings interface.
- Warning- this is the hardest part! Scroll down to “Bucket Policy” and copy and paste the below code. Then, where it says “Bucket-Name” in the code you just copy and pasted, put in the name of your bucket exactly how you have it entered from step 3 (pay attention to upper case or lowercase letters). See below for reference.
- Once the chunk of code is reformatted, hit save. If you did it correctly, then you should be shot back to the bucket settings interface. Congrats on moving on!
Look below at line 12 for reference. Notice how its inserted right in there, with no spaces to the left or right of it. The text touches the : and /, and it’s located inside the quotes.
Line reformatting example: “arn:aws:s3:::your-bucket-name-insert-here/*”
Part 3: Putting Your HTML Code into S3 and Hosting
- After part 1, step 7, you should be redirected back to the bucket settings interface. Continue to step 2 if that is you. If starting fresh, sign back into the AWS management console and click on “S3” (should appear in recently visited services, or scroll down and click it under the “Storage” section). It will bring you to another interface showing all your S3 buckets. Click on your bucket we just configured, which should be highlighted blue.
- Navigate to the objects section and click “upload”- you will be redirected to the to the upload page.
- Click “add files” and upload the html file we just created and downloaded. You will have to click the orange “upload” button at the bottom right to finalize the upload (might have to scroll down. It’s somewhat hidden).
- Once uploaded, it shoots you back to the bucket settings, click the tab called “properties.”
- Scroll all the way to the bottom once inside the properties section.
- Once scrolled all the way down, find the space titled “static website hosting” and click “edit.”
- A new interface will pop up for static website hosting. Check off “enable” for static website hosting.
- Scroll down a bit, a locate the section labeled “Index Document.” Input “html-code.html” (with no quotes) in the Index Document textbox. If you saved your file as a different name, then input that.
- Once all done, ignore the other options and click the orange “save changes” button.
- You’ll be shot back to the beginning of the properties tab. Scroll all the way down and you’ll see your URL ready to go highlighted in blue!
Below is a link to the website I made when following the article directions:
