SettingsBlog

정적 사이트 생성

, ,

개요

  • 정적 사이트를 만들만한 프레임워크들을 조사하기.
  • Hexo 프레임워크를 이용하여 블로그를 만들어 관리하기.

정적 사이트 프레임워크

Hexo

  • Javascript(Node.js)기반
  • 사용하는 사람 다수.(Reference 다수)
  • Git으로 포스트 버전관리가 어렵다.

Hugo

  • Golang 기반으로 속도가 빠르다.

Jekyll

  • 가장 많은 사용자 보유.
  • Ruby 기반으로 속도가 느리다.
  • Github페이지에서 Jekyll 사용하여 Hexo의 단점을 상쇄.

Hexo 블로그 프레임워크

1. 필수 파일 설치

  • 1단계 : Nodejs.org 다운로드

    • 설치가 완료되었다면 간단하게 확인가능.
    1
    $ node -v

  • 2단계 : git-scm.com 다운로드

    • 설치가 완료되었다면 간단하게 확인가능.
    1
    $ git --version

  • 3단계 : hexo 설치

    • hexo는 npm을 통해서 설치가 가능하다.
    1
    $ npm install -g hexo-cli

2. Github 설정

  • 두개의 깃허브 Repostories 를 생성.
  • 포스트 버전관리(name : blog)
  • 포스트 배포용 관리(name : eomtaehyeon.github.io)
    • eomtaehyeon 대신에 각자의 username 을 입력하면 된다.

3. 블로그 만들기

  • 리눅스 기본명령어
1
2
3
mkdir blog # blog라는 이름을 가진 폴더를 만든다.
cd blog # blog 폴더로 이동.
cd .. # 현재 폴더에서 상위 폴더로 이동.
  • hexo init “디렉토리”
1
2
3
4
5
6
7
8
9
$ hexo init blog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
INFO  Start blogging with Hexo!
$ cd blog
$ npm install
$ npm install hexo-server --save
$ npm install hexo-deployer-git --save

  • 에러구문.

    ERROR Deployer not found: git hexo-deployer-git을 설치 하지 않으면 deploy시 위와 같은 ERROR가 발생합니다.

  • _config.yml 파일 설정

    • 블로그 사이트 정보 수정
1
2
3
4
title: 제목을 지어주세요
subtitle: 부제목을 지어주세요
description: description을 지어주세요
author: YourName
  • 블로그 URL 정보 설정
1
2
3
4
url: https://eomtaehyeon.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
  • Github 연동
1
2
3
4
5
# Deployment
deploy:
  type: git
  repo: https://github.com/eomtaehyeon/eomtaehyeon.github.io.git
  branch: main

4. Github에 배포하기

  • 배포 하기 전, 확인하기
1
2
3
4
$ hexo generate
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

  • 화면 확인이 된 이후 깃허브에 배포

    • 배포하지 않을 파일 : gitignore 파일에서 설정
    1
    2
    3
    4
    5
    6
    7
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/

  • 최종적으로 배포

1
$ hexo deploy

  • • 배포가 완료가 되면 브라우저에서 eomtaehyeon.github.io로 접속해

    정상적으로 배포가 되었는지 확인한다.

Reference

Share