꾸준히 성장하는 개발자

github으로 blog만들기 - Hexo 본문

Git

github으로 blog만들기 - Hexo

ahleum 2022. 4. 13. 22:04

https://hexo.io/

 

Hexo

Hexo is a fast, simple & powerful blog framework powered by Node.js.

hexo.io

먼저 hexo를 설치전 npm, node가 깔려있어야 한다.

$ node -v

$ npm -v

를 입력하고 설치가 되어 있다면 version이 뜰 것이다

안 뜬다면 설치하고 오자

 

그리고 github에 가서 위처럼 유저이름.github.io 이렇게 적고 새로운 repository를 만든다

난 이미 만들어저 저렇게 에러메시지가 뜨지만 새로 만들면 만들 수 있을것이다

그리고 한 아이디당 하나씩만 만들 수 있다는점 !!!


 

 

$ npm install -g hexo-cli

입력하고 hexo를 설치한다.

 

 

설치를 완료하고 

$ hexo

입력하고 이렇게 나타나는지 확인하자

이렇게 옵션등 나온다면 잘 된 것이다

 

$ hexo init blog

을 입력하면 blog라는 폴더가 만들어지고 그 안으로 들어가면 

여러 가지가 생긴 것을 볼 수 있다.

 

$ hexo generate
$ hexo server

Hexo 설정을 통해 정적 리소스 생성하고 서버에 들어가 보자

server까지 치고 http://localhost:4000 이 나오는데 이 url로 들어가면 새로운 블로그가 만들어진 것을 볼 수 있다.

주의할 점!!!! ctrl+c 를 누르면 서버 연결이 끊어지기 때문에 복사할 때 주의해야 한다.

그리고 다시 작업을 다시 시작할 때 ctrl + c 를 눌러 돌아가자

 

$ hexo new post "새로운페이지 이름"

이렇게 치면 아래처럼 Created라고 뒤에 경로가 나온다.

그럼 지금은 blog폴더안에 있기 때문에 이 뒤로 있는 경로를 아래처럼 적어주자

$ vi source/_posts/새로운페이지 이름.md

그 경로를 따라가 vim으로 열어주자

 

 

그럼 위처럼 

--

title

date

tags

--

이렇게 나올 텐데 이건 건드리지 않고 

그 아래 쓰고 싶은 글을 적어주자

 

글을 적으려고 하면 insert모드로 변경해서 작성이 가능하다 

insert모드로 갈 땐 i (그런데 i를 누르면 현재 커서 있는 곳에서 커서가 생기고 아래로 내리려면 귀찮은데 )

소문자 o를 누르면 바로 다음 줄부터 시작할 수 있다 

 

그리고 돌아와서  (돌아오는것  :wq  입력)

$ hexo clean && hexo generate
$ hexo server

를 입력하고 바뀐 상태를 서버로 연결해서 봐보자

 

$ vi _config.yml

을 입력하고 vim으로 파일을 열어준다

 

그럼 아래 같은 화면이 나온다

1. title은 내가 쓸 블로그의 이름을 적는다

2. url에는 github.io 주소를 적는다

     https://유저이름.github.io 

     주의할 점 1. 뒤에 슬래쉬 사용하면 안 된다.  

                 2. http뒤에 꼭 s 붙일 것!!

3. 아래로 내려오면 # Deployment 부분에서

    type :  git

    repo:  아까 github.io github페이지에서 복사했던 주소를 넣는다

    branch: main

 

주의할 점!! type이나 repo 등 앞에 띄어쓰기가 꼭 있어야 한다.

               그리고 : 뒤에 글을 쓸 때도 사이에 띄어쓰기 있어야 한다.

               혹시나 뭔가 잘못 썼다고 ctrl + z 누르지 말자..... 탈난다..........(내가 나온 에러는 아래 적어놓음) 

                       

그리고 저장하고 나온다. 

:wq 입력

 

이제 blog의 테마를 골라서 설치해보자

$ npm install hexo-theme-next --save
$ vi _config.yml

 

난 next의 theme을 설치했다.

https://theme-next.js.org/

 

NexT

 

theme-next.js.org

 

그리고 다시 위 파일에 들어가 

theme: 설치한 테마 이름

으로 바꿔준다.

나와서 

$ hexo clean && hexo generate
$ hexo deploy

를 입력하고 조금 시간을 기다린 후 내깃헙.github.io 에 들어가면 파일이 올라가져 있는 것을 볼 수 있다.

https://유저이름.github.io  로 url주소를 주소창에 치고 들어가도 아까 server로 연결해서 들어가던 화면을 볼 수 있다.

 

 


 

 

위에서 _config.yml 파일안에서 ctrl + z 막누르다가 갑자기 파일밖으로 나가지면서 

다시 들어가니 아래처럼 나타났다

E325: ATTENTIONFound a swap file by the name "._config.yml.swp"owned by: dkfma dated: Wed Apr 13 19:47:53 2022file name: ~dkfma/Documents/dev/blog/_config.ymlmodified: YESuser name: dkfma host name: DESKTOP-CF8628Uprocess ID: 1275 (STILL RUNNING)While opening file "_config.yml"dated: Wed Apr 13 19:42:49 2022(1) Another program may be editing the same file. If this is the case,be careful not to end up with two different instances of the samefile when making changes. Quit, or continue with caution.(2) An edit session for this file crashed.If this is the case, use ":recover" or "vim -r _config.yml"to recover the changes (see ":help recovery").If you did this already, delete the swap file "._config.yml.swp"to avoid this message.Swap file "._config.yml.swp" already exists![O]pen Read-Only, (E)dit anyway, (R)ecover, (Q)uit, (A)bort:

​->  난 그 뒤에 blog위치로 돌아와서

     $ rm ._comfig.yml.swp 입력하고 다시 파일을 들어갈 수 있었다.... 

 

 

 

 

 

'Git' 카테고리의 다른 글

[Git] Github Fork / git flow / Pull Request  (0) 2022.05.31
[Git] gh-pages  (0) 2022.05.14
[Git] branch  (0) 2022.04.12
git 버전 관리 시작할 때, 파일 가져오기  (0) 2022.04.12
git 버전관리  (0) 2021.12.24