Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
Programming

/

Front-end

Developing a Tech Blog with React-Based Gatsby v2

This course teaches you how to develop your own technical blog using Gatsby v5.

(5.0) 5 reviews

59 learners

  • ji5485
텍스트 강의
블로그
Gatsby
React
Blog
TypeScript

Reviews from Early Learners

What you will learn!

  • How to use the Gatsby framework

  • Frontend development using React

  • Search Engine Optimization

  • Automating blog distribution

  • Managing blog posts using CMS (content management system)

As many people have visited,

We're back with more content !



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.

What's new in this lecture


📌 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.

Develop your own unique 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.

This is the blog we will create.

Blog main page

Main page (desktop screen)

Blog Post Page

Posts Page (Desktop Screen)

❗ Tablet and mobile screens are similar to desktop screens and are therefore not included.

The lecture content is as follows.

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.

Things to note before taking the course


Q. Is it okay if I take the free lecture instead?

Blog Development

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.

Q. Is there any player knowledge required?

✔ TypeScript and React

✔ Basic HTML and CSS content


Q. Don't you provide separate videos?

Please note that this lecture, like the previous lectures, is in text format and does not provide separate videos!

Recommended for
these people

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

Hello
This is

3,028

Learners

119

Reviews

94

Answers

4.9

Rating

2

Courses

Curriculum

All

33 lectures

Published: 
Last updated: 

Reviews

All

5 reviews

5.0

