Comments (5)
The main objective to learn this tech stack was to create a Blog for codeanit.com
As I was becoming fond of Markdown files and as the site needed to be JAMStack, I was looking forward to some kind of frameworks which could consume Markdown files, and came to know about Gatsby. After doing some search and some references, it seemed to be a great fit. At first the idea was to use Hugo, but wanted I wanted something around React, just wanted to keep everything to JS, hence, this was another reason for choosing this tech.
A good reference is reviewed with the tech stack around Gatsby. This will be taken as the base for the website moving forward.
Resources:
https://github.com/eggheadio/gatsby-starter-egghead-blog is the base example for the site.
https://github.com/PaulieScanlon/paulie-dev-2019 - The charts could be good to implement.
https://www.gatsbyjs.org/docs/adding-markdown-pages
https://www.gatsbyjs.org/tutorial
https://www.gatsbyjs.org/blog/2020-04-20-paulie-scanlons-journey-of-100-days
https://github.com/system-ui/theme-ui
https://github.com/KyleAMathews/typography.js
from til.
Completed the basic tutorials on Gatsby. I really liked the simplicity in how the tutorial was written. Along the way I have come to know few more things about the web platform.
Contents covered below:
Gatsby fundamentals
Set up your development environment: We’ll introduce you to core technologies that power Gatsby, and guide you through setting up your development environment.
- Get to know Gatsby building blocks: Starting new projects, developing, and deploying sites.
- Introduction to using CSS in Gatsby: Explore libraries like Typography.js and CSS Modules.
- Building nested layouts in Gatsby: Layouts are sections of your site that are reused across multiple pages like headers and footers.
Intermediate tutorials
In these intermediate tutorials, you’ll learn how to pull data from almost anywhere into your Gatsby site with GraphQL.
- Querying for data in a blog: Create a blog and use a GraphQL query to pull your site title into the blog header.
- Source plugins and rendering queried data: Use a source plugin to pull Markdown blog posts into your site and create an index page with a list of blog posts.
Transformer plugins: Use a transformer plugin to transform your Markdown blog posts into a form the blog can render. - Programmatically create pages from data: Learn how to programmatically create a set of pages for your blog posts.
- Preparing a site to go live: Learn how to audit your site for performance and best practices for accessibility, SEO, and more.
In the last part to go live, as it lists few things, compared few reference sites and found https://kentcdodds.com to be good enough
The next thing to do is to cover will be about Plug-ins and Themes https://www.gatsbyjs.org/tutorial/plugin-and-theme-tutorials, and implement the blog.
from til.
Need to go through https://kentcdodds.com code base further.
from til.
Update May 12
Review Kentcdodds.com. Went through gatsby-config.js and skimmed the plugins.
Also went through the tutorials section in very brief.
Wanted to know more about the special files, and it turns out to be a palce holder for the API that Gatsby provides. https://www.gatsbyjs.org/docs/api-reference for further read.
I was looking for a way to manage the static contents or CMS and https://www.gatsbyjs.org/tutorial/blog-netlify-cms-tutorial looks like the solution.
https://www.gatsbyjs.org/docs/api-specification to read.
Need to go through https://www.gatsbyjs.org/tutorial again
https://github.com/gatsbyjs/gatsby/tree/master/examples will be good to go through them.
from til.
Issues when running the kentcdodds code on new pc, installed nvm and stable version of nodejs.
"gyp ERR! stack Error: not found: make gyp ERR! stack at getNotFoundError"
Followed https://stackoverflow.com/questions/14772508/npm-failed-to-install-time-with-make-not-found-error, and installed sudo apt-get install build-essential
This solved the error.
Another issue followed up "Fixing npm/node-gyp Error: not found:"
Resolved with sudo apt install build-essential
from https://techoverflow.net/2018/06/04/fixing-npm-node-gyp-error-not-found-make-on-ubuntu
Another issue followed up - "Error: Cannot find module './build/Release/sharp'"
Resolved with apt install libvips
followed by npm install sharp
Another issue "WorkerError: Processing image.png failed". There seems to be issue while processing large image file in Gatsby. This is listed in common error
https://www.gatsbyjs.org/docs/troubleshooting-common-errors
gatsbyjs/gatsby#13442
Error: ENOSPC: System limit for number of file watchers reached: https://stackoverflow.com/questions/55763428/react-native-error-enospc-system-limit-for-number-of-file-watchers-reached
There seems to be issue with VSCode as well: https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc
Well in the end removing and and reinstalling made the application functional.
rm -rf .cache node_modules public package-lock.json
from til.
Related Issues (20)
- Heuristics to align boundaries in sociotechnical systems to optimise Return of Investment
- Why Your Meetings Stink—and What to Do About It
- Standard Operating Procedure
- The art of mindful living by Thich Nhat Hanh
- Harvard’s Most Popular Course: Tal Ben-Shahar On How to Be Happier
- Optimizing Resource Utilization: The Benefits and Challenges of Bin Packing in Kubernetes
- ROOT CAUSE ANALYSIS: WHAT IT IS & HOW TO PERFORM ONE
- Eisenhower Matrix & Duarte Visualization
- Business Process Management - The Importance Of Aligning People, Processes And Technology Amid Transformation Initiatives
- Taking a bigger picture of context via systems thinking
- Mental Models
- 5 key lessons from thinking in systems
- 9 cognitive biases to kill innovation
- How to reduce communication gap
- What is SIP Trunking?
- Team development
- Engineering Management
- Maximizing Efficiency and Value: A Guide to Value Stream Management
- Data Consistency
- Rubber Duck Debugging
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from til.