Making a page using Gatsby

August 8, 2023

I've always wanted my own website as it would serve as an easy way of collecting the projects that I work on, both work and otherwise.

However, I've never put in the effort to properly make a website - until now. The create-a-website project aligns with other projects that I intend to do across this summer holiday.

Website Components

Nontechnical requirements:

  • Introduce myself, my areas of interest and my projects
  • Aesthetically appealing
  • Link to my other social media

Technical requirements:

  • Fast loading time
  • Ideally, good SEO

Attempt 1: Using React

I must preface that this is my first attempt at making a website and my goal was to create a minimal website that works. A quick search had me find that React was the framework that seemed easiest to pick up.

After completing a short tutorial on react, I built my first website as shown:

Original page

I liked the additional animation at the start of being able to spell out my name - even though it was a good-to-have. FontAwesome was used for the icons that listed my socials.

However, I realised that

  • Search-engine optimisation was not ideal.
  • Addition and maintaining of blog pages would need to be done via a CMS/some other static site generator or framework.
  • Programmatically creating pages might be tough to do with just React alone.

Therefore, I made the decision to redo the website on Gatsby which is a static-site generator framework known for having many plugins that can be used to boost the performance of a site. It's also built on top of react.js, and uses purple heavily :D

Attempt 2: Gatsby

Gatsby uses GraphQL in order to interact with a data layer. As I wanted to create new pages programmatically, I created pages using a query that matches the id of each blog post with its characteristics as shown:

const BlogPost = ({ data, children }) => {
  return (
    <Layout pageTitle={data.mdx.frontmatter.name}>
      <p>{data.mdx.frontmatter.date}</p>
      {children}
    </Layout>
  )
}
export const query = graphql`
  query ($id: String) {
    mdx(id: {eq: $id}) {
      frontmatter {
        name
        date(formatString: "MMMM D, YYYY")
      }
    }
  }
`
export const Head = ({data}) => <Seo title={data.mdx.frontmatter.name} />

export default BlogPost

This works to create a page each time a new .mdx file is created.

Through Gatsby, I've also realised that load times are a lot faster than before! :D

Attempt 3: Extensions?

I'd like to see where I can take this page with me to.

Potential improvements include:

  • Adding a PostgreSQL database for upcoming performances
  • Adding (another) PostgreSQL database for my projects
  • Improving the CSS - I like it as is, but I'm quite easily satisfied with the aesthetic side of things.

That's all for now!