5 reviews

  • ffff님의 프로필 이미지
    ffff

    Reviews 2

    ∙

    Average Rating 5.0

    5

    97% enrolled

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

    • gunny6026님의 프로필 이미지
      gunny6026

      Reviews 21

      ∙

      Average Rating 5.0

      5

      30% enrolled

      I created a blog after taking the previous lecture, so I'm taking this class right away to update it!

      • dnfkwld125995님의 프로필 이미지
        dnfkwld125995

        Reviews 1

        ∙

        Average Rating 5.0

        5

        24% enrolled

        I think it would be much faster to learn if you specify the component name at the top of the logic box.

        • ji5485
          Instructor

          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??

      • iqeq1226님의 프로필 이미지
        iqeq1226

        Reviews 3

        ∙

        Average Rating 5.0

        5

        15% enrolled

        If you want to learn and apply getsby quickly, I recommend this course!

        • jdy8739님의 프로필 이미지
          jdy8739

          Reviews 13

          ∙

          Average Rating 5.0

          Edited

          5

          100% enrolled

          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.)

          $17.60

          ji5485's other courses

          Check out other courses by the instructor!

          Developing a Tech Blog with React-Based Gatsby강의 썸네일

          Developing a Tech Blog with React-Based Gatsby

          ji5485

          This is a class to create your own blog using Gatsby, a React-based static site generation framework :)

          중급이상

          중급이상

          Blog, Gatsby

          Developing a Tech Blog with React-Based Gatsby강의 썸네일

          Developing a Tech Blog with React-Based Gatsby

          ji5485

          Similar courses

          Explore other courses in the same field!

          Applying TypeScript to React while learning while making web games강의 썸네일

          Applying TypeScript to React while learning while making web games

          zerocho

          Let's use React and TypeScript together by adding TypeScript to a web game made with React and React Router, Redux, and MobX.

          중급이상

          중급이상

          React, TypeScript

          Applying TypeScript to React while learning while making web games강의 썸네일

          Applying TypeScript to React while learning while making web games

          zerocho

          [React / VanillaJS] Creating UI elements directly Part 2강의 썸네일

          [React / VanillaJS] Creating UI elements directly Part 2

          jaenam

          By creating representative UI elements in React and pure JavaScript versions, you can experience various perspectives and methods using Web APIs and further improve your front-end development skills.

          초급

          초급

          React, vanilla-js, ui

          [React / VanillaJS] Creating UI elements directly Part 2강의 썸네일

          [React / VanillaJS] Creating UI elements directly Part 2

          jaenam

          NodeFull Stack Development Guide강의 썸네일

          NodeFull Stack Development Guide

          ssaple

          Let's create your own shopping mall in a Docker environment regardless of Mac or Windows ^^

          초급

          초급

          React, Docker, redux-toolkit

          NodeFull Stack Development Guide강의 썸네일

          NodeFull Stack Development Guide

          ssaple

          React Native with Expo: Learning Properly from ZeroCho강의 썸네일

          React Native with Expo: Learning Properly from ZeroCho

          zerocho

          Web developers (especially React developers) can now truly easily launch apps. With Expo, you can launch both Android and iOS apps even faster. Let's become a developer who can quickly launch apps with Expo.

          초급

          초급

          React, React Native, Hybrid App

          React Native with Expo: Learning Properly from ZeroCho강의 썸네일

          React Native with Expo: Learning Properly from ZeroCho

          zerocho

          Hybrid App with Expo Framework to Increase Web Developer's Salary강의 썸네일

          Hybrid App with Expo Framework to Increase Web Developer's Salary

          codecamp

          This course will help you develop mobile apps that can be serviced on Android and iOS using web development.

          초급

          초급

          React, Next.js, expo

          Hybrid App with Expo Framework to Increase Web Developer's Salary강의 썸네일

          Hybrid App with Expo Framework to Increase Web Developer's Salary

          codecamp

          Chat GPT Clone in 1 Hour with Cursor (One-Day Class)강의 썸네일

          Chat GPT Clone in 1 Hour with Cursor (One-Day Class)

          dodocoding

          You can gain the ability to implement a chat program in just one hour using Next.js + Cursor IDE.

          입문

          입문

          nextjs, ChatGPT, React

          Chat GPT Clone in 1 Hour with Cursor (One-Day Class)강의 썸네일

          Chat GPT Clone in 1 Hour with Cursor (One-Day Class)

          dodocoding

          Practical React Native for iOS/Android App Development - Basic강의 썸네일

          Practical React Native for iOS/Android App Development - Basic

          wintho

          The goal is to acquire basic knowledge of React Native for mobile app front-end development. This course is designed to enable non-experts to easily develop native mobile apps by utilizing languages/APIs with low entry barriers.

          초급

          초급

          React Native, React, ES6

          Practical React Native for iOS/Android App Development - Basic강의 썸네일

          Practical React Native for iOS/Android App Development - Basic

          wintho

          TypeScript A-Z: Learn by Following강의 썸네일

          TypeScript A-Z: Learn by Following

          johnahn

          In this course, you will learn about TypeScript.

          초급

          초급

          TypeScript, JavaScript

          TypeScript A-Z: Learn by Following강의 썸네일

          TypeScript A-Z: Learn by Following

          johnahn

          [JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)강의 썸네일

          [JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)

          dakgangjung123

          This is a practical course where you will directly create a timer app using React, Electron, and Zustand, and even deploy it to cross-platforms (Windows, macOS, Linux). Starting with familiar React web development, you can learn the entire flow of desktop app development, including global state management via Zustand and final GUI deployment!

          초급

          초급

          React, Electron, GUI

          [JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)강의 썸네일

          [JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)

          dakgangjung123

          The Complete Guide to Python/Django Web Service Development with React (Based on Django 4.2)강의 썸네일

          The Complete Guide to Python/Django Web Service Development with React (Based on Django 4.2)

          pyhub

          Solidify your foundation in Python/Django web service development. Learning Django takes time, but you can maximize your productivity through iterative development. Turn your imagination into reality.

          초급

          초급

          Python, Django, React

          The Complete Guide to Python/Django Web Service Development with React (Based on Django 4.2)강의 썸네일

          The Complete Guide to Python/Django Web Service Development with React (Based on Django 4.2)

          pyhub

          TypeScript Korea: React with TypeScript Seminar강의 썸네일

          TypeScript Korea: React with TypeScript Seminar

          woongjae

          This course is about TypeScript and React.

          중급이상

          중급이상

          React, TypeScript

          TypeScript Korea: React with TypeScript Seminar강의 썸네일

          TypeScript Korea: React with TypeScript Seminar

          woongjae

          Learn Full-Stack Board Development Faster Than Anyone강의 썸네일

          Learn Full-Stack Board Development Faster Than Anyone

          yeseong0412

          This course includes both server (Java+Springboot) and front-end (React, ReactNative, Flutter, Android, iOS) development. Experience building a full-stack bulletin board with this course.

          입문

          입문

          React, React Native, iOS

          Learn Full-Stack Board Development Faster Than Anyone강의 썸네일

          Learn Full-Stack Board Development Faster Than Anyone

          yeseong0412

          Multi-paradigm Programming Part 1: Iterator Pattern & LISP (with TypeScript, Clojure, Kotlin)강의 썸네일

          Multi-paradigm Programming Part 1: Iterator Pattern & LISP (with TypeScript, Clojure, Kotlin)

          mduniv

          Cultivate advanced programming language utilization skills and software design and implementation skills combining functional, object-oriented, and LISP paradigms, necessary for growing into a mid-to-senior level developer.

          중급이상

          중급이상

          multi-paradigm Programming, TypeScript, Functional Programming

          Multi-paradigm Programming Part 1: Iterator Pattern & LISP (with TypeScript, Clojure, Kotlin)강의 썸네일

          Multi-paradigm Programming Part 1: Iterator Pattern & LISP (with TypeScript, Clojure, Kotlin)

          mduniv

          Create your own blog with React (MERN Stack)강의 썸네일

          Create your own blog with React (MERN Stack)

          ssaple

          Let's create your own blog with a full stack~~!

          중급이상

          중급이상

          Node.js, React, Redux

          Create your own blog with React (MERN Stack)강의 썸네일

          Create your own blog with React (MERN Stack)

          ssaple

          Applying TypeScript to Node.js (feat. NodeBird)강의 썸네일

          Applying TypeScript to Node.js (feat. NodeBird)

          zerocho

          Let's apply TypeScript to Node.js, add typings to existing npm packages, or create your own TypeScript library.

          중급이상

          중급이상

          Node.js, Web Application, TypeScript

          Applying TypeScript to Node.js (feat. NodeBird)강의 썸네일

          Applying TypeScript to Node.js (feat. NodeBird)

          zerocho

          This is the Real Vibe Coding - Vibe Coding Edition for Developers강의 썸네일

          This is the Real Vibe Coding - Vibe Coding Edition for Developers

          codecamp

          No Code, Only Prompt Throw away those simple services you can create with vibe coding in just 10 minutes! Learn 'real' practical vibe coding with Cursor AI NCOP to create sophisticated, production-level services according to your planning and design.

          입문

          입문

          React, Next.js, cursor

          This is the Real Vibe Coding - Vibe Coding Edition for Developers강의 썸네일

          This is the Real Vibe Coding - Vibe Coding Edition for Developers

          codecamp

          Next.js Full Course to Dip In (English Audio & Korean Subtitles)강의 썸네일

          Next.js Full Course to Dip In (English Audio & Korean Subtitles)

          ludgi

          A full course of hands-on Next.js! Complete a real-world project with the latest technologies such as GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, and Grafana, and experience both the App Router and Page Router.

          중급이상

          중급이상

          Next.js, React, GraphQL

          Next.js Full Course to Dip In (English Audio & Korean Subtitles)강의 썸네일

          Next.js Full Course to Dip In (English Audio & Korean Subtitles)

          ludgi

          [Revised 3rd Edition] Node.js Textbook - From Basics to Project Practice강의 썸네일

          [Revised 3rd Edition] Node.js Textbook - From Basics to Project Practice

          zerocho

          You will learn about what a node is, the latest JavaScript grammar, the node API, npm, the module system, databases, testing, and more. You will create a project using five practical examples. You will also deploy a service to the cloud and convert a node project to TypeScript.

          초급

          초급

          Node.js, Express, MySQL

          [Revised 3rd Edition] Node.js Textbook - From Basics to Project Practice강의 썸네일

          [Revised 3rd Edition] Node.js Textbook - From Basics to Project Practice

          zerocho