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:
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!