Hand Coding A Personal Website

Last year, I had something of an epiphany about web development. I realised I didn’t really know how anything worked.

Every website I’d created until then had relied on a CMS, namely WordPress. It was only when a bad plugin utterly botched the database tables leaving me helpless that I realised how little control I actually had over my precious creations. I count myself lucky that one of my friends is a wizard with PHP.

I’m not out to diss WordPress. It’s a fantastic piece of software and I still rely on it daily. However, it’s also a complex, dynamic, database-driven piece of kit – as a non-developer, a real understanding of how your site works entails learning a lot of code far beyond what is actually necessary.

This prompted me to return to the fundamentals. I wanted to create a website from scratch, without using a CMS, and using only code I fully understood – or, where possible, that I wrote myself.

Here, I’ll be sharing some of the tips and advice that I found useful along the way. This guide will assume a firm grasp of HTML and CSS, and as such we won’t be covering the actual design process (although we will cover some great design tools and timesavers!). Instead, we’ll be exploring the nuts and bolts that hold your website together – the things that are most often taken for granted when relying on a CMS.

Is This For Me?

The good news is you don’t need to be a developer to hand-code a simple site of your own. And I mean a site that’s really your own, built just the way you want it and with full control from the ground-up. What’s more, it can be beautiful, responsive, SEO-friendly, and you can blog with it. All that’s required is a healthy dose of persistence.

Before we begin, three caveats. I would only recommend giving this a try if:

You’re a bit of a control freak

If you like building things online, tweaking every last detail of a project until it’s perfect – even if that means learning something new – great. If, on the other hand, you like being able to seamlessly publish your writing with no technical hurdles (which is certainly no bad thing!), then this probably isn’t for you. It requires a lot of fiddling just to get things up-and-running.

You’re not fussed about blogging on the go

Personally, I’m quite content to write locally on my laptop and publish it later. But if that’s not your cup of tea, and you enjoy the flexibility afforded by the WordPress mobile app (or similar), then stick with that.

You want something simple (but infinitely extensible)

With sufficient time and effort, anything is possible. But I’d suggest starting small and taking it slowly, at least at first. If you require a multi-author blog with categories, tags, subscriptions, and search functionality all from day one, this isn’t for you.

Still here? Great! Let’s get started.

A Head Start: Boilerplates and Grids

We’re not going to be using a full framework like Bootstrap or Foundation (as powerful as these can be). Instead, we’re going to be starting with something more fundamental – after all, the goal is to build something, rather than adapt something.

I would suggest checking out the HTML5 Boilerplate. It’s the combined work of hundreds of developers, chock full of best practises, and is used by the likes of Google, NASA, and Nike. It includes Normalise.css, the modern alternative to a full CSS reset, and the bare minimum of styling – you’ll find template media queries, print styles, and helper classes, without any of the constraints or design idiosyncrasies of a full framework. It includes Modernizr, to get you started with mobile-first progressive enhancement, and the entire codebase is heavily commented with explanatory notes (and often links to helpful articles). It’s a hugely extensible head start to your project.

I’d also suggest reading up on the different approaches to responsive design, including grid systems and fluid layouts. After four years, Ethan Marcotte’s article on A List Apart is still an excellent introduction for anyone looking to get to grips with modern web layout approaches.

Local Development

We want to develop our new site locally (i.e. without an internet connection). Installing a local web server is not difficult or time-consuming, and – because it simulates how your website will behave online – it will make the eventual transition to a live server extremely easy. You can configure things like 404 pages, clean URL structure, redirections, and it means you can use root-relative URL paths.

If you’re on Windows, you can use XAMPP to run a local Apache server – it takes less than 10 minutes to set up, and there are plenty of helpful tutorials out there. For Mac users, MAMP is my program of choice – the free version is more than sufficient if you’re just getting started. The documentation is also excellent, with step-by-step instructions for getting your local server up-and-running.

The Fun Starts

If you’re anything like me, you learn by doing, not by reading, so let’s get cracking. Download the current version of the HTML5 Boilerplate on from GitHub (4.3.0 at time of writing), unzip the package, and place the files into your local server’s web content folder.

The boilerplate doesn’t use any CSS preprocessors, so you needn’t worry about compiling your code or using any special tools to start development. If, on the other hand, you’re already familiar with LESS or SASS, it couldn’t be easier to introduce one of these into your workflow. Both are backwards compatible with CSS (assuming you’re using the SCSS syntax of SASS), meaning you can use all the existing code in the boilerplate, whilst still enjoying the benefits of operations, mixins, and variables. Just grab your compiler of choice and you’re ready to go.

You only thing that you definitely will need to get started is a text-editor with syntax highlighting. Sublime Text is probably the most powerful option, but Notepad++ is an excellent free alternative.

The best advice I can offer at this point is simply to start experimenting. Familiarise yourself with the source code and structure of the boilerplate by creating some media queries and designing some nifty page layouts. Create a horizontal top menu bar that stacks vertically at tablet size and below. Design a page that completely changes at a particular resolution, its elements dynamically altering in width in response to the browser resizing.

Remember, this is your site! You’re not constrained by a framework, theme or template; create a layout to suit your needs.

Design Tools & Resources

