Inflearn brand logo image
Inflearn brand logo image
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.

Main page (desktop screen)

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?

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

  • totota님의 프로필 이미지
    totota

    Reviews 2

    Average Rating 5.0

    5

    97% enrolled

    개츠비로 깃허브 블로그를 운영중이였는데 직접 만들고 싶었습니다!! 이강의 덕분에 많이 알아 가는것 같습니다!! 추가적으로 블로그 내 검색기능이랑 구글광고 배치에 대한 내용도 있으면 좋을것 같습니다!!

    • 거니님의 프로필 이미지
      거니

      Reviews 21

      Average Rating 5.0

      5

      30% enrolled

      이전 강의 듣고 블로그 만들었는데, 업데이트 하기 위해 바로 수강!

      • 장기철님의 프로필 이미지
        장기철

        Reviews 1

        Average Rating 5.0

        5

        24% enrolled

        로직박스 상단에 컴포넌트 이름을 명시해주시면 훨씬 빠른 학습이 가능할것같습니다.

        • 주현도
          Instructor

          안녕하세요 장기철님! 먼저 강의 수강해주셔서 감사드린다는 말씀부터 드리고 싶습니다 :) 모든 코드 영역 상단에 파일명과 위치를 명시해놨는데 혹시 이거랑은 다른 내용일까요??

      • zzz님의 프로필 이미지
        zzz

        Reviews 3

        Average Rating 5.0

        5

        15% enrolled

        getsby를 빠르게 적용하며 배우고 싶다면 이 강의를 추천합니다!

        • hj rr님의 프로필 이미지
          hj rr

          Reviews 13

          Average Rating 5.0

          Edited

          5

          100% enrolled

          텍스트 강의이지만 아주 명쾌한 강의입니다. 덕분에 쉽고 빠르게 개츠비를 사용하여 블로그를 만들었습니다. 다만 강의에서 스타일드컴포넌트를 다루는데, 이 라이브러리가 depreciated된 만큼 강의를 보면서 다른 스타일 도구로 변경할 수 있는 수강생의 역량과 의지가 필요합니다. (저는 vanilla-extract로 하였습니다.)

          $17.60

          ji5485's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!