Hexo 블로그 만들기

안녕하세요!
hexo 블로그 만드는 방법입니다.

hexo 블로그 생성전 아래 2가지를 먼저 설치해야 합니다.

  1. Node.js
    • Should be at least Node.js 8.10, recommends 10.0 or higher
  2. Git
    • github에서 repository를 생성해야 합니다.

참고 사이트

hexo 블로그 공식 홈페이지

hexo 블로그 설치하기 공식문서

  1. 터미널을 엽니다.

  2. 블로그를 만들면 폴더가 생성됩니다. 폴더를 생성하고자 하는 곳으로 가셔서 아래의 $를 제외한 명령어를 입력하세요.

  3. 띄어쓰기 대소문자 모두 그대로 입력해주세요.

    1
    2
    1. $ npm install hexo-cli -g
    2. $ hexo init blog
  4. 블로그를 만든 폴더로 이동합니다.

    1
    2
    3
    5. $ cd blog
    6. $ npm install
    7. $ hexo server
  5. 로컬에서 hexo 블로그를 확인하실 수 있습니다.

  6. 아래 터미널의 경로로 가셔서 파일을 만듭니다.

터미널에서의 경로

본인이 만든 폴더 안의 source 폴더 안에 _post

1
$ source/_posts/

** 파일 이름(본인이 원하는 이름을 적으시면 됩니다.)**

파일명.md

파일 안에 원하는 내용을 적는데, 맨 위에 제목은 아래처럼 작성해주세요.

1
2
3
4
5
6
7
8
---
title: Hexo에 글을 쓰고 사이트에 반영하기
---
위처럼 제목을 적으셨으면 아래줄에 내용을 입력하면 됩니다.

1번 내용
2번 내용 등
주석을 적을 때는 `#`을 사용하여 적으시면 됩니다.

마크다운 문법

올릴 내용이 준비되었다면 아래와 같이 4가지 단계를 거쳐 블로그에 내용을 올리시면 됩니다.

1번: 헥소에 변화를 주겠다고 얘기한다.
2번: 헥소에 내용을 반영하겠다고 얘기한다.
3번: 헥소에 반영된 내용을 확인하겠다고 얘기한다. 수정이 필요하면 수정을 진행한다. 수정이 완료되면 아래 4번을 통해 내용을 공개하겠다고 얘기한다.
4번: 블로그에 내용을 게시하겠다고 얘기한다.

터미널 창으로 가셔서 $ 표시 뒤의 글자를 치세요.

1
2
3
4
$ hexo clean
$ hexo generate
$ hexo server # 생략가능, 로컬영역에서 확인
$ hexo deploy

추가적인 내용은 지속적으로 편집하도록 하겠습니다.

최대한 자세히 쓰려고 노력중입니다.
여러가지 의견 감사히 받겠습니다.
댓글을 어떻게 활성화해야 하는지 몰라 여기저기 구글링중입니다.

댓글기능을 추가하였습니다.

Hexo_deploy_contents

※ 저는 Visual Studio Code를 이용합니다.

그럼, 내가 쓴 글이 블로그에 어떻게 올라가는지 제가 아는 내용을 최대한 자세히 설명 드리겠습니다 :)

hexo 블로그에 post 올리기

  1. 우선 터미널을 실행하고
  2. hexo를 만들었던 폴더로 이동하여
  3. 포스트 파일을 생성하는 명령어를 아래와 같이 입력합니다.
1
$ hexo new layout title
  1. 생성된 파일로 들어가서
1
2
3
4
5
6
7
8
---
title: Hexo에 글을 쓰고 사이트에 반영하기
---
위처럼 제목을 적으셨으면 아래줄에 내용을 입력하면 됩니다.

1번 내용
2번 내용 등
주석을 적을 때는 `###`을 사용하여 적으시면 됩니다.

올릴 내용이 준비되었다면 아래와 같이 4가지 단계를 거쳐 블로그에 내용을 올리시면 됩니다.

1번: 헥소에 변화를 주겠다고 얘기한다.
2번: 헥소에 내용을 반영하겠다고 얘기한다.
3번: 헥소에 반영된 내용을 확인하겠다고 얘기한다. 수정이 필요하면 수정을 진행한다. 수정이 완료되면 아래 4번을 통해 내용을 공개하겠다고 얘기한다.
4번: 블로그에 내용을 게시하겠다고 얘기한다.

터미널 창으로 가셔서 $ 표시 다음을 따라 치세요.

1. $ hexo clean

2. $ hexo generate

3. $ hexo server

4. $ hexo deploy

추가적인 내용은 지속적으로 편집하도록 하겠습니다.

webcrawling

1. 개발자 도구를 활용한 웹페이지 분석

  • chrome 기준

  • 웹 브라우저 : html로 작성된 내용을 user(사람들)가 보기 쉽게 랜더링 해주는 기능을 함

  • Elements 탭

  • 원하는 데이터로 이동하는 기능을 사용

  • 엘레먼트 탭 : 왼쪽 상단에 있음, 원하는 데이터를 클릭했을 때 어떤 테그와 어떤 속성을 가지는지 표시해주는 역할을 함

  • 어떤 태그와 속성을 가지는지 먼저 파악해야 함

  • Network 탭

  • Preserve log : 체크 시, 로그가 지워지지 않고 유지됨

  • 브라우저가 서버에 요청되는 모든 요청을 로그함

  • url 확인 가능

  • 요청이 많은 이유 : 이미지 등은 첫번째 요청에 한번에 오지 않고, 따로 요청하여 받아옴

  • 처음엔 기본적인 데이터만 넘기고, 나머지 데이터는 브라우저에서 ajax 등의 기술을 이용해서 비동기적으로 가져갈 수 있도록 함

  • HTTP(Hyper Text Transfer Protocol) : HTML 문서 등의 리소스를 전송하는 프로토콜(규약)

  • 클라이언트(user가 사용하는 브라우저)가 서버에 HTTP 요청(Get, Post 등)

  • 서버에서 클라이언트로 HTTP 응답을 함

  • Get 요청 : 데이터를 url에 포함하여 전달(주로 리소스 요청에 사용), 정보의 공유가능

  • Post 요청 : 데이터를 Form data에 포함하여 전달(주로 로그인에 사용)

  • rendering(렌더링) : html을 받아 사용자(사람들)이 볼 수 있도록 출력해주는 작업

안녕하세요 !!

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment