기술 블로그 - AdSense 광고 적용

광고 게재 승인을 기다리는 와중에 기존에 사용하던 티스토리 블로그를 정리하려고 갔는데 우연치않게 [수익]란을 보게 되었다.

현재 운영중이진 않아서 3개월 내 공개 발행글이 없는데 AdSense의 승인이 지연되는 이유가 발행글이 10 아래여서 인 것 같아서 포스팅을 늘리면서 기다려보기로 함. 20개 포스팅이 넘으면 다시 확인해볼 예정.

Google AdSense: 15일 소요(2022.02.01 - 02.15 중 포스팅 16개 작성)

이카루스 테마에서는 사이드바에 광고를 넣을 수 있도록 제공되는데, 여기에 광고를 넣으려면 _config.icarus.yml에서 client_id와 slot_id를 기입해주면 된다.

아래 작업을 하려면 우선 Google AdSense 내에서 계정을 검토하는 과정을 거쳐야하는데, 이게 2주까지 걸릴 수도 있다고 하더니 내 경우 15일 걸렸다. 막 만든 사이트고(2월 1일 신청당시 포스팅 3개), 검토 요청을 한 2월 1-2일이 설연휴라 더 늦어졌을지도 모르겠다.

승인이 나면 승인되었다는 메일이 오고, Adsense 페이지에 들어가면 다음과 같이 [준비됨]이라고 바뀌어있다.

(1) ads.txt 삽입

아래 나오는대로 ads.txt 파일을 다운받아 루트(source/)에 넣고 hexo cleanhexo g 하면 public/ 하위에 생성된 것을 볼 수 있을 것이다.

이 문제는 확인되어 해결되는 데까지 며칠 걸리는 것 같지만 광고 노출 자체는 승인 후 하루 지나서 바로 되어 문제삼지 않았다. (저 빨간 “수익 손실 위험” 팝업은 광고가 노출 되어도 계속 떠있었다.)

(2) 신규 광고 단위 만들기: 사이드 메뉴에 광고 넣기

우선 AdSense 사이드 메뉴의 [개요]에서 상단 탭의 [광고 단위 기준]으로 이동하면 디스플레이/인피드/콘텐츠 내 광고 중 타입을 골라서 단위를 생성할 수 있다.

이카루스 테마에서는 _config.icarus.yml 설정파일에서 위젯으로 제공하기 때문에 여기에 넣을 client ID와 unit ID만 만들어주면 된다.

1
2
3
4
5
6
7
8
9
widgets:
-
# Where should the widget be placed, left sidebar or right sidebar
position: left
type: adsense
# AdSense client ID
client_id: 'ca-pub-0'
# AdSense AD unit ID
slot_id: '0000000000'

내 경우 디스플레이 타입으로 생성하여 만들어진 코드에서 data-ad-client, data-ad-slot 속성값을 각각 client_id, slot_id로 붙여넣었다.

(3) 콘텐츠 내에 광고 삽입

콘텐츠 내에 광고는 포스팅 내에 광고 삽입을 말한다. 이 경우 [광고 단위 기준]의 콘텐츠 내 타입으로 생성하였는데 사이드 메뉴에 넣을 디스플레이 타입과는 다르게 아래와 같이 생성된 스크립트 코드를 직접 포스팅 내에 삽입해주어야 한다.

광고 단위가 처음 만들어져 게시되는 경우 1시간 내외로 시간이 걸릴 수 있다.

콘텐츠 내 타입 광고는 아래와 같이 나타나게 된다!

-

기술 블로그 - 구글 검색엔진 최적화(SEO;Search Engine Optimization) 적용

  • 이카루스에서 세팅하는 방법 - 링크

구 이카루스에서 ejs를 사용하다가 jsx로 바뀌어 위의 방법이 통하지 않았음.(링크)

링크에 따르면 구버전에 비해 React를 사용해 만든 기존 이카루스에서는 표준링크를 자동으로 생성하기 때문에 hexo-auto-canonical를 따로 설치하지 않아도 된다.(그런데 설치해버려서 npm uninstall 로 삭제.)

1
2
3
4
npm i hexo-autonofollow
npm i hexo-generator-feed
npm i hexo-generator-seo-friendly-sitemap
npm i hexo-generator-robotstxt

