[Github Blog] 5. Github Pages 블로그 설정 & 포스트
솔직히 블로그 설정을 건드는 부분은 내가 아는 정보들을 그대로 나열할 수 밖에 없다고 생각한다… 그래도 내가 시행착오를 겪었던 경험을 떠올리면서 하나하나 풀어서 작성하려 하였으니, 미숙한 글이지만 남들에게 도움이 되었으면 정말 좋겠다… 그리고 Github Pages이나 Minimal Mistakes으로 처음 블로그를 운영하시는 분들의 시선에 맞춰 html, css에 대한 자세한 내용은 다른 포스트로 옮겼으니 참고해주셨으면 한다.
1. 블로그 기본 설정
위의 디렉터리에서 _config.yml이라는 파일을 열어보면 다음과 같이 구성되어 있는데, 오른쪽의 주석을 참조해서 나만의 블로그를 커스텀마이징해보자. 이걸 어떻게 적용하는지 잘 모르겠다, 싶은 사람은 내 블로그에 적용된 것을 예시로 보면서 작업해보자.
minimal_mistakes_skin : # 블로그의 전체적인 스킨 지정
# (Minimal Mistakes에서 기본적으로 제공)
# "default" "air", "aqua", "contrast", "dark"
# "dirt", "neon", "mint", "plum", "sunrise"
# Site Settings
locale : "ko-KR" # 블로그에 쓰일 로컬 언어 지정
title : # 메타 태그에 들어갈 블로그의 제목 지정
subtitle : # 블로그의 제목 하단에 위치할 부제목 지정
name : # 블로그 저자 이름 지정
description : # SEO 향상을 위한 meta description 태그 지정
url : # 블로그 url
# "https://(github ID).github.io"
repository : # github repository url
# "https://github.com/(github ID)/(github ID).github.io"
teaser : # 관련 포스트나 검색 등에 들어갈 미리보기 이미지 지정
# ("assets/images/"로 연결)
logo : # 블로그의 제목 옆에 들어갈 로고 이미지 지정
# ("assets/images"로 연결)
masthead_title : # 블로그 프로필 상단에 위치할 사이트 제목 지정
breadcrumbs : true # 브래드크럼 사용 여부 지정
words_per_minute : 200 # 포스트를 읽는 데 걸리는 시간을 계산히기 위한 분당 읽는 글자의 지정
2. 블로그 레이아웃 설정
이제 조금은 삭막한(?) 블로그의 레이아웃을 뜯어고칠 차례이다. 우선은 이전처럼 _config.yml 파일을 아래와 같이 자신이 원하는 대로 수정하면 된다.
## 블로그 좌측 사이드바에 위치할 프로필 설정
author:
name : # 저자 이름 지정
avatar : # 저자 이미지 지정
bio : # 저자 바이오그래피 지정
location : # 저자 위치 지정
email : # 저자 이메일 지정
links: # 저자 관련 사이트 링크 지정
- label: # 사이트 분류 지정
icon: # 사이트 아이콘 지정
url: # 사이트 url 지정
## 블로그 하단에 위치할 꼬리말 설정
footer:
links: # 블로그 관련 사이트 링크 지정
- label: # 사이트 분류 지정
icon: # 사이트 아이콘 지정
url: # 사이트 url 지정
(1) 네비게이션 바
다음은 기본 테마를 보면서 혹은 자기가 기능을 적용하면서 불편한 점들을 확인하고, 직접 테마의 요소들을 뜯어고치는 건데… 이건 사람마다 달라서 뭐라고 말을 못하겠다. 그래서 나 같은 경우에 어떤 부분이 불편했고, 그래서 수정했는지 얘기해보고자 한다. 우선은 블로그 상단의 네비게이션 바에 내가 보기에 불필요한 카테고리들이 있었다. 그래서 카테고리, 태그만 남기기 위해 _data/navigation.yml 파일을 수정하였다. _pages 디렉토리를 보면 여기에 적용할 수 있는 여러 요소들이 있는데, 직접 입맛에 맛게 적용해보면 된다.
main:
- title: (카테고리) # 화면에 보여질 세부 항목의 이름 지정
url: /(카테고리)/ # _pages 내에 정해진 양식 파일이나 특정 링크로 연결
(2) 블로그 너비 및 폰트 크기
그리고 블로그에 포스트를 쓸 때에 한쪽에는 VS Code를, 다른 쪽에는 로컬에서 호스팅한 블로그를 보기 위한 사파리 브라우저를 띄워 놓곤 했는데, 그때마다 기본으로 설정된 블로그 너비랑 폰트 크기가 글을 읽기에 굉장히 불편했다. 그래서 _sass/minimal_mistakes/_variables.scss 파일과 _sass/minimal_mistakes/_reset.scss 파일을 다음과 같이 수정해보았다.
// 블로그 너비 설정
/*
Grid
========================================================================== */
$right-sidebar-width-narrow: 200px !default; // default 200px
$right-sidebar-width: 300px !default; // default 300px
$right-sidebar-width-wide: 400px !default; // default 400px
## 블로그 폰트 크기 설정
html {
/* apply a natural box layout model to all elements */
box-sizing: border-box;
background-color: $background-color;
font-size: 16px; // Default 16px;
@include breakpoint($medium) {
font-size: 16px; // Default 18px;
}
@include breakpoint($large) {
font-size: 16px; // Default 20px;
}
@include breakpoint($x-large) {
font-size: 16px; // Default 22px;
}
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
(3) 블로그 아이콘
또 블로그 주소 창에 같이 뜰 아이콘이 아무것도 안 뜨니 뭔가 내 블로그 같다는 느낌이 안들었다. 그래서 이것 또한 _includes/_head/custom.html 파일에 내가 원하는 아이콘을 넣었다.
<!-- start custom head snippets -->
<!-- insert favicons. use https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/logo.ico/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/logo.ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/logo.ico/favicon-16x16.png">
<link rel="mask-icon" href="/assets/logo.ico/safari-pinned-tab.svg" color="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
내가 수정한 것은 이정도? 인데 자잘하게 더 파고들면 커스텀마이징할 레이아웃 요소가 정말 많다. html, css, yml 파일을 건드는 것이라 그리 어렵지도 않고, 한번 배워두면 생각보다 쓸 때도 많다. 아래는 Minimal Mistakes Themes의 디렉토리 구조에 주석을 단 것인데, 커스텀마이징이 필요할 때 이를 참고하기 좋은 것 같다.
minimal-mistakes
├── _data # 테마를 커스터마이징하기 위한 파일을 저장하는 디렉터리
| | # (yml, yaml, json, csv, tsv 파일을 자동으로 읽어들어 site.data로 사용)
| ├── navigation.yml # 상단 메뉴바를 커스터마이징하기 위한 파일
| └── ui-text.yml # 언어별로 어떤 텍스트로 표시되는지 나열하는 파일
|
├── _site # 재사용되는 html 파일을 저장하는 디렉터리 (공통된 컴포넌트들 보관)
| ├── search # 검색 엔진을 커스터마이징한 내용을 저장하는 디렉터리
| ├── analytics-providers
| └── custom.html # 분석 플랫폼 공급자를 커스터마이징한 내용을 저장하는 파일
| ├── comments-providers
| └── custom.html # 댓글 플랫폼 공급자를 커스터마이징한 내용을 저장하는 파일
| ├── head
| └── custom.html # head를 커스터마이징한 내용을 저장하는 파일
| ├── footer
| └── custom.html # footer를 커스마이징한 내용을 저장하는 파일
| ├── nav_list # 메뉴 상단바의 리스트에 대한 helper 파일
| ├── archive-single.html # 아카이브 문서에서 단일 문서를 표현하는 방법을 저장하는 파일
| ├── author-profiles.html # author profile link애 대한 내용을 저장하는 파일
| ├── author-profile-custom-links.html # author profile link를 커스마이징한 내용을 저장하는 파일
| ├── breadcrumbs.html # breadcrumbs에 대한 내용을 저장하는 파일
| ├── single-page
| ├── page__taxonomy.html # 단일 문서에서 태그와 카테고리를 표현하는 방법을 저장하는 파일
| ├── tag-list.html # 단일 문서에서 태그 리스트를 표현하는 방법을 저장하는 파일
| └── category-list.html # 단일 문서에서 카테고리 리스트를 표현하는 방법을 저장하는 파일
├── _posts # 블로그에 포스트한 md 파일을 저장하는 디렉터리
├── _includes
├── _layouts # 각 문서의 디자인과 직접적으로 연결된 전체적인 레이아웃 디렉토리
├── _sass # minimal-mistakes.scss에 임포트할 수 있는 scss 파일을 저장하는 스타일시트 디렉터리
├── assets # css, js, 이미지 파일을 저장하는 디렉터리
| ├── _css
| ├── _images
| └── _js
├── _config.yml # 블로그를 구성하기 위한 기본적인 설정값을 설정하는 yml 파일
├── Gemfile # 사용할 gem 플러그인 목록
├── index.html # 블로그 처음 홈 페이지
└── package.json
3. 블로그 포스트 작성 및 머릿말 작성
_posts 폴더에 XXXX(YEAR)-XX(MONTH)-XX(DAY)-(NAME).md을 생성해보자. 이때 YEAR, MONTH, DAY는 포스트가 작성된 연도, 월, 일이 되고 NAME은 포스트의 경로가 된다. 그리고 파일 상단에 위치할 머릿말을 작성하기 위해 아래와 같이 ---에 둘러싸인 내용을 작성해보자.
---
title: "[Blog] macOS에서 Minimal Mistakes로 깃허브 블로그 만들기"
categories:
- Github.io
tag:
[HTML, JavaScript, SCSS, Ruby]
toc: true
toc_sticky: true
date: 2022-09-26
lastmod: 2022-09-26
---
| 양식 이름 | 양식 설명 |
|---|---|
| title | 포스트 제목 |
| categories | 포스트 카테고리 |
| tags | 포스트 태그 |
| toc | 우측 상단의 목차 |
| toc_label | 목차 이름 |
| toc_icon | 목차 아이콘 |
| toc_sticky | 목차 고정 여부 |
| date | 포스트 작성일 |
| lastmod | 포스트 수정일 |
| author_profile | 프로필 창 표시 여부 |
우리가 글을 작성하는 데에 사용할 Markdown은 텍스트 기반의 마크업 (MarkUp) 언어로, 특수기호와 문자를 활용한 매우 간단한 구조의 문법을 사용해 보다 빠르게 컨텐츠를 작성할 수 있다! Github의 README.md가 대표적인 예시인데, Github Pages 역시 이를 활용해 문서를 작성하는 데에 사용한다. 마크다운 문법은 여기서 상세히 설명하고 있으니 참고하자.
4. 블로그 포스트 내에 문자 박스 양식 넣어보기
추가로 minimal-mistakes theme의 css로 설정된 스타일 요소를 class로 불러와 적용할 수 있는데, 그중 하나인 상자 양식을 활용해보자. Markdown (.md) 파일이니까 html 태그들을 쓰면 그대로 화면에 표현할 수 있다.
<p class="notice--primary">
<strong>
이 항목은 현재 작성중입니다.
</strong><br>
> 아직 미완성된 코드나 문장 구조가 정확하지 않은 내용이 있을 수 있으니 유의하시기 바랍니다.
</p>
<p class="notice--info">
<strong>
이 항목은 macOS 기반으로 작성되었습니다.
</strong><br>
> 프로그램, 단축키 설정 등이 다른 OS 환경과는 호환이 안되는 경우가 많으니 유의하시기 바랍니다.
</p>
<p class="notice--danger">
<strong>
이 항목은 최신의 내용을 담고 있지 않을 수 있습니다.
</strong><br>
> 맨 아래의 항목 업데이트 날짜와 OS나 프로그램의 버전 정보를 꼭 확인해주시기 바랍니다.
</p>
<p class="notice--warning">
<strong>
이 항목은 검증되지 않은, 편향된, 혹은 잘못된 내용을 포함할 수 있습니다.
</strong><br>
> 작성자 역시 공부하는 학생이기에 해당 부분을 댓글이나 이메일을 통해 지적해주신다면 정말 감사할 것 같습니다.
</p>
이 항목은 현재 작성중입니다.
> 아직 미완성된 코드나 문장 구조가 정확하지 않은 내용이 있을 수 있으니 유의하시기 바랍니다.
이 항목은 macOS 기반으로 작성되었습니다.
> 프로그램, 단축키 설정 등이 다른 OS 환경과는 호환이 안되는 경우가 많으니 유의하시기 바랍니다.
이 항목은 최신의 내용을 담고 있지 않을 수 있습니다.
> 맨 아래의 항목 업데이트 날짜와 OS나 프로그램의 버전 정보를 꼭 확인해주시기 바랍니다.
이 항목은 검증되지 않은, 편향된, 혹은 잘못된 내용을 포함할 수 있습니다.
> 작성자 역시 공부하는 학생이기에 해당 부분을 댓글이나 이메일을 통해 지적해주신다면 정말 감사할 것 같습니다.
Reference