• 동기화 하고 싶은 폴더가 있을때 정말 좋다

심볼릭 링크 만드는 법

• 절대 위치 사용 ; mklink /d [링크위치] [실제위치]
• 상대 위치 사용 ; mklink /d [링크위치] [링크위치를 기준으로 상대위치]
  • ex ) mklink /d .\.aws-sam\build\CommentFunction ..\..\dist
• 링크이름 ; 새로만들어질 폴더 ; 현재 존재하지 않는 폴더여야 함
• 실제위치 ; 원본 폴더 ; 이미 만들어져 있는 폴더

심볼릭 링크 삭제

rmdir [링크]

심볼릭 링크

• 폴더 내용물이 공유된다. (사본이 아님)
• 링크 폴더도 실제 폴더 처럼 작동한다
• 바로가기 아이콘을 하고 있다
• 원본 폴더에 별명을 지어준 느낌이다
• 포인터 같은 느낌이다

팁

• 권한이 없다고 하면 관리자 권한으로 명령을 실행한다

상대경로를 사용해 만든경우

• 당연한 말이지만 원본 폴더나 링크 폴더의 위치가 바뀌면 안된다
• 디렉터리 구조가 변하지 않고 두 폴더를 이동한다면 잘 작동한다

절대경로를 사용해 만든경우

• 링크 폴더를 아무렇게나 이동시켜도 잘 작동한다
• 당연한 말이지만 원본 폴더를 옮기면 작동하지 않는다

내가 활용한 곳

aws lambda layer

• lambda 에서는 함수의 크기를 줄이기 위해 layer라는 것을 사용한다
• sam project에서 lambda를 작성하고 node_modules 같은 무거운 얘들은 layer로 빼야한다
• 그런데 이 과정이 매우 귀찮다
  • package.json 에서 종속성들이 빌드되지 않게 주석
  • sam yaml에서 지정한 종속성 경로에 node_modules 사본 또는 옮기기
  • 수정작업할때, 코딩할때 자동완성 및 문서를 보기 위해서는 node_modules 폴더가 함수 안에 필요함
• sam yaml에서 지정한 종속성 경로는 함수안이 되면 안됨. 즉, 직접 다이렉트로 node_modules를 지정할 수 없음. sam project 루트로 빼던가 해야함
• 여기서 심볼릭 링크를 활용해서 두 폴더간 동기화를 진행!

• 새로 글을 쓸때마다 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(' ','-') }} 이런식으로 자바스크립트를 사용할 수 있다

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

글마다 썸네일 넣는법!

• 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

• 이렇게 /로 다 치환해줘야 썸네일 이미지가 제대로 들어간다

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

해결하기

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이 잘 나온다

참고

• https://stackoverflow.com/questions/46163065/github-pages-website-favicon-not-showing

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

만드는 법

hexo new page "about"

• 위 명령을 치면 source/about/index.md 이 자동 생성된다

• index.md를 열고 열심히 수정하면 끝

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에도 추가해 보았는데 무시가 안된다

참고

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

\public\img\og_image.png

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

아무 이미지도 안나올 때…

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에 자신의 블로그 주소를 입력

1

url: 'https://chinsun9.github.io/'

배포하기 전에 로컬에서 미리보자

hexo server

• 위 명령어를 통해서 로컬에서 내 블로그를 미리 볼 수 있다

• 4000번 포트로 접속하면 된다

• hexo server -p 3000 과 같이 -p 옵션을 통해서 포트를 지정할 수도 있다

• 가장 좋은 점은 변경 사항이 있으면 바로바로 갱신되어 나온다

• 실험적인 시도들을 먼저 로컬에서 해보고 잘되면, 배포할 수 있다

팁

• 이미지를 수정했는데 적용이 안되어 보일 수 있는데 브라우저 캐시 문제다
• 배포해서 깃허브에 올라가면 제대로 수정된 이미지가 보인다
• 깃허브에 배포해도 그 즉시 적용이 되지 않고 조금 시간이 걸린다
• 따라서 hexo server이 좋다!

안녕

하세요

저는

친성입니다

만나서

반가워요

다시

만나요

1
2
3
4
5
6
7
8

---
title: toc 사용하기
date: 2020-09-17 09:22:30
category: blog
tags:
  - hexo
toc: true
---

• toc: true를 추가시켜주면 헤딩 태그(h1~h6)를 파싱하여 목차를 만들어 줍니다

• 처음에 적용해 보시면 목차 깊이가 2개밖에 되지 않는다고 생각할 수 있는데

• 스크롤 해보시면 숨겨져있다가 나옵니다!

• 나도 멋진 깃허브 블로그를 만들어보고 싶었다. (지금 이 블로그!)

• Hexo 라는 블로그 프레임워크가 있었다

