devlog: Improve my GatsbyJS-based website! Generate pages from an external data - Part.1/2

Hello. I'm Takuya Matsuyama from Japan, a solo developer making a Markdown note-taking app called Inkdrop. I'm making a comfortable earning from it now.
It's built with Electron and React.
In this video, I show my progress of the work on improving my website built with GatsbyJS.
I hope you enjoy it!

P.S. Sorry, the terminal font size was too small for watching the video. I'll make it 2x bigger from next shooting.

▶ Download my product - Inkdrop
https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=PnR5gE28gIU

Follow me online here:
▶ Discord community https://discord.gg/QfsG5Kj
▶ Twitter(English) https://twitter.com/inkdrop_app
▶ Twitter(日本語) https://twitter.com/craftzdog
▶ Instagram https://instagram.com/craftzdog
▶ Medium Blog https://blog.inkdrop.info/
▶ DEV blog https://dev.to/craftzdog
▶ GitHub https://github.com/craftzdog/
▶ Subscribe Newsletter https://www.devas.life/

Credits:
▶ BGM: Epidemic Sound https://www.epidemicsound.com/referral/p96aa8/

0:00 Opening - I've got a boom arm!
0:43 I'm gonna work on the documentation website of Inkdrop
1:26 The release notes page doesn't have permalinks for each version
2:00 Mission: Make it have a permalink for each page
2:17 The website is built with GatsbyJS
2:48 The version history is managed on a GitHub repository in YAML
3:02 How it's generated in Gatsby
4:06 Plan: Get the YAML data and generate pages dynamically
5:47 When should the YAML data be loaded?
8:03 Define sourceNodes where the data gets loaded
14:34 Debugging GraphQL data
19:34 Gets frustrated by Gatsby generating image thumbnails
21:12 Create pages from nodes
25:14 Create a page template for release notes
29:04 Got 404 errror
31:08 The page template is not working as expected
33:50 Thinking of why the manual template is showing instead of the history template
34:57 Realized what's wrong!!!!
35:25 Got another error...!
36:40 Fixing the GraphQl query error
38:00 Found that the GraphQL query is not correct
39:10 I don't understand how to get context data 😭
42:27 Ohhh yeaahhh the template finally worked!!!

#javascript #gatsbyjs #reactjs

#Productivity #Solo dev #Programming #Indie dev #devlog #Website #Web development #Frontend development #Freelancer #JavaScript