From dbc3cee8a75cdbf4c909e1757baeb7c1a24b8d29 Mon Sep 17 00:00:00 2001 From: devHudi Date: Sun, 18 Aug 2024 17:17:13 +0900 Subject: [PATCH 1/3] feat: migrate from utterances to giscus --- blog-config.js | 12 +++- package.json | 1 + src/components/Article/Footer/Comment.jsx | 28 ++++++++++ src/components/Article/Footer/index.jsx | 68 ++--------------------- yarn.lock | 56 +++++++++++++++++++ 5 files changed, 100 insertions(+), 65 deletions(-) create mode 100644 src/components/Article/Footer/Comment.jsx diff --git a/blog-config.js b/blog-config.js index 64e1169c..bfa34a8f 100644 --- a/blog-config.js +++ b/blog-config.js @@ -16,8 +16,16 @@ module.exports = { resume: "https://hudi.blog", link: "https://hudi.blog", }, - utterances: { + // See https://giscus.app/ + giscus: { repo: "devHudi/gatsby-starter-hoodie", - type: "pathname", + repoId: "MDEwOlJlcG9zaXRvcnkzNjk4NjMzNTg=", + category: "Comments", + categoryId: "DIC_kwDOFguqvs4ChwGy", + mapping: "pathname", + strict: "0", + reactionsEnabled: "1", + inputPosition: "bottom", + lang: "en", }, } diff --git a/package.json b/package.json index 93c9a5d7..f163f22d 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "version": "0.2.0", "author": "Hudi", "dependencies": { + "@giscus/react": "^3.0.0", "babel-eslint": "^10.1.0", "babel-plugin-styled-components": "^2.1.4", "gatsby": "^5.11.0", diff --git a/src/components/Article/Footer/Comment.jsx b/src/components/Article/Footer/Comment.jsx new file mode 100644 index 00000000..166d5373 --- /dev/null +++ b/src/components/Article/Footer/Comment.jsx @@ -0,0 +1,28 @@ +import React from "react" +import { useSelector } from "react-redux" +import Giscus from "@giscus/react" + +import { giscus } from "../../../../blog-config" + +const Comment = () => { + const { theme } = useSelector(state => state.theme) + + return ( + + ) +} + +export default Comment diff --git a/src/components/Article/Footer/index.jsx b/src/components/Article/Footer/index.jsx index c2b223f8..8b2efa75 100644 --- a/src/components/Article/Footer/index.jsx +++ b/src/components/Article/Footer/index.jsx @@ -1,16 +1,11 @@ -import React, { useEffect, useState } from "react" +import React from "react" import { navigate } from "gatsby" -import { useSelector } from "react-redux" -import styled, { useTheme } from "styled-components" +import styled from "styled-components" import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi" -import { Utterances } from "utterances-react-component" - -import { utterances } from "../../../../blog-config" - -import MDSpinner from "react-md-spinner" import Divider from "components/Divider" import Bio from "components/Bio" +import Comment from "./Comment" const ArticleButtonContainer = styled.div` display: flex; @@ -111,18 +106,6 @@ const CommentWrapper = styled.div` } ` -const SpinnerWrapper = styled.div` - height: 200px; - display: flex; - justify-content: center; - align-items: center; -` - -const HiddenWrapper = styled.div` - height: ${props => (props.isHidden ? "0px" : "auto")}; - overflow: ${props => (props.isHidden ? "hidden" : "auto")}; -` - const ArticleButton = ({ right, children, onClick }) => { return ( @@ -139,49 +122,6 @@ const ArticleButton = ({ right, children, onClick }) => { ) } -const Spinner = () => { - const theme = useTheme() - return ( - - - - ) -} - -const Comment = () => { - const { theme } = useSelector(state => state.theme) - const [spinner, setSpinner] = useState(true) - - useEffect(() => { - setTimeout(() => { - setSpinner(false) - }, 1500) - }, []) - - return ( - <> - {spinner && } - - - - - - - - - - - ) -} - const Footer = ({ previous, next }) => { return ( <> @@ -199,9 +139,11 @@ const Footer = ({ previous, next }) => { )} + + diff --git a/yarn.lock b/yarn.lock index 3a22569c..a0d223b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1282,6 +1282,13 @@ html-entities "^2.3.3" strip-ansi "^6.0.0" +"@giscus/react@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@giscus/react/-/react-3.0.0.tgz#fdadce2c7e4023eb4fdbcc219cdd97f6d7aa17f0" + integrity sha512-hgCjLpg3Wgh8VbTF5p8ZLcIHI74wvDk1VIFv12+eKhenNVUDjgwNg2B1aq/3puyHOad47u/ZSyqiMtohjy/OOA== + dependencies: + giscus "^1.5.0" + "@graphql-codegen/add@^3.2.3": version "3.2.3" resolved "https://registry.yarnpkg.com/@graphql-codegen/add/-/add-3.2.3.tgz#f1ecee085987e7c21841edc4b1fd48877c663e1a" @@ -1570,6 +1577,18 @@ dependencies: "@lezer/common" "^0.15.0" +"@lit-labs/ssr-dom-shim@^1.2.0": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz#2f3a8f1d688935c704dbc89132394a41029acbb8" + integrity sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ== + +"@lit/reactive-element@^2.0.4": + version "2.0.4" + resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-2.0.4.tgz#8f2ed950a848016383894a26180ff06c56ae001b" + integrity sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.2.0" + "@lmdb/lmdb-darwin-arm64@2.5.2": version "2.5.2" resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-2.5.2.tgz#bc66fa43286b5c082e8fee0eacc17995806b6fbe" @@ -2499,6 +2518,11 @@ resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.33.tgz#1073c4bc824754ae3d10cfab88ab0237ba964e4d" integrity sha512-gVC1InwyVrO326wbBZw+AO3u2vRXz/iRWq9jYhpG4W8LXyIgDv3ZmcLQ5Q4Gs+gFMyqx+viFoFT+l3p61QFCmQ== +"@types/trusted-types@^2.0.2": + version "2.0.7" + resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11" + integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw== + "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.3": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e" @@ -6409,6 +6433,13 @@ gh-pages@^5.0.0: fs-extra "^8.1.0" globby "^6.1.0" +giscus@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/giscus/-/giscus-1.5.0.tgz#8299fa056b2ed31ec8b05d4645871e016982b4b2" + integrity sha512-t3LL0qbSO3JXq3uyQeKpF5CegstGfKX/0gI6eDe1cmnI7D56R7j52yLdzw4pdKrg3VnufwCgCM3FDz7G1Qr6lg== + dependencies: + lit "^3.1.2" + git-up@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/git-up/-/git-up-7.0.0.tgz#bace30786e36f56ea341b6f69adfd83286337467" @@ -7666,6 +7697,31 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= +lit-element@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-4.1.0.tgz#cea3eb25f15091e3fade07c4d917fa6aaf56ba7d" + integrity sha512-gSejRUQJuMQjV2Z59KAS/D4iElUhwKpIyJvZ9w+DIagIQjfJnhR20h2Q5ddpzXGS+fF0tMZ/xEYGMnKmaI/iww== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.2.0" + "@lit/reactive-element" "^2.0.4" + lit-html "^3.2.0" + +lit-html@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-3.2.0.tgz#cb09071a8a1f5f0850873f9143f18f0260be1fda" + integrity sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA== + dependencies: + "@types/trusted-types" "^2.0.2" + +lit@^3.1.2: + version "3.2.0" + resolved "https://registry.yarnpkg.com/lit/-/lit-3.2.0.tgz#2189d72bccbc335f733a67bfbbd295f015e68e05" + integrity sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw== + dependencies: + "@lit/reactive-element" "^2.0.4" + lit-element "^4.1.0" + lit-html "^3.2.0" + lmdb@2.5.2: version "2.5.2" resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-2.5.2.tgz#37e28a9fb43405f4dc48c44cec0e13a14c4a6ff1" From 65d9da6c7eedfaabc4a0e72a4b9d30cddcd66d6b Mon Sep 17 00:00:00 2001 From: devHudi Date: Sun, 18 Aug 2024 17:23:19 +0900 Subject: [PATCH 2/3] chore: remove utterances-react-component --- package.json | 3 +-- yarn.lock | 5 ----- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/package.json b/package.json index f163f22d..f4e5e036 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,7 @@ "redux": "^4.2.1", "sharp": "^0.32.1", "styled-components": "^5.2.1", - "styled-reset": "^4.4.7", - "utterances-react-component": "^1.0.0" + "styled-reset": "^4.4.7" }, "devDependencies": { "eslint-config-react-app": "^7.0.1", diff --git a/yarn.lock b/yarn.lock index a0d223b6..297c6a50 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11557,11 +11557,6 @@ utils-merge@1.0.1: resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA== -utterances-react-component@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/utterances-react-component/-/utterances-react-component-1.0.0.tgz#18d1af7264ded1d07690bc68b1ed91c7cdef98ac" - integrity sha512-ouHYHpFtAzGBTm4imUK23dwbuSg7//XsR+lcZ3F9xFm7kBNb0FsKRHTfC+FKUQCWPdIbbgfFsygYWKsbdq1OVA== - uuid@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" From 386957023931d2a4b1f87631d4386349c37bb9bc Mon Sep 17 00:00:00 2001 From: devHudi Date: Sun, 18 Aug 2024 17:24:06 +0900 Subject: [PATCH 3/3] docs: replace utterances with giscus --- README-kr.md | 17 ++++++++++++----- README.md | 19 ++++++++++++------- contents/posts/about-hoodie-kr/index.md | 2 +- contents/posts/about-hoodie/index.md | 2 +- contents/posts/other-tips-kr/index.md | 4 ---- contents/posts/other-tips/index.md | 4 ---- contents/posts/quick-start-kr/index.md | 15 +++++++++++---- contents/posts/quick-start/index.md | 17 +++++++++++------ 8 files changed, 48 insertions(+), 32 deletions(-) diff --git a/README-kr.md b/README-kr.md index 89f2ef1e..7347b4b5 100644 --- a/README-kr.md +++ b/README-kr.md @@ -22,7 +22,7 @@ gatsby-starter-hoodie 는 기술 블로그를 작성하기 위해 개발된 Gats - 시리즈 분류 - 반응형 웹 - SEO -- Utterance (댓글 위젯) +- Giscus 아래 단계를 따라서 여러분의 블로그를 시작하세요. 굉장히 쉬워요 😉. @@ -45,7 +45,7 @@ $ npm run start ## 3. Github 레포지토리 생성 -Utterance 댓글 위젯은 **Github 이슈 시스템** 기반입니다. 따라서 각 블로그 별 Github 레포지토리가 필요합니다. 또한 여러분이 Github Pages 혹은 Netlify 로 블로그를 배포하길 원한다면, Github 레포지토리는 필수입니다. +Giscus 댓글 위젯은 **Github Discuss 시스템** 기반입니다. 따라서 각 블로그 별 Github 레포지토리가 필요합니다. 또한 여러분이 Github Pages 혹은 Netlify 로 블로그를 배포하길 원한다면, Github 레포지토리는 필수입니다. 만약 Github 레포지토리를 생성하는 법을 모른다면, [Github 공식 문서](https://docs.github.com/en/github/getting-started-with-github/create-a-repo) 를 참조하세요. @@ -69,14 +69,21 @@ module.exports = { instagram: "https://www.instagram.com", etc: "https://www.google.com/", }, - utterances: { + giscus: { repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}", - type: "pathname", + repoId: "{YOUR_GITHUB_REPOSITORY_ID}", + category: "{YOUR_GITHUB_REPOSITORY_CATEGORY}", + categoryId: "{YOUR_GITHUB_REPOSITORY_CATEGORY_ID}", + mapping: "pathname", + strict: "0", + reactionsEnabled: "1", + inputPosition: "bottom", + lang: "en", }, } ``` -gatsby-starter-hoodie 는 `blog-config.js` 라는 설정 파일을 제공합니다. 이 파일에서 블로그 정보, 작성자 프로필, Utterance 설정 등을 작성할 수 있습니다. 여러분 블로그 설정에 맞게 `blog-config.js` 를 설정하세요. 하지만, `utterances.type` 속성은 수정하지 않는 것을 권장합니다. +gatsby-starter-hoodie 는 `blog-config.js` 라는 설정 파일을 제공합니다. 이 파일에서 블로그 정보, 작성자 프로필, Giscus 설정 등을 작성할 수 있습니다. 여러분 블로그 설정에 맞게 `blog-config.js` 를 설정하세요. ## 5. 포스트 추가 diff --git a/README.md b/README.md index 0063df28..6a4abc42 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ This project inspired by [velog](https://velog.io). - Series Categorization - Responsive Web - SEO -- Utterance (Comment widget) +- Giscus Getting started your blog with gatsby-starter-hoodie by following steps below. It's very easy 😉. @@ -55,7 +55,7 @@ Now you can access to your blog at localhost:8000. ## 3. Create your own Github repository -Utterance comment widget is based on **Github issue system**. So you need your own GitHub repository. Also, if you want to publish your blog through Github Pages or Netlify, the Github Repository is a necessary. +Giscus comment widget is based on **Github Discuss system**. So you need your own GitHub repository. Also, if you want to publish your blog through Github Pages or Netlify, the Github Repository is a necessary. If you don't know how to create a GitHub repository, follow the [official GitHub documentation](https://docs.github.com/en/github/getting-started-with-github/create-a-repo). @@ -79,16 +79,21 @@ module.exports = { instagram: "https://www.instagram.com", etc: "https://www.google.com/", }, - utterances: { + giscus: { repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}", - type: "pathname", + repoId: "{YOUR_GITHUB_REPOSITORY_ID}", + category: "{YOUR_GITHUB_REPOSITORY_CATEGORY}", + categoryId: "{YOUR_GITHUB_REPOSITORY_CATEGORY_ID}", + mapping: "pathname", + strict: "0", + reactionsEnabled: "1", + inputPosition: "bottom", + lang: "en", }, } ``` -gatsby-starter-hoodie provides a configuration file called `blog-config.js`. In this file, you can configure blog, biography (profile), and utterance. - -Configure `blog-config.js` to suit your blog. However, it is recommended not to modify `utterances.type`. +gatsby-starter-hoodie provides a configuration file called `blog-config.js`. In this file, you can configure blog, biography (profile), and giscus. Configure `blog-config.js` to suit your blog. ## 5. Add your content diff --git a/contents/posts/about-hoodie-kr/index.md b/contents/posts/about-hoodie-kr/index.md index 99cd3687..842f2852 100644 --- a/contents/posts/about-hoodie-kr/index.md +++ b/contents/posts/about-hoodie-kr/index.md @@ -25,7 +25,7 @@ gatsby-starter-hoodie 는 기술 블로그를 작성하기 위해 개발된 Gats - 시리즈 분류 - 반응형 웹 - SEO -- Utterance (댓글 위젯) +- Giscus ## 시작 diff --git a/contents/posts/about-hoodie/index.md b/contents/posts/about-hoodie/index.md index bc420a96..9d04a5a6 100644 --- a/contents/posts/about-hoodie/index.md +++ b/contents/posts/about-hoodie/index.md @@ -25,7 +25,7 @@ Start your blog with a neatly designed gatsby-starter-hoodie that supports dark - Series Categorization - Responsive Web - SEO -- Utterance (Comment widget) +- Giscus ## Let's get started diff --git a/contents/posts/other-tips-kr/index.md b/contents/posts/other-tips-kr/index.md index b154344d..83aed5de 100644 --- a/contents/posts/other-tips-kr/index.md +++ b/contents/posts/other-tips-kr/index.md @@ -15,10 +15,6 @@ series: "gatsby-starter-hoodie 로 블로그 시작하기" 만약 파비콘 파일의 이름을 변경하고 싶다면, `gatsby-config.js` 파일의 `gatsby-plugin-manifest` 에서 `icon` 속성을 변경하셔야합니다. -## Utterance 가 제대로 작동하지 않아요. - -http 환경에서는 Utterance 가 제대로 작동하지 않을 수 있습니다. 여러분의 웹사이트를 https 환경으로 제공하세요. - ## OG Image 를 설정하고 싶어요. `/static` 디렉토리의 `og-image.png` 파일을 여러분이 원하는 이미지 파일로 대체하세요. diff --git a/contents/posts/other-tips/index.md b/contents/posts/other-tips/index.md index c81cea80..a57d8ebc 100644 --- a/contents/posts/other-tips/index.md +++ b/contents/posts/other-tips/index.md @@ -15,10 +15,6 @@ The favicon is located in `static/favicon.png`. If you replace that image, the f If you want to change the name of the favicon, change the `icon` property of `gatsby-plugin-manifest` in `gatsby-config.js`. -## Utterance is not working properly. - -In the http environment, utterance may not work properly. Host your blog with https. - ## How to set OG Image? Replace the `og-image.png` file in the `/static` directory with your own image file. diff --git a/contents/posts/quick-start-kr/index.md b/contents/posts/quick-start-kr/index.md index bd0feec7..ba89c976 100644 --- a/contents/posts/quick-start-kr/index.md +++ b/contents/posts/quick-start-kr/index.md @@ -30,7 +30,7 @@ $ npm run start ## 3. Github 레포지토리 생성 -Utterance 댓글 위젯은 **Github 이슈 시스템** 기반입니다. 따라서 각 블로그 별 Github 레포지토리가 필요합니다. 또한 여러분이 Github Pages 혹은 Netlify 로 블로그를 배포하길 원한다면, Github 레포지토리는 필수입니다. +Giscus 댓글 위젯은 **Github Discuss 시스템** 기반입니다. 따라서 각 블로그 별 Github 레포지토리가 필요합니다. 또한 여러분이 Github Pages 혹은 Netlify 로 블로그를 배포하길 원한다면, Github 레포지토리는 필수입니다. 만약 Github 레포지토리를 생성하는 법을 모른다면, [Github 공식 문서](https://docs.github.com/en/github/getting-started-with-github/create-a-repo) 를 참조하세요. @@ -54,14 +54,21 @@ module.exports = { instagram: "https://www.instagram.com", etc: "https://www.google.com/", }, - utterances: { + giscus: { repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}", - type: "pathname", + repoId: "{YOUR_GITHUB_REPOSITORY_ID}", + category: "{YOUR_GITHUB_REPOSITORY_CATEGORY}", + categoryId: "{YOUR_GITHUB_REPOSITORY_CATEGORY_ID}", + mapping: "pathname", + strict: "0", + reactionsEnabled: "1", + inputPosition: "bottom", + lang: "en", }, } ``` -gatsby-starter-hoodie 는 `blog-config.js` 라는 설정 파일을 제공합니다. 이 파일에서 블로그 정보, 작성자 프로필, Utterance 설정 등을 작성할 수 있습니다. 여러분 블로그 설정에 맞게 `blog-config.js` 를 설정하세요. 하지만, `utterances.type` 속성은 수정하지 않는 것을 권장합니다. +gatsby-starter-hoodie 는 `blog-config.js` 라는 설정 파일을 제공합니다. 이 파일에서 블로그 정보, 작성자 프로필, Giscus 설정 등을 작성할 수 있습니다. 여러분 블로그 설정에 맞게 `blog-config.js` 를 설정하세요. ### 프로필 이미지 변경 diff --git a/contents/posts/quick-start/index.md b/contents/posts/quick-start/index.md index 16935317..8b6f591a 100644 --- a/contents/posts/quick-start/index.md +++ b/contents/posts/quick-start/index.md @@ -30,7 +30,7 @@ Now you can access to your blog at localhost:8000. ## 3. Create your own Github repository -Utterance comment widget is based on **Github issue system**. So you need your own GitHub repository. Also, if you want to publish your blog through Github Pages or Netlify, the Github Repository is a necessary. +Giscus comment widget is based on **Github Discuss system**. So you need your own GitHub repository. Also, if you want to publish your blog through Github Pages or Netlify, the Github Repository is a necessary. If you don't know how to create a GitHub repository, follow the [official GitHub documentation](https://docs.github.com/en/github/getting-started-with-github/create-a-repo). @@ -55,16 +55,21 @@ module.exports = { instagram: "https://www.instagram.com", etc: "https://www.google.com/", }, - utterances: { + giscus: { repo: "{YOUR_GITHUB_NAME}/{YOUR_REPOSITORY_NAME}", - type: "pathname", + repoId: "{YOUR_GITHUB_REPOSITORY_ID}", + category: "{YOUR_GITHUB_REPOSITORY_CATEGORY}", + categoryId: "{YOUR_GITHUB_REPOSITORY_CATEGORY_ID}", + mapping: "pathname", + strict: "0", + reactionsEnabled: "1", + inputPosition: "bottom", + lang: "en", }, } ``` -gatsby-starter-hoodie provides a configuration file called `blog-config.js`. In this file, you can configure blog, biography (profile), and utterance. The website settings you are currently viewing are as above. - -Configure `blog-config.js` to suit your blog. However, it is recommended not to modify `utterances.type`. +gatsby-starter-hoodie provides a configuration file called `blog-config.js`. In this file, you can configure blog, biography (profile), and giscus. The website settings you are currently viewing are as above. Configure `blog-config.js` to suit your blog. ### Change profile image