When it comes to design, everyone has their preferred way of doing things. You know your favourite combination of image editor, code editor and browser, and you know the methodology that works best for you. Therefore, instead of re-treading old ground, I’ll simply offer some of the resources I keep bookmarked:

For colours, Adobe Kuler: Create a colour-swatch for your site. You can copy and paste hex codes, utilize a variety of schemes (complementary, analogous, triadic), and browse popular combinations. Side note: if you’re using LESS or SASS, don’t forget to set global variables for your colours, a massive timesaver that helps consistency.

For typography, Google Fonts: There’s a lot of chaff here, but plenty of great web fonts too. Experiment with combining different families and previewing the results.

HTML5 & Best Practices

One of the advantages of hand coding your own site is the ability to scrutinize every line of code that goes into it. You may as well take this opportunity to make your site a shining example of best practises, and sharpen your code to a razor edge.

Supplement the excellent links and comments in the boilerplate source code with the HTML5 Doctor, a fantastic reference for learning about the latest HTML elements, and you should be set.

Server Configuration & .htaccess

Whilst almost everyone has heard of .htaccess and knows roughly what it does, far fewer have actually had to use it. The .htaccess file – note it is just ‘.htaccess’, not ‘htaccess.txt’ – is an ASCII text file that sits in the root directory of your site, and can be used to control the server that you’re being hosted by (whether that’s local or remote).

The boilerplate contains a fantastic htaccess template which includes dozens of well-commented examples. I’ve listed some of the most common uses of .htaccess below – note that anything preceded by a hash (#) is a comment and will be ignored.

Custom error pages

Apache

1

2

3

# Return custom error pages by error type

ErrorDocument404/not-found.html

ErrorDocument403/forbidden.html

Redirects

Apache

1

2

3

4

5

6

7

# 301 redirect all WWW subdomain traffic to the non-WWW equivalent

<IfModulemod_rewrite.c>

RewriteEngineOn

RewriteCond%{HTTPS}!=on

RewriteCond%{HTTP_HOST}^www\.(.+)$[NC]

RewriteRule^%{ENV:PROTO}://%1%{REQUEST_URI}[R=301,L]

</IfModule>

Security

Apache

1

2

3

4

# Block directory access

<IfModulemod_autoindex.c>

Options-Indexes

</IfModule>

A lot has been written on how to use .htaccess (it’s an art in itself), so rather than reproduce it here, I’ll link to Nettuts comprehensive guide.

Getting Your Site on the Interwebs

When you’re happy with your new site and have tested it thoroughly in a variety of browsers and devices, it’s time to stick it online. Whilst it’s highly advisable to eventually transition to a proper deployment strategy, ideally incorporating version control and automatic backups, we’re going to stick with vanilla FTP for now. We’ll use the free FTP client FileZilla to copy our site’s files to the web server.

Don’t yet have a hosting provider? No problem. I would recommend trying Tsohost – their cheapest monthly package includes 4 hosted websites and 20GB of monthly traffic, which is perfect for our purposes. Their cloud hosting platform is very easy-to-use, and they also offer well-priced domains in all the major TLDs, should you still be undecided as to where your site is going to live.

It takes a lot for me to sing the praises of a particular company, so understand that I don’t say this lightly: Tsohost are genuinely one of the best companies I have ever used, for anything. In the year that I’ve been with them, I’ve submitted dozens of support tickets and they’ve always gone out of their way to help me, even if the root cause of the problem was my own stupidity. So, if you’re in the market for hosting, give them a try.

Add your chosen domain to your Tsohost cloud dashboard, and hit FTP Accounts under Basic Management Tools. You’ll need to click the Add New FTP Account tab and choose a username and password. Leave Home Directory as it is, and click Create FTP Account. Next, fire up FileZilla, and in the fields at the top enter your host (ftp.yourdomain.com), username and password, then click Quick Connect. Drag and drop your site files from your local server folder into the ‘public_html’ folder on the web server, and you’re done!

Open your browser, navigate to your website, and check everything works as it should.

Where Next?

The world is your oyster. You’ve done the hard part – you’ve created a little corner of the internet that’s entirely your own. You’re familiar with every file and line of code that makes up your website, and you’ve taken a crucial step towards creating your own personal brand (if that’s what floats your boat).

What comes next is up to you. Every new feature you implement and bug you fix is a chance to learn how websites really work: rather than simply copying chunks of code into your project, take the opportunity to deconstruct the existing solution, understand how it works, and perhaps modify it to meet your needs. Having laid firm yet flexible foundations, freeing ourselves from pre-set options, there are no roadblocks except gaps in our own knowledge. And with thousands of great tutorials out there, these can easily be filled.

My site, in case you’d like to take a look, is at bennet.org. On my roadmap for the future are comments and RSS feeds, and I’m also considering utilising a templating tool to ease the process of creating new posts and pages.

Thanks for reading! If you found this guide helpful, please consider sharing it with your friends and followers. I’d love to hear from you in the comments.

@Mike – Thanks, I’m glad you liked the article.
@Daniel – I agree, learning the nuts & bolts in this way can put you a step ahead. A solid grasp of code is something that more SEOs should have. Thanks for your comment!