johngrib의 vimwiki + github.io 를 설치하기

이 문서는 Debian 13.3, neovim 을 사용함.

https://github.com/johngrib/johngrib-jekyll-skeleton

GitHub - johngrib/johngrib-jekyll-skeleton: my github.io jekyll blog skeleton

을 본인의 정보에 맞게 설정하는 법을 다룸

 

동시에 vimscript부분을 lua로 변경하고, conda 환경내에서 작업하도록 처리함.

 

수정된 결과물은 다음 저장소를 참고:https://github.com/ds31x/ds31x.github.io

GitHub - ds31x/ds31x.github.io: my github.io jekyll blog skeleton

---

fork 로 저장소를 만들고 저장소 기본 설정.

이종립 선생님의 vimwiki+github.io 의 sekelton을 가지고 있는 원본 저장소에 가서 fork를 수행.

https://github.com/johngrib/johngrib-jekyll-skeleton

GitHub - johngrib/johngrib-jekyll-skeleton: my github.io jekyll blog skeleton

• fork로 만들어질 저장소 이름을 가급적  <본인계정명>.github.io 로 해야함

 

다시 한번 이야기 하지만 fork 후 github page로 서비스하려면, 저장소 이름을 가급적 <계정명>.github.io 로 하는게 좋음

저장소 설정을 위한 오른쪽 상단의 Settings를 클릭하고 General 에서 repository 이름이 제대로인지 확인하고 아니라면 수정할 것.

 

Defautl branch는 master로 되어있는데, 최근 권장되는 이름은 사실 main임.

하지만 큰 상관이 없는 부분이므로 이 문서에선 그대로 master로 사용한다.

이후 Pages를 클릭한다

Pages 를 누르면 나오는 화면에서

• Build and deploymnet 에서 Source 는 그대로 Deploy form a branch 로 두고
• 아래의 해당 branch 설정을 None에서 master로 변경하고 저장하면 됨.

다음과 같이 수정하는 것임:

 

참고로, 이후 이 문서의 모든 작업을 수행하고 나면 Pages 는 다음과 같이 보인다.

상단에 현재 사이트가 서비스 중임을 확인할 수 있음.

---

git clone - 수정을 위해 로컬에 프로젝트로 생성.

fork한 repository로 가서 clone을 위한 저장소 주소를 얻어와 clone을 수행.

• 이 문서 작성 당시엔 공용장비에서 PAT로 로그인 하는 것을 가정하여 https 프로토콜을 사용했으나,
• ssh 키 기반이 정석임.

다음의 명령어를 local에서 수행하면, 수행한 디렉토리에 ds31x.github.io 라는 디렉토리가 생기고 그 안에서 작업을 할 수 있음.

git clone https://github.com/ds31x/ds31x.github.io.git

 

• ds31x 나 ds31x.github.io.git 에서 ds31x는 본인의 계정명으로 바꾸서 실행해야 함.
• 이 문서의 예제에서는 ~/git/ds31xx.github.io 가 만들어진 것으로 가정하고 진행.

2026.01.14 - [utils/git and github] - PAT를 통한 authentication for GitHub

PAT를 통한 authentication for GitHub

---

본인의 정보 및 url에 맞게 파일 수정

본인의 것으로 바꿀 내용은

주로 이종립 선생님의 site에 특화된 johngrib 이라는 단어가 포함된 부분이므로

find를 통해 수정할 파일 리스트를 찾는다.

❯ find . -type f -name "*.*" -exec grep -l "johngrib" {} +
./package.json
./_config.yml
./_includes/header.html
./tool/fix-image-references.sh
./about.md
./js/create-link.js
./_posts/2017/2017-04-20-jwp-06.md
./_posts/2017/2017-04-03-jwp-01.md
./_posts/2017/2017-05-14-jwp-10.md
./_posts/2017/2017-05-09-jwp-09.md
./_posts/2017/2017-04-17-jwp-05.md
./_posts/2017/2017-03-12-telegram-bot.md
./_posts/2017/2017-04-25-jwp-07.md
./_posts/2017/2017-05-16-jwp-11.md
./_posts/2017/2017-05-01-jwp-08.md
./_posts/2017/2017-05-20-jwp-12.md
./_posts/2017/2017-04-08-jwp-02.md
./robots.txt
./giscus.json
./_config.yml.sample
./README.md
./utterances.json

• ./package.json : 설치 파일
• ./_config.yml : 본인의 사이트에 맞게 수정할 것 (가장 중요).
• ./_includes/header.html : 이미지와 icon들을 본인에 맞게 수정해야함.
  • ./resource/icon 을 완전히 교체 (캐싱 문제가 있으면 icon1 등으로 새로 만들고 이를 사용하도록 수정)
  • ./resource/johngrib.png 를 본인이 사용할 이미지로 교체하고 header.html에서 이를 사용하도록 수정.
