-
Create a Gatsby site.
Use the Gatsby CLI to create a new site, specifying the blog starter.
-
Added extra pages
Added about me and contact page in Bio component by following Gatsby guide here
-
Adding reading time and tea icons
Added number of teas based on the length of the blog post. Followed Gatsby documentation here
-
Adding tags page
Followed Gatsby documentation here. I had difficulty implementing this on the gatsby starter blog as the code setup in documentation is slightly different than template gatsby starter blog. Also added clickable tags on each post page by querying from GraphQL.
-
Pagination with post
Followed Gatsby documentation here. Another difficulty implementing this on a gatsby starter blog template because the documentation only had an example of a new gatsby site and not from a template file. Gatsby starter blog already had previous and next page but did not have pagination set-up, had to manually follow this guide here
-
Dark mode toggle Followed Gatsby blog tutorial here. All components needed to be wrapped in <ThemeContext.Provider>. Took me a while to understand this and find out where to wrap an existing blog with lots of preloaded code in gatsby starter blog.
-
Adding Font Awesome Added React Font Awesome using react-icons library, specifically for my github and LinkedIn logo in contact page.
-
PrismJS To allow for code syntax highlighting based on language. Gatsby documentation here and followed external post here
Please feel free to take a look at what I did and the code/commits that were labeled for each step. They are in the order of implementation.
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
-
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
-
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.
