1. Hugo 설치 및 블로그 테마 설정

Mac OS 기준

1.1. Hugo 설치하기

# Hugo 설치
brew install hugo

# hugo 버전 확인
hugo version
> hugo v0.104.3+extended darwin/amd64 BuildDate=unknown

1.2. Hugo 블로그 만들기 & PaperMod 테마 설치하기

Hugo 블로그 역시 여러가지 테마를 가지고 있고, 이는 이 링크에서 확인할 수 있다. 그 중 PaperMod 테마가 깔끔하고 마음에 들어 선택하였다. 테마마다 블로그 설정이 조금씩 달라질 수 있으므로, 테마의 레퍼런스도 꼼꼼히 확인해보기를 추천한다.

참고로, 테마 설치는 git을 활용한다. 아래 명령어를 단계단계 실행해보자.

# Hugo 블로그 디렉토리 구조 만들기
# hugo new site {디렉토리 이름}
hugo new site blog

cd blog

# git 초기화
git init

# PaperMod 테마 가져오기 (submogulde 사용)
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

# 로컬에서 테스트 실행해보기
echo "theme = 'PaperMod'" >> config.toml
hugo server

1.3. 블로그 초기 설정 및 게시글 설정 템플릿 만들기

블로그 설정 (config.toml)

아래는 PaperMod 예제 설정을 바탕으로 내 블로그에 맞는 설정으로 변경한 모습이다.

baseURL = "https://parker1609.github.io/"
title = "Parker Blog"
paginate = 5
theme = "PaperMod"
enableRobotsTXT = true
buildDrafts = false
buildFuture = false
buildExpired = false
googleAnalytics = "UA-123-45"
pygmentsUseClasses = true

[minify]
disableXML = true
minifyOutput = true

[params]
env = "production"
title = "Parker Blog"
description = "Here is parker blog."
keywords = [ "Blog", "Portfolio", "PaperMod" ]
author = "Me"
images = [ "<link or path of image for opengraph, twitter-cards>" ]
DateFormat = "January 2, 2006"
defaultTheme = "auto"
disableThemeToggle = false
ShowReadingTime = true
ShowShareButtons = true
ShowPostNavLinks = true
ShowBreadCrumbs = true
ShowCodeCopyButtons = true
ShowWordCount = true
ShowRssButtonInSectionTermList = true
UseHugoToc = true
disableSpecial1stPost = false
disableScrollToTop = false
comments = false
hidemeta = false
hideSummary = false
showtoc = false
tocopen = false

[params.assets]
favicon = "<link / abs url>"
favicon16x16 = "<link / abs url>"
favicon32x32 = "<link / abs url>"
apple_touch_icon = "<link / abs url>"
safari_pinned_tab = "<link / abs url>"

[params.label]
text = "파커 블로그"
icon = "/apple-touch-icon.png"
iconHeight = 35

[params.profileMode]
enabled = false
title = "ExampleSite"
subtitle = "This is subtitle"
imageUrl = "<img location>"
imageWidth = 120
imageHeight = 120
imageTitle = "my image"

[[params.profileMode.buttons]]
name = "Posts"
url = "posts"

[[params.profileMode.buttons]]
name = "Tags"
url = "tags"

[params.homeInfoParams]
Title = "Hi there 👋"
Content = "Welcome to my blog"

#   [[params.socialIcons]]
#   name = "twitter"
#   url = "https://twitter.com/"

#   [[params.socialIcons]]
#   name = "stackoverflow"
#   url = "https://stackoverflow.com"

[[params.socialIcons]]
name = "github"
url = "https://github.com/parker1609"

[params.analytics.google]
SiteVerificationTag = "XYZabc"

[params.analytics.bing]
SiteVerificationTag = "XYZabc"

[params.analytics.yandex]
SiteVerificationTag = "XYZabc"

#   [params.cover]
#   hidden = true
#   hiddenInList = true
#   hiddenInSingle = true

[params.editPost]
URL = "https://github.com/parker1609/blog/tree/main/content"
Text = "Suggest Changes"
appendFilePath = true

