Jekyll 블로그에서 categories-archive 플러그인을 이용하여 메뉴별로 포스트 분류하기
글을 몇 개 쓰다보니 카테고리별로 분류를 하고싶어 좌측 네비게이션 메뉴를 정리하였다. 그런데, 이 메뉴를 클릭했을 때 표시되는 화면에 어떻게 글을 모을 수 있는지 알아보니, categories-archive 플러그인으로 가능했다. 다만, 기본적으로는 다중 계층 카테고리를 지원하지 ...
Tags
- jekyll 7
- css 7
- git 4
- javascript 3
- python 3
- html 3
- selenium 2
- github 2
- eslint 1
- disqus 1
- google-analytics 1
- google-adsense 1
- chromedriver 1
- jupyter-notebook 1
- anaconda 1
- github-action 1
- google-search-console 1
- shell 1
- react 1
- IDE 1
- AI 1
- prettier-plugin-css-order 1
jekyll
Jekyll 블로그를 로컬에서 실행하기
요며칠 블로그에 글을 몇 개 작성하면서, 수정사항이 블로그에 반영되는걸 보고싶을 때마다 커밋과 빌드를 기다리는 과정이 번거로웠다. 쓸데없이 커밋이 많아지는 것도 피하고 싶어, 로컬에서 수정사항을 확인하고자 로컬 실행 방법에 대해 알아보았다.
Jekyll 블로그를 Google Search Console에 등록하는 방법
1. Google Search Console 에 URL 등록
Jekyll 블로그에 Google Adsense 추가하기
고객 정보 입력
Jekyll 블로그를 Google Analytics에 연동하기
Google Analytics 계정 만들기
Jekyll 블로그에 Disqus를 이용하여 댓글기능 추가하기
이용 가능한 프로바이더
Jekyll 블로그 초기구축
최소한의 구축 과정
css
이미지 로딩 성능 개선 방법
이미지 로딩 성능 개선 방법
CSS 영역 구분을 위한 선택자로써 class 를 써야하나, id 를 써야하나?
CSS 영역 구분을 위한 선택자로써 class 를 써야하나, id 를 써야하나?
CSS 클래스 네이빙 방법론 - BEM (Block, Element, Modifier)
CSS 클래스 네이빙 방법론 - BEM (Block, Element, Modifier)
CSS 의 property 속성을 자동으로 정렬해주는 도구, prettier-plugin-css-order
CSS 의 property 속성을 자동으로 정렬해주는 도구, prettier-plugin-css-order
왜 로고 이미지를 ::before 에 설정하는가?
왜 로고 이미지를 ::before 에 설정하는가?
Spotify Clone Coding (2) HTML 및 CSS 로 우측 사이드바 레이아웃 잡기
Spotify 사이트를 열심히 훔쳐봐가며 잡아본 사이드바 레이아웃. 아직 갈 길이 한참이지만…
Spotify Clone Coding (1) 프로젝트 생성, 라우팅, 레이아웃, CSS
연습용으로 백엔드 없이 프론트엔드만 만들어보기로 하자. Vite + React + TypeScript + TailwindCSS 스택으로 진행한다.
git
이미 push한 최신 commit을 덮어쓰는 방법
블로그 포스팅을 정리하고 git push를 하고나면, 아차 깜빡했다 싶을때가 있다. 예를 들면 블로그 포스팅에 categories를 잘못 지정했다거나. 그런데 그런 수정사항 만으로 commit을 한 개 더 쌓기가 싫다. 기왕이면 이미 push해버린 commit을 취소하고 새로운 c...
push된 git commit의 작성자를 변경하기
회사 컴퓨터로 작업을 하다보니 git의 global로 설정되어 있는 username과 useremail이 개인 프로젝트에도 설정된 채로 커밋이 올라가 버린 것을 발견했다. 이를 바꾸는 과정을 포스팅하도록 하자.
git diff에서 ..과 …의 구분
git diff의 dot 사용 용법
push한 commit의 일자 변경하기
git log
javascript
이미지 로딩 성능 개선 방법
이미지 로딩 성능 개선 방법
Spotify Clone Coding (1) 프로젝트 생성, 라우팅, 레이아웃, CSS
연습용으로 백엔드 없이 프론트엔드만 만들어보기로 하자. Vite + React + TypeScript + TailwindCSS 스택으로 진행한다.
ESLint란
ESLint란 무엇인가?
python
Anaconda 환경구축
About Anaconda
Jupyter Notebook 환경구축
Precondition
html
이미지 로딩 성능 개선 방법
이미지 로딩 성능 개선 방법
Spotify Clone Coding (2) HTML 및 CSS 로 우측 사이드바 레이아웃 잡기
Spotify 사이트를 열심히 훔쳐봐가며 잡아본 사이드바 레이아웃. 아직 갈 길이 한참이지만…
Spotify Clone Coding (1) 프로젝트 생성, 라우팅, 레이아웃, CSS
연습용으로 백엔드 없이 프론트엔드만 만들어보기로 하자. Vite + React + TypeScript + TailwindCSS 스택으로 진행한다.
selenium
github
eslint
ESLint란
ESLint란 무엇인가?
disqus
Jekyll 블로그에 Disqus를 이용하여 댓글기능 추가하기
이용 가능한 프로바이더
google-analytics
Jekyll 블로그를 Google Analytics에 연동하기
Google Analytics 계정 만들기
google-adsense
Jekyll 블로그에 Google Adsense 추가하기
고객 정보 입력
chromedriver
Back to Top ↑jupyter-notebook
Jupyter Notebook 환경구축
Precondition
anaconda
Anaconda 환경구축
About Anaconda
github-action
Back to Top ↑google-search-console
Jekyll 블로그를 Google Search Console에 등록하는 방법
1. Google Search Console 에 URL 등록
shell
특정 폴더 내에서 문자열을 검색하여 일괄 변경하기
모든 포스팅에 카테고리를 달아준 후 /shell/포스팅제목 과 같이 /shell부분이 추가되어 포스팅의 path 가 바뀌면서, 기존에 상대경로로 지정해 두었던 img 파일을 불러오지 못하게 되었다. 일일이 바꾸기에는 수고스러우니 shell 을 사용하여 일괄 변경하였다. 매번 할때마...
react
Spotify Clone Coding (1) 프로젝트 생성, 라우팅, 레이아웃, CSS
연습용으로 백엔드 없이 프론트엔드만 만들어보기로 하자. Vite + React + TypeScript + TailwindCSS 스택으로 진행한다.
IDE
Claude Code 설치 및 사용
지금은 커서 AI 를 써서 개발을 해왔는데, 코딩 성능이 최상위권이라는 요즘 핫한 클로드 코드도 한 번 써보자.
AI
Claude Code 설치 및 사용
지금은 커서 AI 를 써서 개발을 해왔는데, 코딩 성능이 최상위권이라는 요즘 핫한 클로드 코드도 한 번 써보자.
prettier-plugin-css-order
CSS 의 property 속성을 자동으로 정렬해주는 도구, prettier-plugin-css-order
CSS 의 property 속성을 자동으로 정렬해주는 도구, prettier-plugin-css-order