결국 설치하는 건 위의 4개.

[1] 검색 엔진 등록: 구글 서치 콘솔

이 단락에서는 [사이트맵 생성]과 [색인 생성]방법을 알아볼 건데, 우선 규모가 작은 웹사이트의 경우 아래와 같이 구글서치콘솔 가이드에서 사이트맵이 필요하지 않을 수도 있다고 나와있다.

나는 아래에도 나와있지만 사이트맵 생성에 오류가 있어 일단 사이트맵 대신 페이지마다 [색인 생성]을 하는 방법으로 각 페이지를 구글검색에 걸리도록 하였다. (현재 페이지가 4개 정도밖에 없음)

그렇다고 사이트맵을 생성하지 말아야하는 것은 아니다.

(1) 사이트맵 생성: 아직도 안됨

Google Search Console에서 URL 접두어를 이용하여 도메인을 등록한다.

[계속]을 눌렀을 때 나오는 파일을 다운로드하여 [프로젝트]/public/ 에 해당 파일을 옮겨 넣는다. 그리고 배포 후 조금 기다리면 아래와 같이 초록색이 뜬다.

소유권이 확인되면 [속성으로 이동] 또는 왼쪽 위 URL 드롭다운을 클릭하여 Search Console을 이용할 수 있다.

지금은 검색 엔진을 사용하기 위해 사이트맵을 rss2.xml과 sitemap.xml을 등록해준다.

  • “가져올 수 없음”에 관한 포스팅

그런데 “가져올 수 없음”이라고 실패/성공도 아닌 것이 뜬다. 사이트맵 입력 시 슬래시를 붙여서 “/sitemap.xml”으로 하면 잘 된다는 말이 있어서 해보았으나 다르지 않음. 아마 현재 설연휴라서 이게 처리가 늦어지는 것으로 보고 일단 보류하고 다른 방법을 찾아보았다.

(2) 색인 생성: 1-2일 소요

주의 > 색인 생성은 일일 할당량(10개 아래, 정확하지 않음)이 있어 이를 초과하면 더이상 색인 생성을 요청할 수 없다.

색인 생성 방법은 다음과 같다.

  • 참고: 구글 서치 콘솔에서 색인 생성하는 방법 링크

