It’s easy to forget just how hard it used to be to do anything with computers. I have a vivid memory from when I was about seven years old, mucking around with an early computer (a BBC Micro no less), of my Dad explaining one his first jobs in the late ‘60s. He worked as a computer operator for a shoe company, back when computers were the size of large rooms and programmed with punch cards. I’d listen in amazement as he talked about how this intricately designed machine would handle the stock management for an entire company. And how at the same time, 240,000 miles away, a different computer, but built on exactly the same principles, put a man on the moon. And at that point, I knew I wanted to build things that could do that!
I had exactly the same feeling the other day myself when explaining to a friend about how damn hard it used to be to just put a simple website online. First, you had to get a server. A physical server in a little metal case. Because clouds were fluffy things in the sky. Then you had to configure it to run a web server. Then you had to buy a domain and manage the DNS, changes to which always took AGES to propagate. SSL for a secure site? Don’t even get me started. This whole process was a job for absolute ninjas only.
And now? Well, yesterday I bought a domain, spun up a server with various subdomains, fully secured it with SSL, distributed the content through a global Content Delivery Network (CDN), managed all the DNS rules, created a staging and production site and set up an automated build pipeline so any changes I made to the site code on my laptop automatically deployed to the site. This took me just shy of 10 minutes. Ten minutes to complete a job that even a few years ago would have taken days. I’d love to say this was because I’ve become a brilliant software engineer over the last 15 years, but in reality, cloud technology has now reached a point where anybody can do this. Literally, anybody with a computer can now put a site online in minutes and share their ideas and creations with the whole world.
What a time to be alive!
Now it’s your turn. Start a timer, follow the steps below and see how long it takes you…
How to…
- A lot of the magic here happens through a phenomenal free online service called Netlify. Did I mention it’s free? It’s free. We’ll start by signing up for a Netlify account.
- Done that? Great. Now let’s make the simplest little web page ever on your computer. Don’t worry, it’s very easy. I’d recommend you download a tool called Visual Studio Code (free) for writing code, it’ll make your life a lot easier. It’s also just a great super-powered Notepad-like tool. And when people walk past your desk you’ll look mega-cool like you’re in the Matrix.
- Let’s make a new folder on your desktop for this project, and within that a new file called ‘index.html’. You can do this in Visual Studio Code (File >> New). Visual Studio Code is smart enough to know that the .html extension means you’re going to write some HTML, if you look in the very bottom right of the screen it’ll show HTML as the document type. This means you get lots of formatting help which makes everything much easier.
- Copy and paste the following code into the file and save it. This is the foundation of a website – don’t get too scared by this, there’s plenty of great courses on how to learn HTML (the structure of web pages) and CSS (their styling).
<!doctype html>
<html lang="en"><head>
<title>Hello World!</title>
</head><body>
<h1>Hello World!</h1>
<p>It's nice to see you there.</p>
</body></html>
- Now you’ve saved your file, go to your Netlify page and you should see a little outlines box where you can drag and drop your code. Drag the folder containing your index.html file onto this area.
- What happens next is… you wait. Not for long, usually a few seconds. Netlify will take your code, upload it to their servers, create a new mini web server all for your site, create a temporary site name, push the content out to 100+ locations worldwide while set up routing rules so that people always load the closest version of your page and, finally, provision a free SSL certificate so your site can be served securely over HTTPS.
- You should now see your site is live on a slightly strange temporary domain name — e.g. https://inspiring-clarke-eeb25c.netlify.com. Click on it. That’s your site! It’s now live for everyone in the world to see, albeit with a slightly strange address. Let’s fix that.
- (optional) If you want to use a proper domain name for your site, you can quickly register a domain directly through Netlify. Or, if you prefer, you can use a third-party service like GoDaddy or Google Domains. Just click on ‘Set up a custom domain’, type in your desired domain name, add payment (~$10 / year) and Netlify will take care of the rest.
- Congratulations! You’ve now created a real website – served securely and quickly from servers all around the world, that you can update quickly and easily just by clicking the ‘Deploys’ section and dragging a new folder. Make a mistake and want to go back to a previous version? One click.
What’s next?
By combining Netlify with the code repository site GitHub, you can automate more of this process – opening up the way to complex sites with multiple contributors, staging and production versions and true version control. This continuous deployment platform can scale from a small team all the way up to enterprise scale projects with hundreds of developers. At ALIAS we make heavy use of static site generators like Gatsby and Hugo to create complex, multi-language micro-sites for our campaigns. And we use Netlify’s in-built split-testing functionality for our A/B testing. This platform gives us enterprise-grade security and performance, coupled with superb agility to test, optimise and improve every aspect of a site. With even a small team, you can get massive results.
Now, to finish, some common questions I get asked on a fairly regular basis…
Can’t I just use WordPress? Isn’t that super-easy with drag-and-drop design and all that jazz?
Yep, you can. WordPress is great. But it’s big, complex and unwieldy. In many cases, WordPress is a sledge hammer being used to crack the tiniest nut. WordPress runs a big, complex database in the background and requires either paid hosting to manage the servers, or a huge amount of technical knowledge to manage and run your own servers. If you’re just running a super simple microsite or landing page or two (like the vast majority of pages on the net) it’s overkill — it’s like driving your car 15 meters to the shop on the corner. Why go through all that effort when you can just walk?
But I don’t know how to code
Fair enough – but if you’re interested in learning, this is a great way to start! You can build your own little projects and share them properly with the world. Or you can get an expert to code for you (which I would definitely recommend!) – but at least now you have an understanding of some of the principles of building and deploying a website. There are plenty of tools to help with layout too.
My developer/agency/freelancer/mate says it takes ages to build websites and that it’s hard!
They’re absolutely right. What we’ve just done here is like taking your first ever driving lesson — I wouldn’t recommend after that you hop in a Formula 1 car and speed around Monaco at 150mph. Design, copy, build and maintenance of websites are all very specialised jobs. But at least you can now understand what’s possible – and if you fancy learning a new skill, web development is an incredibly rewarding one.
This may be fine for little projects, but you can’t run production sites on Netlify, can you?
Yep, you can. We do here at ALIAS for some of the world’s biggest companies. It’s a god-send for campaign microsites, one-off landing pages and the like. Of course we also host sites in HubSpot, WordPress, Marketo, Eloqua and on custom servers. But Netlify has a whole raft of more advanced featured not covered here – including facilitating serverless functions, an in-built identity management service, form handling and more which allow you to build almost anything you can imagine on the platform.