;

I built a pixel-style website and named it aardwolf.space!

scotty - 11/03/2018

I’ve been in love with 80s games when I was a kid, and alway curious how those brilliant things were made. I’m a web developer now, struggling with customer’s projects everyday, but still thinking about making a fancy stuff likes my childhood passion.

One day, after a long time did nothing for myself, wandered in the dark, I decided to build a website for me to express my soul and share thing I knew to everyone who cares. I didn’t know how to start, how to make my own style, I just did it, coded it and here I am with a pixel style website name aardwolf.space.

Building a website today not too difficult, just few clicks and boom, your site is published. But making a thing with your own style and passion is another story, I’ll try to explain how I build this in a simplest way. Maybe it’s not easy like sunday morning, but not too hard for anyone who love to try.

Choosing a web-based platform & hosting

There is a bunch of web platforms you can choose to build your project like Drupal, django, Wix, Squarespace etc. I’ve chosen WordPress because this is my expertise, I’ve worked with PHP and WordPress for a long time, moreover it’s is one of the most popular framework, easy to use, with a ton of plugins can handle everything you wish.

I bought domain aardwolf.space on Godaddy and tried to host on this service, but hosting my site on Godaddy was not stable, server dropped frequently. I’ve change to AWS, setup my own VPS with Bitnami WordPress and everything works like a charm. The only thing remained was coding.

My development tools

My former boss said: “A good worker is the one who loves his tools”, yep I alway remember that words.

Actually I mostly use 2 tools in my developer career: Sublime Text and WinSCP, definitely I love to use it, it likes the sword and the shield..

  • Sublime Text: is the best code editor I’ve ever used so far, simple, easy and can beat every language.
  • WinSCP: can connect to every server use FTP, SFTP and SSH, edit remotes file in 1 note.

For me, it’s enough to build a good website, there are some addon tools like: GIMP for edit images, Inksape for edit vectors in some specific jobs (which I never use because I don’t like images in my site).

Writing a wordpress theme

There are many ways to make a wordpress theme, building from scratch or based on a blank theme. I used Undercores as my blank theme, this is one of the best wordpress based theme so far.

I use PHP, HTML, CSS, jQuery to complete every part of theme. There were some unique functions I had to write by myself, but there were a lot of open source functions  I just used.

  • PHP for theme functions and page templates
  • HTML, CSS for layout, custom stylesheet and animations.
  • jQuery for client actions, effects and behaviors

To make theme look likes pixel things, I used some raw techniques and some pixel resources

  • The aardwolf logo was written by jQuery, using loop array of squared colored divs.
  • The pixel font I used pixelFJ8pt1 and Pixel Dingbats-7, download from 1001fonts, and converted the .ttf font to woff2 by using transfonter
  • The space loading I used particle.js, customized it a little bit to make it feel more pixeling.
  • I didn’t use pixel font for entry content, Courier New is my favorite font

Using wordpress plugins, definitely!

WordPress without plugins is also same as house without furnitures. I usually use plugins with  minor customs and it works perfectly.

Ok then, I hope I could write step by step what I’ve done to finish this site, I’m really happy to share my experiences of building a website for everyone who cares.

reference sites

dig more in Web Designer

external links

comment

search

the search for spock