상단 URL 검사란에 포스팅 주소(https://dl137584.github.io/2022/01/31/JCenter-지원종료/)를 붙여넣고 아래 [색인 생성 요청]을 누른다.

요청이 완료되면 아래와 같은 문구가 뜬다.

기본적으로 1-2일 소요되긴 하나, 1. 구글검색창에 나와도 아래 [색인생성범위]에는 뜨지 않거나 2. 이틀이 지나도 구글검색창이나 [색인생성범위]에 리스팅되지 않아서 다시 URL 검사를 해보면 등록되어있지 않다고 나오는 등의 상황이 있었다.

1번의 경우 7일 이하로 기다리면 나타나거나 하는데 2번의 경우 나는 다시 색인생성을 요청하였다.(sitemap.xml이 계속 “가져올 수 없음”이 떴기 때문에 어쩔 수 없이…)

정상적으로 색인생성요청이 처리가 된 후에는 사이드바 [색인생성범위]에서 아래 [유효]를 클릭하면 초록색으로 변하면서 그래프에도 유효 카운트가 표시되고 그 아래에 상세정보가 뜬다.

유효 색인 상세정보

색인을 생성한 url을 확인할 수 있으나 여기서 삭제는 할 수 없다.(해당 페이지는 내가 md 파일명을 변경하여 주소가 변경되었는데도 그대로 남아있다. 단, 이것도 7일 이하로 기다리면 [제외됨]으로 옮겨지면서 자동으로 갱신된다. [제외됨]으로 자동으로 옮겨질 경우 검색창에서도 검색되지 않는지는 해보지 않아 알 수 없음.)

(3) 색인 생성된 url 삭제: 6시간 내로 됨

url이 바뀌어 올렸던 것을 삭제해야 한다면 사이드바의 [삭제]로 이동한다.

그리고[임시 삭제 항목]>[새 요청]에서 삭제하고자하는 url을 기입하여 요청할 수 있다.

1

2

3

요청 처리가 완료되어 삭제되면 더이상 구글 검색창에서 관련 키워드를 입력해도 검색되지 않는다.

기술 블로그 만들기 - Github-pages, Hexo

1. 노션을 사용하는 것에 대한 불편함

(1) 노션의 단점

  • 읽기 어려운 URL + 제목을 수정하면 같이 변경되는 URL

    → 해보니 Hexo도 비슷한 이슈가 있음. 하지만 노션이 공유하기 어려운 것도 사실임.. 블로그로서 만들기가 어려움.

  • 페이지 로딩이 느림

    → Hexo는 기본적으로 정적사이트를 생성해주기 때문에 이 부분은 해결이 됨.

    정적 웹사이트란, 서버에서 배포하기 전까지는 이미 올려진 데이터만을 보여주기 때문에 페이지 내에서 글 수정이 불가능하며 그렇기 때문에 가볍다는 장점이 있다. 페이지를 로드한 후에는 서버와 통신할 필요가 없으니까.

덧붙여,

(2) 대체 플랫폼

  • Notion + Cloudflare

  • Tistory

  • Velog

  • Github-pages

    → 내가 지금까지 해본 건 Tistory/Notion(오직 노션)/Github(레포지토리를 DB 삼아 md 파일 만듦. 사이트를 따로 생성하지 않음.)/Jekyll(페이지 껍데기만 만듦)/OneNote/EverNote 였다.

    그 중 고유한 Url을 생성할 수 있고 디자인을 코드단으로 만질 수 있는 Jekyll이 제일 재밌었는데 그래서 Github-pages를 사용하기로 함.

    단, Jekyll은 제외하고.(왠지 한 번 만들고 실패해서 손이 안 감.)

(3) Github-pages 적용에 필요한 것

  • 정적 사이트 생성기(Static Site Generator): Jekyll(ruby), Hugo(Go), Hexo(Node.js), Gatsby 등
    • 정적 웹 사이트 생성기: DB 통신 등을 해서 서버에서 HTML 페이지를 실시간으로 만들던 동적 사이트 방식이 아닌, 완성된 HTML 파일을 바로 전달.

고민은 길지 않았다. 서버 문외한인 내가 가장 많이 들어본 Node.js 기반 Hexo를 사용하기로 결정했다.

(4) Hexo 적용 후 불편했던 점

하는 김에 hexo를 이용하면서 불편했던 점도 적어봄. 위에 나열된 노션의 단점은 모두 커버되었으나 일부 사용하기 어려운 점이 있었다.

  • 페이지를 업데이트하려면 코드를 수정해서 배포해야하기 때문에 바로 수정된 걸 볼 수 없다.(hexo에서 제공하는 draft 기능을 사용하는 데에도 동일한 문제있음)

    → 노션의 이용을 병행하여 draft(초안)은 노션에 작성하기로 함. (일단 나는 편해짐.)

  • 여러 PC에서 배포를 할 수 있는 수월한 방법을 찾지 못함.

    • 방법(링크)은 찾았는데 기존 .deploy_git을 다른 PC에 동기화해줘야(동일하게 옮겨줘야) 하는 번거로움때문에 시도 안 하는 중..
    • Github에 올린 코드를 받아서 hexo-cli만 설치하여 올리려고 보니 hexo server 명령어가 기능을 잘 안 하고(기존 작업하던 PC OS는 윈도우, 새로 시도한 PC는 맥), 커밋 안 한 다른 PC에서 수정하던 게 마음에 걸려서 골치아파지더라.
  • 목차 생성 시 h1 아래에 h2가 아닌 h3으로 하위헤더를 바로 생성할 경우, 아래 이미지와 같이 일부가 생략된다.

(5) 노션의 장점

노션의 이용을 병행하려고 보니 장점을 빼놓을 수가 없다.

  • 접근성이 좋다. 웹, 앱 어디서든 편집할 수 있다.

  • 동기화가 잘 된다. 엄청 잘 된다! 처음 노션을 고른 이유가 동기화였다.

  • 편리한 단축키. ctrl + x로 한 행을 삭제하거나 슬래시(/)로 페이지를 만들 수 있게 하거나 여러가지로 잘 사용중.

  • 편집이 편하고 예쁘다! (잘 쓰진 않지만 수정된 내용은 히스토리로 남아서 혹시모를 상황에 대비가 가능하다.)

    • 드래그앤드랍으로 행 옮기거나 블록처리 가능한 점.
    • 어디서든 특정 부분을 하이라이트 하기 좋음. md는 코드 내에서는 볼드체가 불가능하거나 불편한 점이 있음. 이것도 따로 방법을 찾아봐야 할듯.
    • 폰트가 읽기 좋음. md는 바꾸기 귀찮아서 디폴트로 사용중인데 영어는 거의 잘 나오는데 PC에서 한국어가 픽셀 깨지듯이(예민) 나옴.
    • 헤더를 만들었을 때 딱 읽기 좋은 형태로(상하단 여백, 텍스트 강조) 노출됨. md는 가끔 h1 쓰는데도 읽으면서 가독성 떨어져서 일일이 bold 넣어줘야함.

2. Hexo 환경설정

(1) node.js 및 npm 버전 확인

내 경우 React.js 시작하기 에서 node.js와 npm이 설치된 상태여서 Hexo에 필요한 버전만 확인했다.

  • Mac에서 node.js 및 npm설치 homebrew는 Mac에서 패키지 관리를 용이하게 하기 위한 툴이다. 이걸 먼저 설치.
    1
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    그리고 node.js를 설치하면 npm도 함께 설치되기 때문에 아래 명령어로 node.js를 설치.
    1
    brew install node
1
2
3
4
> node -v
v14.15.5
> npm -v
6.14.11

Hexo를 사용하기 위해서는 node.js는 v12이상을 권하고 있다.(최소 v10.13)

(2) Hexo 설치

1
> npm install -g hexo-cli

(3) Hexo 초기화

1
> hexo init testBlog

위 명령어로 초기화하면 아래와 같은 파일구조로 기본 설정파일들이 생성된다.

(4) 파일구조

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
  • _config.yml: 환경설정(사이트 설정;웹사이트 제목, URL 설정, include 설정 등 가능)
  • package.json: 데이터 파일. EJS, Stylus, Markdown 렌더러들은 기본으로 설치됨.
  • scaffolds: 새 포스트/페이지를 생성했을 때 기본으로 만들어질 레이아웃을 정의.

(5) 명령어

  • 서버 실행: hexo s (server)
  • 정적파일 생성: hexo g (generate, public/이 생성된다.)
  • 배포: hexo d (deploy)
  • 생성 및 배포: hexo d -g (hexo deploy -generate)
  • 클린: hexo clean (public/이 삭제된다.)

커맨드라인에서 hexo clean을 하게되면 마지막 INFO에 아래와 같이 뜨는 것을 볼 수 있다. 즉, DB와 public 폴더가 초기화된다.

1
2
3
INFO  === Registering Hexo extensions ===
INFO Deleted database.
INFO Deleted public folder.

3. 커스텀

(1) 사이드바

_config.icarus.yml 편집

4. 포스팅 - 이카루스 테마(icarus theme) 사용

(1) 새 포스트 생성

흔히 알고 있는 하나의 포스팅을 쓸 때 사용한다.

1
hexo new post "title"

(2) 이미지 폴더 생성

주의
1. 파일명은 대소구분을 한다. “png”와 “PNG”는 다르다.
2. 아래 방법으로 하게되면 hexo clean 명령어 사용 시 public/아래의 파일은 날아가므로 여기에 파일을 넣지 않도록 할 것.
  1. _config.yml에서 post_asset_folder 속성을 true로 바꾼다.

  2. 포스트 생성 시(hexo new post) 포스트의 제목과 같은 폴더가 자동으로 생성될텐데 여기에 이미지 파일을 넣는다.

  3. 이렇게 되면 ![](/2022/02/04/006-create-personal-blog-with-githubpages-and-hexo/006-02.png)와 같이 접근할 수 있다.
    내 경우 _config.yml에서 permalink를 “:year/:month/:day/:title/“로 해두어 저렇게 나온다.

주의
![](./image01.png)처럼 상대경로를 사용하게되면 포스팅을 클릭하여 나타난 페이지에서는 정상적으로 이미지가 노출되나 사이드메뉴의 카테고리 중 하나를 클릭했을 때 페이지에서 상대경로가 맞지 않아 이미지가 깨지게 된다.

(3) 새 페이지 생성

페이지는 생성할 경우 해당 페이지명으로 된 폴더와 하위에 index.html 파일이 생성되며 포스트와 다르게 상단 탭에 연결할 수 있는 것으로 보임. 따라서 category와 tag는 사용할 수 없고 about처럼 상단에 추가할 수 있다.

1
hexo new page "page"

(4) Scaffolds(머리말) 속성

  • title 대괄호가 잘 안 들어가서 이스케이프문자를 넣어야하나했는데 그냥 큰따옴표로 묶어서 해결해버림.
  • date 내가 지정해주지 않아도 자동으로 DB에 발행일이 들어가는가 보더라. 딱히 그럴 일이 없어서 이게 수정이 되는지는 확인 안해봄.
  • categories, tags categories, tags는 여러개 지정할 수 있는데, 다음과 같이 두 가지 방법이 있다.
    1
    2
    3
    4
    categories:
    - ctg1
    - ctg2
    tags: [tag1, tag2]

(5) toc 띄우기

이카루스 default 테마에서는 toc 속성이 false로 되어있는지 처음에는 나타나지 않으나 아래와 같이 true로 명시해주면 바로 [카탈로그]라고 뜬다. 사이드에 위치하는데 position 옵션에서 left/right를 지정할 수 있다.

창의 너비가 작아지면 우선적으로 보이는게 left라서 나는 left로 해두고 left sidebar의 sticky 옵션을 true로 바꾸었다.

1
2
3
4
5
6
7
8
toc: true
widgets:
-
position: left
type: toc
index: true
collapsed: true
depth: 3

(6) 로컬 테스트

http://localhost:4000/에서 확인한다.

로컬 테스트는 배포 전 로컬의 파일 변경만으로 확인할 수 있는데, 아래 케이스에 해당한다.

  • configuration이 변경된 경우
    • 서버를 내렸다가(ctrl + C) 다시 올려야(hexo s) 적용이 된다.

로컬에서 테스트가 끝나면 아래 명령어로 배포 후 1-2분 후 적용되었는지 https://dl137584.github.io/에서 확인할 수 있다.

1
hexo d -g

(7) about 페이지 생성

1
hexo new page about

(public에 about 폴더를 만들고 별짓을 다했는데 그냥 new page하면 되는 거였어..)

page 명이 “about”인 이유는 _config.icarus.yml에서 navbar:menu:About에 설정한 이름을 따라간 것.

1
2
3
4
5
6
7
8
9
# Page top navigation bar configurations
navbar:
# Navigation menu items
menu:
Home: /
Archives: /archives
# Categories: /categories
# Tags: /tags
About: /about

(8) 초안 작성

1
hexo new draft title

이렇게 생성된 포스트는 _posts/가 아닌 _draft/에 위치하게 된다. 작성은 했는데 바로 배포하고 싶을 때 md 파일을 _draft 폴더로 옮기면 배포해도 포스팅이 노출되지 않기 때문에 편하게 쓸 수 있다.

만약 테스트 시 draft 파일도 보이도록 하고자한다면 서버를 올릴 때 –draft 옵션을 붙여주면 된다.

1
hexo server --draft

5. 마크다운 활용

노션의 callout(설명) 구현

인용과 차이를 두면서 노션의 callout UI와 같이 일부영역 강조를 편하게 사용하고 싶어서 마크다운의 테이블 구조를 활용하여 아래와 같이 만들었다. 인용 외에 참고사항 등에 사용할 예정이다.

Title
Contents1
Contents2

좌우 여백은 위의 경우 제법 넓게 나타나는 편인데, 가운데 영역(Title, Content1, Content2)의 총 너비가 짧아서 그렇다. Title이나 Content의 길이가 길어질 경우 여기에서 사용한 것처럼 여백이 줄어들게 된다.

마크다운 코드는 아래와 같이 사용하였다.

1
2
3
4
5
  | Title |  
--- | --- | ---
| Contents1 |
| Contents2 |
| |