코딩일지(2024-05-03)

깃허브개발을 더 진행했다.

---

테디노트님 영상을 참고하여 깃허브 블로그개발을 복습했다.

월별 분류 코너를 신설하자!

알다시피 나는 코딩일지를 쓰는 블로그를 운영하기 때문에 포스팅 제목이 무조건 날짜로 되어 있다. 그래서 이 분의 포스팅(링크)을 보고 나도 월별분류를 하자고 생각해서 따라했다.

여기서 알게 된 가장 중요한 것이, 바로 url과 permalink의 싱크를 맞춰주는 것이었다.

파비콘을 넣어주자!

원래 이 블로그를 신설할때부터 넣을려고 했던게 바로 이 파비콘이다. 근데 나의 귀차니즘때문에 지금에서야 비로소 이 파비콘을 넣어준다.

이에 대한 방법도 이분의 블로그(링크)를 참고했다.

나는 닉네임이 JackSmith라서 Js가 들어간 로고를 찾아 선정했다.

준비한 이미지는 위 [링크]를 통해 들어가서 파비콘 파일로 변환이 가능하다.

위 사이트에 들어가서 파일 업로드하고 [Create Favicon]을 눌러 변환해준다.

위와 같은 화면이 나오면, 이제 Download the generated favicon버튼을 눌러 만들어진 파일을 다운로드해주었다.

그리고 해당파일을 압축풀어주고 폴더명을 favicon.ico로 바꿔주었다.

이후 assets/경로에 다음과 같이 폴더째로 업로드해주었다.

이제 _includes/head/custom.html 경로의 파일을 수정해주었다. 위 파일을 열면 다음과 같은 주석이 보일 것이다.

기존 favicon사이트에 있던 코드는 아래와 같은데 이를 복사해서

이 custom.html에 붙여넣었다면 이제 수정을 좀 해주어야 하는데,

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">

위처럼 되어 있는 코드를 아래처럼 바꾸어준다.

<link rel="apple-touch-icon" sizes="57x57" href="/assets/favicon.ico/apple-icon-57x57.png">

이 과정을 반복하면 다음과 같이 된다.

이제 서버를 재가동하면,

위와 같이 정상적으로 뜨는 것을 확인할 수 있다.

404(Not Found)페이지를 구현해보자!

Webp로 변환말고 Webp 바로 캡처하자!