The making of this website
18 May 2023
Although I am a web dev by trade, I actually have little experience making a website from scratch. I have worked on existing projects using a variety of technologies, but never had to decide what tech stack to use since someone else has already made that decision for me. So when I set out to make this website, I, like the foolish rube that I am, decided to google “How to make a website”.
Why not try doing this yourself? Go ahead, I’ll wait.
Did you receive any actual advice about HTML? Hosting advice? Even just general advice about what tech stacks are currently in style? Of course you didn’t! You got pages and pages of adverts for web template builders like squarespace or wix or whatever.
Now, don’t get me wrong, for some people, these services are exactly what they need to get an online presence. But for me, who wanted to make a website as a creative exercise, it was just really frustrating.
So, this is what this blog post is here for. I am going to share my experiences in the hope that someone who wants to make a personal website reads it and finds it useful.
Concept phase
Function
The first thing that I considered was what I wanted to put on my website. As someone with a bunch of existing social media accounts on which I have posted various creations, this was an easy question to answer: I wanted to show off all my various creations in one place.
This is an important question to ask, because a website is a document and (in my opinion) the form of a document should follow its function. If I create a really pretty website that is hard to navigate or is outright inaccessible to certain users, then it is not fit for purpose.
For my purpose of showing off my creations, I knew that my website had to do these things:
- Have pages that put my creations front and centre.
- Categorise and present my work so that it’s easy to find.
So, the resulting structure would be a tree of pages with inviting image links that lead to content pages that put the main image front and centre.
Aesthetic
Once I knew the overall structure, I needed a unique aesthetic for the site. I am by no means an expert graphic designer, so I needed something concrete to tie everything together. I remembered reading a really interesting article about the design of Nier: Automata’s UI, in which the UI designer, Hisayoshi Kijima, explained that he used a subtle musical motif to give the UI its unique flavour. This inspired me to find something important to me to base my website on.
The answer came in the form of the runners that my Gunpla kits come on. The grids of lines and content (parts) translates really well to the structure of a web page, and so with that in mind, I drew my first designs.
By the way, I toyed with the idea of using vector programs for my website sketches, but I very quickly realised that dotted paper and a pen is much more immediate. Don’t neglect your physical media!
You should be able to see the rather literal translation of the shapes in a runner to the sections of the website. Most of the experimentation at this phase was just trying out different ways of filling negative space, inspired mostly by textures that I’ve seen in WipEout games over the years. I will freely admit to stealing a lot from WipEout, but can you blame me? They’re consistently the best looking UIs on whatever system they appear on.
Next, I played around with different ways of presenting content. My designs are a lot more visually busy than I ended up with, which is mostly a concession to readability and ease of implementation.
When I was designing title formatting and icons, I used a lot of arrows as core elements. This is another thing that I stole from WipEout; arrows are just inherently a dynamic and cool shape because they are pointing somewhere.
By the way, did you notice that the website logo is an arrow in negative that vaguely looks like a ‘K’?
Custom font
At some point early in the process, I drew out a custom font that was intended to serve as the typeface for the logo and headings. Ultimately, I only used it in headings and some icons because some of the characters have low readability.
I think the font finds a good balance between being geometric-futuristic and playful. My favourite feature is that the ‘a’ and ‘e’ characters are rotationally symmetric, which I emphasise by aligning them vertically in my logo.
Web development
I have released the source code for the website here: kyratech-website.
Choosing a tech stack
As a professional web developer who has worked on web projects for large national brands…I only have experience working with full blown web apps; dynamicly generated pages in a MVC architecture that are backed by big databases and CMS softtware.
Whew! That’s a lot of overhead (and energy use) for my little website. I don’t need to handle user input or store data, I just need to serve some web pages with some pictures on them.
So, I knew early on that I would be making a static website somehow, but a question remained: how do I do that? The classic argument is “open notepad.exe and bash out some html files!” And like, I get it. Starting web dev shoud be frictionless. But I was thinking about my future self and the amount of effort she would need to maintain the website.
If each page is just a raw HTML file, then what happens if I want to add a new item to the navigation bar? I would have to copy and paste the updated nav bar to every single page in the website. Even at its first release, the website was big enough to make that unreasonable.
So, I went looking for a static site generator.
These are frameworks that will turn a bunch of templates and page fragments into a set of HTML pages which you can then upload to your web host. There are many about, but after some frustrating googling, I ended up with Jekyll.
When I told my techy friend about my decision, the response that I got seemed to be the text equivalent of someone pursing their lips.
From what I understand, Jekyll is a bit long in the tooth, and these days there are better options. So, I don’t think that I can recommend Jekyll specifically if you want a static site generator, but I will say that it filled every requirement that I had and I don’t regret using it. But I’m not in love with it either.
In progress screenshots
My process for developing the website was to take a single feature and implement it, using whatever placeholders needed to test it as I go. The aim was to reduce the amount of different things that I was juggling at any one time. I feel like this was fairly successful, and as a result, you get to see a gradual process of my website becoming more complete over time.
The very first version of my website was in monochrome, but you can see that I already had the structure of the runners implemented. There would only be minor changes to this by the time the website was complete.
That box in the nav bar was never intended to be a search field, I was just looking for an interesting pattern to go up there.
The first version of the “gates” that would connect the elements of the page had them always coming in pairs. I soon decided that a single gate on each side vertically centred looked better.
The first version of the website’s colour scheme was very light compared to what I ended up with. I am not actually the biggest fan of very dark user interfaces, as I find that bright text on dark backgrounds can cause me eye strain. Obviously, I ended up with a fairly dark website, but the contrast is not as high as it could have been; this is about my limit for what I find comfortable. There’s no denying that the dark blue looks a lot more interesting than the light grey seen above.
The first version of the home page hero banner used an older version of my avatar character. I only really changed it because I updated her design. Otherwise, I still like this drawing.
In contrast, I don’t really like the first version of the Mechlab hero image. It’s poorly balanced horizontally and my idea of having a full size gunpla actually just makes my character look tiny.
Whilst implemeting content pages, I used some placeholder images. I just grabbed appropriately sized picturs off my hard drive, which ended up being FF14 screenshots.
Over time, I started to dislike how desaturated the website was looking. I wanted a neutral background with splashes of vibrant colour, but there was just too much grey in my initial colour scheme. I experimented with colouring in parts of the runners in bright colours, but as you will see, I decided that this was not enough and I ended up overhauling the whole colour scheme.
To get inspiration for a new colour scheme, I decided to look up palettes that people had put together for pixel art. These have the benefit of using a limited number of colours, which is good for achieving a consistent look in a UI. The background and text colours are actually taken directly from one of the palettes I found: Sirens at Night. I kept the grey-blue colours as a neutral ramp, then paired them with shades of bright blue and yellow to show off my Feisar loyalty.
My friends insist that the blue and yellow are actualy for brand synergy with Refreshers, a type of sweet that we have in the UK.
It is important to have fun when entering placeholder text. For example, in one of my test blog posts, I express the sapphic yearning that consumes my very soul.
Setting it up
After I finished making the website, I needed to work out how I was going to put it on the internet. Basically, there were two main options:
- I host it on my own hardware.
- I buy a shared hosting plan.
I have a Raspberry Pi 3B+ sitting around gathering dust and I wondered if I could use it as a web server. Given the static nature of this site and the low traffic that it would receive, a Pi would have absolutely been powerful enough to host it. Additionally, it would have been financially sensible: I worked out that running the Pi for a year would have cost me around £6 worth of electricity, compared to the £3 per month that most shared hosting plans would cost me.
However, hosting web content on my own network would have exposed it to potential security risks. After deliberation, I decided that I do not know enough about web security to want to take that risk, and so I went looking for a web host instead.
Choosing a web host
Yeah, I don’t think I can advise you on this. I am hosting this with Green Geeks and I have: no problems with them. I am sure that most hosts are going to be fine with a low traffic static site.
Uploading my website
The tutorials provided by Green Geeks weren’t particularly interested in teaching me how to get my site working. There were plenty of resources to help me get started with wordpress, but I just had a bunch of HTML to stick on the web!
So, this is how you get a static website onto a web host that uses CPanel:
- Create a FTP account using the console of your web host. Grant it access to the folder on the server called “public_html”.
- Use a SFTP program such as FileZilla to connect to your website’s FTP server.
- Copy all your static files across into the “public_html” folder.
Yeah, it’s really just a case of putting your website files into “public_html”. That’s something that I wish I knew earlier.
Conclusion
The making of this website took a lot of experimentation and reading documentation. If I have any advice, it would be to learn to love the process. Some weeks, all you might achieve is making a single button look cool, but if you can find joy in something as simple as that, you’ll soon find yourself on your way to having a finished project.