GitHub 블로그 만들기 (5) - 블로그 게시글 작성
📝 GitHub 블로그에 게시글을 작성합니다.
안녕하세요, 해을입니다🦖
이번 글에서는 블로그 게시글 작성에 대해 알아보겠습니다!
💡블로그 게시글
커스텀을 통해 블로그 단장을 마쳤으니 이제는 글로 채워나갈 준비를 해야겠죠?
그럼 지금부터 지난 글에서 만들었던 _posts 폴더 내에 게시글을 작성해 보겠습니다.
1. 게시글 파일 생성
블로그 게시글은 아래와 같이 마크다운 파일로 작성합니다.
🥨 .md 파일 생성
year-month-day-title 제목으로 마크다운 파일을 생성합니다.
🥨 파일 기본 설정
아래와 같이 기본 설정 내용을 입력합니다.
- title : 게시글 제목
- date : 작성 날짜 및 시간(현재 시간보다 이후의 시간을 적는 경우, 게시글이 나타나지 않습니다)
- categories : 게시글 카테고리(자동 링크 연결)
🥨 파일 추가 설정
설명과 태그도 추가 가능합니다.
- tags : 게시글 태그
- description : 게시글 설명
🥨 썸네일 설정
image 키를 통해 썸네일을 추가할 수 있습니다.
📢 (참고) 이미지, Gif의 url을 쉽게 따는 방법
GitHub의 issue를 활용하는 방법이 있습니다.
자신의 아무 Repository의 issue 생성 페이지로 들어가서 원하는 파일을 붙여넣기 하시면 됩니다.
🥨 사이드 바 강조
accent_image 키를 통해 게시글에서 사이드 바 이미지를 일시적으로 변경할 수 있습니다.
overlay 효과도 사용 가능합니다.
2. 내용 추가
hydejack 테마에서 제공하는 클래스나 마크다운 문법을 활용하여 내용을 작성합니다.
🥨 메모 추가
note 클래스를 활용하여 메모를 추가할 수 있습니다.
// 노트 추가
You can add a note.
{:.note}
// 노트 타이틀 설정
A custom label.
{:.note title="Attention"}
🥨 이미지 및 캡션 추가
이미지를 추가하고 해당 이미지에 캡션을 달 수 있습니다.
이때 캡션은 이미지가 아닌 전체 너비를 기준으로 가운데인 곳에 추가됩니다.
// 원본 사이즈로 추가
![image](이미지 url 입력)
// 사이즈 지정
![image](이미지 url 입력){: width="너비" height="높이"}
// 캡션 추가
캡션 내용 입력
{:.figcaption}
🥨 글자 색상 변경 및 하이라이트 설정
html 문법을 사용하여 글자의 색 또는 배경색을 변경할 수 있습니다.
색상은 color name 또는 16진수로 입력합니다.
// 글자 색 변경
<span style="color:red"> 빨간 글씨 </span>
// 하이라이트 처리
<span style="background-color:#fff5b1">노랑색 형광펜</span>
마크다운 파일에서 html 문법을 사용할 경우, 사진과 같이 노란 줄로 경고 표시가 뜨게 됩니다.
🥨 링크 설정
외부 링크와 내부 문서 링크를 연결할 수 있습니다.
// 외부 링크 설정
[표시 내용](링크 url)
// 내부 링크 설정
[표시 내용](문서 경로)
🥨 그 외
이 외에도 hydejack 테마와 마크다운 문법에는 다양한 표현 방법이 있습니다.
(ex - 테이블, 인용문, 글자 효과 등)
테마 공식 문서와 마크다운 문법을 살펴본 후, 필요에 따라 적용하시길 바랍니다.
4. 목차 추가
목차 기능은 PRO에서만 제공하는 기능이지만 표시는 가능합니다.
게시글 시작 위치에 아래 내용을 입력해 주세요.
* toc
{:toc}
5. 관련 게시물 추가
파일 설정에 related_posts 키를 추가하여 관련 게시물을 추가할 수 있습니다.
관련 게시물은 게시글 하단에 위치한 about 아래에 표시됩니다.
키를 입력하지 않는 경우, 임의의 게시물이 노출됩니다.
자! 이렇게 해서 Github 블로그 게시글 작성 방법을 살펴봤습니다.
첫 포스팅할 생각에 신나지 않나요😝
다음 글에서는 블로그 댓글 기능에 대해서 소개해 드리도록 하겠습니다.
오류 및 오타 지적, 질문, 인사 등 무엇이든 언제나 환영입니다!
읽어주셔서 감사합니다.
끝!🦕
🔗 다음 글 바로가기 GitHub 블로그 만들기 (6) - 블로그 댓글 기능