Web on plzhans blog

Hugo 블로그 만들기 - 시작부터 SEO까지

Thu, 03 Sep 2026 00:00:00 +0000

개요

이 블로그 자체가 이 순서대로 구축됐다. Notion에서 글을 쓰고 Markdown으로 변환해 Hugo로 빌드하고 GitHub Pages로 배포하는 파이프라인부터, 커스텀 도메인 연결, 다국어 지원, 보안 헤더까지 순서대로 정리했다.

왜 이 조합인가

정적 사이트는 서버를 따로 운영할 필요가 없고, GitHub Pages 같은 무료 호스팅에 올리면 그 자체로 빠르고 안정적이다. 문제는 “정적"이라는 말대로 글쓰기 경험이 불편해지기 쉽다는 점인데, Notion을 CMS로 쓰면 이 문제가 해결된다 — 평소 쓰던 에디터에서 글을 쓰고, API로 Notion 페이지를 그대로 Markdown으로 끌어와 빌드하면 된다. Hugo는 정적 사이트 생성기 중에서도 빌드 속도가 빠르고 테마 생태계가 갖춰져 있어 선택했다.

SEO 감사가 지적한 보안 헤더 4개, Cloudflare에서 코드 없이 적용하기

Sun, 30 Aug 2026 01:25:00 +0000

개요

SEO 감사 리포트에서 보안 헤더 네 개가 지적되는 경우가 있다. Strict-Transport-Security, Content-Security-Policy, X-Content-Type-Options, Referrer-Policy다.

처음 보면 이게 왜 SEO 항목인가 싶다. 결론부터 말하면 이 헤더들이 검색 순위를 직접 올려주지는 않는다.

이 글에서는 왜 SEO 감사에 보안 헤더가 들어오는지, 각 헤더가 무슨 일을 하는지, 그리고 Cloudflare를 앞단에 둔 정적 블로그에서 나중에 관리하기 편한 조합으로 적용하는 방법을 정리한다.

왜 SEO 리포트가 보안 헤더를 지적하나

Lighthouse 점수에 포함돼 있다

대부분의 SEO 감사 도구는 Google Lighthouse를 기반으로 기술 SEO 점수를 낸다. Lighthouse의 네 개 카테고리 중 하나가 Best Practices이고 여기에 CSP, HSTS, X-Content-Type-Options 체크가 들어 있다.

hugo site 다국어 지원하기

Wed, 11 Feb 2026 09:55:00 +0000

목표

Hugo 블로그에 다국어 지원과 SEO 최적화를 적용하여 검색 엔진 노출을 극대화하고 다국어 사용자에게 적절한 언어 버전을 제공한다.

SEO 설정

SEO(Search Engine Optimization, 검색 엔진 최적화)는 Google 등 검색 엔진이 사이트의 콘텐츠를 잘 이해하고 검색 결과에 노출시킬 수 있도록 사이트 구조와 메타데이터를 최적화하는 작업이다.

이 문서는 블로그에 적용된 SEO 설정을 정리한다.

1. 절대 URL - Hugo baseURL 설정

파일: hugo/hugo.toml
내용: baseURL = 'https://blog.plzhans.com'
sitemap.xml, RSS 피드, Open Graph 등에서 올바른 절대 URL이 생성됨
Sitemap (sitemap.xml), RSS 피드 (index.xml)는 Hugo가 자동 생성
hugo server (개발)에서는 자동으로 localhost:1313을 사용하므로 별도 처리 불필요

2. robots.txt 자동 생성

파일: hugo/hugo.toml
내용: enableRobotsTXT = true
Hugo 빌드 시 robots.txt 자동 생성 (모든 크롤러 허용 + Sitemap URL 포함)

3. Schema.org 구조화 데이터 (JSON-LD)

파일: hugo/layouts/_default/single.html
글 페이지(type != "page")에 BlogPosting JSON-LD 삽입
포함 항목: headline, datePublished, dateModified, author, description, mainEntityOfPage
Google 검색 결과에서 리치 스니펫(작성자, 날짜 등) 표시 가능

4. og:image (대표 이미지) / Open Graph

파일: src/services/NotionExportService.mjs
Notion 동기화 시 콘텐츠의 첫 번째 이미지를 감지하여 front matter images 필드에 자동 추가
Open Graph 메타 태그는 Hugo 내장 템플릿(_internal/opengraph.html)으로 출력되며, images를 og:image로 사용

5. meta description / Twitter Card

파일: src/services/NotionExportService.mjs
Notion의 “요약” 프로퍼티를 front matter description 필드로 출력
Hugo 내장 opengraph/twitter_cards 템플릿 및 baseof.html의 meta description에서 사용
Twitter Card 메타 태그는 Hugo 내장 템플릿(_internal/twitter_cards.html)으로 출력
기타 메타 태그(author, viewport)도 테마에서 기본 제공

6. Canonical URL

