Giter Club home page Giter Club logo

johngrib-jekyll-skeleton's Introduction

Vimwiki + Jekyll + Github.io

시작하기

블로그 스켈레톤을 fork 하세요.

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

제 블로그를 fork하는 것보다 블로그 스켈레톤을 fork하는 것을 권합니다. 블로그를 그냥 fork 하면 제 자기소개와 일기, 에세이까지 당신의 블로그의 컨텐츠가 됩니다.

  • 만약 그냥 fork 하신다면 제 자기소개와 일기를 포함한 _wiki의 모든 md 파일을 삭제하고 사용하세요.
  • skeleton에 있는 문서들은 튜토리얼로 생각하고 읽어주시면 됩니다.

다음 글을 읽으며 블로그의 구조를 파악하시면 운영에 도움이 될 것입니다.

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

설치하기

루비가 설치되어 있지 않을 경우 루비를 설치해 주세요. 여기에서는 rvm으로 설치하는 방법을 소개해 드립니다. 다른 방법으로도 루비를 설치할 수 있으니, 다른 방법으로 하셔도 됩니다.

루비 버전은 GitHub Pages Dependency versions을 보면 GitHub Pages에서는 2.7.4버전을 사용하고 있으니 해당 버전을 설치해 줍니다.

# See also https://rvm.io/rvm/install
$ gpg --keyserver hkp://pool.sks-keyservers.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
$ curl -sSL https://get.rvm.io | bash
$ rvm install 2.7.4
$ rvm use 2.7.4

그다음 bundle install을 실행하여 의존성들을 설치합니다.

$ bundle install

Git hooks 추가하기

새로운 글을 등록하면 메타 데이터를 업데이트해 주어야 합니다. 커밋하기 전에 이를 자동으로 될 수 있도록 Git Hooks를 추가해야 합니다.

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

노드 모듈 설치하기

메타 데이터 생성을 위해서 generateData.js를 실행해야 합니다. 이를 실행하기 위해서 yamljs 의존성을 설치해야 합니다.

$ npm install

실행하기

$ jekyll serve

글 작성하기

새로운 카테고리 만들기

카테고리가 있는 글을 작성하고 싶을 때는 카테고리를 먼저 만들어야 합니다. /_wiki/category-name.md같이 파일을 만들고 내용에는 다음을 추가해야 합니다.

이때 layout속성은 category가 되어야 합니다.

---
layout  : category
title   : 제목을 입력합니다.
summary : 
date    : 2022-10-06 00:00:00 +0900
updated : 2022-10-06 00:00:00 +0900
tag     : 
toc     : true
public  : true
parent  : index
latex   : false
---

* TOC
{:toc}

위키에 글 등록하기

위키를 작성할 때는 /_wiki 폴더 아래에 마크다운으로 파일을 작성합니다. 만약 카테고리 아래에 글을 작성하고 싶을 경우에는 카테고리 이름으로 폴더를 만들고 파일을 추가합니다. 예를 들어 /_wiki/category-name/document.md로 만들 수 있습니다. layoutwiki가 되어야 합니다. parent는 상위 카테고리 이름을 작성해야 합니다.

만약 상위 카테고리가 없을 경우에는 parentindex를 입력합니다.

---
layout  : wiki
title   : 제목을 적습니다
date    : 2022-10-08 11:23:00 +0900
updated : 2022-10-08 11:23:00 +0900
tag     : 
toc     : true
public  : true
parent  : category-name
latex   : false
---

* TOC
{:toc}

내용을 적습니다.

johngrib-jekyll-skeleton's People

Contributors

anyjava avatar hannut91 avatar honggaruy avatar johngrib avatar yujonglee avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

johngrib-jekyll-skeleton's Issues

aws와 AWS처럼 대문자/소문자 여부만 다른 두 태그가 있을 때 태그 데이터가 정상적으로 생성되지 않습니다.

{"fileName":"AWS","collection":{"2017-04-13-jwp-04":{"type":"blog","title":"Next JWP Study 04","summary":"\"HTTP 이해: 리팩토링과 AWS 배포\"","url":"/blog/2017/04/13/jwp-04","updated":"2017-04-13 12:15:32 +0900","children":[]}}}+0900","children":[]}}}

  1. _post에 2017-04-02-jwp-00-prepare.md 는 aws태그를 가지고 있고, 2017-04-13-jwp-04.md는 AWS태그를 가지고 있으나 실제로는 aws.json만 생성되며, 그 내용은 AWS태그에 대한 것만 있고 aws태그에 대한 것은 없습니다.
  2. aws.json의 내용에서 맨 마지막 children 프로퍼티쪽이 이상합니다. children이 2개 있고, +0900이 이상한 위치에 있습니다.
  3. 실제로 이 뼈대코드 외에 종립님의 블로그에 들어가서 태그를 클릭하면, aws, AWS 태그는 둘 다 있으나 클릭했을 때 정상동작하지 않습니다.

save-images.sh 관련

안녕하세요. 우선 이미지 경로를 안정적으로 유지할 수 있도록 업데이트 해주신 부분에 대해 감사드립니다. 지금 등록하는 글은 이슈로 제출해야 하는지 조금 고민이 되긴 했습니다. 이번 업데이트와 맞물려서 위키 파일 템플릿 12행에 'resource'가 추가되었는데, save-images.sh 스크립트에서 'RESOURCE_DIR'을 가져올 때 head로 10줄(default)만 가져오다 보니 경로가 의도대로 만들어지지 않았습니다.

RESOURCE_DIR=`head $CHANGED_FILE | egrep -o '[A-F0-9-]{2}/[A-F0-9-]{34}$'`

