nkgpt

Making a Home on the Wild Wild Web

Nearly Free Solutions for a Designer's First Portfolio

Web ・ July 17, 2016 ・ 7 mins

Welcome, plucky new designer and prospective portfolio owner to the Wild Wild Web (so wild, it has to be said twice). It’s an information-dense frontier where everyone and their horse is trying to fleece you for your time and/or hard earned gold - especially if you’re trying to set up a new digital homestead. But wait! Some savvy varmints know how to survive in this wilderness with a website costing next to nothing. You too can join them for less than a bottle of the finest sarsaparilla. Interested? Read on…

Wild Wild Web

As I take off my cowboy hat, I want to talk about the tools needed from a high-level perspective. Although this is introductory, you’ll find more detailed guides at the respective resources. Fair warning: only proceed if you’re willing to use an established free HTML template or similar… or better still, code the front-end yourself. Your only costs will be towards domain names and depending on your chosen name, this could work out to be very cheap as well. If any of this doesn’t sound like you, turn around now.

Onwards!

The essential elements of a setup can be broken down as below:

  1. Some web space to host your content.
  2. A brand-friendly domain name to point people to your site (hint: .com domains are still popular and competitively priced).
  3. Bonus: A content management system for any blog posts you may want to write, much like this one.

Let me demonstrate these via specific examples from my own journey of discovery…

1. Web Hosting Space

I wanted to see where I could reduce my server-running overheads so I looked to Amazon Web Services (shortened to AWS). The business model for AWS has a low friction adoption curve meaning that new users to the service can ride on their platform for free based on low traffic interaction. This is brilliant for a portfolio site in its early days where few visitors may drop by erratically and unpredictably.

I deployed one of their S3 buckets (‘Simple Storage Service’, essentially an FTP server) which also conveniently allows files to be viewed publicly. I can’t stress how good an offering this is because you can effectively host an entire website, as long as it is static, without any cost whatsoever. Register with AWS here

2. Domain Name

The first thing I did, even before grabbing web space was securing my own domain name – I look at domains like digital real estate – once it’s bought, it’s yours and will appreciate in value depending on what you build in that space.

All of my domain purchasing is done through Namecheap which I discovered based on professional recommendations. I’m not a big fan of their business’s name but they don’t lie – the domains here are cheap and the company has grown massively in the US west coast against the bigger and more established brands. They also have a great stance on net neutrality, unlike a certain “GreenlightFather”.

The Namecheap interface is responsive and slick, has multi-factor authentication (MFA) available; and although domain hosting was enough for me, if you so wished you could use them for your entire web deployment needs. Register with Namecheap here

3. Blogging Space (Optional)

To complement my static content, I wanted a blog to convey my own thoughts and provide impetus for visitors to return. Unfortunately, this type of site acts as a purveyor of dynamic content. If you’re smarter (and more confident) than the average UX design bear, you can take advantage of AWS again and deploy a micro Elastic Computing (EC2) instance for free – I’ll lay this out at some point in a future post.

I didn’t have time to run a server so these were the fastest deployments I could think of: Medium is an excellent platform with incredibly easy and consistent formatting, but it goes lone ranger when it comes to a specific visual theme you may have in mind; making my visitors’ experience a continuous one meant I had to look elsewhere. Blogspot by Google is also a very good solution, especially for its biased SEO properties, however its thematic template design offerings were rather weak to convey a designer’s site.

In the end, I went with WordPress for the great customisation, excellent theme choice and ease of use. WordPress blogs are naturally free provided you allow a little unobtrusive advertising to exist – there really is no such thing as a free lunch! There’s even an option to attach subdomain to your main domain, i.e. blog.myawesomedomain.com. Although there is a cost, it’s worthwhile to give your users confidence when they see the URL of your blog that they’re still within the same site and experience you’re providing. Register here with WordPress

In Closing

Once you have all these, you’ll need to have a clear idea of how your site will look and the code you want to implement to make them a reality. Despite being out of scope for this particular article, I’ve mentioned some of the tools I used on my Mac to get my site built.

I just want to add I’m well overdue for the next iteration of my portfolio site. This one started as an extended exercise of my HTML, CSS and JS skills but I feel it doesn’t quite meet the high standard of other portfolio sites out there in the World Wide Wow (the impressive part of the internet).

But… this first version met my needs. The total annual running cost for my site is sub-$10. For this, I get to show my projects to the world, have the satisfaction of knowing I built it myself and can demonstrate my front end coding skills to potential clients! Not too shabby for a first portfolio site.

TL;DR

Platforms

  • Amazon S3 – essentially an FTP server to store all your web content (link)
  • Namecheap – easy to use domain name management at low cost (link)
  • WordPress.com – useful and free CMS for organising blog posts if you plan to write regularly (link)

Tools

  • Sketch – for wireframing and prototyping. Also useful for vector graphics including icons.
  • Photoshop – to touch up photos for publishing; powerful image manipulation tool.
  • iTerm – to spawn new files, manipulate existing ones and upload easily to AWS S3.
  • Visual Studio Code – to write HTML, CSS and JS.

More recently

Designing for Opinionated Animals

Automating Admin Assistants

Back to all posts