Motivation

그간 연구를 진행하면서 우여곡절이 많았다. 연구 일정 관리, 환경 정리, 결과 정리 등을 제대로 하지 못해 중복된 일을 한 적도 많다. 또, 협업 연구에서 다른 연구원과의 소통이 원활하지 못해 일정이 지연되는 경우가 많았다. 이러한 삽질을 줄이기 위해 인터넷에서 관련 도구들을 뒤적이며 시간을 보냈다. 결국에는 옵시디언(Obsidian) 프로그램을 발견하여 이를 지식정리 및 저장에 사용하고 있다. 다양한 플러그인으로 여느 프로그램보다 효율적으로 방대한 데이터베이스를 만들어 가고 있다. 하지만 곧 한계가 드러났다. 프로젝트 관리 기능 및 편의성이 다소 낮고, 오프라인 프로그램이라 연구 내용 공유가 용이하지 않았다. 혼자서 쓰기에는 정말 훌륭하지만 협업에 제약이 커 별도의 도구가 필요하였다.

Preacquisition

연구에 필요한 요소

1. 연구 내용, 결과 등의 정리 및 공유
2. 연구 일정, 단계, 업무 내용 정리 및 공유
3. 연구자 소통

도구 선택 요소

1. 오픈소스(OpenSource)
2. 유지 및 보수의 편의성

Programs

세상에는 정말 다양한 도구가 많다. 어떤 도구를 왜, 어떻게 쓸 것인가?

연구 내용 정리

연구 내용을 정리하고 공유하는데 위키(Wiki)만한 도구는 없다고 생각한다. 다만 다양한 위키엔진 중에서 하나를 선택해야 하는데, 그 종류가 매우 다양하다. 대표적으로 미디어위키가 있는데, 소규모 위키로는 적합하지 않아 제외하였다. 수 많은 후보들을 하나씩 찾아 비교한 결과 마크다운을 지원하는 Wiki.js를 설치하기로 결정하였다.

연구 관리

단순한 일정 또는 프로젝트 관리 도구는 매우 많다. 한 때는 옴니포커스를 사용하기도 하였는데, 협업용으로는 적합하지 않다. 잠깐 지라(Jira)도 사용하였는데, 무료 계정의 한계로 사용을 포기하였다. 무료 프로그램 중 오픈프로젝트(OpenProject)를 발견하여 이를 도입하기로 결정 하였다.

소통

소통 방법은 슬랙(Slack)과 같은 메신저 기반과 게시글을 기준으로 소통할 수 있는 포럼으로 구분 하였다.

사실 메신저의 경우 텔레그램을 이용하려 했다. 따로 서버를 만들지 않고 사용할 수 있고, 윈도우-맥-리눅스 등 어디에서나 사용할 수 있기 때문이다. 다만 국내에서 텔레그램이 범죄에 이용되어 큰 파장을 일으켜 기피하는 메신저가 되었고, 최근 급격히 증가한 스팸을 막을 방도가 마땅치 않으며 슬랙의 기능에 비해 부족한 점이 일부 있기에 제외하였다. 디스코드(Discord)도 다른 이유로 제외하였다.

슬랙의 대체 프로그램으로 매터모스트(MatterMost)를 찾았다. 슬랙과 매우 유사하고, 셀프-호스팅으로 직접 구축하여 사용할 수 있어서 이를 선택하였다.

포럼의 경우 디스커스(Discourse)를 도입하려 했는데, 설치의 문제로 포기하였다. 그 대체제로 [노드비비(NodeBB)][nodebb]를 선택하였다.

설치 환경

Rocky Linux

현재 컴퓨터에 Rocky Linux 9.3 버전이 설치되어 있다. 사실 개인용으로 우분투(Ubuntu)가 보다 편하고 문제 해결이 용이하지만, 안정성 및 ROOT, Geant4 등의 사용을 위해 록키리눅스를 설치하였다.

도커(Docker)

해당 프로그램을 하나의 컴퓨터에 설치하여 서비스하기 위해서 도커(Docker)를 도입하였다. 도커를 이용하면 매우 편리하게 테스트, 설치, 업그레이드 등이 용이하다. 특히 도커-컴포즈(Docker compose)를 통해 초보자도 쉽게 도커를 이용할 수 있다.

Resume 편집하기