(이는 템플릿의 'resource' 행 위치를 변경하거나 head 명령어에 -12 옵션만 주면 금방 해결 될 수 있습니다. 아마도 기존 파일에 uuid를 추가하실 때 행 위치는 8번째였는데, 템플릿으로 정리하실 때는 제일 아래가 적당해 보이셔서 마지막행(12행) 위치로 변경하셨던 것 같습니다.)

그리고 초보자로서 궁금한 점도 있습니다. set-vimwiki.vim 의 템플릿에서 uuid 만드실 때 substitute(system("uuidgen"), '\n', '', '')) 이렇게 하면 앞의 두 자리가 '/'로 구분되지 않는데, 이는 어떻게 처리하시는지 궁금합니다.

내년에는 더 건강해지신 John Grib님을 트위터에서 만나보게 되었으면 좋겠습니다.
항상 감사드립니다.

$coding_font 설정이 안먹는 문제

  • 문제 상황
    /css/main.scss 에 $coding-font 변수가 있어 이곳에 폰트를 추가하고 이곳에 설정 했지만 적용안됨.
    참고링크: https://github.com/wan2land/d2coding
// /css/main.scss에 다음과 같이 작성
@import url("//cdn.jsdelivr.net/gh/wan2land/d2coding/d2coding-full.css")
$coding-font: 'D2Coding', Consolas, "Courier New", Courier;

  • 상황 분석
    /_scss/_base.css 에서 다음과 같이 설정하고 있지만...
code,pre {
    font-family: $coding-font;
}

/_scss/_sytax.scss 에서 다음과 같이 중복 설정중임.

code {
    font-family: Consolas, "Courier New", Courier;
    a { ... }
}

  • 결론
    결과적으로 main.scss 에서 @import 순서상 뒤쪽에 있는 _syntax.scss 의 설정이 최종적으로 적용되어 $coding-font의 값이 적용안됨.

제 사이트에서는 수정했지만 스켈레톤에도 적용되어야 할듯하여 이슈등록합니다. 두부분중 어느곳을 수정해야 할까요?

generateData.js 코드 수정

안녕하세요. 제가 generateData.js에 저에게 필요한 기능을 추가하면서 기존 코드를 조금 수정하였는데요,
혹시 그 중 일부가 여기 johngrib-jekyll-skeleton에도 반영되면 좋지 않을까 해서 PR을 보내기 전에 이슈를 올려봅니다.
아래는 그 목록입니다.

제가 잘못 생각한 것이 있다면 말씀해주세요!. 감사합니다.

  1. 5번 라인에서 const path = './_wiki'가 선언된 후 사용되지 않아 삭제하였습니다.
  2. 26번, 49번, 56번, 167번 라인에서 toLowerCase().localeCompare가 포함된 비교함수가 반복적으로 등장하여 중복을 제거했습니다.
function lexicalOrderingBy(property) {
    return (a, b) => a[property].toLowerCase().localeCompare(b[property].toLowerCase())
}

와 같이 비교함수를 리턴하는 함수를 만들어 다음과 같이 수정해봤습니다.

/// 26번 라인
// 이전 
return a.fileName.toLowerCase().localeCompare(b.fileName.toLowerCase());
//이후
return lexicalOrderingBy('fileName')

//49번 라인은 26번 라인과 동일

// 56번 라인
// 이전
return a.url.toLowerCase().localeCompare(b.url.toLowerCase());
// 이후
return lexicalOrderingBy('url')

// 167번 라인
// 이전
(a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase());
// 이후
(a, b) => lexicalOrderingBy('name')
  1. 화살표 함수로 교체
    현재 166번 라인만 화살표 함수로 되어 있는데, forEach의 콜백이나 다른 함수들도 화살표 함수로 바꿔봤습니다.
    예를 들어
const dataList = list.map(function collectData(file) {

    const data = fs.readFileSync(file.path, 'utf8');
    return parseInfo(file, data.split('---')[1]);

}).filter(function removeNullData(row) {

    return row != null;

}).filter(function removePrivate(row) {

    return row.public != 'false';

}).sort(function sortByFileName(a, b) {

    return a.fileName.toLowerCase().localeCompare(b.fileName.toLowerCase());

});

이 코드에서 처음 map콜백을 따로 함수로 빼고, 마지막 sort콜백을 lexicalOrderingBy로 바꾸면 아래와 같습니다.

const dataList = list.map(file => collectData(file))
                     .filter((row) => row != null)
                     .filter((row) => row.public != 'false')
                     .sort(lexicalOrderingBy('fileName'))
  1. var, let으로 작성된 코드를 모두 const로 바꿔봤습니다.
  2. 47번 라인의 tag가 선언되지 않아 const를 붙여줬습니다.
//아래와 같이 작성되어 있었습니다.
for (tag in tagMap) {
    tagMap[tag].sort(function sortByFileName(a, b) {
        return a.fileName.toLowerCase().localeCompare(b.fileName.toLowerCase());
    });
}

wsl Ubuntu 22.04.3 LTS 환경에서 skeleton 설치 - README.md 업데이트 가능할까요?

제가 해당 블로그 서비스를 사용하고 싶었는데
배경지식이 없어 다른 분들의 도움을 받아 설치, jekyll 서버 실행까지 완료한 상태입니다.

그리고 이 이슈를 등록해보라는 조언을 받았습니다.

  1. ruby 버전 2.7 이후 버전으로 readme 고치기
  2. webric 의존성 추가

정확히는 ruby 3.2.3 버전을 rbenv로 특정하여 사용했고
bundle add webric 명령 이후에 서버 실행이 되었습니다.

혹시 README 업데이트에 더 필요한 정보가 있으시다면 답변드리겠습니다.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.