My Website

Creating a personal website is HARD.

I was definitely in the camp of people who before building their own website, thought this couldn't be all that bad. I mean it's a bunch of HTML, CSS and JS. With starter templates and modern AI based completion tools like copilot and chatGPT on my side, I assumed I would be able to whip up a website fairly easily.

I couldn't have been more wrong.

Why did I build this website?

I took a class this past semester on web development and I really enjoyed it but it was taught in Ruby on Rails. While it's a fantastic framework to get you up and running I think it just wasn't a language or stack that's used as much in the industry these days and so I thought it'd be good to try teaching myself a more industry appropriate stack by building my own website.

Why not just use medium, wordpress, wix, squarespace etc.?

I had considered these options before especially because all I really wanted to do on this site was post some thoughts and maybe share some photos. As a photographer I had always wanted to create my own website to display some of my work and in the past I used website builders such as Wix (opens in a new tab) or Squarespace (opens in a new tab) but I always felt like they were too expensive for what I was looking for.

I also don't subscribe to the belief that as a programmer or someone working in the field, you should teach yourself how to build a site from scratch. I think there's a lot of merit in sticking with a no code solution especially if front end engineering simply isn't your forte or in your line of work. No doubt there's a lot to gain from a basic understanding of JS and web frameworks in basically any field but if it's not for you, it's not for you. Stick to what works best and is the easiest for you to maintain in the long run.

I wanted to figure out if front-end work was something I could see myself pursuing and the best way to do that was to try and build a site from scratch.

Hence this.

How did I start?

A lot of people begin by thinking about their requirements for a site. This varies depending on what you're trying to build. Some examples of common websites you might be trying to build include:

• Personal website (what I built)
• Blog
• E-commerce site
• Social media site
• Creative Portfolio

I think the first step here is to go out there and find existing websites with a design that you like. I would heavily dissuade anyone from trying to build a site completely from scratch with absolutely no experience because:

1. It's a lot of work and a lot more so if you also have to teach yourself some of the basics along the way
2. You don't have the experience to know what can feasibly be built. This consequently means you might over-plan or over-design for something you cannot engineer
3. At this stage, you probably also just aren't familiar with the building blocks of a good portfolio website And lets say for argument sake that you do have a good idea for what you might want your site to look like. Do you have the ability to convert a design from say a Figma prototype to a functional product?

Templates eliminate the need for you to write a lot of the boiler plate code and you can focus more on understanding what that code is doing and how its doing it. This means you can modify certain elements of it to fit your needs vs writing it from scratch

Template

The inspiration and primary template for this site came with little effort. As I was solidyfing NextJS as the framework I wanted to use to build this site (because I didn't want to deal the hassle of routing), I came across this template (opens in a new tab) on Vercel's website. I really liked the minimal design and the fact that it was already a NextJS template meant that I could probably get it up and running fairly quickly.

It was also a blog template which I thought was a nice bonus because I planned on posting product content, some musings and a description of any personal work I undertook. I had most of this material stored in my Obsidian vault and I figured maybe somewhere down the line, I'll figure out how to integrate a headless CMS system onto this site but for now, it sufficed to have some sort of blogging capability. It had the added benefit of supporting MDX which meant I could write my posts in markdown and not have to worry about styling it too much.

Customizing your Design

Here's where things get MUCH harder. I think the first thing I did was to try and understand exactly how the underlying code was working, what routes it was using and how it was specifically formatting the page. Unfortunately for me, the Nextra project that this site template was based on was not very well documented and so I had to dig through the open source code to figure out how it was working.

Maybe I should also preface this by saying I hadn't ever worked on a large(ish) scale project on my own before so I really didn't have a clue of how to navigate someone else's code base for reference. I guess that's part and parcel of learning though.

I had the intention of forking the repo and trying to customize the theme separately but compiling it down and exporting it over into my working directory for the site was just too complicated so I resorted to the classic git clone.

While I'd love to share my own repo here, It's honestly not clean or readable in any form whatsoever and I also directly host images and content on the repo so I'd much rather leave it privated. In the spirit of learning I also think it might be best for you to just go through the process of building your own version from the base blog template (opens in a new tab)

The main thing to note in the source code above is that everything that actually compiles down to the theme can be found in the index.tsx file under the src folder. I suggest you start by copy pasting this chunk over into a new theme.tsx file in your root directory and then start modifying it from there.

The utils folder contain some helper function written in React that outside of many other minor necessities, compiles tags, gathers posts and helps relink blog posts to their parent page. I had to do some heavy modifications to my setup by looking at the way each page article was being backlinked to its parent index page.

Some things in the theme are pretty simple like enabling a dark mode can be done by simply inserting the following code into the index.tsx file:

const YEAR = new Date().getFullYear();
 
export default {
  footer: (
    <footer>
      /* whatever footer content you want to include */
    </footer>
  ),
  darkMode: true,
};

Future Plans?

This was a gruelling project for something I imagined wouldn't be hard so right now I think I'm happy with what I have.

If anything I'd love to exert a more granular control over the fonts on the site but I think it'd take some significant re-digging into the source code to figure out how it's being done (I think it's abstracted away under some custom function in the nextra library and I didn't have the heart to dig for it). So it's all good!

And as always if you have any questions about my journey or how I rendered certain things on this site feel free to ask away in the comment section below!