
Developing a Tech Blog with React-Based Gatsby
ji5485
Free
Intermediate / Blog, Gatsby
4.9
(118)
3,000+
This is a class to create your own blog using Gatsby, a React-based static site generation framework :)
Intermediate
Blog, Gatsby
This course teaches you how to develop your own technical blog using Gatsby v5.
60 learners
Level Intermediate
Course period Unlimited


Reviews from Early Learners
5.0
totota
I was running a GitHub blog with Gatsby, but I wanted to create one myself!! Thanks to this lecture, I feel like I'm learning a lot!! Additionally, it would be great if there were content about blog search functionality and Google Ad placement!!
5.0
거니
I created a blog after taking the previous lecture, so I'm taking this class right away to update it!
5.0
장기철
I think it would be much faster to learn if you specify the component name at the top of the logic box.
How to use the Gatsby framework
Frontend development using React
Search Engine Optimization
Automating blog distribution
Managing blog posts using CMS (content management system)

I'm so grateful that many of you have left positive reviews for my previous course , "Developing a Technical Blog with React-Based Gatsby."
However, as time passed and the lecture content became outdated, students had a hard time progressing, and the content felt lacking because it only had a function to display text.
Reflecting on these points, this lecture returns with a more enriched version of the latest version.
We have prepared a more complete lecture by reflecting your valuable opinions, so please show us your interest.
📌 We have introduced Contentful , a content management system for easier post management .
📌 Use Gatsby's Collection Routes feature to render post pages more easily .
📌 Actively use Gatsby Head API / Server Side Rendering API / Browser API .
📌 Added various elements such as Masonry layout/table of contents etc.
📌 Added Google Analytics for future blog performance analysis and improvement.
💡 The advantage of being able to directly experience the entire process from development, distribution, and SEO has been maintained.
We've added a variety of features to make managing your blog easier after deployment.
We've simplified the code base to make it easier to extend the functionality of your blog.
Wouldn't you like to have your own, one-of-a-kind tech blog?
However, when developing a technical blog, there are many concerns and difficulties , starting with choosing a development stack, how to develop and deploy, and how to optimize for search engines.
This can feel especially daunting for those who are unfamiliar with the front-end or have not experienced the development process from start to finish.
For these individuals, this course will systematically guide you through the entire process so that you can develop your own unique blog more easily and conveniently.
.png?w=960)
Main page (desktop screen)
.png?w=960)
Posts Page (Desktop Screen)
❗ Tablet and mobile screens are similar to desktop screens and are therefore not included.
Section 0 - Getting to Know Gatsby and Setting Up Your Development Environment
Let's learn about the Gatsby framework and set up a blog development environment.
Section 1 - Querying Data with GraphQL
Let's see how we can retrieve blog post data using GraphQL.
Section 2 - Developing Project Structure and Layout
Let's design the project structure and create a common layout for all pages.
Section 3 - Developing a Main Page to Display a List of Articles
Let's develop a main page where a list of posts will be displayed.
Section 4 - Implementing the Posts Page
Let's create a page where the actual blog content will be displayed.
Section 5 - Implementing a 404 Error Page
Let's add a 404 page, a very important but easily overlooked element.
Section 6 - Search Engine Optimization
Let's work on SEO (search engine optimization) so that my blog appears at the top of search results.
Section 7 - Automating Deployment, Configuring Google Analytics, and Registering with Google Search Console
Let's automate the deployment process so that changes are automatically reflected when you modify source code or posts.
Let's connect Analytics to manage your blog and register your blog with Webmaster Tools.

Developing a Tech Blog with React-Based Gatsby
Although this is a free course, it uses an older version, Gatsby v3.
Because the API is relatively less convenient to use, the difficulty level may be higher than expected, and many errors may occur during the process.
✔ TypeScript and React
✔ Basic HTML and CSS content
Please note that this lecture, like the previous lectures, is in text format and does not provide separate videos!
Who is this course right for?
Anyone who wants to develop their own technology blog
Anyone who wants to experience the entire process from development to distribution and SEO
Need to know before starting?
TypeScript
React
All
33 lectures
All
6 reviews
5.0
6 reviews
Reviews 21
∙
Average Rating 5.0
Reviews 1
∙
Average Rating 5.0
5
I think it would be much faster to learn if you specify the component name at the top of the logic box.
Hello Jang Gi-cheol! First of all, I would like to thank you for taking the class :) I have specified the file name and location at the top of every code area, but is this different??
Reviews 2
∙
Average Rating 5.0
Reviews 4
∙
Average Rating 5.0
Reviews 19
∙
Average Rating 4.9
Edited
5
Although it's a text-based lecture, it's very clear. Thanks to this, I was able to create a blog using Gatsby easily and quickly. However, the lecture deals with styled-components, and since this library is deprecated, students need the ability and willingness to switch to other styling tools while watching the lecture. (I used vanilla-extract.)
Check out other courses by the instructor!
Explore other courses in the same field!
Limited time deal ends in 12:02:37
$15,400.00
30%
$17.60