• ./tool/fix-image-references.sh : 내부의 johngrib.github.io를 본인의 github.io 사이트 url로 교체.
• ./about.md : 본인의 내용으로 교체할 것.
• ./js/create-link.js : 외부링크 표시해주는 부분에서 johnrib을 본인의 계정명으로...
• ./robots.txt, ./giscus.json, ./utterances.json : 내부의 johngrib.github.io를 본인의 github.io 사이트 url로 교체.

확장자가 .md 인 파일들은 예제 마크다운이므로 지워도 되고 설정과 관련 없음.

 

다음은 github page는 Jekyll을 사용하는데 여기서 사용되는 주요 설정은 _config.yml임.

다음은 ./_config.yml 의 수정된 코드임:

# Site settings
title: ds31x's blog
url: "https://ds31x.github.io"
baseurl: ""
description: >
    이종립 선생님의 vimwiki로 구현한 기억보조 사이트.

# My information
email: dsaint31@gmail.com
author: ds31x
profile: ordinary person
twitter_username: dsaint31
github_username: ds31x
comment-support: utterances

# Build settings
plugins:
  - jekyll-paginate
  - jekyll-gist

permalink: /blog/:year/:month/:day/:title/

markdown: kramdown
highlighter: rouge
kramdown:
  input: GFM
  syntax_highlighter: rouge

paginate: 10
paginator_path: "/blog"
paginate_path: "/blog/page:num/"

# Collections
collections:
    wiki:
        output: true
        permalink: /:collection/:path/

# Comment Service
giscus:
  repo: ds31x/ds31x.github.io
  repo_id:  SAMPLE-VALUE
  category: Announcements
  category_id:  SAMPLE-VALUE

google_analytics:
  ua: SAMPLE-VALUE
  encrypted_ua: THIS-IS-SAMPLE-VALUE

google_adsense:
  client: SAMPLE-VALUE

blame: "https://github.com/ds31x/ds31x.github.io/blame/master/_wiki"
edit: "https://github.com/ds31x/ds31x.github.io/edit/master/_wiki"
issue: "https://github.com/ds31x/ds31x.github.io/issues/new"

timezone: "Asia/Seoul"

# https://kramdown.gettalong.org/rdoc/Kramdown/Options.html - smart_quotes
kramdown:
    smart_quotes: ["apos", "apos", "quot", "quot"]

---

git hook 추가

vimwiki에서 변경사항이 발생하면, git page에서 이를 제대로 반영하기 위해 여러 메타 데이터가 갱신되야 함.

이를 수행하는 이종립 선생님이 작성한 스크립트가 commit을 할 때마다 실행되도록 다음의 git hook를 추가할 것.

 

$ cp tool/pre-commit ./.git/hooks

 

---

Jekyll 등의 동작을 위한 Ruby와 Node 및 의존성 라이브러리 설치

ruby 3.3.4 를 요구하여 ruby3.3을 conda 환경으로 설치함.
github 페이지 요구사항은 다음을 참고: https://pages.github.com/versions.json

 

시작 전에 GemFile에 다음을 맨 아래에 추가

gem "webrick"

• Ruby 3.x부터 webrick이 표준 라이브러리에서 빠졌기 때문에 설치를 해야함.
• 이는 jekyll server 에서 필요.

conda create -n vimwiki
conda activate vimwiki
conda install -c conda-forge ruby=3.3  compilers make pkg-config openssl zlib libffi readline ncurses yaml nodejs
npm install yamljs
bundle install
npm install
bundle exec jekyll serve

이후 127.0.0.1:4000 의 url에 브라우저로 들어가면, local에서 이종립 선생님의 vimwiki 사이트와 같은 모양으로 수정사항이 반영되여 보임.

• favicon 등이 변경되어 있으며,
• wiki 사이트 상단의 제목 등도 _config.yml에서 수정한 내용에 따라 변경됨을 확인할 것.

---

giscus 를 위한 설정.

각 문서에 comment 추가를 위한 설정임.

우선 현재 github의 해당 repository의 Settings에서 General 부분을 연다.