#   [params.fuseOpts]
#   isCaseSensitive = false
#   shouldSort = true
#   location = 0
#   distance = 1_000
#   threshold = 0.4
#   minMatchCharLength = 0
#   keys = [ "title", "permalink", "summary", "content" ]

[[menu.main]]
identifier = "categories"
name = "categories"
url = "/categories/"
weight = 10

[[menu.main]]
identifier = "tags"
name = "tags"
url = "/tags/"
weight = 20

[[menu.main]]
identifier = "example"
name = "example.org"
url = "https://example.org"
weight = 30

[markup.highlight]
noClasses = false

기본적으로 설정을 한 부분은 아래와 같다.

baseURL: github 블로그 페이지를 호스팅할 때 URL
title: Web 홈 화면에서 탭 창에 보이는 문자열
theme: 테마 이름
[params]: 글 작성할 때, 기본 설정으로 들어가는 값들
[params.label]
- text: 홈 화면 왼쪽 상단에 표시될 문자열

그 외에는 자신이 필요하다 싶은 것은 주석 해제해서 사용하면 될 듯 하다. 각 설정이 하는 일은 로컬에서 Hugo를 실행해두고 테스트를 해보면 좀 더 이해하기 쉬울 것이다. 블로그 기능을 추가하면서는 더 많은 설정이 추가될 예정이다.

글 생성 템플릿 설정 (archetypes/post.md)

블로그 글 md 파일은 최상단에 설정을 가지고 있다. 이를 작성할 때마다 추가하는 것은 매우 번거롭다. 그래서 이 설정에 대한 템플릿 파일을 만들고, hugo 명령어로 이 템플릿 파일을 기반으로 새 글 md 파일을 만들 수 있다.

이 템플릿 파일은 디렉토리 archetypes 아래에 생성이 필요하다. 이에 대한 예제 파일은 이 링크에서 확인할 수 있다. 아래는 이 예제 파일을 필요에 맞게 수정한 모습이다.

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
# weight: 1
# aliases: ["/first"]
tags: ["first"]
author: "parker1609"
showToc: true
TocOpen: false
draft: false
hidemeta: false
comments: true
disableHLJS: false # to disable highlightjs
disableShare: true
hideSummary: false
searchHidden: true
ShowReadingTime: false
ShowBreadCrumbs: true
ShowPostNavLinks: true
ShowWordCount: false
ShowRssButtonInSectionTermList: true
UseHugoToc: false
---

위 템플릿 파일을 바탕으로 새 글을 작성하려면 아래 명령어를 사용하자.

# hugo new --kind {템플릿 파일 이름} {새 글 제목}.md
hugo new --kind post post/new-post.md

위 명령어를 수행하면, post 디렉토리 아래에 new-post.md 파일이 생성되고, 기본적으로 post.md 파일에 있는 내용이 추가되어 있다.

참고자료

2. 블로그 호스팅하기 (github)

지금까지 로컬에서 Hugo 설치와 블로그 테마를 적용해보았다. 이제 이를 Github 페이지에 호스팅을 해서 웹에서 누구나 볼 수 있도록 해보자. 그 전에 github 리포지토리를 만들어야 하는데, 관리의 편리를 위해서 2 개의 리포지토리를 사용할 것이다.

github 원격 리포지토리는 2개를 만들지만, 로컬에서는 1개의 리포지토리로 관리할 수 있다. 이는 git의 submodule을 다시 한 번 활용해서 이와 같은 구조를 만들 것이다.

이전 과정에서 로컬에는 디렉토리 blog 라는 이름으로 블로그 구조를 관리하고 있었다. Hugo 블로그의 디렉토리 구조는 기본적으로 다음과 같다.

example/
├── archetypes/
│   └── default.md
├── assets/
├── content/
├── data/
├── layouts/
├── public/
├── static/
├── themes/
└── config.toml

여기서 public 디렉토리는 빌드 시, 웹에 보여줄 수 있는 구조가 저장되어있다. 따라서 github 호스팅을 위해서는 사실 이 디렉토리만 있으면 된다. 그래서 이 public 디렉토리만 따로 github 원격 리포지토리로 관리하기 위해서 submodule 명령어를 이용해서 분리할 예정이다.

