Want to make a website? What you need to know

I recently finished setting up my personal webpage, hosted with Amazon Web Services (AWS) Lightsail. As I still remember being someone who had no idea where to start with making a website, or what a website was really made up of, I thought I’d share my journey of discovery and my recommendations for getting set up with your own personal page fast.

I’ll walk through the components that make up a webpage and relate the various vendors available that will supply them.

Whilst I was beginning from a fairly technical standpoint, these recommendations are appropriate for absolute beginners and already-technical people alike.

In a hurry? Skip the background and go straight to how I got started quickly, or view my portfolio.

How does a website work?

There are three things you need to have a website. I will give the technical details (and an explanation of what you’re paying for!), followed by an analogy. There are more details on how to get your hands on each component later.

What you’ll need

1. The webpage contents

These are the files that make up your website. This is the fun part; you get to decide and create what content you’re going to serve your visitors!

A basic webpage is made up of files written in a few programming languages that all tie together. They are received and read by your computer to generate content like you can see now. The backbone is written in Hypertext Markup Language (HTML). Additional Cascading Style Sheets (CSS) and JavaScript files add styling and interactivity respectively (with some blurring of the lines), to elements of the HTML files. Finally, PHP can be embedded in an HTML file and is executed on the server. This can add more functionality (like database interaction) and modifies the HTML files before they reach your browser.

Whilst it’s useful to add context, there are multiple tools that will make webpages for you without writing a line of code like WordPress or Wix.

2. A server to ‘host’ your site

A server is a computer that’s set up with software that can deal with requests and network traffic. It hosts your files, databases etc. on its hard drive, and subsequently serves them on-request to visitors to your site. In-theory you could use your own personal computer but, as that would mean ensuring 24/7 power and internet connection, most people rent purpose-made hosting capabilities from a company.

To add some context with terms you may have heard before (don’t worry if not!): files are requested and provided using a transfer protocol. You specify one in your browser’s address bar every time you visit a webpage, called the Hypertext Transfer Protocol (HTTP). These days, most sites now use the Secure version (HTTPS). There are technically many other protocols, but they’re used less in the context of delivering a website. Web server software has to be installed on the host computer to deal with HTTP requests coming to it (step 4->5 in the figure below). Apache is the most widely used example of web server software.

There are various companies offering web hosting services, like DreamHost or WordPress. The various levels of hosting support range from ~£3 / month for small-scale use to being one of the main costs of a tech company for the biggest, busiest sites.

3. An address for your site

This is what people type-in to visit your website, also known as a domain name. The Domain Name System (DNS) maps that domain name (bbc.co.uk) to a computer-readable Internet Protocol (IP) address. Your domain name will be set up to map to the IP address of the computer that hosts your files.

As keeping this database of all domains-IP mappings is not free, you rent this address space from a domain name registrar.

For those interested, finding the IP address for a domain name (step 1->2) is actually a recursive process (explained really well here). Technically, renting an ‘Authorative DNS nameserver’ – the computer responsible for providing your site’s IP address on request – is a separate service to domain name rental. However, domain name registrars usually include nameservers as part of the cost of domain name registration, so you can promptly forget about this paragraph.

Domain names (and nameservers, when included) are renewed from domain name registrars on an annual basis for a fee of around £15 / year, and can be done with suppliers like GoDaddy or WordPress, etc. Those aimed at beginners are often more expensive, so shop around and go where you feel comfortable (see my recommendation, coming up)!

An Analogy – making a phone call

You want to call your friend to ask them what the weather is like where they are.	You want to see the BBC weather webpage for London.
You look up their name in your address book.	You type-in your browser https://www.bbc.co.uk/weather/2643743 (London), and the browser queries a DNS nameserver database for the IP of the domain www.bbc.co.uk.
You read the number.	The database returns an IP address.
You call the number, and they pick up the phone.	A connection is established between your computer and the computer with that IP, hosting the BBC site files.
You ask “what is the weather like in London?”	You make a HTTPS GET request for /weather/2643743, which indicates you are looking for the 2643743 (London) file under the “weather” folder.
Your friend tells you what the weather is like.	The BBC weather computer responds to the GET request with the content you are looking for.

Do I need to write any code?

Short answer: probably not, and in fact you probably shouldn’t. If you’re not convinced by that, here’s my experience.

After taking my first course in computing 5 years ago, I realised I vaguely knew that the internet was build on something like HTML, CSS and JavaScript, but not much more. After glimpsing the world of computer code, I felt dissatisfied with not knowing more about the most influential tool of my generation. I decided to take an introductory course in HTML and CSS on the Khan Academy. Fortunately this coincided with my Dad mumbling about needing a website as a platform for his writing.

View post on imgur.com

Being an enthusiastic beginner, I dived-in at the deep end and made the website contents from scratch. This was a great way to put my learning into practice straight away, and to discover ‘what they don’t teach you in the KA HTML/CSS course’. BUT this route will take a very long time for a relatively amateurish return that will be hard (i.e. manual) to maintain.

I bought a domain address from GoDaddy.com, a well-reputed supplier, and hosted with DreamHost. The latter turned out to be a little to expensive for my minimal needs; I haven’t checked out their latest competitive pricing, but I will make a different recommendation in the next section regardless.

Key takeaways on learning HTML/CSS

