내가 작성한 글이 검색엔진에게 잘 노출되기 위해서는 내 블로그가 검색엔진에 노출이 잘되도록 최적화 시켜야 됩니다. 가장 중요한건 블로그에 작성한 Post가 검색하는 사람들에게 가치를 줄수 있어야 합니다. 두번째는 구글,네이버,다음 검색엔진에게 내 블로그를 알려야 합니다. 내가 이렇게 정성스럽게 글을 잘 작성했으니 글을 읽어가서 사용자가 검색을 하면 내 블로그를 소개시켜 달라고 부탁하는 거죠.내가 쓴글을 검색엔진이 읽어가기 쉽게 최적화하는걸 SEO라고 합니다.오늘은 codingsarang 블로그를 최적화 시켜 보겠습니다.
hexo에서 제공해주는 플러그인 설치하기
hexo 에서는 SEO와 관련된 플러그인들이 다양하게 있습니다.https://hexo.io/plugins/접속하신후 seo라고 입력하고 검색을 수행하면 아래와 같은 다양한 plugin을 확인할수 있습니다. 그중 일반적으로 많이 사용하는 플러그인들을 설치해 보겠습니다.
hexo-auto-canonical
hexo-generator-robotstxt
hexo-autonofollow
hexo-generator-feed
hexo-generator-seo-friendly-sitemap
hexo-auto-canonical 설치 및 적용
표준링크를 자동으로 생성해주는 플러그인입니다. 아래 명령어를 입력하여 설치를 진행합니다.
npm install --save hexo-auto-canonical
설치가 완료되면 themes > hueman > layout > common > head.ejs 에 아래에 코드를 입력합니다.
robots.txt 파일이란 무엇인가요? robots.txt 파일은 검색엔진 크롤러에서 사이트에 요청할 수 있거나 요청할 수 없는 페이지 또는 파일을 크롤러에 지시하는 파일입니다. 이 파일은 요청으로 인해 사이트가 오버로드되지 않도록 하는 데 주로 사용되며, Google로부터 웹페이지를 숨기는 데 사용하는 메커니즘이 아닙니다. 웹페이지가 Google에 표시되지 않도록 하려면 noindex 명령어를 사용하거나 페이지를 비밀번호로 보호해야 합니다.
robots.txt의 용도는? robots.txt는 주로 사이트의 크롤러 트래픽을 관리하는 데 사용되며 보통 다음과 같이 파일 형식에 따라 Google에서 페이지를 숨기는 데 사용됩니다.
blog 홈디렉토리에서 아래 명령어를 입력합니다.
npm install hexo-generator-robotstxt --save
blog 홈디렉토리에 있는 _config.yml에 아래와 같이 입력합니다. 여기에서 *가 의미하는 내용은 모든 사용자 에이전트(robot)가 전체 사이트에 액세스할 수 있습니다.
보통 신뢰할 수 없는 콘텐츠나 유료 링크의 경우 다른 사용자의 검색에 노출되지 않아야 하므로 nofollow 속성을 사용하는 것이 좋습니다. 해당 플러그인을 enable 해놓으면 모든 외부 링크에 rel=”external nofollow” 속성을 자동으로 추가합니다. 외부링크에만 동작하기 때문에 본인 사이트의 도메인 링크는 제외됩니다. 외부 링크에 target=”_blank” 속성을 넣어서 클릭할 경우 새로운 탭 또는 윈도우에서 열리게 합니다.
어떤 사이트가 있을 때, 그 사이트를 매일 방문해서 재미있는 새로운 기사가 있는지 확인하는 것은 번거롭습니다. 특히 새 기사가 매일 또는 정기적으로 올라오는 것이 아니라 불규칙할 때는 더욱 그렇습니다. 그 사이트를 직접 방문하지 않고, 새 기사들만 자신의 컴퓨터로 “배달”이 된다면 편리할 것입니다. RSS(Really Simple Syndication 의 약자) 같은 “사이트 피드”란, 새 기사들의 제목만, 또는 새 기사들 전체를 뽑아서 하나의 파일로 만들어 놓은 것입니다. 이제 각 사이트들에서 제공하는 RSS파일 주소만 수집하여 확인하면, 자신의 취향에 맞는 새로운 읽을거리를 쉽게 찾아서 읽을 수 있습니다. 그러나 모든 사이트에서 RSS피드를 제공하는 것은 아닙니다. 1년 내내 새로운 내용이 없는 정적인 사이트에서는 제공하지 않는 것이 보통입니다. 새로운 읽을거리가 자주 올라오는 “뉴스형”, “블로그형” 사이트에서 주로 제공됩니다. RSS Feed
아래 명령어를 입력하여 설치 할수 있습니다.
npm install hexo-generator-feed --save
_config.yml에 아래와 같이 입력합니다.
feed:
type: rss2
path: rss2.xml
limit: 20
type은 feed의 종류입니다. (atom/rss2) - * 네이버는 atom을 지원하지 않으므로 rss2로 지정합니다. path는 feed가 생성될 경로 입니다.(default : atom.xml, rss2.xml) limit는 최신 포스트 수 설정 (0 또는 false - 전체 포스트)
hexo-generator-seo-friendly-sitemap
크롤러가 블로그를 더욱 효율적으로 클롤링 할 수 있도록 사이트맵 xml 파일을 자동으로 생성해 줍니다. 이렇게 생성된 사이트맵을 robot이 가져가서 색인을 진행합니다.
가입 후 사이트를 추가 합니다. 생성된 html파일을 루트에 올린 후 확인 하는 방법과 애널리스틱 가입을 확인하는 방법으로 인증을 진행할수 있습니다. Sitemaps 메뉴에 위에서 생성한 sitemap.xml과 rss2.xml을 추가해 주세요. sitemap을 등록하고 일정시간 지나면 내 사이트에 등록된 글을 구글 검색을 통해 확인할수 있습니다.
정적 웹사이트 생성기 hexo를 이용해서 블로그를 만든후 github page까지 반영하는 방법에 대해서 알아보겠습니다. 코딩사랑 블로그를 만들면서 아래 내용되로 설치를 했구요 차근차근 따라오시다 보면 github.io도메인을 가지는 블로그를 만들수 있습니다.
정적 웹사이트 ?
정적 웹사이트는 컨텐츠 내용이 변하지 않는 정적인 컨텐츠를 사용하는 웹사이트 입니다. 정적인 컨텐츠는 html,css,javascript,image 와 같은 컨텐츠로써 클라이언트 웹브라우저가 서버에 내용을 요청하면 서버에 등록되어 있는 파일 그대로를 서비스 하기에 모든 클라이언트에게 동일한 결과를 리턴합니다. 동적인 컨텐츠는 jsp,servelt,php,nodejs 같은 컨텐츠로써 요청에 따라 다른 결과 내용을 보여줍니다. 예를 들어 로그인 하기전에는 내용이 보이지 않았다가 로그인하면 내용을 보여주고 사용자에 따라 다른 내용을 보여주는 것들도 모두 동적인 컨텐츠입니다.
정적인 웹사이트는 동적인 웹사이트보다 속도가 빠릅니다. 일반적인 블로그를 한번 살펴볼까요? 블로그에서 글을 쓰면 내가쓴글은 db에 저장이 됩니다. 글 읽기에 관련 된 사용자 요청이 오면 db에서 데이터를 읽어서 html로 변환해서 사용자의 웹브라우저에 보여주는 구조 입니다. 하지만 정적인 웹사이트는 이미 html이 다 만들어져 있기에 페이지를 만들기 위해 이루어 지는 일련의 과정이 없어서 속도가 빠릅니다.
하지만 단점도 있습니다. 반복되는 부분의 코드를 작성해야 된다는 거죠. 보통의 웹사이트나 블로그를 보면 상단부분의 메뉴와 하단 부분은 변하지 않습니다. 그래서 php에서는 header.php footer.php 이런 공통 파일들을 만들어서 include해서 사용 하죠 그리고 메뉴 부분은 상단 부분을 클릭할때 마다 다르기에 db에서 내용을 가져와서 만들거나 코드를 작성해서 메뉴를 만듭니다. 그런 부분을 정적웹사이트에서 구현할려면 한페이지마다 상단,좌측,하단 내용을 모두 중복해서 코딩해야됩니다. 생산성도 좋지않고 유지보수도 하기 힘듭니다. 속도는 빠르게 하고 중복되는 코드들은 줄이고 유지보수를 편하게 하기 위해서는 어떻게 해야 되나 사람들은 고민하게되고 이를 해결하기 위해 hexo 나 jekyll 같은 정적 웹사이트 생성기를 사용합니다.
아래 코드는 지금 보시고 있는 blog에서 사용하는 head.ejs 입니다. 가장 상단에 공통으로 사용하는 css나 자바스크립트 같은걸 포함하고 post마다 글을 바꿀수 있게 코딩이 되어 있습니다. asp나 php같은 스크립트 언어와 비슷하죠?내 pc에서 글을쓸때는 동적으로 컨텐츠들이 생성됩니다. 생성된 컨텐츠를 build라는 과정을 거쳐서 정적인 컨텐츠로 변환하고 변환된 컨텐츠를 서버에 올리면 정적인 웹사이트가 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<%- partial('pwa/index') %>
<%
var title = page.title;
if (is_archive()) {
title = __('index.archive');
if (is_month()) {
title += ': ' + page.year + '/' + page.month;
} else if (is_year()) {
title += ': ' + page.year;
}
} else if (is_category()) {
title = __('index.category') + ': ' + page.category;
} else if (is_tag()) {
title = __('index.tag') + ': ' + page.tag;
}
%>
<title><% if (title) { %><%= title %> | <% } %><%= config.title %></title>
<% if (theme.plugins.bing_site_verification) { %>
<meta name="msvalidate.01" content="<%- theme.plugins.bing_site_verification %>" />
<% } %>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<% if (page.tags) {
var keywords = [];
for (var i in page.tags.data) {
keywords.push(page.tags.data[i].name);
}
%>
<meta name="keywords" content="<%= keywords.join(',') %>" />
<% } %>
<%- open_graph({
image: thumbnail(page),
fb_app_id: theme.miscellaneous.open_graph.fb_app_id,
fb_admins: theme.miscellaneous.open_graph.fb_admins,
twitter_id: theme.miscellaneous.open_graph.twitter_id,
}) %>
<%- meta(page) %>
<% if (theme.customize && theme.customize.social_links && theme.customize.social_links.rss) { %>
<link rel="alternate" href="<%- theme.customize.social_links.rss %>" title="<%= config.title %>" type="application/atom+xml" />
<% } %>
<% if (theme.customize.favicon) { %>
<link rel="icon" href="<%- url_for(theme.customize.favicon) %>" />
<% } %>
<%- css('libs/font-awesome/css/font-awesome.min') %>
<%- css('libs/titillium-web/styles') %>
<%- css('libs/source-code-pro/styles') %>
<%- css('css/style') %>
<%- js('libs/jquery/3.5.0/jquery.min') %>
<%- partial('plugin/scripts', { isHead: true }) %>
<%- css('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css') %>
</head>
hexo + github 를 사용하면 어떤 이점이 있나요?
블로그 툴들은 많고(naver,tistory,wordpress..) 왜 어렵게 이런툴을 사용해야 되나요? 글쓰는건 네이버,티스토리,wordpress로 쓰는게 편합니다. 저는 프로그래머 입니다. 제가 만들 프로그램들 주로 FrontEnd쪽 application입니다. 위에 블로그들에서는 이를 보여주는게 한계가 있습니다. 해당 블로그들이 제공해주는 범위 내에서 사용할수 밗에없는데 hexo 같은 정적 웹사이트 생성기는 컨텐츠를 생성하는 사람들이 생각하는되로 자유롭게 내용을 꾸밀수 있습니다. 그리고 내가 만든 웹 어플리케이션을 올릴수도 있습니다. 이런 부분때문에 정적 웹사이트 생성기를 선택하게 되었습니다.
jekyll + github도 조합으로 정적인 웹사이트를 만들수 있습니다. 저도 이전 블로그에서 jekyll + github조합으로 사용했습니다. hexo + github 조합이 더 편리하다는 의견들이 많아서 이번에 저도 도전해 보았습니다. 저의 글을 끝까지 잘 읽으시면 30분만에 hexo + github 조합으로 Blog를 만들수 있습니다. 끝까지 읽어 주실거죠 미리 감사 인사 드립니다.
설치방법
새로운 언어를 배우거나 툴 사용법을 배울때 가장 좋은 방법은 무작정 설치를 해보고 이것저것 만들어 보는 방법이 가장 좋습니다. 어느정도 이론이나 아키텍처를 알고 시작하면 더 좋겠지만, 저같은 경우에는 우선 써보고 나서 구조는 뒤에 차근차근 알아가는게 좋았습니다. 제가 이걸 계속 사용할지도 의문이고, 어렵다고 생각이 들면 사용하지 않게 됩니다. 무모하게 시작하는것도 새로운 기술을 배울때는 좋은 접근법이라고 생각합니다.
themes\hueman 디렉토리로 이동한후 _config.yml.example 파일일 _config.yml로 수정한다. 수정 완료후 dir 명령어를 입력하여 정상적으로 파일명이 변경되었는지 확인한다.
C:\blog>cd themes\hueman
C:\blog\themes\hueman>rename _config.yml.example _config.yml
C:\blog\themes\hueman>dir
C 드라이브의 볼륨에는 이름이 없습니다.
볼륨 일련 번호: 6E7E-7D01
C:\blog\themes\hueman 디렉터리
2020-07-05 오후 10:05 <DIR> .
2020-07-05 오후 10:05 <DIR> ..
2020-07-05 오후 08:44 <DIR> .github
2020-07-05 오후 08:44 11 .gitignore
2020-07-05 오후 08:44 <DIR> languages
2020-07-05 오후 08:44 <DIR> layout
2020-07-05 오후 08:44 18,401 LICENSE
2020-07-05 오후 08:44 173 package.json
2020-07-05 오후 08:44 2,946 README.md
2020-07-05 오후 08:44 <DIR> scripts
2020-07-05 오후 08:44 <DIR> source
2020-07-05 오후 08:44 5,551 _config.yml
5개 파일 27,082 바이트
7개 디렉터리 218,937,688,064 바이트 남음
C:\blog\themes\hueman>
c:\blog 디렉토리로 이동한후 hexo server하여 블로그를 구동시켜서 아래와 같은 화면이 나오면 설치가 완료되었습니다.
C:\blog\themes\hueman>cd ..
C:\blog\themes>cd ..
C:\blog>hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
Repository Name을 “계정명.github.io”라고 입력하고 Initialize this repository with a README 부분에 체크하고 Create repository 버튼을 클릭합니다. 이렇게 만들면http://codingsarnag.github.io로 접속하면 웹사이트에 접근이 가능합니다.
hexo 환경설정
블로그 환경설정을 해보겠습니다. c:\blog\_config.xml파일을 수정합니다. 제일 아래쪽에 deploy 정보는 본인 github repository 명을 입력하셔야 됩니다. 이 정보 기준으로 github page에 hexo를 deploy 합니다.
# Site
title: 코딩사랑
subtitle: '문제 해결능력을 향상을 위한 방법과 프로그래밍 언어에 대해서 다룹니다.'
description: '문제 해결능력을 향상을 위한 방법과 프로그래밍 언어에 대해서 다룹니다.'
keywords: coding,programming,frontend,backend,opensource
author: codingsarang
language: ko
timezone: 'asia/seoul'
... 중략 ...
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://codingsarang.github.io/
... 중략 ...
deploy:
type: git
repo: https://github.com/codingsarang/codingsarang.github.io
branch: master
themes/hueman/_config.xml 파일내용도 본인 환경에 맞게 수정해주세요
.hexo 배포하기(deploy)
이제 정말 마지막 입니다. 내가 작성한 글들을 정적인 contents로 generate한후 github page에 배포를 진행하면 내가 쓴글을 온라인 에서 확인 가능합니다.
먼저 hexo generate 명령어를 실행하면 아래와 같은 결과를 확인할수 있습니다.
hexo generate
INFO Start processing
INFO Files loaded in 226 ms
INFO Generated: content.json
INFO Generated: categories/OPENSOURCE/index.html
INFO Generated: categories/ETC/index.html
INFO Generated: 2020/07/02/hexo-github/index.html
INFO Generated: index.html
INFO Generated: 2020/07/01/hello-world/index.html
INFO Generated: archives/2020/07/index.html
INFO Generated: archives/index.html
INFO Generated: archives/2020/index.html
INFO Generated: images/repo1.png
INFO Generated: images/repo2.png
INFO Generated: images/repo3.png
INFO 12 files generated in 60 ms
이상태에서 hexo deploy를 실행합니다. 이렇게 실행하면 최초 git에 로그인을 하는데 본인계정정보와 패스워드를 입력하여 인증을 하고 나면 그다음부터 deploy할때는 정보를 물어보지 않습니다. deploy (commit)가 성공하면 아래와 같은 결과를 확인할수 있습니다.
hexo deploy
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
INFO Copying files from extend dirs...
[master 0626b12] Site updated: 2020-07-06 00:16:13
12 files changed, 38 insertions(+), 28 deletions(-)
create mode 100644 images/repo1.png
create mode 100644 images/repo2.png
create mode 100644 images/repo3.png
git: 'credential-manager' is not a git command. See 'git --help'.
Enumerating objects: 50, done.
Counting objects: 100% (50/50), done.
Delta compression using up to 6 threads
Compressing objects: 100% (19/19), done.
Writing objects: 100% (27/27), 540.77 KiB | 28.46 MiB/s, done.
Total 27 (delta 10), reused 0 (delta 0)
remote: Resolving deltas: 100% (10/10), completed with 8 local objects.
To https://github.com/codingsarang/codingsarang.github.io
c3f2489..0626b12 HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'https://github.com/codingsarang/codingsarang.github.io'.
INFO Deploy done: git
Jekyll은 정적(static) 웹사이트 생성기 입니다. Markdown이란 문법으로 문서를 작성하고 이를 build를 시켜주면 정적 웹페이지(html) 를 생성해 줍니다. 그리고 php 같은 언어를 사용할때 header.php footer.php 같은걸 만들어 새로운 페이지를 만들때 위에 두파일을 include하는데 지킬또한 이런걸 지원해 줍니다. tistory가 많이 좋아져서 귀찮게 저런걸 써야 하는 생각도 있었지만 javascript 예제코드를 작성하고 실행할때 즉 웹어플리케이션 데모를 보여줄때는 필요할것 같아서 Jekyll 설치 방법에 대해서 정리하고 실제로 정적 웹사이트를 만들어 볼려고 합니다. 그리고 티스토리 같은경우에는 일일 발행할수 있는 글수가 15개로 제한되는데 지킬로 문서를 작성하고 github에 publish를 수행하면 이런 제한도 받지 않습니다. 사실 하루에 글 하나 적는것도 힘들긴 하지만 … 만약 글쓰고 싶은날 제한에 걸리면 한번쯤은 사용할수 있을것 같네요.
여담이지만 본 블로그를 jekyll로 구성할려고 자료를 정리했다가 hexo로 변경하여 설치하면서 정리했던 내용을 기록으로 남깁니다.
※ 해당 템플릿은 Passbolt help code is distributed under the Affero General Public License v3 Passbolt help text is distributed under Creative Common BY-SA-4.0 이런 라이선스 정책을 가지고 있어 사용해도 문제가 되지 않습니다.
Github Desktop을 설치해서 사용하시면 콘솔창을 통해서 git 명령어를 입력하는것 보다 훨씬 편리한 방법으로 github에 내용을 올릴수 있습니다. Github desktop 실행시켜 변경된 사항이 있으면 한눈에 확인하고 간단하게 마우스 클릭만으로 소스를 올릴수 있는 Github Desktop 설치법과 간단 사용법에 대해서 알아 보겠습니다.