정리하면, github 원격 리포지토리는 다음과 같이 2 개 리포지토리로 관리된다.

blog: 블로그 설정 및 글 등 실제 Hugo 블로그를 관리하는 리포지토리 (+ 로컬)
{github username}.github.io: 블로그 호스팅을 위한 리포지토리

자 이제 실제로 위 구조를 만들어보자. 먼저, github에 2개의 리포지토리를 만들자.

blog
{github username}.github.io

blog라는 이름은 사실 자신이 편한 이름 아무거나로 지정해주면 된다. (아래 설명은 그대로 blog라는 이름으로 진행할 예정이다.) 하지만 {github username}.github.io 이는 github page를 사용하기 위해 이 형태로 만들어야 한다. (참고 링크)

위 두 리포지토리를 만들었다면, 이를 연결하기 위한 HTTPS 링크 또는 SSH를 볼 수 있다. 그럼 원격 리포지토리 설정과 submodule로 지정해보자.

# blog remote repository origin 설정
git remote add origin https://github.com/parker1609/blog.git

# public 디렉토리, {github username}.github.io 리포지토리 submodule 설정
git submodule add -b main https://github.com/parker1609/parker1609.github.io.git public

# submodule 연동 확인
ll .git/modules

submodule이 정상적으로 연동되었다면, .git/modules 이 디렉토리 아래에 public 디렉토리가 생성되었을 것이다. 그런데, 만약 public 디렉토리 아래에 아무것도 없는 경우 다음과 같은 경고가 발생할 수도 있다.

'/Users/.../blog/public'에 복제합니다...
warning: 빈 저장소를 복제한 것처럼 보입니다.
fatal: 'origin/main'은(는) 커밋이 아니고 여기에서 'main' 브랜치를 만들 수 없습니다
fatal: unable to checkout submodule 'public'

위 경고가 발생해도 .git/modules 이 디렉토리 아래에 public 디렉토리가 정상적으로 있다면, 정상적으로 연동이 된 것이다. 실제로 submoudle로 동작하는지 보려면 public 디렉토리로 이동해서 git 정보가 다른지를 보자.

~/blog > git remote -v
~/blog > cd public
~/blog/public > git remote -v

위 명령어를 실행해보면 ~/blog 에서 git remote 정보와 ~/blog/public 에서 git remote 정보가 다른 것을 볼 수 있다. 그런데 .gitmodules 파일에는 위 경고때문인지 themes와 다르게 정보가 추가안되었을 수 있는데, 이는 submodule로 동작하는데는 문제가 없다. 이 정보는 github 리포지토리에서 submodule로 지정된 디렉토리를 클릭했을 때, 설정된 submodule 리포지토리 페이지로 이동하기 위함으로 보인다. 이는 따로 추가해주면 된다.

한 가지 삽질한 내용을 공유드리면, submodule 내부의 remote 정보도 단순히 해당 리포지토리에 올리기 위한 정보입니다. (submodule 설정하면 기본적으로 명시한 HTTPS 정보로 remote origin 정보로 설정된 것으로 기억됩니다.) 만약 로컬에서 github 계정 정보를 여러 개 쓰다보면, remote 정보로 사용하는 ssh 값을 계정에 따라 바꿔서 쓰는 경우가 있는데, 이 역시 그냥 submodule로 연동한 디렉토리로 이동해서, 기존 origin 정보를 삭제하고 재등록해주면 됩니다.

script 파일로 자동화하기

로컬에는 blog 하나의 리포지토리가 있지만, github 원격 리포지토리는 2개가 있다. 따라서 변경한 내용을 빌드하고, 이를 반영({github username}.github.io)하고 관리(blog)하기 위해서는 각각 push를 해주어야 한다. 이러한 번거러움을 해결하기 위해 스크립트 파일로 한 번에 수행할 수 있다.

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

echo "=== Step1. build hugo"
# Build the project.
# hugo -t <your theme>
hugo -t PaperMod

