-
GitHub Pages 만들기 일대기 (2) - 글 작성 및 페이지 개시Soliloquy 2020. 2. 9. 00:52
Web Page!
테스트 페이지는 다 만들었고, 이제 기본적인 페이지를 구성할 차례가 되었다. 우선은 페이지 꾸미기를 먼저 시작하였다. 테마 파일은 모두 마크다운이라는 문법으로 글이 작성되어 있었다. 가장 먼저 해보고 싶었던 것은 About 페이지 옆에 People이라는 메뉴를 만드는 것이었다.
사이드바 메뉴 만들기
People이라는 메뉴를 만드는 방법은 엄청 간단했다. 테마 폴더에 about.markdown이라는 파일이 있었는데, 혹시나 해서 해당 파일을 하나 더 만들어 보니, About 페이지가 하나 더 생김을 발견할 수 있었다.
about 페이지 파일을 복사한 모습 
About 메뉴가 2개가 된 모습 notepad++로 about.markdown 파일을 열어보니 상단에는 아래와 같은 문구가 적혀져 있었고, title과 permalink를 수정하여 원하는 페이지를 만들 수 있게 되었다는 사실을 알수 있었다. 그래서 나는 title과 permalink를 People로 바꾸어보았다.
---
layout: page
title: About
permalink: /about/
---
People이라는 메뉴로 바꾸어진 모습 이렇게 메뉴를 하나 추가하는데 성공하였다. 이제 메뉴에 맞는 글을 작성하면 되었다. 글을 작성하려는데, WYSIWYG 방식에 너무 익숙해서 그런지 마크다운 작성에는 불편한 점이 많았다. 불편함을 해소하고자 인터넷을 찾아보니, 워드파일로 작성 후 마크다운으로 변환할 수 있다는 말을 찾았다. 하지만 워드 파일로 변환을 하는 것이 정말 내 의도대로 완벽하게 될까? 라는 생각이 들었고, 이번에는 마크다운에 익숙해 보자라는 생각으로 마크다운 에디터를 사용해보기로 하였다.
가장 유명한 에디터로는 Typora라는 에디터가 있었다. 에디터를 사용하면 ## 과 같은 구문들을 자동적으로 마크다운으로 변환하여 표시를 해주고, 원하는 기능은 메뉴에서 직접 찾아서 바로 사용할 수 있다는 장점이 있었다. 비록 다른 문서 프로그램처럼 메뉴 툴바가 따로 없어서 불편한 점이 있긴 하였지만, 사용하지 않는 것 보다는 확실히 나았다.
Typora 화면 이렇게 메뉴 화면을 수정하고 난 뒤, 페이지의 이름이 신경 쓰여서 페이지 이름을 고치기로 하였다.
웹페이지 이름 수정
웹페이지는 생각보다 더 수정하기가 쉬웠다. 테마가 저장된 폴더의 _config.yml 파일을 열어서 title과 description을 수정해주면 되었다. _config.yml 파일에는 이 외에도 이메일 및 SNS 설정 표시도 있었다. 생각보다 수정하는 방법이 간단했다.
title을 MY Page로, description을 yolo! 로 바꾼 모습 이제 사이트 꾸미기를 거의 다 하였다. 이제 글을 써볼 차례가 되었다.
글 작성하기
테마가 저장된 폴더 내에는 _post라는 폴더가 있는데, 여기서 `YEAR-MONTH-DAY-title.MARKUP1` 라는 식의 파일을 만들어 주면 되었다. 예를 들면 2019년 10월 1일 날짜로 시작이라는 제목의 글을 마크다운 형식으로 작성하려면 2019-10-01-시작.markdown 으로 작성하면 되었다. 파일 제목 양식을 지키지 않아도 페이지가 정상적으로 만들어 지기는 하나, 혹시 모르니 양식을 지키는 것이 좋을 것 같다.
해당파일 내용은 다음과 같은 내용으로 시작했다.
---
layout: post
title: "Welcome to Jekyll!"
date: 2020-02-08 15:45:46 +0900
categories: jekyll update
---위 형식을 붙여놓고 그 아래에 마크다운으로 작성을 하면 되었다. 단순 텍스트를 적는 것은 상관이 없었는데, 이미지 첨부하는 방식이 조금 걸렸다. 블로그 같은 경우에는 이미지를 손쉽게 업로드할 수 있겠지만, 깃허브에 마크다운으로 이미지를 표시하려면 어떻게 해야 할까... .markdown 문서에 같이 포함이 가능하다면 좋겠지만, 아쉽게도 불가능한 것 같았다.
이미지 첨부
대신에 이미지 첨부는 별도의 이미지 폴더를 만들어 그 폴더의 이미지를 표시하는 방법으로 가능했다. 예를 들면 테마폴더의 최상단에 image라는 폴더를 만들고, 원하는 사진을 복사한다. 만약 사진 파일 이름이 lanyon theme.png 라면 해당 사진을 넣고 싶은 본문에 사진 태그인 '' 을 추가한다.
예를 들면 이런 식이다 이제 글을 다 작성했겠다... 웹페이지를 게시하는 일만 남았다.
웹페이지 업로드
GitHub 로고제작이 완료된 웹페이지는 Git을 이용해서 업로드를 해야 하나, Git을 많이 사용하지 않아서 어려움이 많았다. 그래서 이번에는 깃허브에서 배포하는 GitHub Desktop이라는 프로그램을 이용해 보았다. 해당 프로그램을 이용하면 복잡한 명령어를 볼 필요 없이 마우스 클릭 몇 번으로 업로드가 가능했다.
업로드 방법은 다음과 같았다.
1. GitHub Dekstop을 다운로드 하여 설치한다.
2. GitHub 사이트에서 사용자이름.github.io라는 이름의 저장소를 만든다. 이 때, 깃허브 Pro 계정이 아닌, 일반 계정이라면 Public을 선택해야 깃허브 페이지스를 사용할 수 있다.
저장소 이름 설정 예시 3. GitHub Desktop으로 넘어와서 Clone a repository를 누른 다음 깃허브 전용 업로드 폴더를 만들고 선택한다.
4. 새로 만든 폴더에 이전에 작업했던 테마 파일들을 복사한다. 이 때, 주의해야할 점이 다음과 같이 존재하였다.
4-1) _sites 폴더와 .jekyll-cache 폴더는 복사에서 제외시켜야 한다. _sites와 .jekyll-cache 는 Jekyll이 웹사이트를 만든 결과물이라서 그런지 업로드를 하면 웹사이트가 잘 만들어지지 않는다.
4-2) 테마 폴더의 파일들이 깃허브 전용 폴더의 최상위에 위치해야 한다. 예를 들면 깃허브 전용 폴더의 새폴더를 만든 다음 그 안에다가 테마 폴더를 만들면 안 된다.
5. 파일을 모두 업로드 한 후, 좌측 하단에 commit 이름을 넣고 commit to master를 누른다.
커밋하기 전 모습 6. 우측 상단의 ↑Push Origin 버튼을 누른다.
Push origin 설명 그림 7. 깃허브 저장소의 설정 창에 가서 페이지가 만들어지고 있는지 확인한다. 페이지는 생성까지 길면 20분이 걸린다.
깃허브 페이지가 올라간 모습 
github.io가 열린 모습 드디어 기나긴 여정 끝에 페이지 생성이 완료되었다.
여담
깃허브 페이지스가 구글 사이트보다 더 간결하고 거기에 관한 매력도 확실히 커 보이기는 하는데, 마크다운 문법을 사용해야 한다는 점이 걸린다. 비록 에디터를 사용하면 좀 더 좋아지긴 하지만, 마크다운을 모르면 제약이 너무 많이 생기니, 나 말고 다른 사람들이 유지보수 하는데 어려움이 많을 것 같았다.
구글 사이트가 좀 더 낫지 않을까? 라는 생각이 더 많이 들게 되었다.
[본문 SVG 파일]
[출처]
깃허브 저장소 이름 설정 예시 - 깃허브 지원 페이지
- MARKUP: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지. 출처: 위키백과 [본문으로]
