Setup/opensource

HEXO와 Github page를 이용한 무료 정적 웹사이트(Blog) 만들기

goodsaem 2021. 7. 27. 23:53

개요

정적 웹사이트 생성기 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를 만들수 있습니다. 끝까지 읽어 주실거죠 미리 감사 인사 드립니다.

설치방법

새로운 언어를 배우거나 툴 사용법을 배울때 가장 좋은 방법은 무작정 설치를 해보고 이것저것 만들어 보는 방법이 가장 좋습니다. 어느정도 이론이나 아키텍처를 알고 시작하면 더 좋겠지만, 저같은 경우에는 우선 써보고 나서 구조는 뒤에 차근차근 알아가는게 좋았습니다. 제가 이걸 계속 사용할지도 의문이고, 어렵다고 생각이 들면 사용하지 않게 됩니다. 무모하게 시작하는것도 새로운 기술을 배울때는 좋은 접근법이라고 생각합니다.

설치순서

  • github 계정만들기
  • node js 설치
  • git-scm 설치
  • hexo 설치 및 구동
  • hexo 테마적용하기
  • 새글 써보기
  • github repository 생성
  • hexo 환경설정
  • hexo 배포하기(deploy)

github 계정만들기

http://www.github.com 접속하세요 그리고 sing up for github버튼을 클릭하여 계정을 생성해 주세요.

아래와 같이 항목을 선택하고 complete버튼을 클릭하면 등록하신 이메일로 인증 메일이 발송됩니다.

받은 메일함에서 Verify email address 버튼을 클릭하여 이메일 인증을 완료합니다.

인증이 완료되면 아래와 같은 메시지를 볼수 있습니다.

여기까지 진행하면 github 계정만들기가 완료 됩니다.

 

nodejs 설치하기

아래 사이트에서 nodejs 다운로드 받습니다. 글을 쓰고있는 시점에서 안정적,신뢰도가 높은 LTS버전을 다운로드 받습니다.

 

next 버튼을 클릭해서 설치를 진행합니다.

설치가 완료되면 finish 버튼을 클릭하여 설치를 완료합니다.

윈도우 버튼을 클릭하여 Node.js 가 설치된걸 확인할수 있습니다.

git-scm 설치하기

github를 사용하기 위해서는 git-scm을 설치해야 됩니다. https://git-scm.com/ 접속하시고 64-bit git for windows setup 링크를 클릭 하여 설치 파일을 다운로드 받습니다.

다운로드한 파일을 클릭하여 설치 를 진행합니다. next 버튼을 클릭합니다.

Next를 눌러서 진행합니다. 설치가 완료되었습니다.

hexo 설치 및 서버 구동

  1. command창을 하나 뛰운다음 c:\로 이동합니다.
  2. npm (node package manager)로 hexo-cli를 -g 전역으로 설치합니다.
  3. blog를 초기화 합니다. 이름은 blog
  4. blog 폴더로 이동한후 npm install 명령을 실행합니다.
  5. 설치가 완료되면 hexo 서버를 뛰웁니다. (hexo server)
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

 

hexo 테마적용하기

https://hexo.io/themes/ 에서 hexo 다양한 테마를 다운로드 받아 적용할수 있습니다. 코딩사랑에서 사용하는 theme은 https://github.com/ppoffice/hexo-theme-hueman 이곳의 theme을 이용했습니다. theme을 적용하는 방법은 해당 theme사이트로 가면 설치방법을 알수 있습니다. 전 이문서를 https://github.com/ppoffice/hexo-theme-hueman/wiki/Installation 이용해서 설치를 진행했습니다.

아래 명령어로 theme을 복제합니다.
git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman

 

C:\blog>cd blog
C:\blog>#git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman
Cloning into 'themes/hueman'...
remote: Enumerating objects: 40, done.
remote: Counting objects: 100% (40/40), done.
remote: Compressing objects: 100% (30/30), done.
remote: Total 1937 (delta 0), reused 37 (delta 0), pack-reused 1897
Receiving objects: 100% (1937/1937), 5.66 MiB | 4.10 MiB/s, done.
Resolving deltas: 100% (1015/1015), done.

 

c:\blog 폴더의 _confi.yml파일에서 theme을 파일을 열어서 아래와 같이 설치한 theme명으로 수정한다.

...
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hueman
...

 

 

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.

blog가 제되로 나오는지 확인해 보겠습니다. http://localhost:4000 을 클릭하여 아래와 같은 그림이 나온다면 성공입니다.

 

 

새글 써보기

새로운 cmd 창을 하나더 열어서 blog폴더로 이동한후 hexo new “test1” 라고 입력합니다.

C:\blog>hexo new "test1"
INFO  Created: C:\blog\source\_posts\test1.md

크롬에서 새로고침을 하면 아래와 같이 test1이라는 새글이 등록됨을 알수 있습니다.

editor로 c:\blog\source\test1.md파일을 열어서 아래와 같이 입력후 내용을 저장하세요

아래내용을 입력합니다.

# 글을 쓰는 방법 입니다.

글은 markdown이라는 문법을 알아야 됩니다.

[![Vue](https://kr.vuejs.org/images/logo.png)](https://kr.vuejs.org/)

test1 글 상세보기를 하면 아래와 같은 내용을 확인할수 있습니다.

github repository 생성

https://github.com/ 에 접속하여 우측 상단의 + 버튼을 클릭하고 New repository 메뉴를 선택합니다.

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

사이트에 접속하시면 아래와 같이 작성한 글을 확인할수 있습니다.

저작자표시 (새창열림)