echo "=== Step2. commit & push public directory"
# Go To Public folder, sub module commit
# shellcheck disable=SC2164
cd public
# Add changes to git.
git add .

# Commit changes.
msg="rebuilding parker1609 blog, `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin main

echo "=== Step3. commit & push blog directory"
# Come Back up to the Project Root
cd ..

# blog repository Commit & Push
git add .

msg="rebuilding parker1609 blog, `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

git push origin main

위를 deploy.sh 파일에 추가하고, 실행 권한을 부여해주자.

chmod 777 deploy.sh

3. 댓글 기능 추가하기 (Giscus)

Hugo는 댓글 기능을 위해 기본적으로 Disqus 템플릿을 제공하여 간단하게 추가할 수 있다. (설정 방법 링크)

하지만 Disqus는 다음과 같은 몇 가지 불편한 점이 있어서 다른 도구를 찾아보았다.

Disqus 계정을 따로 만들어야 한다.
댓글 데이터가 Disqus 내에 저장된다.

다른 댓글 도구가 무엇인지 찾아보았을 때, 이 링크에 잘 정리되어 있어서 여기를 참고 했다. 이 글을 보았을 때, 오픈소스로 무료로 사용할 수 있고, github 계정만 필요하며 댓글 데이터도 github 내에 저장되는 도구가 Giscus였다. Giscus에도 장점을 다음과 같이 소개하고 있다.

Giscus-장점

그리고 https://giscus.app/ko 이 링크에서 설정을 쉽게 확인하고 추가할 수 있다. 이러한 여러 장점이 느껴져서 Giscus를 선택했다. Giscus 추가 과정은 다음과 같다.

1) Giscus 앱을 호스팅하는 블로그 리포지토리 {github username}.github.io에 설치를 해야 한다.

https://github.com/apps/giscus 이 링크에 접속하여 블로그 호스팅 리포지토리에 설치하자.

Giscus-앱-설치

사실 위 리포지토리를 잘못 설정했었는데, settings > Applications 로 가면 설정을 변경할 수 있다.

2) giscus를 설치한 리포지토리의 Discussions 설정을 on 해야 한다.

리포지토리를 생성하면, Discussions 설정은 기본적으로 off되어있다. 이를 활성화하려면 {github username}.github.io 리포지토리 > Settings > General > Features로 이동하면 Discussions 체크박스를 볼 수 있다. 이를 클릭하여 활성화하자.

3) Giscus 설정 만들기

https://giscus.app/ko 이 링크에서 웹으로 내가 원하는 giscus 설정을 만들 수 있다.

Giscus-설정

위 설정을 순서대로 진행하면 마지막에 아래와 같이 설정한 결과를 보여준다.

<script src="https://giscus.app/client.js"
        data-repo="parker1609/parker1609.github.io"
        data-repo-id="R_kgDOI_VMsw"
        data-category="Announcements"
        data-category-id="DIC_kwDOI_VMs84CUTZR"
        data-mapping="og:title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="ko"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

Discussion 제목이 페이지 og:title을 포함
‘엄격한 제목 일치 사용’ 활성화
Discussion 카테고리: Announcements
‘이 카테고리에서만 Discussion 찾기’ 활성화
기능
- 메인 포스트에 반응 남기기
- 댓글 느리게 불러오기
테마: preferred_color_scheme

4) 블로그 설정에 Giscus 추가하기

3번 과정에서 만든 <script> 태그 결과를 글마다 추가하기 위해 Hugo에서 제공해주는 템플릿 파일로 분리하는 방법을 사용한다. 그리고 파라미터 설정값은 config.toml에서 가져오도록 분리를 해볼 예정이다.

먼저, <script> 태그 결과를 config.toml에 값을 가져오도록 변수를 사용하고, layouts 디렉토리안에 만들어보자. layouts/posts/giscus.html 파일을 만들어 다음 내용을 추가한다.

아래 코드는 이 링크를 참고했다.

