Hand Coding A Personal Website

lego-aldrin-mars

Last year, I had something of an epiphany about web design. 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:

  1. You’re a bit of a control freak
  2. 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.

  3. You’re not fussed about blogging on the go
  4. 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.

  5. You want something simple (but infinitely extensible)
  6. 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 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 OpenDAWS (Open Digital Application Wireframing Styleset), by our very own Pete Wailes. In its own words, it’s a huge set of resets and helpful classes, as well as the logic for grid layouts, but without any of the constraints of a full framework. It’s not heavily pre-styled, it’s hugely extensible, and it’s free! Naturally I’m biased, but I’d say it’s ideally suited to our needs.

I’d also suggest reading up on the different kinds of grid system – it’s important to appreciate that a variety of different techniques can be used to achieve what is commonly referred to as a ‘responsive design’. I found Joni Korpi’s Frameless and Golden Grid System to be particularly helpful in understanding some of these principles.

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.

I recommend using XAMPP to run a local Apache server – it’s cross-platform, takes less than 10 minutes to set up, and there are plenty of helpful tutorials out there. Once it’s up-and-running, you’ll be able to point your browser of choice to http://localhost to access web content in C:\xampp\htdocs, or wherever you installed it.

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 OpenDAWS (4.5.2 at time of writing), unzip the package, and place demo.html and the css and images folders into your local server’s web content folder.

A quick primer on OpenDAWS: it uses LESS, a CSS pre-processor and extension to the CSS language. If you’ve never used it before, don’t worry – it’s backwards compatible with CSS and uses the same syntax, meaning you can use all your existing code. It allows you to use operations, variables and nested rules, all of which are wonderful and will save you many hours of your life.

You need two things to get started: the first is a compiler, to convert your lovely LESS into regular CSS. I recommend trying SimpLESS – it’s free and super-easy to use. The second is a text-editor that supports the LESS syntax – the fantastic Sublime Text has an add-on package for doing just that.

You’ll notice that OpenDAWS comes with a series of stylesheets corresponding to different screen resolutions. These – along with your size-agnostic layout rules (style_0.less) – are imported into the main style.less stylesheet with media queries, which check the width of the user’s browser.

Perhaps I’m just thick, but it took me a little while to get my head around this – hopefully the diagram below will offer some clarity. Open the blue files and you’ll notice that they’re mostly left blank for us to edit.

open-daws-diagram

Compiled.css – The finished CSS stylesheet, output by your compiler.
Compiled.less – The main OpenDAWS styles and logic. You don’t need to edit this.
LESShat.less – Not fashion advice, but a mixin library which extends LESS even further. You don’t need to edit this.
Style.less – Blank for your own styles. Mixins, imports, classes, overrides, etc.
Size_0.less – Blank for your layout rules (non-size-specific).
Size_640_800.less, Size_800_up, etc – Blank for your size-specific layout rules, xxx corresponding to a particular range of resolutions.


The best advice I can offer at this point is simply to start experimenting.  Familiarise yourself with the source code and behaviour of OpenDAWS by designing some nifty page layouts. Try creating 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: don’t forget to set global variables for your colours in LESS, 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.
  • For icons, Font Awesome: Huge collection of scalable vector icons, all customizable with CSS. Glorious.

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.

I would suggest reading the HTML5 Boilerplate source code – it’s the combined work of hundreds of developers, chock full of best practises and everything is heavily commented with explanatory notes (and often links to helpful articles).  Supplement this 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 can be used to control the server hosting your site. Create it using your usual code editor, and save it to the root directory of your site. Be sure to test it using your local server.

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

# Return custom error pages by error type
ErrorDocument 404 /not-found.html
ErrorDocument 403 /forbidden.html



Redirects

# 301 redirect all WWW subdomain traffic to the non-WWW equivalent
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>



Security

# Block directory access
<IfModule mod_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. I’d also recommend checking out the template .htaccess file in the HTML5 boilerplate, which contains dozens of well-commented examples of common techniques.

Getting Your Site on the Interwebs

When you’re happy with your new site and have tested it thoroughly in a variety of browsers, it’s time to stick it online. We’re going to 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 nicest 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?

lego-spacewalk
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.

Image Credit

Lego Earth-Mars Cycler and Lego Spacewalk, by Andrew Becraft

Hand Coding A Personal Website, 5.0 out of 5 based on 7 ratings

Comments

  1. Daniel Cuttridge

    Props man! I used to hand code everything myself… I considered anyone who didn’t write code by hand to be a bit of a fraud.

    As time went by I got more into marketing as it happened, but the thing is that understanding how it all worked has always served me well.

    Starting off in web design then going into marketing was by far better than doing it the other way around in my opinion as I was always a step ahead rather than on the backfoot.

    I never really liked using grids or boilerplates either. I don’t know really anyone elses code but my own almost seemed like a foreign language even when commented etc!

  2. Tom Bennet Post author

    @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!

  3. David Martins

    Hi,

    I’ve just read the article and I’ve mixed feelings about it. I think it’s awesome and agree with the way you put the need to learn about the “nuts and bolts that hold your website together”, yet there’s 1 thing that annoys me.
    In the “The Fun Starts” section, you by telling us to download a link called openDAWS, and talking about LESS, etc.. I just didn’t understood why you mentioned this.. what’s wrong with writing css without “compiling” it? What’s the use of LESS anyway? Sorry, I didn’t get that!

  4. Tom Bennet Post author

    @David Hi, thanks for your comment!

    You don’t have to download OpenDAWS – if you’re a real glutton for punishment, you can code your own responsive/adaptive framework! I suggested OpenDAWS because it’s a helpful head-start without being overkill. It’s lightweight and not heavily pre-styled, meaning you can really make it your own. It’s also very neatly coded, making it easy to learn your way around it.

    As for LESS, I used to be skeptical too! It’s completely optional – there’s nothing wrong with using vanilla CSS. However, a pre-processor like LESS really can be a huge timesaver – it allows you to use variables, nested rules and more. You can read about it here: http://lesscss.org/features/

    I hope that helps, thanks again for reading.

Leave a Comment

*