아래로 스크롤을 내리면 Issues와 Discussions가 보임 ( 이종립 선생님의 vimwiki+github.io에선 이 둘 다 사용하므로 모두 체크를 해준다.

https://giscus.app/ko 를 브라우저에서 열어서 giscus 앱을 설치한다. 해당 url을 열면 다음이 보임:

아래로 내리면, 저장소 를 설정하는 부분이 보이는데 여기서 2번의 giscus 앱 부분을 클릭해서 우선 앱을 설치한다.

 

클릭하면 다음의 화면이 새로운 탭으로 보임. Install을 클릭하면 됨

 

giscus에 권한을 줄 repository를 설정하고 save 클릭: 이 예제에서 ds31x/ds31x.github.io

 

이후, 아까전 https://giscus.app/ko  URL이 열린 브라우저 탭으로 돌아가서 좀 더 아래로 내리면 저장소가 나옴.

여기에 아까 고른 저장소를 입력: 유저명/저장소명 (ds31x/ds31x.github.io)

 

아래로 내리면 페이지와 Discussions 연결 방법을 설정하는 부분이 나옴.

여기서 Discussion 제목이 특정 단어를 포함 을 선택 (단어 입력은 비어둘 것)

 

아래로 내리면 Discussion 카테고리를 선택할 수 있는데 여기선 Announcements를 선택.

더 아래로 내려가면 giscus 사용 이 보임. 여기서 script 코드의 해당하는 값을 ~/_config.yml에 해당하는 위치에 복사한다

위 스크립트 코드의 붉은 박스내의 키와 값을 참고하여 ~/_config.yml에서 giscus 설정 부분을 편집한다.

---

vimwiki 설치

다음 글을 참고할 것.

2026.01.14 - [utils] - vimwiki/vimwiki (neovim의 init.lua로 설정)

vimwiki/vimwiki (neovim의 init.lua로 설정)

• vim 설정에서
• vim.g.vimwiki_list 를 <repositor명>/_wiki/ 로 지정해야 하는 점 유의 (이 문서의 경우, ~/git/ds31x.github.io/_wiki/ 임)

 

제대로 설정되었다면, vim을 수행하고 :WikiIndex 를 수행하면 ~/git/ds31x.github.io/_wiki/index.md 가 열림.

이 마크다운 파일을 처음 열면 아래처럼 front matter만 보임

아래에 새로운 글인 first-log.md 를 추가하기 위해 bullet으로 first-log를 index.md에 추가하고
normal 모드에서 cursor를 first-log 에 두고 엔터를 누르면 [[first-log]] 처럼 double squre bracket으로 싸여짐

다시 여기에 cursor를 두고 엔터를 누르면 first-log.md 를 편집하도록 열림.

해당 파일을 다음과 같이 편집하고 저장하면 새로운 글이 추가된 것임:

 

위의 붉은 박스의 front matter (해당 문서의 메타정보 포함)를 매번 쳐줄수 없기 때문에
vim의 설정에 vimwiki 글들이 있는 디렉토리에서 새로운 .md 파일을 만들면 자동으로 추가되도록 처리한다
(이종립 선생님의 vimscript 코드를 nvim의 init.lua 로만 수정함).

 

다음은 해당 설정이 된  ~/.config/nvim/init.lua 와 여기서 vimwiki 관련된 ~/.config/nvim/lua/config/vimwiki.lua 의 코드임 

init.lua의 관련 부분임

 

~/.config/nvim/init.lua 와 ~/.config/nvim/lua/config/vimwiki.lua 코드는 첨부로 올려 놓는다.

init.lua

0.00MB

vimwiki.lua

0.01MB

 위의 코드는 vimscript를 lua로만 바꾸었음.

 

코드 설명은 이종립 선생님의 사이트에서 vimwiki 사용법 문서 참고할 것 (단 vimscript임).

Vimscript 서포트 코드 부분의 함수들이 있어야 front matter를 손으로 매번 작성하지 않음.

https://johngrib.github.io/wiki/vimwiki/#vimscript-%EC%84%9C%ED%8F%AC%ED%8A%B8-%EC%BD%94%EB%93%9C

Vimwiki 사용법

 

 

---

git add, commit, push

vim에서 vimwiki를 설치하고, 새로운 글을 추가를 하고 나서 localhost:4000 으로 확인을 하고 나선,

이들 변경사항을 git add, commit, push 하면 다음과 같이 github page에서 확인을 할 수 있음:

---

같이보면 좋은자료

 

이종립 선생님이 만든 것이므로 당연히 이종립 선생님의 관련 글을 살펴봐야 제대로 이해가 됨.

https://johngrib.github.io/wiki/my-wiki/

Vimwiki + Jekyll + Github.io로 나만의 위키를 만들자

https://johngrib.github.io/wiki/vimwiki/

Vimwiki 사용법

https://johngrib.github.io/wiki/blog/

블로그

---