{{- if isset .Site.Params "giscus" -}}
{{- if and (isset .Site.Params.giscus "repo") (not (eq .Site.Params.giscus.repo "" )) (eq (.Params.disable_comments | default false) false) -}}
<div id="giscus_thread">
    <script src="https://giscus.app/client.js"
            data-repo="{{ .Site.Params.giscus.repo }}"
            data-repo-id="{{ .Site.Params.giscus.repoID }}"
            data-category="{{ .Site.Params.giscus.category }}"
            data-category-id="{{ .Site.Params.giscus.categoryID }}"
            data-mapping="{{ default "pathname" .Site.Params.giscus.mapping }}"
            data-strict="{{ default "0" .Site.Params.giscus.dataStrict }}"
            data-reactions-enabled="{{ default "1" .Site.Params.giscus.reactionsEnabled }}"
            data-emit-metadata="{{ default "0" .Site.Params.giscus.emitMetadata }}"
            data-input-position="{{ default "bottom" .Site.Params.giscus.inputPosition }}"
            data-theme="{{ default "light" .Site.Params.giscus.theme }}"
            data-lang="{{ default "en" .Site.Params.giscus.lang }}"
            data-loading="{{ default "lazy" .Site.Params.giscus.loading }}"
            crossorigin="anonymous"
            async>
    </script>
</div>
{{- end -}}
{{- end -}}

config.toml에 gitcus 설정이 있는 경우에만 아래 태그를 추가하도록한 모습이다.
나머지는 모두 config.toml에 있는 값을 가져오도록 변수로 선언하였다.

config.toml 파일에 3번 과정에서 만든 설정 값을 추가해보자.

[params.giscus]
repo = "parker1609/parker1609.github.io"
repoID = "R_kgDOI_VMsw"
category = "Announcements"
categoryID = "DIC_kwDOI_VMs84CUTZR"
mapping = "og:title"
dataStrict = "1"
reactionsEnabled = "1"
emitMetadata = "0"
inputPosition = "bottom"
theme = "preferred_color_scheme"
lang = "ko"
loading = "lazy"

마지막으로, 글마다 Giscus가 추가되도록 layouts/partials/comments.html 파일에 다음 내용을 추가하자.

{{ template "posts/giscus.html" . }}

그리고, 글마다 있는 최상단 설정에 comments: true 설정도 추가되어 있어야 한다.

4. 필요 기능 및 설정 추가하기

추가 예정
- 검색 기능
- Google Analytics 연동
- Enhanced SEO

4.1. post 설정 템플릿

_/archetypes/post.md

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
# weight: 1
# aliases: ["/first"]
tags: ["first"]
author: "parker1609"
showToc: true
TocOpen: false
draft: false
hidemeta: false
comments: true
disableHLJS: false # to disable highlightjs
disableShare: true
hideSummary: false
searchHidden: true
ShowReadingTime: false
ShowBreadCrumbs: true
ShowPostNavLinks: true
ShowWordCount: false
ShowRssButtonInSectionTermList: true
UseHugoToc: false
---

comments: 댓글 on/off
disableHLJS: 코드 하이라이트 on/off

4.2. 코드 블록에 복사 버튼 추가

config.toml

[params]
# code copy button on
ShowCodeCopyButtons = true

4.3. 상단 메인 메뉴에 ‘Archives’ 추가

_content/archives.md 파일 생성

---
title: "Archive"
layout: "archives"
# url: "/archives"
summary: "archives"
---

config.toml 설정 추가

[[menu.main]]
identifier = "archives"
name = "Archives"
url = "/archives/"
weight = 10

4.4. 상단 메인 메뉴에 ‘Search’ 추가 (검색 기능 추가)

참고 링크: https://github.com/adityatelange/hugo-PaperMod/wiki/Features#search-page

4.5. SEO 설정

SEO를 설정하기 위해서는 robots.txt 파일과 sitemap.xml 파일이 필요하다.

robots.txt

웹 사이트에서 검색 엔진 로봇이 접근할 수 있는 페이지를 제어하기 위해 사용되는 설정 파일이다.

