Half-Elven
games
tutorials
blog
about

Building this website

Building this website is really fun - but mainly because I've taken the time to make easy-to-use-tools, and I would like to tell you about some of them.

Is Copy/Paste a friend or foe?

So when you make a static website, you start with the index.html, so that's where I started. I quickly coded up something along these lines:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>Lorem Ipsum</p>
    </body>
</html>

Fine, easy. Then I created a style.css, and coded up some simple style sheet rules. Then I decided I wanted a Title Bar on my webpage, so I added this:

...
<body>
<div class="titlebar">
    <a href="link1"><div class="entry">Obj 1</div></a>
    <a href="link2"><div class="entry">Obj 2</div></a>
    <a href="link3"><div class="entry">Obj 3</div></a>
    <a href="link4"><div class="entry">Obj 4</div></a>
</div>
<...>
</body>
...

'That'll do for now', I thought, then I went to creating all of my base directories. I wanted a blog, games, tutorials, home, and about page. I added directories, then created all of the html files. I then Copy/Pasted all of the code from the original page into all of the new pages, and created new unique references to the other pages. It was tedious. That's when I realized I wanted... something. That something didn't really have a name1 so I dubbed it a Templating Engine. I wanted to be able to say things like this:

...
<body>
    {{TITLE_BAR}}
    ...
</body>
...

And the engine would go and grab the references and such, and insert the title bar into the page. So I quickly opened up my handy-dandy-sublime-editor, and whipped up a Templating Engine. I named it stitcher.py2, and BOOM - my website became way easier to edit3. So I got editting, and then I got to the point where I wanted a blog.

After hacking around on a custom blog 'engine' for a while, I realized it was much too tedious to manually add a new blog post. Writing a post I didn't mind4, but adding one into the main blog page, then manually adding the blogpost contents into a dated directory? Forget it.

This seemed easy, but I wanted the program to work everywhere and be packaged together nicely with a slick GUI. Sounds like Java5, so I popped open my takes-forever-to-open-eclipse-IDE. I was able to quickly code up a program that would take my blog content (from a .html file), and put it into it's own directory based on the current date.

So, from this experience I learned it's important to automate large tasks, and taking them in bite size pieces is best. This website is far from done, so I'm excited to see where it will take me. Automation tools are also nice because they let you focus on something different for a little bit of time.

  1. At least I couldn't find anything on them, but if there is a real one please tell me. I know you can use the C Preprocessor to do this... ↩

  2. Get it? Stitcher!? It stitches all of the files together! ↩

  3. Although now, I had to compile it until I could use it, but whatever. ↩

  4. Especially with new tools like http://markable.in ↩

  5. Please don't squeal in disgust. Java isn't that bad, and it worked great for my little tool. ↩