[BLOG]블로그 테마 변경
이전 블로그 테마는 Mermaid, Math expression 등 불편한 요소가 많아 불편한 점이 많아 새로운 테마를 찾기 시작했었다. Jekyll 테마를 찾다가 Chripy라는 테마를 찾게 되었는데 심플하고 다양한 markdown을 지원한다는 매력에 빠져 고르게 되었다.
Chripy
우선 해당 github에 들어가 fork를 진행해 설치 절차를 따르려고 했는데, 내가 사용하는 OS인 Windows에서는 init.sh 파일 실행이 안 되었다. Ubuntu 환경에서 해당 repository를 연결해 tools/init file을 실행하려 했으나 잘 실행이 되지 않았다. 인터넷 검색을 통해 해결해보려 했으나 no such file이라는 내용만 뜨고(아마 ubuntu 환경 자체의 init이라는 명령어와 충돌 인거 같았다.) 시간의 소비만 이루어져 starter pack으로 해당 테마를 다운받아 진행하게 되었다.
1. WSL2 환경 구성
- WSL2란?
- Windows Subsystem for Linux 2의 약어로, 가상 머신 기술을 사용하여 Linux 커널을 Windows 운영 체제에 직접 통합하는 방식으로 작동합니다. 즉, WSL2를 사용하면 간단하게 windows에서 리눅스 개발 환경 구축이 가능할 수 있다.
위 과정 이전부터 Linux 환경에 대한 흥미는 있었어서 이참에 WSL을 사용하여 블로그 및 linux 환경까지 만들기 시작했다. 환경 구성 과정을 한 줄로 요약하자면, Microsoft Store에서 Ubuntu를 설치받고, WSL2를 설치한 후 디스크를 분할 한 후 swapfile 생성 후 VSC에 연결 하였다.
wslconfig.exe /l # WSL 설치 종류 확인
wslconfig.exe /u CentOS # WSL 설치 등록 취소
local환경에서 포스트 글을 미리 볼수 있도록 ruby, bundler, git 등등 필요한 요소들을 설치하고 진행하는데, ruby 3.2 version으로 받았을 때 version 충돌이 일어나 3.1로 downgrade를 하고 실행하게 되었다.
해당 테마를 커스터마이징 하는 과정속에서 ruby, gemfile 등등 여러 가지 내용에 대해 파악할 수 있었는데, ruby란 간단히 말해서 해당 테마를 가상환경에서 배포할 수 있게 해주는 것이었고, .github/workflows/pages-deploy.yml은 해당 repository를 commit할 시 github 도메인의 블로그 컨테이너를 실행시키는 명령어 모음이었다.
해당 파일에서 html-proofer때문에 애를 먹었었는데, 그냥 기본 chripy repository에서 _layouts, _includes를 부분적으로만 들고오는 과정에서 오류(ERROR: Invalid first code point of tag name U+C5B4, ERROR: Premature end of file Currently open tags)가 생겨 애를 먹었었는데 깔끔하게 다시 덮어씌우니까 해결되었다.
그리고 gemfile.lock을 .gitignore에서 빼줘야 github에서 deploy시 충돌이 이뤄나지 않는 점등을 파악할 수 있었고, github에서 Action 탭을 통해 배포, 빌드 과정에서 생기는 오류 코드를 자세히 확인 할 수 있었다.
2. blog 설정
chripy에서 fork한 레포지토리를 WSL 상에 git push를 진행하고, 나머지는 원하는데로 블로그를 커스터마이징 하면 되었다. 아래 gist 코드는 local환경에서 로컬 환경 블로그를 실행 할 수 있도록 작성한 자동화 코드를 보여준다. 또한, 그 이후는 error 해결한 내용들을 update해 나아가겠다.
3. Update
TOC문제해결
Update. (23.01.30)
Cmd(windows 환경)에서는 ls를 못침
페이지에 있는 목차(table of contents)가 접히고 펼쳐지는 문제가 있어서, CSS를 수정하였습니다. 처음에는 .js 파일에서 문제가 있는 줄 알았는데, 잘못 찾았었습니다. 실제로는 .css 파일에서 display: none 부분을 삭제하여 문제를 해결하였습니다.
해결 과정은 다음과 같습니다. 먼저, _includes/toc.html 파일을 확인하여 코드를 파악하였고, _layout/defalut.html에서 layout: default가 상속의 개념을 찾았습니다. 그리고 실제로 페이지에 나타나는 목차 부분은 pages.html에서 _includes 디렉토리에 있는 .html 파일을 불러오는 것을 확인하였습니다.
toc.html 코드를 분석한 후 _data/assets/cross_origin.yml을 파악하였습니다. 그리고 bootstrap-toc.css, .js 파일에서 해당 목차 부분을 가져오는 것을 알게 되었고, 해당 코드의 다른 버전은 CDN으로 불러올 수 있으나, 다른 버전은 존재하지 않는 것을 확인하였습니다. 이 과정에서 CDN을 사용하는 방법도 알게 되었습니다.
최종적으로 modify-bootstrap-toc.css 파일을 생성하고 nav가 display: none 부분을 삭제(Hide가 default)하여 문제를 해결하였습니다. 이 과정에서 CDN 사용 방법을 익힐 수 있었으며, .py script를 작성하여 블로그 Ruby 환경에서 실행하는 코드를 자동화하였고, git commit 부분도 자동화하였습니다.
추가적으로 Markdown에서 이모지를 사용 할 수 있는 jemoji를 설치하였습니다.
1
2
3
4
5
6
7
# Gemfile
gem 'jemoji'
# _config.yml
# Plugins (previously gems:)
plugins:
- jemoji
Update. html-proofer(23.02.02)
html-proofer 때문에 post file에서 </br>이나 <> 태그를 사용하면 안되겠다. _site.posts/git/index.html에서
태그가 발견 됐다. 왜 그런지는 모르겠지만 space bar 두번이 이렇게 변환되는 거같은데 정확히 모르겠음. 따라서 해당 루트에 들어가서 br태그가 발견되는 부분을 지워주면 해결됨.
Update. conflict error(23.02.15)
local환경에서 블로그 글을 수정할 때마다 해당 conflict 오류랑 version 차이의 오류가 거슬려 수정했다. version차이 오류를 찾아가다보면 아래와 같은 오류가 생성되었다.
1
../../../../jekyll-theme-chirpy-5.3.2/_sass/addon/commons.scss 757:17 @import
해당 부문에서 import하는 .scss 파일에서 version 오류가 뜨는 것 같아 _sass folder를 추가로 넣어줌으로써 해결되었고, Conflict 오류를 설 읽어보면 해당 파일들이 겹쳐서 일어나는 현상으로 아래 블로그 글을 추가적으로 확인하여 수정하였다.
Update. python version upgrade(23.03. 17)
Ubuntu를 설치하고나면 해당 환경에 3.7 version의 python이 자동으로 설치된다. 따라서, python3.10을 설치하고 싶으면 아래와 같은 명령어를 입력해야 한다.
1
2
#WSL2 환경 python 버전 업그레이드
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3.10 1
Update. swapfile 생성(23.03. 19)
htop : 실시간 모니터링 툴, CPU Memory Usage 기본적으로 설치가 되어 있었다.
.ipynb에서 array를 생성하는데, MemoryError: Unable to allocate 에러가 자꾸 났다.
Linux환경에 할당된 메모리의 크기가 작아 발생한 오류로 가상 메모리 영역을 추가적으로 생성하여 해결하였다.
디스트 파티션 진행 후 아래 코드를 실행하여 swap 파일을 생성하고 설정하는 아래와 같은 코드를 실행하였다.
fsutil file createnew D:\swapfile 500000000000 # 해당 경로의 파일을 생성
#powershell as administartor
Set-Content -Path D:\swapfile -Stream Zone.Identifier -Value 3
$file = (Get-Item D:\swapfile).FullName
$pagefilesetting = Get-CimInstance -Class Win32_PageFileSetting
$pagefilesetting | Remove-CimInstance
$pagefilesetting | foreach { $_.InitialSize = 0; $_.MaximumSize = 0 }
$pagefilesetting | Invoke-CimMethod -MethodName Create -Arguments @{ Name = $file; MaximumSize = 0; InitialSize = 0 }
아래의 코드는 C:\Users{user_name} 위치에 들어가는 .wslconfig 설정 파일이다.
1
2
3
4
5
6
[wsl2]
memory=4GB # 메모리 지정
swap=104689827840 # swap 영역 크기 지정
swapfile=D:\swapfile # swapfile 선택
localhostForwarding=true
# Windows에서 실행 중인 웹 브라우저 등에서 WSL2에서 실행 중인 웹 서버에 접근할 수 있도록 해줍니다.
REFERENCES
[1] : 하얀눈길
[2] : Customize the Favicon
[3] : linux 디렉토리 구조
[4] : Python upgrade
[5] : WSL2 메모리 사용량 지정
[6] : CDN 생성하는 법