Making a website for free

Intro

First off, I’m not saying my websites are anything special.  They’re not.

However, they are mine.  They weren’t difficult to design, they weren’t difficult to code, and they’re easy to maintain.  Best of all, they’re FREE.  Except, of course, for the cost of owning my own domain name (https://susandennard.com) and the annual fee for hosting the site (I use ICDSoft and highly recommend them).

To get your own free site up and running, here’s what you need:

  1. WordPress
  2. GIMP
  3. A WordPress parent theme
  4. Firefox
  5. Firebug
  6. A simple word processor
  7. archive.org

It might seem like a lot, but keep in mind that it’s free and open source.  Open source = good.  And, keep in mind, I have zero training in website design.  When I started, I knew nothing about HTML, CSS, PHP, or graphics manipulation.

I taught myself how, and you can too.  Let’s get started.

The Steps to Website Design

Step 1:

Install WordPress.  There are lots of tutorials on how to do this.

Step 2:

Decide on a parent theme.  Essentially, rather than code a WordPress theme from nothing, you can use a precoded, simple theme (a.k.a. a parent theme), modify the code, and end up with the theme you want (a.k.a. child theme).

The thing you have to understand when using WordPress is that, unlike a basic HTML site, it uses multiple PHP files (e.g. header.php, sidebar.php, page.php) to create the website. The look (or style) of the site is dictated by a style.css file. These multiple files are then all collected and organized via a single index.php file.

So, when you take a parent theme, you take these pre-created PHP and CSS files, and then you adjust the code according to your own needs. Again, this is covered extensively online.

***I can’t lie: it’s not easy at first.  If you have no understanding of HTML, CSS, or PHP, it will be downright overwhelming.  The key is in trial and error.  And that’s where Firefox and the Firebug extension come into play.***

Step 3:

Using Firebug, mess around with websites (including your own and the parent theme) to start to figuring out how the PHP files and CSS file work together to create the website you see.  Seriously, if I can teach myself how to do all this, then I’m certain you can do the same.  Don’t be scared.

Here is a really great, really simple tutorial to get you started.

Step 4:

Install GIMP, and familiarize yourself with the basics of the program.  If you’ve ever used Photoshop, then this will be easy for you to pick up. This is a great tutorial, and it covers all your editing needs.  GIMP is a very powerful graphics editor, and it costs nothing (compared to the $1,000 price tag on Photoshop).

You’re going to use GIMP to create the components of your website — the background, the header, the footer, etc.

*********STOP*********

Open up Firebug right now.  You can see what I mean about the images and how they’re displayed.  If you look a the CSS coding for “body”, you’ll see the background image file.  Same for header — you can see where the image is linked to a file.

Now just delete one of those files and look at what happens.  Yeah, cool, huh?

We’re gonna make those files so you can install them in your website.

*********CONTINUE*********

Step 5:

Find any images you want to display on your website.  Keep in mind, that most images on the internet are owned by someone, and that means you can’t just use them.  This is why archive.org has been my life-saver.

If you head there, you can access thousands of public domain books, periodicals, or pictures.  Those are the places in which you’ll find images to manipulate for your website.

An example.  These are the images I found and compiled to create The Spirit-Hunters website.  That’s it — those 11 images plus GIMP and parent theme.  See?  It’s not hard.

Step 6:

Use GIMP to create the various files (e.g. header.jpg, background.jpg, footer.jgp) you need to build up your website.  These files will be uploaded into your WordPress content folder when you’re finished designing them.  That way, when the index.php file assembles your website, it finds the images you’ve created and places them in the spots the style.css file tells it to.

Step 7:

Use Firebug and a word processor (I use Mousepad) to adjust the PHP files and CSS file according to your needs.  Here and here are good tutorials for creating the child theme from a parent theme, and here is a tutorial for using Firebug to create child theme.

Step 8:

Tweak and prune and adjust via Firebug until you get it exactly like you want it.  The great thing about Firebug is that you can use to see what would happen if you adjust the code before you actually adjust the code.  Then, once you know what your style.css needs to be, you can go into the actual file and make the necessary adjustments.

Conclusion

I realize this is overwhelming.  I also realize I’m simplifying.  However, I’m completely available to answer questions, and if anyone wants, I can delve into each step more deeply by creating tutorials for the whole process.  Like I said, though, it’s all about trial and error.  Sort of like writing a novel, you’ve just gotta do it to learn how.

When I set out to create a website, I had no idea what I was getting myself into.  It was a lot of screaming at the monitor, pulling out my hair, and reading tutorial after tutorial.  But now I know.  I will never have to pay someone else to build a website for me.  I can maintain and adjust my sites all by my lonesome.

Trust me: that autonomy makes all the sweat worth it.

-S.