게시 됨 업데이트 됨blog1분안에 읽기 (약 178 단어)

hexo 커스텀 404 페이지 만들기

  • 루트 디렉터리에 404.html이 존재하면 기존 404 페이지를 대신해 보여준다

  • hexo에서 적용시키려면 source 디렉터리에 404.html을 만들면된다

  • 그런데 hexo에서 배포할때 자동으로 테마에 맞게 지정된 레이아웃으로 변환한다

  • 이를 막기 위해 404.html의 Front-matter 에 layout: false로 지정한다

source/404.html
1
2
3
4
5
---
layout: false
---

<!DOCTYPE html>

Front-matter

  • hexo에서 파일 최상단에 적는 yml을 Front-matter라고 한다
Front-matter
1
2
3
4
5
6
7
8
9
10
11
---
title: 커스텀 404 페이지 만들기
toc: true
category: blog
tags:
  - hexo
  - 404
  - custom page
thumbnail: /images/커스텀-404-페이지-만들기20200921/preview.jpg
date: 2020-09-21 09:15:59
---

404 소스 출처

 게시 됨 업데이트 됨blog3분안에 읽기 (약 439 단어)

여러 컴퓨터에서 hexo 블로깅하기

{username}.github.io
hexo repo

  • hexo 블로그를 운영한다면 이렇게 2가지 저장소가 있을 것이다
  • hexo repo를 깃허브에 올리고, 다른 컴퓨터에서 클론해서 받아온다
  • 그리고 hexo 디렉터리안에 .deploy_git 디렉터리를 만들고 그안에 {username}.github.io 를 클론한다

상황

  • 블로그를 찍어내는 hexo 디렉터리를 깃허브에 올렸다
  • 다른 컴퓨터에서 hexo 저장소를 클론하고 블로그 배포를 해보았는데,
  • .deploy_git 디렉터리가 아예 새로 생성되면서 chinsun9.github.io 의 커밋 내역이 싹다 날라갔다..
  • chinsun9.github.io 의 커밋 내역을 유지하면서 여러 컴퓨터에서 블로깅을 할 수 있을까?

해결

  • .deploy_git 가 있는 내용이 force push 된다
  • 당연히 새로운 컴퓨터에서는 .deploy_git를 새로생성하기때문에 커밋내역이 싹 날라가게된다
  • .deploy_git의 내용을 기존의 내용으로 채워주고
  • hexo generate하면 커밋내역도 유지되면서 변경사항이 적용된다
  • 그리고 내가 이미지를 public/images 에 저장해 두었는데, 이 디렉터리가 gitignore에 설정 되어 있어서
  • 이미지가 하나도 깃허브에 올라가지 않았었다. 그것도 모르고 클론하고 배포를 해버렸다
  • 그래서 다시 원래 작업하는 컴퓨터에서 배포하여 원상복구 시켰다
  • .gitignore도 여러컴퓨터에서 작업할 때 적절히 설정해야한다

참고

 게시 됨 업데이트 됨blog1분안에 읽기 (약 167 단어)

hosted with ❤ by GitHub로 코드 표시하는 법

Github Gist

  • 전문 용어로 Gist 라고 하며, 코드 블럭을 순수 md로도 표현할 수 있는데 Gist로도 할 수 있다
  • 여기저기 여러 화면에서 중복되어서 씌여지는 코드가 있다
  • 그런데 코드에 오타가 나서 수정을 한다고하자
  • md로 작성했으면 복사 붙여넣기로 인해 일일이 다 수정해야한다
  • 그런데 gist로 작성했으면 그냥 gist에 들어가서 수정하면 다 반영이 된다!

Code Snippet

  • 내용이 되는 코드들을 코드 스니펫이라고 부른다!
 게시 됨 업데이트 됨blog몇 초안에 읽기 (약 105 단어)

마크다운에서 유튜브 동영상 삽입하기

  • 와우…
