분류 Gatsbyjs

Gatsby Flexiblog 테마 설치 및 수정하는 방법

컨텐츠 정보

본문


현재 위와 같이 Gatsby로 블로그를 운영하고 있습니다. ( https://blog.wsgvet.com )


정말 다양한 유무료 테마를 검색해봤고, 설치도 해봤습니다.


그 중에서 가장 마음에 든 Flexiblog를 소개합니다. (테마포레스트 링크)


아쉽게도 유료($29)인데요.


그럼에도 불구하고 추천하고 싶은 이유가 있습니다.



다크모드 지원


요새 무료 테마에서도 기본으로 적용됩니다.


그럼에도 불구하고, 이 테마에는 상당히 많은 Component가 있습니다.


모든 부분을 조화롭게 적용하는 것은 또다른 작업입니다.


이 부분에서도 상당히 만족하고 있습니다.



algolia 검색 지원


무료테마의 경우 검색기능이 없거나, 상당히 힘들게 작업해야되는 단점이 있습니다.


이 테마는 algolia API를 이용하여 정말 편하게 기능을 추가할 수 있습니다.


상업용으로 간다면 당연히 비용을 지불해야겠지만, 개인용 블로그 검색용으론 무료로 이용할 수 있습니다.



disqus 댓글 기능


무료 테마에서도 편하게 적용할 수 있지만, 디자인에 어울리게 배치하는 것은 또 다른 일이죠 ㅎㅎ


편하게 적용할 수 있게 작업되어 있습니다.



관련 글 출력


이미 만들어져있는 모양대로 관련 글을 출력할 수 있습니다.


저는 이미지와 카테고리 등이 모두 잘 나오는 것으로 수정했습니다.


마음에 듭니다. ㅎㅎ



Tag 및 Category 기능


보통 태그는 지원되지만, 카테고리와 동시에 지원되는 경우는 무료테마에서 보기 힘듭니다.


이 부분을 조화롭게 만드는 것은 더 어려운 일이죠.


이 테마에서는 매우 편하게 셋팅할 수 있습니다.



여러가지 테마 및 레이아웃 선택 가능


현재 9개의 테마와 6개의 포스트 레이아웃이 있습니다.


https://flexiblog-sales.firebaseapp.com/


여기에서 바로 확인 가능합니다.


개인 블로그로도 가능하고, 기업용 블로그로도 충분히 쓸 수 있을 정도의 퀄리티입니다.


포스트 레이아웃도 썸네일을 어떻게 보여줄지, 글 폭은 얼마나 할지, disqus 댓글은 어디에 넣을지 모두 커스텀 가능합니다.



정리하며...


제 홈페이지와 병행해서 글을 올리기는 어렵습니다.


그만큼 홈페이지에 집중하고 싶기도 하구요.


그래도 이렇게 완성된 것을 알려드리고 싶기도 하고, Gatsby로 제대로 블로그 만들고 싶은 분께 소개해드리고 싶기도 했습니다. ㅎㅎ


마지막으로 도움이 될만한 글들을 링크해드리겠습니다.


Flexiblog 간단 소개 : https://blog.wsgvet.com/from-minimal-to-flexiblog/


Flexiblog 설치 공식 문서 : https://elegantstack-docs.web.app/flexiblog-theme-documentation/


Flexiblog 다크모드 추가 관련 글 : https://blog.wsgvet.com/dark-mode-enabled/


커스터마이징 하는 방법 : https://blog.wsgvet.com/how-to-edit-gatsby-flexiblog-personal-theme/


gatsby-config.js 수정하는 방법 및 RSS 추가하는 방법 : https://blog.wsgvet.com/gatsby-flexiblog-gatsby-config-and-rss-setting/


Vercel로 배포하는 방법 : https://blog.wsgvet.com/gatsby-flexiblog-vercel-deployment/


Flexiblog 업데이트 하는 방법 : https://blog.wsgvet.com/how-to-update-gatsby-flexiblog-theme/

관련자료

댓글 0
등록된 댓글이 없습니다.
Total 8 / 1 Page
RSS
Gatsby Flexiblog 테마 설치 및 수정하는 방법

Gatsbyjs 현재 위와 같이 Gatsby로 블로그를 운영하고 있습니다. ( https://blog.wsgvet.com )정말 다양한 유무료 테마를 검색해봤고…

정적사이트 생성기 Gatsby를 Nginx 웹서버로 직접 배포하기 댓글 6

Gatsbyjs 1. 들어가며정적사이트 생성기를 이용하면 DB 및 PHP가 필요없기 때문에 대부분 배포 서비스를 이용할 것입니다.특히 nextjs를 개발하고 있…

정적사이트를 내 컴퓨터에 띄우고 글 작성 후 배포하기 댓글 4

Gatsbyjs 1. 들어가며이때까지 따라오셨다면(1) 깃허브 계정과 Vercel과 연결되어 자동으로 배포되어 있고,(2) 내 컴퓨터와 깃허브 계정이 연동되어 …

정적사이트 블로그 개발을 위한 도구 설치하기 댓글 5

Gatsbyjs 1. 들어가며이제 본격적으로 블로그 수정 및 개발을 할 시간입니다.nodejs, yarn, gatsby-cli를 설치할 예정입니다.2. node…

내 컴퓨터에서 정적사이트를 수정 후 Vercel에 배포하기 댓글 3

Github 1. 들어가며이제 홈페이지(정적사이트) 파일을 깃허브에서 다운 받았습니다.깃허브와 Vercel은 정확하게 연동이 되었지만, 내 컴퓨터와 깃허브는…

Vercel에서 정적사이트 도메인 변경 및 Git 시작하기

Gatsbyjs 1. 도메인 변경하기지난 글에서 우리는 이미 홈페이지를 가지게 되었습니다.그런데 대시보드에서 자신의 프로젝트를 클릭하면, 위와 같이 주소가 엄청…

최근글


새댓글