[blog] hexo admin plugin 으로 포스트 작성

블로그 포스팅하기

github.io로 블로그를 만드는 많은 이용자들이 프래임워크를 활용을 하게된다.
필자와같이 hexo를 사용하기도 하고, jekyll을 사용하기도한다.
프래임워크마다 지원하는 기능이나 플러그인은 다를 수 있지만 포스팅을하는 기능이나, 테마를 바꾸는 기능처럼 공통적인 부분은 기본적으로 지원한다.

본 글에서는 필자가 블로그 포스트를 작성하는 방법에 대해 소개를한다.

블로그에 관한 다른내용이 궁금하다면 아래 내용을 참고하도록 하자.

관련 포스트

  1. hexo로 블로그만들기
  2. 블로그 테마 입히기

포스팅

markdown

  • github repository를 만든 후 안내를위해 readme.md를 작성하는경우.
  • github.io로 만든 블로그의 기본구성에서 포스트 작성하는 방식.

공통점은 모두 markdown(마크다운) 문법을 사용한다는 것이다.
markdown 문법은 매우 간결하며 html의 많은 문법들을 대체할 수 있다.
복잡한 기능없이 쉽고 빠르게 글을 쓰는경우 많이들 사용한다.

예시1 h1-h6

html 에서 h1~h6 을 나타내는 문법

1
2
3
4
5
6
# 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

예시2 목록

1
2
3
4
- 순서가 필요하지 않은 목록에 사용 가능한 기호
- 대쉬(hyphen)
* 별표(asterisks)
+ 더하기(plus sign)

그외

링크,이미지,테이블,코드, 코드블럭 등 다양한 문법이 준비되어있다.
자세한 사항은 아래 링크를 참고하도록하자

https://gist.github.com/ihoneymon/652be052a0727ad59601

작성도구

문서를 작성할때는 에디터 프로그램을 사용하는것이 일반적이다. 물론 메모장에서 작성해도 상관 없지만 도구는 문서를 작성할때 많은 도움을 준다.
아래 소개할 도구들은 작성을 편리하게 해 줄 뿐 아니라, 작성한 결과도 함깨 표시해주어 마크다운으로 문서를 작성할때 추천한다.

atom

https://atom.io
atom

atom 은 가볍기도하고, 다양한 테마가 있어 원하는 취향대로 쓸 수 있다.
github도 연동이되어 내가 작성한 문서의 버전관리도 쉽게 연동 가능하다.

하지만 이미지 첨부의 경우 난감해진다.
이미지를 포스트에 보여주기위해서는 link가 필요하다. 이경우 원하는 경로에 이미지를 넣고 상대경로를 링크로 걸어준다
예를들면 위 atom 에디터의 이미지는 아래처럼 되어있다.

1
![atom](/images/pasted-31.png)

필자는 이미지업로드를 편하기위해 hexo admin plugin을 사용한다.

admin plugin

hexo plugin 소개

hexo 에는 다양한 플러그인이 있다. (https://hexo.io/plugins/)

  • 블로그의 uv/pv를 측정해주는 기능.
  • rss생성
  • 이미지 갤러리생성
  • 검색을위해 robot.txt생성
  • ..

그 중 admin plugin은 포스팅을 쉽게 할 수 있도록 만들어졌으며 테그와 카테고리등록도 쉽게 할 수 있다.

설치

아래 github 주소의 의 공식 가이드에 맞추어 진행하였다.
https://github.com/jaredly/hexo-admin

blog를 초기화한 root 경로로 이동한다음 아래 명령어를 수행해준다

1
2
3
npm install --save hexo-admin

hexo server

그리고 hexo server 를 실행하여 로컬에 서버를 띄운후
http://localhost:4000/admin으로 들어가준다

자동으로 만들어진 하나의 포스트가 보인다.

새로운 포스트 만들기

먼저 좌측 상단 posts탭에서 파란색 + NEW POST 를 누르고 제목을 입력한다.

new_post

그리고 마크다운문법으로 글을 작성한다.

markdown

이때 작성한 글은 변화를 감지하여 자동으로 저장되며 작성한 내용을 바로 볼 수 있다.
이미지의경우 원하는 이미지를 복사한 상태로 본문으로 커서를옮겨 붙여넣으면 이미지가 경로에 업로드되면서, 본문에 이미지 문법으로 작성까지 한번에 된다.

태그와 카테고리

본문을 모두 작성하였으면 태그와 카테고리를 설정 할 수 있다.
우측애 기어처럼 생긴 버튼을 누르고 태그와 카태고리를 입력한다.
tag

마지막으로 오른쪽 빨간색 publish 버튼을 누르면 준비는 모두 끝났다.

배포하기

이제 실제 블로그에 올라갈 단계이다. 목표는 배포 저장소인 github repository에 올리는것이다. 배포단계는 공식 문서를 참고하였다. (https://hexo.io/ko/docs/one-command-deployment)

hexo blog home 디렉토리로 이동후 _config.yml을 열고 deployment 항목을 작성한다.

1
2
3
4
5
deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message]

그리고 hexo g && hexo d 명령어를 수행한다.

  • hexo g : hexo generate 의 약자로 작성한 본문의 내용을 바탕으로 웹페이지생성
  • hexo d : hexo deploy 의 약자로 생성된 페이지를 저장서로 배포

보안

admin의 경우 포스트를 생성/삭제 할 수 있는만큼 로컬서버에서는 기능이 작동하지만, 실제 배포후에는 404에러가 나와서 접근이 불가능하여 관리가 용의하다.

아이디와 비밀번호도 수동으로 셋팅 할 수 있는데 http://localhost:4000/admin/#/auth-setup 에서 아이디와 비밀번호의 hash값을 생성하고, _config.yml에서 값을 설정한다
자세한것은 공식문서 를 참고하자

Comments