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.
- 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.
- Advanced custom fields for every single project I’ve done, any type of fields I want in post type.
- AJAX Login and Registration make your login and registration task are easier than ever.
- All In One SEO Pack no more struggle with Google or another search engines.
- All In One WP Security no hackers or harm bots love my site
- Autoptimize make my site runs like a Lamborghini, Google speed insight nearly 100 :))
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.