Hydejack Pro 버전은 resume 기능을 제공한다. 사실 About.md를 편집하여 resume 처럼 사용할 수 있지만, 해당 기능을 사용하면 손 쉽게 깔끔한 이력서를 작성할 수 있다.

resume 관련 파일 장소

• resume.md
• _include/pro/resume
• _layouts/resume.html
• _data/resume.yml
• _data/strings.yml

이력서 작성 기본

Resume 관련 파일이 생각보다 많은데, 우선 기본적인 편집은 _data/resume.yml에서 할 수 있다. 제공된 샘플 파일 또는 깃허브을 참고하여 작성한다.

Basics

기본 정보에는 다음과 같은 정보를 작성할 수 있다.

• 이름 : Resume 페이지에 표시되는 이름
• 라벨 : 이름 밑에 표시되는 내용
• 사진
• 이메일
• 전화번호
• 웹사이트
• 요약
• 장소
  • countryCode : “KR”과 같이 두 자리로 표현
• 프로파일

굳이 게시하고 싶지 않은 항목은 지워버리거나 # 으로 주석 처리 한다.

대략적인 구조는 다음과 같다.

basics:
  name:
  label:
  ...
  location:
    address:
	postalCode:
	...
  profiles:
    - network:
	  username:
	  url:

하위 정보는 상위 정보 아래 라인에서 두 칸을 띄우고 작성한다.

프로파일에 여러 소셜 정보를 추가할 수 있다. 간단한 예제는 다음과 같다.

 - network: "GitHub"
   username: "Jooyoung08"
   url: "https://github.com/Jooyoung08"

여기서 network의 이름이 _data/social.yml에 있는경우 이를 사용한다. 그러면 자동으로 해당 아이콘이 표시된다. username은 resume 페이지에 표시되는 내용이다. url을 설정하면 해당 링크가 삽입된다.

Work

현재 직장 및 과거 직장 정보를 작성할 수 있다.

work:
  - company: "직장 이름"
    position:
	website:
	startDate:
	endDate:
	summary: >
	highlights:
	  - "표시 내용"

endDate를 작성하지 않으면 현재(present)로 표시된다.

Education

학력을 작성할 수 있다.

education:
  - institution:
    area:
	studyType:
	...

학점(GPA)을 작성하지 않았는데 resume 페이지에서 GPA 항목만 사라지고 with GPA of 문장은 그대로 남아있었다. 이는 _data/strings.yml 에서 education_title 항목을 편집하여 삭제할 수 있다.

기타

이 외에도 awards, publications, skills, languages, interests, references를 작성할 수 있다. skills, languages에서는 자신의 레벨을 별표로 표시할 수 있다. 참고자료

예시는 다음과 같다.

skills:
  - name: "Programming Language"
    level: "1/3"
	keywords:
	  - "C++"
	  - "Python"
	  - "RUST"

languages:
  - language: "Korean"
    fluency: "5/5"

Resume 관련 파일

resume.md

Resume 기본 페이지.

해당 페이지에서 resume를 정의한다.

_include/pro/resume

• basics.html
• header.html …

_data/resume.yml 에서 작성한 basics 등의 요소를 표시하는 규칙 모음

_layouts/resume.html

Resume를 구성하는 요소 편집.

_include/pro/resume에 위치한 각종 html 파일을 포함하는 레이아웃.

블로그를 시작하게 된 계기

각종 정보들을 체계적으로 정리해두지 않아서 다시 찾아보는데 많은 곤욕을 치루었다. 그 와중에 제텔카스텐을 접하고 체계적인 지식 및 정보 정리를 시작하였다. (관련 내용은 차차 정리하여 포스팅할 계획이다.) 한 가지 문제는 정리된 정보를 공유하는데 어려움이 있었다. 그래서 Github에 일부 자료 등을 업로드 하였다. 다만 Github는 코드 공유에 특화되어 기타 정보 공유를 원활하게 하기 어렵다. 물론 Wiki 페이지를 지원하지만 사용성 및 접근성이 아쉬웠다.

정보를 정리 및 공유를 하기에 기존의 블로그 플랫폼을 이용하는 것이 최선이라 결정을 내렸다. 블로그 시작을 결심하였지만 구체적인 계획은 없었다. 우선 무료로 사용할 수 있는 블로그 서비스를 검색하여 그 후기등을 확인하였다. blogger, Tistory, velog 등을 확인하였다. 쉽게 시작할 수 있기 때문에 많은 고민을 하였는데 그 와중에 Jekyll과 Github Pages를 이용한 블로그 만들기가 내 눈길을 끌었다. 특히, 마크다운으로 글을 쓸 수 있는 장점에 매료되었다. 현재 사용하고 있는 노트 프로그램인 옵시디언의 내용을 빠르고 편리하게 붙여 넣을 수 있을것으로 기대된다.

