안녕하세요. 이번 포스팅은 Hexo를 설치하고 SEO(포털에서 검색이 가능하도록)를 설정하고 Steemit과 연동하는 과정까지 해보도록 하겠습니다. 모든 과정은 Mac 기준입니다.
Hexo 설치
Hexo 설치 순서는 다음과 같습니다. Mac에서는 Xcode를 먼저 설치하고, Node.js와 Git을 설치한 후 Hexo를 설치합니다.
- Xcode 설치
- Node.js 설치
- Git 설치
- Hexo 설치
Xcode 설치
우선 Hexo를 설치하기 위해서는 appstore에서 Xcode를 설치하셔야 합니다. Xcode가 없어도 아무런 문제 없이 Hexo가 설치되는 경우도 있지만, 터미널에서 명령어를 제대로 동작하도록 하기 위해서 Xcode가 필요한 경우도 있습니다. 설치에 오랜 시간이 걸리고 가장 먼저 필요하기 때문에, Hexo를 사용할 생각이 있으신 맥 유저분들은 바로바로 설치하시기 바랍니다.
Node.js 설치
Hexo는 Node.js 기반으로 만들어진 정적 사이트의 일종으로, Node.js를 설치해야 합니다.. Node.js는 아래 링크에서 다운로드 받을 수 있습니다.
Git 설치
Git도 설치해야 Steemit 연동 툴을 사용할 수 있습니다. 그 외에도 Git이 필요한지 정확히는 모르겠습니다. 호스팅을 Github에서 할 예정인데, 이때 Git이 필요한지는 확실하지 않습니다. Git은 아래 링크에서 다운로드 받을 수 있습니다.
Hexo 설치
이제 Hexo를 설치할 차례입니다. Hexo 홈페이지는 아래와 같습니다.
Hexo 홈페이지 설치 가이드에 친절하게 설치 방법이 전부 나와있습니다. Node.js와 Git 설치된 상태에서는 간단하게, 터미널을 실행(Mac)하고 다음 명령어를 입력하면 됩니다.
npm install -g hexo-cli
Hexo 블로그 생성
Hexo 설치가 완료되었다면, Hexo 블로그를 생성할 겁니다. Hexo 블로그는 다음의 명령어로 생성합니다. Hexo 블로그를 생성할 위치로 이동하여, 다음의 명령어를 실행하면 됩니다.
hexo init HexoBlog
HexoBlog에는 원하는 폴더명을 입력하면 됩니다. 혹시 Mac 터미널에서 원하는 폴더로 이동하는 법을 모르는 사람들을 위해서, 원하는 폴더로 이동하는 명령어는 다음과 같습니다. 아래 명령어는 아이클라우드 내 방금 생성한 HexoBlog로 이동하는 명령어입니다. cd 뒤에 원하는 폴더 경로를 입력하면 이동합니다.
cd /Users/pravda/Library/Mobile\\\\\\\\ Documents/om\\\\\\\\~apple\\\\\\\\~CloudDocs/HexoBlog
SEO 설정
SEO는 검색엔진최적화를 의미합니다. 간단하게 얘기하면, 구글이나 네이버 등에서 내 블로그가 검색이 되도록 도와주는 것입니다. 다음의 5가지 플러그인을 설치할 예정입니다. 보통 하나씩 설치하고 설정하는데, 귀찮으니 터미널에서 Hexo 블로그로 이동하여 입력하면 됩니다. 그러면, 5가지 플러그인이 전부 설치됩니다.
npm install hexo-auto-canonical --save
npm install hexo-generator-robotstxt --save
npm install hexo-autonofollow --save
npm install hexo-generator-feed --save
npm install hexo-generator-seo-friendly-sitemap --save
아래 각각 플러그인에 대한 정말 간단하다고 하기도 뭐한 설명과 위의 플러그인이 작동하기 위해 _config.yml에 추가해야 하는 내용을 적어놨습니다. 귀찮으신 분들은, 아래 내용을 _config.yml에 추가하시면 됩니다. 맨 아래 sitemap 주소만 본인 블로그 주소로 바꿔주시면 됩니다. canonical을 설정하기 위해서는 HTML의 HEAD 태그 아래 추가할 문장이 있으니, 바로 아래 소제목만 더 읽어주세요.
nofollow:
enable: true
exclude:
- exclude1.com
- exclude2.com
feed:
type: rss2
path: rss2.xml
limit: 200
sitemap:
path: sitemap.xml
tag: false
category: false
robotstxt:
useragent: "*"
allow:
- /
sitemap:
Code language: PHP (php)hexo-auto-canonical
자동으로 표준 링크를 생성해주는 플러그인이다. hexo-auto-canonical는 설치 외에 별도로 설정이 필요하다. HTML의 HEAD 태그 안에 아래 문장을 추가해야 한다.
테마가 ejs인 경우
<％- autoCanonical(config, page) ％>
Code language: HTML, XML (xml)테마가 jade인 경우
| !｛ autoCanonical(config, page) ｝
hexo-generator-robotstxt
자동으로 robot.txt 파일을 생성해주는 플러그인입니다. _config.yml에 아래 내용을 추가해야 합니다. sitemap은 github를 호스트로 사용하고 있기 때문에, 아래 주소입니다. 본인 블로그의 주소 + /sitemap.xml를 넣어주시면 됩니다.
robotstxt:
useragent: "*"
allow:
- /
sitemap:
Code language: PHP (php)hexo-autonofollow
자동으로 rel=“external nofollow”를 추가해주는 플러그인입니다. 다들 설치해서 저도 설치했는데, 용도는 잘 모릅니다. 역시 _config.yml에 아래 내용을 추가합니다.
nofollow:
enable: true
exclude:
- exclude1.com
- exclude2.com
Code language: CSS (css)enable은 플러그인 활성화 여부, exlude는 제외시킬 호스트인데, 아마도 exclude1.com은 의미없는 내용일 것 같습니다(추측).
hexo-generator-feed
자동으로 rss를 생성해주는 플러그인입니다. rss2를 사용하고 있는데, 네이버 웹마스터도구에서 계속 오류가 떠서 다른 방법이 없나 고민중입니다. 귀찮아서 안 찾아보고 있습니다. 무엇보다 구글에서는 문제가 없으니, 네이버 문제겠죠…? 역시 _config.yml에 아래 내용을 추가합니다.
feed:
type: rss2
path: rss2.xml
limit: 20
Code language: CSS (css)hexo-generator-seo-friendly-sitemap
sitemap.xml을 자동으로 생성해주는 플러그인입니다. _config.yml에 아래 내용을 추가합니다. tag와 category 포함 여부를 설정할 수 있습니다.
sitemap:
path: sitemap.xml
tag: false
category: false
Code language: JavaScript (javascript)Steemit 연동
Steemit에 작성한 글을 전부 불러오기 위해서는 hexo-steem 모듈을 설치해야 합니다. 저는 모든 글을 불러올 수 있도록 코드를 수정하고, 제목과 불러온 글이 저장되는 폴더(불러온 글이 바로 포스팅되지 않도록)를 변경한 모듈을 사용하고 있습니다.[^hexo-steem 모듈을 steemit의 goodhello님이 모든 글을 가져오도록 수정하였고, 이를 다시 수정한 모듈을 사용하고 있습니다.] 수정한 모듈을 이용하여 Steemit과 연동해보겠습니다. 터미널에서 아래의 명령어를 입력하시면 됩니다(물론 Hexo 블로그로 이동해서).
npm install --save git+https://github.com/idencosmos/hexo-steem_all.git
Code language: JavaScript (javascript)설치가 완료되었으면, _config.yml을 열어서 아래의 내용을 추가하면 됩니다. agar에는 본인의 steemit 계정을 넣으시면 됩니다. ’-’를 추가하여, 여러 계정에서 가져올 수 있습니다.
steem_users:
- agar
Steemit의 글을 매번 전부 동기화하면, 시간이 너무 오래 걸립니다. 그래서 전 처음에만 전부 동기화하고 그 이후에는 아래 플러그인을 설치하여, 100개씩만 가져옵니다. 가져온 글들은 _post 아래 _steemit 폴더에 저장되기 때문에, posting 하고 싶으신 글들만 선택하여 _post 아래에 복사하시거나, _가 없는 폴더에 저장하시면 됩니다.
npm install --save git+https://github.com/senterie/hexo-steem_recent.git
Code language: JavaScript (javascript)Github 연동
아래 명령어를 이용하여, 로컬에서 hexo 블로그를 실행할 수도 있습니다.
hexo-server
하지만, 온라인에서 모두가 볼 수 있도록 하기 위해서 블로그를 만드는 거니까! 저는 Github에 블로그를 호스팅했습니다(호스팅이 맞는 표현인가?). 원래는 jekyll을 사용했는데, 테마 변경이나 태그, 카테고리 수정 등에서 너무 힘들어서 이사왔습니다.
Github에서 “Github_id.github.io”로 repository를 생성합니다. 그리고 _config.yml에 아래 내용을 추가합니다.
deploy:
type: git
repo: <https://github.com/idencosmos/idencosmos.github.io.git>
branch: master
Code language: HTML, XML (xml)그리고 hexo 블로그를 Github에 push할 수 있도록 hexo-deployer-git을 설치합니다.
터미널에 아래 명령어를 입력하시면 됩니다.
npm install hexo-deployer-git --save
이제 블로그를 Github에 push하여 누구나 볼 수 있도록 하겠습니다.
터미널에 아래 명령어를 입력하시면 됩니다.
hexo g --d
g는 generate로 hexo 블로그 폴더 안에 Github에 배포할 내용이 담긴 public 폴더를 생성합니다. 이 과정이 정적 블로그를 생성하는 과정입니다. d는 deploy로 생성된 정적 블로그를 Github에 push하는 과정입니다. hexo generate를 입력하고 hexo deploy를 입력하면 되는데, 위의 명령어를 입력하면, 순차적으로 한 번에 수행합니다.
기타
about 페이지 생성
제가 쓰는 icarus 테마는 about 페이지 링크가 있는데, 기본으로 생성되는 hexo 블로그에는 about 페이지가 없습니다. about 페이지는 아래 명령어를 입력하시면 생성할 수 있습니다. 아래 명령어를 입력하면, sources/about/index.md 파일이 생성됩니다. public 공간에 뭔가를 추가하고 싶으시면, sources에 추가하시면 됩니다. ― 만약 블로그 최상단 링크에 ads.txt 파일을 추가하고 싶으시면, sources 폴더에 ads.txt를 추가하고 deploy하시면 배포된 블로그 최상단에 ads.txt 파일이 추가됩니다. 나중에 구글 광고를 탑재할 때, 네이버 웹마스터 도구에 등록할 때, 구글 웹마스터 도구에 등록할 때 필요할 수 있습니다 ―
hexo new page about
Code language: JavaScript (javascript)기타(구글, 네이버 검색엔진 등록하기, 개인 도메인 연결하기)
구글 웹마스터 도구와 네이버 웹마스터 도구에 들어가서, 등록하시면 됩니다. 도메인도 연결하시면 됩니다. 처음 글을 쓸 때는 작성하려고 했는데, 너무 졸려서 나중에 시간이 되면 포스팅 하겠습니다. 약간만 검색해보셔도, 저 보다 더 잘 작성하신 분들이 계십니다. 개인 도메인을 연결하기 위해서는 아래의 플러그인을 설치하고, _config.yml에 아래의 내용을 추가해야 합니다.
npm install hexo-generator-cname --save
plugins:
- hexo-generator-cname
url: <https://idencosmos.com>
Code language: HTML, XML (xml)기타(자동으로 긴 게시글 접기)
블로그가 기본적으로 글이 아무리 길어도 메인 화면에서 모든 글이 나오도록 설정되어 있습니다. 하지만, 긴 글은 Read More(혹은 더 보기, 계속 읽기 등) 버튼을 달아서 짧게 보이도록 하고 싶을 수 있습니다. 이 때는 고민하지 말고 다음 플러그인을 설치하면 됩니다. 물론 Hexo 블로그 폴더 안에서 터미널에 아래 명령어를 입력하셔야 합니다.
npm install hexo-excerpt
제가 혹시나 다음에 블로그를 생성할 때, 참고하기 위한 포스팅입니다. 필수라고 생각되는 내용이 계속 추가될 수 있습니다. 설명이 불친절 하거나, 내용이 생략된 부분이 있을 수 있습니다. 혹시 추가로 내용이 필요하시면 댓글 주시면 답변드리겠습니다.
댓글 남기기