포스트

Chirpy 테마 사용 시 모바일에서 사이드바가 안 열리는 문제 해결하기

게시
By Judith Jeong
읽는 시간9 분

사건의 전말

사실 모바일에서 사이드바가 안 열리는 문제는 몇 달 전에 알아버렸던 것 같은데 어차피 사이트에 찾아오는 사람도 없잖아 라는 안일한 생각으로 고칠 생각을 전혀 안 하고 있었다. 농담이고 사실은 고칠만한 여유가 시간적으로나 심리적으로나 없었던 게 가장 큰 이유였다.

그래서 추석 연휴 마지막날인 오늘 더이상 게임 생각도 안 나고 마침 사용하고 있던 메인 키보드도 리빌드했겠다 코딩하고 싶은 마음이 들어 손을 대보기로 했다.

mobile-image그러니까 저 좌측 상단에 있는 석삼자가 눌러도 아무 반응이 없다 이 말이오

내친 김에 버전 올리기

기왕 문제 수정하는 김에 버전도 최신으로 올려보기로 했다. 혹시 모르지 그러면 이 문제가 자동으로 같이 해결될지도?

기존에 쓰던 건 v6.5.5이고 최신 릴리즈 버전은 v7.1.0인데 깃허브 레포에서 compare로 확인해보니 그 사이에 뭐가 많이 바뀌긴 했더라. 뭐 근데 vscode 지원 등등은 쓸 일이 없을 것 같아서 필요한 부분만 발라내서 적용해봤다.

failed-workflow응 빌드 안 됨~

에러 메시지는 아래와 같았다.

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

Configuration file: /home/runner/work/dreamingjudith.github.io/dreamingjudith.github.io/_config.yml
 Theme Config file: /home/runner/work/dreamingjudith.github.io/dreamingjudith.github.io/_config.yml
            Source: /home/runner/work/dreamingjudith.github.io/dreamingjudith.github.io
       Destination: /home/runner/work/dreamingjudith.github.io/dreamingjudith.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
Error: Can't find stylesheet to import.
  ╷
1 │ @import 'dist/bootstrap';
  │         ^^^^^^^^^^^^^^^^
  ╵
  main.bundle.scss 1:9                                                                                         @import
  /home/runner/work/dreamingjudith.github.io/dreamingjudith.github.io/assets/css/jekyll-theme-chirpy.scss 1:9  root stylesheet 
  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/jekyll-theme-chirpy.scss':
                    Can't find stylesheet to import.
                    ------------------------------------------------
      Jekyll 4.3.4   Please append `--trace` to the `build` command 
                     for any additional information or backtrace. 
                    ------------------------------------------------
/home/runner/work/dreamingjudith.github.io/dreamingjudith.github.io/vendor/bundle/ruby/3.3.0/gems/jekyll-sass-converter-3.0.0/lib/jekyll/converters/scss.rb:175:in `rescue in convert': Can't find stylesheet to import. (Jekyll::Converters::Scss::SyntaxError)

        raise SyntaxError, e.message
              ^^^^^^^^^^^^^^^^^^^^^^
	from /home/runner/work/dreamingjudith.github.io/dreamingjudith.github.io/vendor/bundle/ruby/3.3.0/gems/jekyll-sass-converter-3.0.0/lib/jekyll/converters/scss.rb:159:in `convert'

빌드 안 되는 문제 잡기

(이 때는 로컬부터 문제가 있을 줄은 몰랐는데) 분명 로컬에서는 문제가 없었다. 그러다보니 당연히 워크플로우가 돌아가면서 문제가 생겼을 거라고 판단해서 워크플로우 파일부터 수정했다. 그러고는 뒤늦게 발견한 .gitignore 변경점을 적용했다. diff 보러 가기

이 때만 해도 몰랐다. 환장할 정도로 안 고쳐지는 에러를 만나게 되고, 그게 사실은 사이드바 문제의 근본적인 원인이었다는 것을…

failed-again응 땡이지롱~

그러고는 tools/init.sh 파일을 수정했는데 막상 GitHub Pages를 발행할 때는 전혀 사용하지 않는 스크립트라 별 의미가 없었다. 결국은 Chirpy 공식 레포에 들어가서 이슈를 검색했는데 나와 정확하게 똑같은 문제를 겪는 사람을 발견했다. 해당 이슈 보러 가기

요지는 dist 폴더를 유지하게 두라는 거였는데 dist 폴더가 어떻게 생기는지 도저히 알 턱이 없었다. 더군다나 내 로컬에 assets/js/dist 폴더는 있었는데 _sass/dist 폴더는 없는 것도 요상했고.

그래서 이번에는 Chirpy 레포에 있는 위키에 들어갔는데 이런 말이 있었다.

JS distribution files have been removed since v5.6.0, and Bootstrap CSS has been lean since v7.0.0. Therefore, for all future upgrades, you should compile the CSS/JS files yourself.