파일: hugo/layouts/_default/baseof.html
테마(m10c)의 baseof.html을 오버라이드하여 <link rel="canonical"> 태그 추가
.Permalink을 canonical URL로 사용
다국어 hreflang 태그도 함께 포함 (번역 페이지 존재 시 alternate + x-default 출력)

7. Google Analytics (GA4)

테마(m10c)에서 기본 제공
Google Search Console 인증 시 GA 연동으로 인증 가능

다국어 SEO 핵심 요소

HTML lang 속성

페이지 언어를 명시하여 검색 엔진과 스크린 리더에 언어 정보를 제공한다.

Hugo + Github 블로그 만들기

Tue, 10 Feb 2026 08:46:00 +0000

서론

기술 관련 내용을 에버노트와 개인 문서에 정리해오다가 노션의 웹사이트 기능을 활용해 블로그로 운영하려고 준비했었다.

하지만 노션은 커스터마이징에 제약이 있었고 커스텀 도메인 사용에도 추가 비용이 발생해서 고민을 좀 하게 되었다.

대안으로 velog로 전환할지 Markdown으로 다시 작성해 Jekyll로 옮길지 고민했다.

하지만 작성이 편한 노션을 포기할 수 없었다. 결론은 노션으로 작성하고 정적 웹사이트로 배포하자!

Github pages 커스텀 도메인 사용하기

Tue, 10 Feb 2026 07:34:00 +0000

개요

GitHub Pages는 기본적으로 https://{계정명}.github.io/{저장소명}/ 형식의 URL을 제공한다.

이 문서는 커스텀 도메인을 연결하는 방법을 설명한다.

서브(하위) 도메인 사용

hugosample.plzhans.com과 같은 서브 도메인을 사용하는 경우다.

DNS 설정

도메인 DNS 설정에서 CNAME 레코드를 추가한다.

설정 예시

Type: CNAME
Name: 서브도메인 (예: hugosample)
Value: {계정명}.github.io

GitHub Pages 설정

Repository → Settings → Pages → Custom domain에서 커스텀 도메인을 입력한다.

HTTPS TLS/SSL 무료 vs 유료 인증서

Fri, 06 Feb 2026 06:29:00 +0000

개요

HTTPS 통신을 위해 TLS/SSL 인증서와 도메인이 필요하다.

소유한 도메인에 대해 발급되며 클라이언트는 접속한 도메인과 인증서의 도메인이 일치하는지 검증한다.

이 문서는 실무 관점에서 도메인별 인증서 발급 방법을 정리한다.

이론보다는 실무적 선택과 구현에 초점을 둔다.

SSL 인증서 발급 및 검증 흐름

핵심 포인트

CA 기관의 역할: 서버의 공개키를 검증하고 서명하여 신뢰성 보장
발급업체의 역할: 서버와 CA 기관 사이에서 인증서 발급 절차를 중개
OS의 역할: CA 루트 인증서를 사전 내장하여 클라이언트가 서버 인증서 검증에 사용
클라이언트의 역할: OS에 내장된 CA 루트 인증서로 서버 인증서의 서명을 검증하고 신뢰성 확인

sequenceDiagram participant 서버 participant 발급업체 participant CA기관 participant OS participant 클라이언트 %% 인증서 발급 단계 Note over 서버,CA기관: 1. 인증서 발급 단계 서버->>서버: 개인키/공개키 쌍 생성 서버->>발급업체: 인증서 구매 요청
(공개키 + 도메인 정보) 발급업체->>CA기관: CSR(인증서 서명 요청) 전달 CA기관->>CA기관: 도메인 소유권 검증
(DNS/HTTP/Email 방식) CA기관->>CA기관: CA 개인키로 서버 공개키 서명 CA기관->>발급업체: 서명된 SSL 인증서 발급
(공개키 + CA 서명 + 도메인 정보) 발급업체->>서버: 인증서 전달 서버->>서버: 인증서와 개인키를 서버에 설치 CA기관->>OS: CA 루트 인증서 사전 등록
(브라우저/OS 배포 시 내장) %% HTTPS 연결 단계 Note over 서버,클라이언트: 2. HTTPS 연결 단계 클라이언트->>서버: HTTPS 사이트 접속 요청
(Client Hello) 서버->>클라이언트: SSL 인증서 전송
(Server Hello) 클라이언트->>OS: CA 루트 인증서 조회
(인증서 검증용) OS->>클라이언트: CA 루트 인증서 반환 클라이언트->>클라이언트: 인증서 유효성 검증
1) CA 루트 인증서로 서명 확인
2) 도메인 일치 여부 확인
3) 유효기간 확인 alt 인증서 검증 성공 클라이언트->>클라이언트: 안전한 HTTPS 연결 표시 (🔒) Note over 서버,클라이언트: 이후 암호화된 통신 시작 else 인증서 검증 실패 클라이언트->>클라이언트: 보안 경고 표시
(신뢰할 수 없는 인증서) end

TLS/SSL 인증서란

웹에서 HTTP를 HTTPS로 전환하기 위해 필요한 디지털 인증서다. 서버에서 개인키를 생성하고