드디어 github 블로그 개설까지 한 발자국 남았습니다!
Github 블로그 생성에 대한 포스팅이 벌써 막바지에 다가가네요.
이번 포스팅에서는 생성한 사이트에 jekyll 테마를 적용하는 과정을 살펴보도록 하겠습니다.
이전 과정을 진행하지 않으신 분들 께서는 아래의 포스팅을 참고해주세요.
1. Jekyll 테마 다운로드
현재 로컬 서버에 올려 확인한 사이트는 아무 디자인이 없는, 그야말로 깡통 사이트입니다.
이제 이 사이트를 이쁘게 꾸미기 위하여 jekyll 테마를 적용해보도록 하겠습니다.
먼저 jekyll에서 지원하는 테마를 선택해야 합니다.
위 사이트로 접속하여 원하는 테마를 선택해 줍시다.
원하는 테마를 고르셨으면 Download 버튼을 클릭하여 zip 파일을 다운로드 합니다.
참고로 제 사이트에 적용된 테마는 chirpy이며, chirpy 테마를 기준으로 포스팅을 이어가겠습니다.
이제 다운로드한 압축 파일을 압축 해제하고, 폴더 안의 파일들을 모두 자신의 로컬 repository에 붙여넣습니다.
이미 같은 이름의 파일이 존재한다는 중복 경고가 나올텐데, 모두 덮어쓰시면 됩니다.
2. Jekyll 테마 설치
이제 다운로드한 테마를 설치해야 합니다.
설치하기 앞서, 현재 로컬 repository에는 chirpy 개발자가 커스터마이징한 상태로 업로드 되어있습니다.
따라서, 초기화를 시켜야합니다.
Linux에서는 bash tools/init.sh 커맨드로 쉽게 초기화가 가능하지만, windows에서는 기능을 지원하지 않습니다. 따라서 직접 수정을 해야합니다. 수정하는 과정은 아래와 같습니다.
Gemfile.lock파일 삭제.travis.tml파일 삭제_posts디렉토리 삭제docs디렉토리 삭제.github/workflows/pages-deploy.yml.hook파일을 제외한 나머지 파일 삭제.github/workflows/pages-deploy.yml.hook파일명을pages-deploy.yml로 변경
만약 애초에 존재하지 않는 파일이 있다면 건너 뛰어도 무방합니다.
이제 로컬 repository의 root 디렉토리로 돌아가 아래 커맨드를 실행하면 테마 적용이 완료됩니다.
1
$ bundle install
3. 블로그 설정 변경
현재 블로그는 default로 설정되어 있기 때문에, 자신에게 맞춰 설정을 변경해야합니다.
_config.yml 파일을 열어서 수정합니다.
저는 vscode를 통해 수정하였으며, 몇몇 중요한 필드에 대한 설명은 아래와 같습니다.
| lang | 웹 페이지의 언어를 선택합니다. 지원하는 언어의 종류는 /_data/locales/ 에서 확인하실 수 있습니다. |
| timezone | Timezone 설정입니다. 한국에 거주하신다면 Asia/Seoul을 입력해주세요. |
| title | 블로그의 타이틀 입니다. |
| tagline | 블로그의 서브 타이틀 입니다. |
| description | 자세히는 모르겠으나… 블로그 소개 적으시면 될 듯 합니다. |
| url | "https://{my_github_username}.github.io" 형식으로 적어주세요. |
| github_username | 자신의 github username을 적으면 됩니다. |
| social_name | 자신의 이름이나 닉네임을 적으시면 됩니다. |
| social_email | 자신의 이메일 주소를 적습니다. |
| social_links | 자신의 소셜 링크 주소를 적습니다. |
| avatar | 자신의 프로필 사진 링크를 적어주시면 됩니다. 주로 /assets/img/ 디렉토리 안에 이미지를 저장합니다. |
| paginate | 메인화면 한 페이지에 보여줄 게시글 갯수를 정합니다. |
모든 설정이 완료되었다면 아래의 커맨드를 통해 로컬 서버를 실행하고, 테마가 잘 적용되었는지 확인합니다.
1
$ bundle exec jekyll serve
짜잔~! 내용을 잘 따라오셨다면 테마가 적용된 나만의 사이트를 확인하실 수 있을 겁니다!
마무리
이제 테마도 적용이 되면서 점점 사이트가 완성이 되가고 있습니다. 축하드립니다!
다음 포스팅에서는 사이트에 게시글을 포스팅하고, 빌드하여 github로 업로드하는 과정을 살펴보겠습니다.
감사합니다.