• 한글로 된 공식 문서도 있어서 접근하기 좋았다

• 나는 카인드패밀리님의 영상을 보고 따라하면서 만들어 보았다

• Hexo를 이용하면 멋진 블로그를 뚝딱하고 만들 수 있다

• 간단하게 설명하자면,

• Hexo에서 원하는 테마를 받아와서 글을 쓰고, 내 github.io 저장소와 연결하고 배포하는 거다

따라하기

• 먼저 nodejs와 git이 설치되어 있어야 한다
• 또, https://chinsun9.github.io/ 와 같은 url을 얻고싶으면 {자기 깃허브 아이디}.github.io이름의 저장소가 있어야한다
• 준비되었다면 cmd를 열고 hexo cli를 전역으로 설치한다
• 나는 vscode에서 터미널을 열어서 진행했다. vscode가 최고다

1

npm i hexo-cli -g

• hexo 프로젝트 생성

• 적당한 빈 디렉터리로 이동한다음에 아래 명령어를 실행한다

• 혹시 다른 테마를 적용하길 원하는 사람은 테마 적용방법을 찾아 보기 바란다. 여기선 icarus를 설명한다

1
2

hexo init
npm i hexo-theme-icarus

• 다음엔 icarus테마를 위한 config를 생성한다

1

hexo config theme icarus

1
2
3
4
5
6
7
8

INFO  Validating config
ERROR {
  err: [Error: EISDIR: illegal operation on a directory, read] {
    errno: -4068,
    code: 'EISDIR',
    syscall: 'read'
  }
} Plugin load failed: %s hexo-theme-icarus

• 위 같은 오류가 나면 무시하고 다시 명령을 실행한다

1

hexo config theme icarus

1
2
3
4
5
6
7

INFO  === Checking package dependencies ===
ERROR Package bulma-stylus is not installed.
ERROR Package hexo-renderer-inferno is not installed.
ERROR Please install the missing dependencies your Hexo site root directory:
ERROR npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3
ERROR or:
ERROR yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

• 그러면 다른 오류메시지가 나온다
• 이러이러한 패키지가 필요하다하면 추가로 설치해준다

1

npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

• 현재까지 설치된 패키지 목록

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
  // ...
  "hexo": {
    "version": "5.2.0"
  },
  "dependencies": {
    "bulma-stylus": "^0.8.0",
    "hexo": "^5.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-inferno": "^0.1.3",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-theme-icarus": "^4.0.1"
  }
}

• 종속성이 해결되면 다시 실행

1

hexo config theme icarus

1
2
3
4
5
6
7
8
9

INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
WARN  None of the following configuration files is found:
WARN  - C:\git\tmp blog\_config.icarus.yml
WARN  - C:\git\tmp blog\node_modules\hexo-theme-icarus\_config.yml
INFO  Generating theme configuration file...
INFO  C:\git\tmp blog\_config.icarus.yml created successfully.
INFO  To skip configuration generation, use "--icarus-dont-generate-config".
INFO  === Registering Hexo extensions ===

• 위처럼 메시지가 나오면 성공이다

• 이제 최상위 디렉터리에 _config.yml 이라는 파일이 있는데 아래 처럼 수정한다

• 블로그가 될 저장소 주소를 적어준다

1
2
3
4
5

theme: icarus
deploy:
  type: git
  repo: https://github.com/chinsun9/chinsun9.github.io
  branch: master

• 여기까지 성공적으로 됬다면 로컬에서 확인해 볼 수 있다

1

hexo server -p 3000

• 새 포스트를 써보자

1

hexo new "타이틀"

1
2
3
4

INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
INFO  Created: C:\git\2020-github-pages-hexo\source\_posts\new-post20200916.md

• 위와같은 메시지가 나오는데 vscode터미널같은 경우 ctrl+click을 통해 바로 저 파일을 열어 볼 수 있다

• 열어서 열심히 md 언어로 포스팅을 하고 저장한다

• 이제 배포를 해보겠다

• hexo-deployer-git을 설치한다

1
2

npm i hexo-deployer-git -g

• 그러면 다음 명령어를 사용할 수 있다

1
2

hexo generate
hexo deploy

• 위처럼 명령어를 두번쓰기 귀찮아서 명령어 하나로 묶어 버렸다
• 하는 김에 hexo 커밋까지..

1
2
3
4
5
6
7
8
9
10
11

{
  // ...
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "test": "hexo server",
    "start": "hexo generate & hexo deploy & git add . & git commit -m "
  }
  // ...
}

• 글을 하나 쓰고 나면 npm start 명령어로 배포하고 커밋한다.
  npm start "커밋메시지"
• 이런식으로 써서 편하게? 관리하려고 했다