그랬다. v5.6.0부터 JS dist 파일을 없앴다는 것은 내 블로그도 v6.5.5로 버전을 올린 순간 동작을 제대로 했을리가 없단 소리였다. 더군다나 Bootstrap CSS는 v7.0.0부터 없어졌으니 v7.1.0으로 버전을 올린 내 블로그는 @import dist/bootstrap가 안 됐던 거고.

그래서(2) 위키에서 시키는 대로 로컬에서 파일을 빌드하기 위해 npm run build를 시도했다. 그랬더니 안 됨.

1
2
3
4
5
6

$ npm run build

> jekyll-theme-chirpy@7.1.0 build
> concurrently npm:build:*

sh: 1: concurrently: not found

그래서(3) npm install을 해준 다음 다시 npm run build를 했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

$ npm install

> jekyll-theme-chirpy@7.1.0 prepare
> husky


added 260 packages, removed 77 packages, changed 161 packages, and audited 898 packages in 3m

146 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
$ npm run build

> jekyll-theme-chirpy@7.1.0 build
> concurrently npm:build:*

[css]
[css] > jekyll-theme-chirpy@7.1.0 build:css
[css] > purgecss -c purgecss.config.js
[css]
[js]
[js] > jekyll-theme-chirpy@7.1.0 build:js
[js] > rollup -c --bundleConfigAsCjs --environment BUILD:production
[js]
[css] npm run build:css exited with code 0
[js] > Directory "assets/js/dist" has been cleaned.
[js]
[js] _javascript/commons.js → assets/js/dist/commons.min.js...
[js] created assets/js/dist/commons.min.js in 1.7s
[js]
[js] _javascript/home.js → assets/js/dist/home.min.js...
[js] created assets/js/dist/home.min.js in 1.3s
[js]
[js] _javascript/categories.js → assets/js/dist/categories.min.js...
[js] created assets/js/dist/categories.min.js in 1.2s
[js]
[js] _javascript/page.js → assets/js/dist/page.min.js...
[js] created assets/js/dist/page.min.js in 1.1s
[js]
[js] _javascript/post.js → assets/js/dist/post.min.js...
[js] created assets/js/dist/post.min.js in 1.2s
[js]
[js] _javascript/misc.js → assets/js/dist/misc.min.js...
[js] created assets/js/dist/misc.min.js in 1.1s
[js]
[js] _javascript/pwa/app.js → assets/js/dist/app.min.js...
[js] created assets/js/dist/app.min.js in 339ms
[js]
[js] _javascript/pwa/sw.js → assets/js/dist/sw.min.js...
[js] created assets/js/dist/sw.min.js in 123ms
[js] npm run build:js exited with code 0

사실 그 전에 jekyll server를 할 때마다 나는 warning이 거슬려서 gem pristine도 해줬다.

1
2
3
4
5

Ignoring sass-embedded-1.69.5 because its extensions are not built. Try: gem pristine sass-embedded --version 1.69.5
Ignoring ffi-1.16.3 because its extensions are not built. Try: gem pristine ffi --version 1.16.3
Ignoring ffi-1.16.3 because its extensions are not built. Try: gem pristine ffi --version 1.16.3
Ignoring racc-1.7.3 because its extensions are not built. Try: gem pristine racc --version 1.7.3
Ignoring sass-embedded-1.69.5 because its extensions are not built. Try: gem pristine sass-embedded --version 1.69.5

그제서야 아까 이슈에서 왜 .gitignore에서 마지막 두 줄을 제거하라고 한 건지, 위키에서 dist 파일을 add하는데 왜 -f 옵션을 붙인 건지 이해가 가기 시작했다.

아무튼 그렇게 누락된 파일을 올리고 빌드를 성공했다.

failed-thrice정확히는 빌드’만’ 성공했다.

HTML-Proofer는 또 뭐람

Test site 단계에서 난 에러는 Chirpy의 버전 업그레이드와 함께 새로 추가된 HTML-Proofer가 모든 코드 내에 있는 http://로 시작하는 링크를 잡아낸 데서 생긴 문제였다.

그래서 에러 메시지가 알려준 대로 http:// 로 시작하는 페이지들의 주소를 https://로 시작하도록 바꿨을 때 제대로 접속되는지 하나하나 확인했다.

다른 데는 되던데 이상하게 http://jekyllthemes.org는 안 됐다. 느낌에 더이상 업데이트가 안 되는 사이트인 것 같은데, 그런다고 접속이 아예 안 되는 것도 아니니 워크플로우 파일에 예외 처리 해준다.

1
2
3
4
5
6

      - name: Test site
        run: |
          bundle exec htmlproofer _site \
            \-\-disable-external \
-           \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
+           \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/,/jekyllthemes.org/"

결과는

finally-succeed성공

사실 지난 번 블로그 버전 업데이트 때 제일 거슬렸던 블루스카이 로고도 이제는 제대로 뜨겠다 아마 당분간은 Chirpy 테마에 손댈 일은 없을 것 같다. (아 아바타랑 파비콘 빼고)

programming, ruby
ruby jekyll jekyll-theme-chirpy
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.

Comments powered by Disqus.