포트폴리오를 위한 깃허브 페이지: 사이트맵과 SASS 사용
사이트맵은 검색엔진 등이 색인할 웹페이지 목록을 알려줍니다. 이전에 다뤘던 템플릿에 Jekyll SEO Tag 사용하기과 함께 검색엔진 친화를 통해 내 포트폴리오에 검색엔진을 통한 방문이 더욱 수월해지도록 하는 역할을 합니다. 깃허브 페이지가 제공하는 Jekyll Sitemap Generator 플러그인은 자동으로 sitemap.xml을 생성하여 일일히 페이지를 추가하거나 제거할때마다 편집하지 않아도 검색엔진이 최신 목록을 받아올 수 있도록 합니다.
사이트맵 모듈 사용
지킬 설정파일인 _config.yml에 다음 내용을 추가합니다.
url: "페이지의 URL"
plugins:
- jekyll-sitemap지킬 변환 엔진을 재실행 한 뒤 _site 디렉토리 내부에 robots.txt와 sitemap.xml이 생성되었는지 확인합니다.
SASS(SCSS) 사용
SASS는 구조화와 재사용성에 특화한 스타일시트 제작 도구입니다. 컴파일 과정을 거치면 일반적인 *.css파일로 출력합니다. 반복해서 사용하는 스타일속성이나 복잡한 구조의 선택자에 속성을 부여할 때 편리하게 사용할 수 있습니다.
지킬에서는 _sass디렉토리 안에 SASS 조각 파일을 담아둘 수 있습니다.
먼저 _sass/style.scss를 작성합니다:
body {
background-color: #787878;
}이 조각파일을 포함한 스타일 시트를 사이트에 적용하기 위해 assets/style.scss를 작성합니다.
---
---
@import "style";지킬 엔진이 _site/assets/style.css가 생성하는지 확인합니다.
스타일 시트 파일이 문제없이 생성되었다면 _layouts/default.html에 아래 내용을 추가합니다.
<head>
...
<link rel="stylesheet" href="{{ site.baseurl }}/assets/style.css">
</head>리퀴드 언어로 작성한 {{ site.baseurl }}는 웹페이지의 기본 URL 입니다. 현재 URL에 상관없이 최상위 디렉토리를 기준으로 하는 URL입니다.
'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| [TypeScript/JavaScript] 직접 벽돌쌓기 형식의 리스트 레이아웃 만들기 (1) | 2022.05.05 |
|---|---|
| 포트폴리오를 위한 깃허브 페이지: 템플릿에 Jekyll SEO Tag 사용하기 (0) | 2022.04.30 |
| 포트폴리오를 위한 깃허브 페이지: VSCode 개발 설정 (0) | 2022.04.29 |
| 포트폴리오를 위한 깃허브 페이지: 로컬 테스트 환경 구성 (0) | 2022.04.28 |
| 포트폴리오를 위한 깃허브 페이지: WSL 개발 환경 구성 (0) | 2022.04.27 |
댓글