seungriyou/seungriyou.github.io

📚 SR's Dev-Log 📚

Chirpy Starter

When installing the Chirpy theme through RubyGems.org, Jekyll can only read files in the folders /_data, /_layouts, /_includes, /_sass and /assets, as well as a small part of options of the /_config.yml file from the theme's gem. If you have ever installed this theme gem, you can use the command bundle info --path jekyll-theme-chirpy to locate these files.

The Jekyll team claims that this is to leave the ball in the user’s court, but this also results in users not being able to enjoy the out-of-the-box experience when using feature-rich themes.

To fully use all the features of Chirpy, you need to copy the other critical files from the theme's gem to your Jekyll site. The following is a list of targets:

.
├── _config.yml
├── _plugins
├── _tabs
└── index.html

To save you time, and also in case you lose some files while copying, we extract those files/configurations of the latest version of the Chirpy theme and the CD workflow to here, so that you can start writing in minutes.

Prerequisites

Follow the instructions in the Jekyll Docs to complete the installation of Ruby, RubyGems, Jekyll and Bundler.

Installation

Use this template to generate a brand new repository and name it <GH_USERNAME>.github.io, where GH_USERNAME represents your GitHub username.

Then clone it to your local machine and run:

$ bundle

Usage

Please see the theme's docs.

License

This work is published under MIT License.

---

Personal Notes

TODO

• _config.yml - google_site_verification, google_analytics, giscus 정보 추가하기
• a tag area가 img를 벗어나는 문제
• image에서 .left / .right / .normal 등이 먹지 않는 문제

How to Upgrade

starter로 설치한 경우, 다음과 같이 하면 된다.

If you are using the theme gem (there will be gem "jekyll-theme-chirpy" in the Gemfile), editing the Gemfile and update the version number of the theme gem, for example:

- gem "jekyll-theme-chirpy", "~> 3.2"
+ gem "jekyll-theme-chirpy", "~> 4.0"

And then execute the following command:

bundle update jekyll-theme-chirpy

As the version upgrades, the critical files (for details, see the startup template) and configuration options will change. We can use the GitHub API to get the file changes in the version upgrade.

The URL format is as follows:

https://github.com/cotes2020/chirpy-starter/compare/<older_version>...<newer_version>

For instance, to upgrade from v4.0.0 to v5.0.0, visit: https://github.com/cotes2020/chirpy-starter/compare/v4.0.0...v5.0.0

ref:

• https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide
• https://chirpy.cotes.page/posts/getting-started/#upgrading

jekyll, gem 관련 이슈

GemNotFound

다음과 같은 에러가 발생할 때는

... `materialize': Could not find sass-embedded-1.58.3 in any of the sources (Bundler::GemNotFound)

다음의 명령어로 gem을 정리한다.

bundler

jekyll s not working

다음의 명령어로 실행한다.

bundle exec jekyll s

(23.10.27 추가) 요즘은 다음과 같이 실행해도 된다...!

jekyll s

rbenv

rbenv versions
rbenv local
rbenv local 3.1.0

Adding Custom CSS Settings

• _etc 내부의 sass 파일들은 기존에 배포된 chirpy theme의 파일이다. 해당 파일들을 참고하면 된다.

• 실제 custom 파일은 _sass/custom 폴더 밑에 작성한다.

  • 새로 파일을 작성할 경우, assets/css/style.scss에 @import 해주면 된다.
  • 예외로, 포스팅 내 코드 블럭의 색상 팔레트 설정은 _sass/colors에 위치시켜 별다른 @import 작업 없이 & overriding 동작 없이 적용되도록 한다.

• @mixin을 override 하기 위해 삽질을 오래했는데, _sass/custom/addon/commons.scss, _sass/custom/addon/syntax.scss 파일을 참고하여 사용하면 override 동작도 수행할 수 있다.

version 6.2.0 부터는 sass variables를 overwrite 하는 방법이 바뀐 듯하다. 추후 필요하면 참고하자!

https://chirpy.cotes.page/posts/getting-started/#customizing-stylesheet

Custom Ordering in Categories Tab

• _layouts/categories.html 파일을 생성하여 https://seungriyou.github.io/categories/ 탭에서의 최상위 카테고리 정렬 순서를 커스터마이징 했다.

  원본 코드에서는 다음과 같이 카테고리 이름의 사전식 순서로 정렬하였다.

  {% assign sort_categories = site.categories | sort %}

• 해당 html 파일의 원본 파일은 jekyll-theme-chirpy의 원본 categories.html 파일에서 확인할 수 있다.

• post 작성 시 새로운 카테고리를 만들 것이라면, _layouts/categories.html 파일에 다음과 같이 custom_order 내에서 적절한 위치에 , 와 함께 추가해주면 된다. 순서를 수정하고 싶을 때도 마찬가지로 custom_order를 수정한다.

  <!-- [START] add custom order of categories in `CATEGORIES` tab -->
  <!-- ref: https://twpower.github.io/228-make-array-and-add-element-in-jekyll-liquid-en -->
  {% assign custom_order = 'Python, Dev-Log, MLOps, Problem Solving, Computer Science, Deep Learning, Experience, Daily-Log' | split: ', ' %}
  {% assign sort_categories = '' | split: ',' %}
  {% for co in custom_order %}
    {% for category in site.categories %}
      {% if category[0] == co %}
        {% assign sort_categories = sort_categories | push: category %}
      {% endif %}
    {% endfor %}
  {% endfor %}
  <!-- [END] add custom order of categories in `CATEGORIES` tab -->

• Jekyll liquid 문법에서 array를 생성하는 방법은 Make array and add element in liquid를 참고했다.

Small Tips for Posting

(1) 이미지 크기 설정

![example-image](/assets/img/posts/category/subcategory/image.png){: style="max-width: 70%"}

혹은, 다음의 수치들에 대해서는 bootstrap 설정을 사용할 수도 있다.

![example-image](/assets/img/posts/category/subcategory/image.png){: .w-25} (width 25%)
![example-image](/assets/img/posts/category/subcategory/image.png){: .w-50} (width 50%)
![example-image](/assets/img/posts/category/subcategory/image.png){: .w-75} (width 75%)
![example-image](/assets/img/posts/category/subcategory/image.png){: .w-100} (width 100%)
![example-image](/assets/img/posts/category/subcategory/image.png){: .w-auto} (default)

(2) 텍스트 색상 설정

HTML color name은 링크에서 확인하기!

<span style="color: red">this is **red**</span>

(3) Math: Curly Bracket

ref: https://github.com/orgs/community/discussions/16993#discussioncomment-4056560

curly bracket을 표현하기 위해 \{, \}를 사용하면 출력이 안 된다. 대신, \lbrace와 \rbrace를 사용해야 한다.

• {} 출력 안 되는 예시

  $\mathbf s^0=\{s^0(j)\in [n]\}_{j \in [m]}$

• {} 출력 되는 예시

  $\mathbf s^0=\lbrace s^0(j)\in [n]\rbrace_{j \in [m]}$

(4) Math: Degree Symbol

degree symbol을 나타내려면 \degree가 아닌 ^{\circ}을 사용해야 한다.

• ° 출력 안 되는 예시

  $70\degree$

• ° 출력 되는 예시

  $70^{\circ}$

(5) Toggle

<details>
<summary>제목</summary>
<div markdown="1">

내용

</div>
</details>