• Introducing myself to HTML and CSS was very valuable but ultimately inessential. It helped me to later customise the my pre-build pages and understand so much more about getting up to speed that it’s hard for me to imagine the experience of using a site builder without the HTML/CSS background. However these tools are ultimately designed for complete newcomers to web design. Most users probably won’t need to edit any code themselves if they’re happy with the basics provided.
• Writing a website in from scratch was a waste of time for my simple purposes. Unless you know you need the flexibility, or specifically want a project to greatly improve your web development skills, I’d recommend using a site-builder.

WordPress: DIY web development

Recently, I was asked to make a family member a website for their business. Being dissatisfied with writing my own code, I looked for sites offering premade-tools. A short amount of research concluded that the top players were largely the same, with WordPress.com slightly edging it for me for the following reasons:

Key benefits of WordPress

• Minimal, un-branded personal hosting is £3 / month. The next tier, probably necessary for small-scale business, is £7 (both at the time of writing. Other fees i.e. domain registration are necessary).
• WordPress is readily importable to private servers if you decide to upgrade later (especially AWS, as I did)
• I can have multiple and distinct authors for each site I make without them requiring technical skills. So I was able to empower clients who wanted to publish their own content to do so
• It’s simple to share a user interface to design, host and rent a domain from the same provider, all of which WordPress offer
• The tools included give you everything you need to make a pretty-looking website (I hope you agree, anyway!)
• There is a free “sandbox area” to play whilst you decide if it’s for you – don’t pay / publish until you’re happy

Caveat:

• The latter three or four benefits are probably applicable to all major site-building companies; my research wasn’t exhaustive.
• If you disagree or know of alternatives that do the first two benefits even-better, I’d be interested to hear your recommendations in the comments or if you contact me!

what does WordPress do?

WordPress offers services that give you all three major components of a website from earlier.

You can buy a domain name from them with their useful domain name checker tool, which is usually renewed at a price of something on the order of £15, yearly.

They offer multiple levels of hosting plan (i.e. computer server rental), currently ranging from £3 to £36 / month, for different requirements.

Finally, can build the pages using the WordPress tool itself.

I won’t explain how exactly to do these steps as, now you know what you’re looking for, it’s in their best commercial interests to explain that really clearly, and better than I could. Go to WordPress.com, click “start your website”, register and go from there. Good luck!

My WordPress portfolio

The two sites I have made in WordPress are:

• Whiskers, Paws & Claws Pet Services
• Paul Bernardi – Author – Official Site

In the next section I discuss creating my personal site in AWS Lightsail.

Alternatives to WordPress

Already some alternatives have been suggested to me, and of course many solutions exist. Here I list some sites I have second-hand experience with, to help inform your choice, but I haven’t tried them myself.

• An ex-colleague of mine Nick Zervoudis builds his site with wowchemy.com, hosted with netlify.com. Paraphrasing (though mistakes are my own): “wowchemy builds sites using a static file and markdown docs. For that reason it’s extremely useful for embedding tools like Jupyter, LaTeX etc, listing projects and publications”, so this may be one to consider for technical blogs.
• Feel free to suggest your alternatives, and I’d look forward to checking them out!

AWS Lightsail: cheaper, more flexible (and fiddlier)

After gaining confidence with WordPress I finally turned my attention to making my personal site. Having ‘done’ WordPress already and wanting to move on to bigger things, I used the opportunity to get to grips with AWS Lightsail for WordPress hosting. That guide is an excellent and complete way to retrace my steps.

Key Benefits:

• At the time of writing, hosting on their smallest Lightsail Virtual Private Server (VPS) costs a mere $3.50 / month (first month free to decide if it’s for you!)
• Unlike other AWS products, you don’t have to worry about it getting out of hand; Lightsail offers a fixed monthly cost
• Web hosting tools are setup and ready to go, including the option to pre-install popular sites like WordPress, Git
• It’s well-integrated with AWS – there is full flexibility to only add-on the features you need, when you need them (relative to all-in-one services like WordPress)

Furthermore, lightsail now includes DNS nameserver hosting: so there’s no additional domain costs beyond renting your chosen address from a registrar. I rented my domain with AWS Route 53 to keep everything in one place, and that turned out to be very cheap compared to some other providers. For more flexibility later, Route 53 offers DNS zones currently starting from $0.50 / month, too.

Features you can expand your Lightsail site to include: database hosting, or smart content delivery networks and load balancing as your side grows in size. These are entirely accessible skills for someone with a technical background and a basic understanding of the internet (for example, you can see mine above!). The AWS Documentation will get you 90% of the rest of the way there, with patience making up the last 10%.

Lightsail: bottom line

Despite the benefits, I wouldn’t recommend embarking on the AWS route to host a personal site unless:

1. You have some technical knowledge
2. You know you need more features than a regular site builder provides (cheaply)
3. You particularly want to enhance your AWS skills (like me!)
4. You want to understand the backend of the internet better

In fact, the latter two points are unavoidable. Ultimately it’s quite fiddly and time-consuming first-time-around – especially relative to sites like WordPress that achieve exactly the same ends, for simple means. Remember, you can import a WordPress site onto an AWS Lightsail server at any time, with a little bit of patching-up, so it remains open as a future option if and when the need arises.

Acknowledgments

With thanks to:

• Matthew Kempa for clearing up some conceptual details pre-publication
• Nick Zervoudis for providing details about his wowchemy setup