1
[![미리보기](https://img.youtube.com/vi/J3kUYFFdVc0/0.jpg)](https://www.youtube.com/watch?v=J3kUYFFdVc0)
  • 이렇게 힘들게 섰었는데…

태그 플러그인

  • 전문 용어로 태그 플러그인이라고 한다
1
{% youtube ycg_Cuse0M4 %}
  • 이렇게 간단하게 사용한다
  • 주의! 순수 마크다운이 아니다! hexo 에서 지원하는 기능이다..
 게시 됨 업데이트 됨blog1분안에 읽기 (약 181 단어)

hexo new 할때 기본틀 지정하기

  • 새로 글을 쓸때마다 tags, category 지정하는게 귀찮아… 근데 자동으로 세팅해버리기

Front-matter

  • 전문 용어로는 Front-matter 라고 한다

설정하기

1
2
3
4
5
6
7
---
title: {{ title }}
date: {{ date }}
category: blog
tags:
  - tag1
thumbnail: /images/
  • scaffolds/post.md 를 입맛대로 수정한다
  • title, date 라는 변수를 사용할 수 있다..
  • 더 사용할 수 있는 변수는 여기를 참고한다
  • 같은 방법으로 page나 draft 도 수정할 수 있다

재밌는 팁

  • {{ title.substring(1,title.length-1).replace(' ','-') }} 이런식으로 자바스크립트를 사용할 수 있다

  • 좋은 방법은 아닌 것 같은데.. 그냥 그럴 수 있다!

 게시 됨 업데이트 됨blog1분안에 읽기 (약 161 단어)

글마다 썸네일 넣기

글마다 썸네일 넣는법!

  • thumbnail: 이미지 경로
1
2
3
4
5
6
7
8
9
---
title: 글마다 썸네일 넣기
date: 2020-09-17 13:21:23
category: blog
tags:
  - hexo
  - thumbnail
thumbnail: /images/글마다-썸네일-넣기20200917/미리보기.jpg
---

주의사항

1
<img src="/images\글마다-썸네일-넣기20200917\photo_2020-09-17_13-22-16.jpg" >
  • 포스팅할때 내용에 저런식으로 /와 \를 혼용해도 정상작동했다..
  • 그래서 썸네일 지정도 그러할 줄 알았더니…
1
thumbnail: /images\글마다-썸네일-넣기20200917\미리보기.jpg
  • 이렇게 넣으면 작동을 안한다

  • 이렇게..


1
thumbnail: /images/글마다-썸네일-넣기20200917/photo_2020-09-17_13-22-16.jpg
  • 이렇게 /로 다 치환해줘야 썸네일 이미지가 제대로 들어간다
 게시 됨 업데이트 됨blog몇 초안에 읽기 (약 109 단어)

favicon이 안나오는 문제

  • 로컬에서는 분명히 잘나오는데.. 깃허브에 배포만 하면 파비콘이 사라진다??

해결하기

1
2
3
4
head:
  # URL or path to the website's icon
  favicon: /img/favicon.png?
  # Open Graph metadata
  • _config.icarus.yml 에서 상단에 favicon을 설정하는 부분이 있다
  • 맨 끝에 ?를 추가한다. 끝!
  • 이러면 깃허브 페이지에서도 favicon이 잘 나온다

참고

 게시 됨 업데이트 됨blog몇 초안에 읽기 (약 105 단어)

about 페이지 만드는 방법

  • 기본적으로 about 페이지가 없다! 근데 상단 네비게이션 바에는 About 링크가 있다!
  • About 페이지가 필요 없으면 상단 네비게이션 바에서 링크를 없애도 되는데, 나는 만들어 보았다

만드는 법

hexo new page "about"

  • 위 명령을 치면 source/about/index.md 이 자동 생성된다
  • index.md를 열고 열심히 수정하면 끝
 게시 됨 업데이트 됨blog몇 초안에 읽기 (약 97 단어)

github.io 저장소에 readme.md 만들기

- 더이상 github.io 저장소가 허전하지 않게 되었다!

source/readme.md 생성

_config.yml 에서 skip_render에 readme 추가

1
2
3
4
i18n_dir: ':lang'
skip_render:
  - readme.md
new_post_name: ':title:year:month:day.md'

의문

  • skip_render에 추가했는데 어째서인지 readme.html이 자동생성된다..
  • gitignore에도 추가해 보았는데 무시가 안된다

참고

 게시 됨 업데이트 됨blog2분안에 읽기 (약 234 단어)

블로그 썸네일 바꾸기

  • 흠… 내 블로그 링크를 걸었는데 이상한 로고가 나온다!

\public\img\og_image.png

  • 위치에 있는 이미지를 바꾸면 된다
  • 이 사이트를 대표하는 이미지를 og:image라고 하는 것도 알게 되었다
  • https://www.opengraph.xyz/ 이 사이트에 자기 블로그 주소를 입력하면 og image가 잘 갱신되었는지 확인 할 수 있다!
  • 카톡 같은 메신저에 다시 내 블로그 링크를 걸어도, 이전 이미지가 나올 수 있는데, 그것은 캐시 때문이다. (언제 갱신될지 잘 모르지만 언젠간 갱신되겠지,.)

아무 이미지도 안나올 때…

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
title: 친성의 블로그
subtitle: '최고의'
description: '친성의 개발 블로그'
keywords:
  - dev
  - developer
  - coding
  - sw
author: chinsung
language: ko
timezone: 'Asia/Seoul'
url: 'https://chinsun9.github.io/'
  • url에 자신의 블로그 주소를 입력
_config.yml
1
url: 'https://chinsun9.github.io/'

카테고리

아카이브

광고

×