이 파일은 웹 사이트 루트 디렉토리에 위치해야 한다. (내 블로그 기준으로 https://parker1609.github.io/robots.txt로 접근이 가능해야 한다.)
검색 엔진 로봇은 이 파일을 읽은 후, 해당 웹 사이트의 페이지 접근 권한을 결정한다.

HUGO에서는 config 파일에서 이 파일을 생성할 수 있다. 생성 설정은 다음과 같다.

# robots.txt
enableRobotsTXT = true

HUGO 설명 참고: https://gohugo.io/templates/robots/

sitemap.xml

sitemap.xml 파일은 검색 엔진이 해당 웹 사이트를 크롤링할 때 사용하는 파일로, 웹 사이트 내의 페이지를 검색 엔진에게 알려주는 역할을 한다.

HUGO에서는 config 파일에서 설정하는 방법은 다음과 같다.

[sitemap]
  changefreq = 'daily'
  filename = 'sitemap.xml'
  priority = 0.5

changefreq: 변경 빈도 (기본값: “”)
- always: 페이지가 항상 업데이트되는 경우
- hourly: 페이지가 매시간마다 업데이트되는 경우
- daily: 페이지가 매일 업데이트되는 경우
- weekly: 페이지가 매주 업데이트되는 경우
- monthly: 페이지가 매월 업데이트되는 경우
- yearly: 페이지가 매년 업데이트되는 경우
- never: 페이지가 업데이트되지 않는 경우
- 블로그의 경우, ‘daily’ 설정을 추천한다. 하지만 데일리라고 해서 무조건 매일 업데이트를 보장하지는 않는다.
filename: 파일명
priority: 페이지의 우선순위 (기본값: 0.5)
- 0.0 ~ 1.0 까지 입력 가능하며, 0.5는 모든 페이지의 우선순위가 동일하다는 의미

HUGO 설명 참고: https://gohugo.io/templates/sitemap-template/

검색 엔진에 적용하기

이 단계에서는 검색 엔진에 내가 등록한 위 파일들이 사용되도록 설정해보자. 한국에서 사용하는 대표적인 검색 엔진은 구글, 다음, 네이버 이렇게 3가지가 존재한다. 이 세 개의 검색 엔진에 각각 등록해보자.

구글

먼저, 구글이다. 구글은 Google Search Console 해당 링크에 접속해서 설정을 할 수 있다.

이 링크에 접속하면 첫 화면에 다음과 같이 두 가지 선택사항이 보인다.

google-search-console

현재는 Github Page 도메인(github.io)을 그대로 사용하기 때문에 도메인에 등록할 필요는 없고, 오른쪽의 URL 접두어에 등록하면 된다.

위 그림과 같이 블로그 링크를 입력해서 계속 버튼을 누르면, 소유권을 확인하는 몇 가지 방법을 보여준다.

HTML 파일: 웹사이트에 HTML 파일 업로드 (권장)
HTML 태그: 사이트 홈페이지에 메타태그 추가
Google 애널리틱스: Google 애널리틱스 계정 사용
Google 태그 관리자: Google 태그 관리자 계정 사용
도메일 이름 공급업체: DNS 레코드와 Google 연결

여기서 권장하는 HTML 파일을 사용하자. 제공해주는 파일을 다운로드 받은 후에 해당 HTML 파일이 블로그 URL 루트에 조회가 가능해야 한다. 예를 들어, 다운로드 받은 파일이 googleXXXX.html 인 경우, https://parekr1609.github.io/googleXXXX.html URL로 요청시 정상적으로 HTML 파일이 보여야한다.

HUGO에서 이와 같이 설정하려면, static 디렉터리 바로 아래에 해당 HTML 파일을 위치시키면 된다.

HTML 파일을 설정한 후 배포까지 완료한 후, 실제로 위 URL로 접속되는지 확인해보자.(그 전에 로컬에서 확인해보는 것을 추천) 확인이 완료되면, 다시 구글 서치 콘솔에서 ‘확인’ 버튼을 클릭하면 구글에서 소유권 확인이 진행되고 완료되면 아래와 같이 ‘소유권 확인됨’을 볼 수 있다.

google-search-console-register

다음 단계로 설정한 sitemap을 구글에 등록해보자.

다시 Google Search Console에 접속해서 왼쪽 탭에 ‘Sitemaps’ 메뉴를 클릭하면, 다음과 같이 Sitemap을 추가할 수 있는 창이 보인다. (소유권 확인이 완료되면, 검색을 효율적으로 하기 위해 설정하라는 메일이 오는데 여기서도 바로 접속할 수 있다.)

google-sitemaps

‘제출’ 버튼을 클릭하면, 제출된 사이트맵 리스트에 결과가 보여진다. 처음 등록하면 바로 ‘성공’이라고 뜨지 않고, ‘알수없음’ 유형에 ‘가져올 수 없음’ 상태가 되기도 한다. 이는 시간이 지나면 정상적으로 처리될 수 있으니, 시간이 지나고 다시 한 번 확인해보자.

실제로 구글에 검색되기까지는 빠르면 2 ~ 3일에서 길게는 한 달까지도 걸린다고 한다. 이는 천천히 확인해보자. (검색창에 ‘site:https://parker1609.github.io/’ 로 검색해서 실제로 내 블로그 주소가 검색되는지 확인해보자!)

한 시간 정도 지나니, ‘site:https://parker1609.github.io/’ 검색 시 내 블로그 메인 링크가 조회된다.

참고 자료 링크

네이버

네이버는 Naver Search Advisor 사이트에서 설정할 수 있다. 로그인 후, 오른쪽 상단의 ‘웹마스터 도구’ 버튼을 클릭하자.

블로그 링크 입력 후 등록하기 버튼 클릭
‘HTML 파일 업로그’ 방식으로 소유권 확인 작업 진행 (구글과 동일한 방식)
등록 완료 후, 사이트맵 제출 (등록한 링크 클릭 -> 오른쪽 메뉴 요청 -> 사이트맵 제출 클릭)
robots.txt 수집요청 (오른쪽 메뉴 검증 -> robots.txt 클릭)
RSS 등록하기 (https://parker1609.github.io/index.xml, 링크에서 RSS 확인할 수 있다. theme 기본 설정에 RSS 설정이 포함되어서 만들어진 것으로 보인다.)
시간이 지나고 ‘site:https://parker1609.github.io/‘로 검색해서 내 블로그 결과 나오는지 확인하기

다음은 https://webmaster.daum.net/ 사이트에서 설정을 할 수 있다.

PIN 발급 받기 클릭
URL, PIN코드 입력하기 (PIN코드는 그냥 비밀번호라고 생각하면 될듯)
발급받은 후, 나온 코드 robots.txt에 추가
…

TODO

기본 검색 기능이 딱히 마음에 들지 않아서 다른 기능으로 찾아보기
Google Analytics 연동

1. Hugo 설치 및 블로그 테마 설정#

1.1. Hugo 설치하기#

1.2. Hugo 블로그 만들기 & PaperMod 테마 설치하기#

1.3. 블로그 초기 설정 및 게시글 설정 템플릿 만들기#

블로그 설정 (config.toml)#

글 생성 템플릿 설정 (archetypes/post.md)#

참고자료#

2. 블로그 호스팅하기 (github)#

script 파일로 자동화하기#

3. 댓글 기능 추가하기 (Giscus)#

1) Giscus 앱을 호스팅하는 블로그 리포지토리 {github username}.github.io에 설치를 해야 한다.#

2) giscus를 설치한 리포지토리의 Discussions 설정을 on 해야 한다.#

3) Giscus 설정 만들기#

4) 블로그 설정에 Giscus 추가하기#

4. 필요 기능 및 설정 추가하기#

4.1. post 설정 템플릿#

4.2. 코드 블록에 복사 버튼 추가#

4.3. 상단 메인 메뉴에 ‘Archives’ 추가#

4.4. 상단 메인 메뉴에 ‘Search’ 추가 (검색 기능 추가)#

4.5. SEO 설정#

robots.txt#

sitemap.xml#

검색 엔진에 적용하기#

구글#

네이버#

다음#

TODO#