Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

Developing a Tech Blog with React-Based Gatsby

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

(4.9) 114 reviews

2,969 learners

  • ji5485
Blog
Gatsby

Reviews from Early Learners

What you will learn!

  • How to deal with the Gatsby framework

  • How to write React components with TypeScript

  • How to improve SEO and web accessibility

  • How to distribute a blog

This course uses Gatsby v3, the version at launch.
So, if you are taking the course for the first time, please pay attention to the version!
We are currently preparing a lecture using the new version,
Please note that we will no longer be managing the community.


Create your own tech blog,
Easy and fun with React Gatsby 🔧

Improving development skills
The power of tech blogs.

If you're a developer, you've probably heard at least once that technical blogs can help improve your development skills .
I also find it really helpful. As you organize what you've learned, you may discover things you didn't know before, and the process of revisiting them can help you grow your skills .


Surrounding the development of a technology blog
So many worries!

  • How to choose a development stack ?
  • How to solve search engine optimization (SEO) ?
  • What development process should I go through?

The beginning is always the hardest part of anything, and this applies to tech blogs as well. While many developers already run tech blogs, the sheer number of factors to consider leaves many feeling overwhelmed and unsure of how to get started.

But what if there was a guide to guide you through this entire process? Wouldn't developing a tech blog be easier and more convenient? This course begins with this very question.


The trend these days,
Making with React Gatsby
Easy and fast blog development.

Gatsby.js?

Gatsby is currently the most popular
Front-end library based on React
It is a static site generation framework .

In this lecture, we will develop a technical blog using Gatsby, a static site generation framework based on the JAM Stack, which is rapidly growing in the front-end market.

Plus, you'll learn how to write React applications using TypeScript, a language increasingly used by front-end developers.


Make it yourself,
My own tech blog!

You can preview the blog you'll create in this course. (Shortcut)


Who created this course
Introducing the knowledge sharer.

Joo Hyun-do

I am a junior developer who is trying to become a better developer.

  • Graduated from Korea Digital Media High School
  • Currently enrolled in the Department of Mathematics at Seoul City University
  • Web front-end developer at startup "Knal Development" (2019)
  • Seoul Metropolitan University, Like a Cool Lion lecturer (2019)
  • Web front-end developer at startup "High Protocol" (2022-present)

Let's learn in order!

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 - A simple page launch
Let's run the project created with Gatsby and launch the website.

Section 2 - Implementing a Main Page that Displays a List of Articles
Let's create a frame for the main page where the blog content list will be displayed.

Section 3 - Displaying Real Data on the Main Page
Let's display the data retrieved via GraphQL on the main page.

Section 4 - Creating a Post Item Link to Link to the Post Page
Let's connect a link so that clicking on the content displayed on the main page will take you to the page.

Section 5 - Implementing the Posts Page
Let's create a page where the actual blog content will be displayed.

Section 6 - Implementing a 404 Error Page
Let's add a 404 page, a very important but easily overlooked element.

Section 7 - Taking Action to Improve Search Engine Optimization and Web Accessibility
Let's make sure our website complies with web accessibility standards so everyone can use it, and work on SEO to make it appear at the top of search results.

Section 8 - Deploying Your Site and Registering Your Site with Webmaster Tools
Let's deploy the blog we developed and register it with Webmaster Tools so that search engines can index it.

Please check before taking the class!

  • This lecture 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 a blog using React

  • Anyone who wants to develop React apps with TypeScript

Need to know before starting?

  • JavaScript

  • CSS

  • React

Hello
This is

3,028

Learners

119

Reviews

94

Answers

4.9

Rating

2

Courses

Curriculum

All

37 lectures

Published: 
Last updated: 

Reviews

All

114 reviews

4.9

114 reviews

  • JIHUN YANG님의 프로필 이미지
    JIHUN YANG

    Reviews 1

    Average Rating 5.0

    5

    32% enrolled

    • lgs4002님의 프로필 이미지
      lgs4002

      Reviews 13

      Average Rating 4.3

      4

      68% enrolled

      • 장윤형님의 프로필 이미지
        장윤형

        Reviews 14

        Average Rating 5.0

        5

        100% enrolled

        • toa님의 프로필 이미지
          toa

          Reviews 1

          Average Rating 5.0

          5

          100% enrolled

          타입스크립트가 처음인 분들이 보면서 익히기 좋은 것 같습니다.

          • sthgml님의 프로필 이미지
            sthgml

            Reviews 3

            Average Rating 5.0

            5

            100% enrolled

            글로만 이루어졌는데도 따라가기 쉽고, 이해가 잘 됐어요!

            Free

            ji5485's other courses

            Check out other courses by the instructor!