Jekyll 기반 블로그를 지원하는 수 많은 테마가 있는데, 유난히 Hydejack 테마에 눈길이 갔다. 이를 사용하는 이들의 블로그를 둘러보니 꽤나 괜찮아보였다. 기본적으로 무료로 사용할 수 있지만, 약간의 비용을 지불하면 Pro 버전을 사용할 수 있다. 완전히 바닥에서 시작하기 때문에 여러 기능을 구현하는데 시간이 오래 걸릴듯하여 곧바로 Pro 버전을 결제하였다. Pro 버전에는 다크모드와 검색기능 등이 포함되어있어 초보자가 빠르게 그럴싸한 블로그를 시작할 수 있다.

블로그 시작하기

이 글은 블로그 시작을 결심하고 진행한 일을 시간순으로 나열하였다. 그러므로 이 페이지를 보고 똑같이 따라하기 보다는 어떤 시행착오가 있었는지 확인하는 것이 좋을듯하다.

Github

이미 깃허브에 개발 관련 정보 및 코드 등을 구축하고 있었기 때문에 깃허브에서 블로그를 배포하기로 결정하였다. 깃허브는 1 GB의 저장 공간과 100 GB의 밴드위드를 무료로 제공한다.

Jekyll을 깃허브로 배포하기 위해서 사전 준비가 필요한데, 이미 잘 설명된 자료가 많기 때문에 이는 생략한다. Github Pages 준비 포스팅을 참고.

Jekyll

사실 지금 생각해보면 Jekyll 기반의 블로그를 만들기로 했으니 Jekyll이 뭔지부터 공부했어야 하는데 그러지 않았다. 그래서 Hydejack 테마를 보고도 제대로 이해하지 못하고 계속 헤매고 말았다. 지금도 잘 이해하지는 못했지만, 이 글을 보는 분들은 우선 Jekyll 관련 자료부터 훑어보는 것을 추천한다.

Hydejack Pro

무료로 사용할 수 있는 테마는 깃허브에서 hydejack-starter-kit을 포크하거나 다운로드 받아서 설치할 수 있다. 유료버전은 README에 안내된 페이지에서 결제 후 다운로드 받는다.

우선 설치 매뉴얼을 보고 따라 했는데, 정확히 이해하지 못해서 시간을 낭비하였다. 깃허브를 통해 배포하므로 설명서의 Github Pages만 따라가면 된다.

깃허브는 자동으로 빌드 및 배포를 해주기 때문에 굳이 로컬에 Jekyll 패키지를 설치할 필요가 없다.

설치

깃허브 페이지를 이미 만들고, 로컬에 클론을 만들었다고 가정하고 진행한다.

Hydejack Pro 패키지에 여러 파일과 디렉토리가 존재하는데, starter-kit을 사용하면 된다. 편의상 다음과 같이 진행하였다.

1. starter-kit 내부에 #jekyll-theme-hydejack 디렉토리를 제외한 모든 파일을 깃 디렉토리로 복사한다.
2. #jekyll-theme-hydejack 디렉토리 내부에서 __config.yml, jekyll-theme-hydejack.gemspec 파일을 제외하고 모두 깃 디렉토리로 복사한다.
3. 중복되는 파일은 그냥 덮어쓴다.

위 순서대로 진행하더라도 큰 문제는 발생하지 않았다. 다만 그림 파일등이 유실되어 보이지 않았다.

위 과정이 끝나면 다음과 같은 설정이 필요하다.

설정

Gemfile에서 다음을 수정한다.

file: Gemfile

// 기존
gem "jekyll-theme-hydejack", path: "./#jekyll-theme-hydejack"

// 수정
gem "jekyll-theme-hydejack"

