Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kyeongsoosoo/gatsby-blog-soosoo

gatsby를 활용하여 블로그 생성기 제작
https://github.com/kyeongsoosoo/gatsby-blog-soosoo

blog gatsby seo

Last synced: 8 days ago
JSON representation

gatsby를 활용하여 블로그 생성기 제작

Awesome Lists containing this project

README 

        
\*\*\*\*





  

    Gatsby

  





  Gatsby's hello-world starter




# Gatsby-blog-project



![dark-mode-ex](src/images/blog-dark.png)



![light-mode-ex](src/images/blog-light.png)



---



## 구현중인 사항



---



(5.17)



- og:image tag가 seo시에 포함될 수 있도록 추가해주었습니다. 각 포스트의 대표사진이 포스트의 og:image tag의 content로 설정됩니다.

- 이와 함께 포스트의 대표사진이 자동으로 포스트 상단에 추가되도록 설정했습니다.

- 상단 nav bar를 sticky하게 만들어 스크롤 시에는 상단에 고정되게 만들었습니다.



---



- SEO

  


  react-helmet을 활용하여 SEO에 필요한 meta tag를 넣어주었습니다. og태그 추가하여 미리보기에 사용할 수 있게 했습니다.



* Multi-categorize

  


  각 블로그 포스트가 해쉬태그를 여러개 사용할 수 있도록 구현했습니다. 포스트 아이템이나 사이드바에 있는 해쉬태그를 선택하면 해당 태그에 속한 포스트 아이템들만 필터링하여 볼 수 있습니다.



* Dark mode

  


  CSS-Variable을 활용하여 Dark mode를 사용할 수 있게 구현했습니다. 설정된 테마를 localStorage에 저장하여 블로그 재방문 시에도 지정해 둔 테마를 사용할 수 있습니다.



* Code highlight with Dark mode

  


  Prism libary를 활용하여 마크다운 내에서 사용하는 코드블록에서 Code highlight를 해주었습니다. vsDark와 NightOwlLight 테마를 적용해서 각 테마에서 다른 highlight를 볼 수 있습니다.



* Pagination

  


  페이지마다 볼 포스트 아이템의 갯수를 지정하고 이에 따라 Paginate 할 수 있게 구현했습니다. 첫 페이지와 마지막 페이지에서는 각각 Prev page와 Next Page를 선택할 수 없습니다.



* Create Page Progamatically

  


  gatsby-node.js에서 actions의 createPage 메서드를 활용해 작성된 마크다운 파일들이 자동으로 페이지로 생성되도록 해주었습니다. 각 해쉬태그들을 graphql 내에서 Regex를 활용하여 검색하고 이에 따라 카테고리별로도 페이지가 생성됩니다.



  ---



  ## 추가(작업)중인 사항



* Intersection Observer를 활용해 NavBar가 일정 Height 이상 스크롤 시에 고정될 수 있도록

  


  최근 네이버 검색창 UI가 바뀐 것을 보고 비슷하게 구현해보려고 함.



* About 페이지 UI 추가



* utterance 활용해서 댓글 기능 추가

* Post Item/SEO 할 때 썸네일 이미지 들어갈 수 있게 추가