깃허브 블로그 제작일지

Seoyong Lee·2021년 7월 17일

etc.

목록 보기

5/10

https://seoyong-lee.github.io/

2021.7.15

벨로그 블로그는 세부적인 내용 정리용으로 두고 새롭게 커스터마이징이 가능한 블로그 제작 필요성 인지.

최소 요구사항: 다크모드 / 한,영 선택 기능 / 댓글 기능 / 깃허브 등 연결 아이콘 / 편하게 마크다운 편집

jekyll Chalk theme 선택 및 커스터마이징 작업 시작.

2021.7.16

선택한 theme이 일반적인 jekyll 배포를 지원하지 않으며, gh-pages를 이용해 배포해야 한다는 사실 인지.

첫 시도 -> 배포 실패
(이유: Settings->Pages->GitHub Pages의 source 부분을 gh-pages 브랜치로 변경해 주지 않았으며, default 브랜치 또한 gh-pages 로 변경해 주지 않았다 (이게 원인인지는 확실하지 않음))

두 번째 시도 -> 최초 배포 성공 https://seoyong-lee.github.io/

npm publish 배포 이후 main 브랜치 로컬에서 bundle exec jekyll build 명령 실행시 scss 오류 발생
(이유: bin/deploy에 설정된 rm -rf 명령이 필요한 파일까지 삭제해 버려서 발생하는 문제인 것 같다. _assets/stylesheets/ 의 vendor/_normalize.scss 파일이 사라진 것을 확인하고 수동으로 추가해줌)

2021.7.17

기존 댓글 기능 disqus -> utterances로 교체
(이유: disqus의 댓글창 디자인 마음에 안듦, 추후 광고포함 우려)

어느 정도 디자인의 커스터마이징이 가능한 점도 고려, utterances로 마이그레이션하기로 결정. 다크모드 변경에 따른 테마 변경기능 필요.

2021.7.18

https://github.com/utterance/utterances/issues/427
utterance 다크모드 적용 관련 레퍼런스 발견 -> 채팅창 다크모드 해결

function loadUtterances(darkMode=true) {
  const commentsContainer = document.getElementById("comments");
  if (commentsContainer !== null) {
      commentsContainer.innerHTML = ''
      const utterancesScript = document.createElement("script");
      utterancesScript.setAttribute("id", "utterances");
      utterancesScript.setAttribute("src", "https://utteranc.es/client.js");
      utterancesScript.setAttribute("repo", "seoyong-lee/blog-comments");
      utterancesScript.setAttribute("issue-term", "pathname");
      utterancesScript.setAttribute("theme", darkMode ? "github-dark" : "github-light");
      utterancesScript.setAttribute("crossorigin", "anonymous");
      utterancesScript.setAttribute("async", "true");

      commentsContainer.appendChild(utterancesScript);
  }
}

위와 같이 실시간으로 script 태그를 모드 변경에 맞춰서 새롭게 생성해주는 방식으로 해결하였다.

favicon 등 새롭게 제작 후 반영

about 페이지 경로 찾을 수 없는 오류 발생
(이유 : 커스텀 도메인 시도시 크롬에 남아있던 캐시 때문인 듯 ... 인터넷 사용 기록 삭제 -> 고급 -> 삭제 후 정상 작동)

다크 -> 라이트 모드 전환 이후 특정 게시글 입장 시 댓글 창에 라이트 모드 전환이 반영되지 않는 오류 발생
(이유 : 토글 클릭시에만 모드 변경이 되도록 코드가 짜여있었다. 이를 기본값 설정을 통해 해결)

//Theme initialize
if (!localStorage.getItem('theme')) {
  localStorage.setItem('theme', "dark");
}
if(localStorage.getItem('theme') == "dark") { 
  loadUtterances(true);
} else {
  loadUtterances(false);
}
themer();

// Theme toggle
function toggle() {
  if(localStorage.getItem('theme') == "light") {
    localStorage.setItem('theme', "dark");
    loadUtterances(true);
  } else if(localStorage.getItem('theme') == "dark") {
    localStorage.setItem('theme', "light") 
    loadUtterances(false);
  }
  themer();
}