다음으로 `_config.yml’ 파일을 수정한다.

file: _config.yml

//기존
theme: jekyll-theme-hydejack

//수정
remote_theme: hydecorp/hydejack@v9

이것으로 Hydejack 테마 기본 블로그를 배포할 수 있다.

 git add -A

 git commit -m "Hydejack"

 git push

• Stripe-ified Design
• Inverted Sidebars
• Code Block Headers
• Resume Download Buttons
• SERP Breadcrumbs
• Last Modified At
• Clap Button Preview
• Credits

Stripe-ified Design

Most elements now have rounded borders, making the design look more modern (dare I say “Stripe-ified”) than ever before.

The goal of Hydejack was always to provide a theme that looks “designed” combined the amenities of a typical Jekyll theme for coders. This is an important step in maintaining this goal.

At the same time, I’m introducing nerdy elements like breadcrumbs, that are almost ornamental in nature. You wouldn’t find these on other Stripe-like designs, but I think they are appealing to developer types like myself. Like most additions to Hydejack, they can be disabled via configuration.

Inverted Sidebars

The colors on the sidebar can now be inverted to allow brighter sidebar images. This can be enabled per-page in the fort matter:

invert_sidebar: true

Code Block Headers

Code blocks can now have headers:

// file: 'hello-world.js'
console.log('Hello World!');

Headers are added by making the first line a comment of the form (file|title): ['"].*['"], e.g.:

~~~js
// file: 'hello-world.js'
console.log('Hello World!');
~~~

Code blocks with and without headers now also come with a copy button. In the case of header-less code blocks, the button only shows on hover to prevent potential overlap.

Resume Download Buttons

Resumes can now have download buttons:

Resumes can now have download buttons.

The documentation has been updated with a chapter on how to configure the buttons.

SERP Breadcrumbs

Added breadcrumbs above page title:

Bread crumbs are now shown above each page title.

Note that this requires a directory-like URL structure on your entire site, otherwise the intermediate links will point to nonexisting sites.

On a side note, Hydejack now has built-in tooltips for abbreviations like SERP (activated via tap/click). See Example Content on how to add them to your content.

Last Modified At

Blog posts can now have a “last modified at” date in the sub title row.

Note that this depends on the last_modified_at property of the page, which must be either set manually in the frontmatter (not recommended), or via a plugin like jekyll-last-modified-at. Note that the later is not available when building on GitHub Pages and can increase build times.

Clap Button Preview

I’ve been trying something new with getclaps.app, a feedback and analytics tool for personal sites like those powered by Hydejack.

It is a separate product from Hydejack and not enabled by default. Because it depends on a backend component, it requires a monthly fee. If enabled, it is placed below posts and pages where the dingbat character (❖) used to be.

I can’t claim that this product is fully baked (feedback welcome), but I’ve been using it on my personal site and here for the last couple of months with no issues. For more, see the dedicated website.

There are many more changes and bugfixes in 9.1. See the CHANGELOG for details.

Credits

Photo by JJ Ying on Unsplash

Modernized design, big headlines, big new features: Built-In Search, Sticky Table of Contents, and Auto-Hiding Navbar. That and more is Hydejack 9.

• Linking in Style
• Ready for the Big Screen
• What’s in the Cards?
• Built-In Search
• Auto-Hiding Navbar
• Sticky Table of Contents
• …and much more
• Even More to Come
• Get It Now

Linking in Style

Ever since the introduction of Dark Mode, link styles have been a bit of an issue. Specifically, finding an accent color that worked on both light and dark backgrounds was the problem. With Hydejack 9, the link style has been revamped so that legibility is no longer tied to the choice of accent_color, giving you much more freedom in creating a unique design flavor for your site.

Ready for the Big Screen

The theme on which Hydejack is based was designed for a different era of the web. Hydejack has inherited many of its limitations, but over time I’ve made adjustments, such as centering the content column for better reading ergonomics.

With version 9, Hydejack takes full advantage of large displays. Whether it’s design indulgences such as oversized headlines, or quality of life improvements such as a floating table of contents, Hydejack now finds use for all that extra screen real estate¹.

What’s in the Cards?

Hydejack 9 now lets you use content cards for both projects and posts. The cards have been redesigned with a new hover style and drop shadows and they retain their unique transition-to-next-page animations, which now also work on the blog layout. The new grid layout lets you do that.

Good images are key to making the most out of content cards. For that reason, a chapter on images has been added to the documentation.

Built-In Search

Hydejack now has Built-In Search. It even works offline. I’ve been prototyping many approaches and eventually settled on a fully client-side, off-the-main thread solution that perfectly fits the use case of personal sites and shows surprisingly good results².

The new search UI is custom made for Hydejack and shows beautiful previews of your posts and pages, right on top of your regular content.

Together with the Auto-Hiding Navbar, your entire content library is now only a couple of keystrokes away.

Auto-Hiding Navbar

A navbar that’s there when you need it, and disappears when you don’t. Simple as that.

Sticky Table of Contents

Already a staple on so many sites on the web, this pattern is now also available in Hydejack. What’s unique about it is that it simply picks up the table of contents already created by kramdown’s {:toc} tag and transparently upgrades it to a fully dynamic version.

…and much more

Other noteworthy changes include:

• Support for Jekyll 4
• Choice between MathJax and KaTeX for math rendering
• Use of jekyll-include-cache for drastically improved page building speeds
• New variables configuration file — adjust content width, sidebar width, font size, etc…
• …and the option to disable grouping projects by year.

Read the the CHANGELOG for the full scope of features and improvements made in Hydejack 9. Maybe just glance at it to confirm that it is indeed a pretty long list.

Even More to Come

New features for 9.1 are already lined up. Code block headers and code line highlights for even better technical blogging, as well as download buttons on the resume page for PDF, vCard, and Resume JSON are just around the corner.

Get It Now

The Free Version of Hydejack is now availabe on RubyGems and for the first time also on GitHub Packages. The source code is available on GitHub as always.

The PRO Version is scheduled to release on July 7th on Gumroad. Pre-Orders are open now:

Large Tables

Code blocks

// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those
// arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// > 8

Math

Lorem ipsum \(f(x) = x^2\).

Message boxes

NOTE: You can add a message box.

Large text

You can add large text.

Large images

Captions to images

A caption to an image.

Large quotes

You can make a quote “pop out”.

Faded text

I’m faded, faded, faded.

There should be whitespace between paragraphs.

Text can be bold, italic, or strikethrough.

Link to another page.

• Header 2
  • Header 3
    • Header 4
      • Header 5
        • Header 6
  • There’s a horizontal rule below this.
  • Here is an unordered list:
  • And an ordered list:
  • And a nested list:
  • Small image
  • Large image
  • Definition lists

Header 2

This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

Header 3

This is a blockquote following a header.

When something is important enough, you do it even if the odds are not in your favor.

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end

Header 4

• This is an unordered list following a header.
• This is an unordered list following a header.
• This is an unordered list following a header.

Header 5

1. This is an ordered list following a header.
2. This is an ordered list following a header.
3. This is an ordered list following a header.

Header 6

There’s a horizontal rule below this.

Here is an unordered list:

• Item foo
• Item bar
• Item baz
• Item zip

And an ordered list:

1. Item one
2. Item two
3. Item three
4. Item four

And a nested list:

• level 1 item
  • level 2 item
  • level 2 item
    • level 3 item
    • level 3 item
• level 1 item
  • level 2 item
  • level 2 item
  • level 2 item
• level 1 item
  • level 2 item
  • level 2 item
• level 1 item

Small image

Large image

Definition lists

Name

Godzilla

Born

1952

Birthplace

Japan

Color

Green

Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this. Or is it?

The final element.

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Inline HTML elements

HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.

• To bold text, use **To bold text**.
• To italicize text, use *To italicize text*.
• Abbreviations, like HTML should be defined like this *[HTML]: HyperText Markup Language.
• Citations, like — Mark otto, should use <cite>.
• Deleted text should use ~~deleted~~ and inserted text should use <ins>.
• Superscript ^text uses <sup> and subscript _text uses <sub>.

Most of these elements are styled by browsers with few modifications on our part.

Heading 2

Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Heading 3

Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor.

Heading 4

Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor.

Heading 5

Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor.

Heading 6

Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor.

Code

Cum sociis natoque penatibus et magnis dis code element montes, nascetur ridiculus mus.

// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those
// arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// > 8

Lists

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

• Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
• Donec id elit non mi porta gravida at eget metus.
• Nulla vitae elit libero, a pharetra augue.

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

1. Vestibulum id ligula porta felis euismod semper.
2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
3. Maecenas sed diam eget risus varius blandit sit amet non magna.

Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

HyperText Markup Language (HTML)

The language used to describe and define the content of a Web page

Cascading Style Sheets (CSS)

Used to describe the appearance of Web content

JavaScript (JS)

The programming language used to build advanced Web sites and applications

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.

Images

Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam metus erat, a pulvinar turpis suscipit at.

Tables

Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo.