github.io 블로그 시작하기[1]

서론

지금까지 작업물을 git에만 올리기엔 가독성이나 접근성이 너무 떨어지는 것 같아 blog를 시작하게 되었다.
여러 정보를 찾아보니 ruby나 java등 다양한 툴을 사용해서 블로깅을 하지만 필자는 그런 잡다한 설치를 귀찮아 하기 때문에
최대한 여타 프로그램을 설치하지 않는 방법으로 블로그를 시작할 것이다.
필자가 이 글을 쓰는 시점도 블로그를 생성한지 2시간 밖에 안된 초심자이기 때문에 자세한 설명은 하지 못하나, 아주 간단하게 필요한 것들만 정리하여 포스팅 할 것이다.
때문에 좀 더 전문적이고 자세한 글을 원한다면 다른 블로그로 ㄱㄱ

Git repository 생성

깃허브에 대한 내용은 다른 포스팅에서 다룰 예정이므로 가입이나 기타 세세한 설정은 생략한다.
깃헙 블로그를 만들기 위해 앞으로 블로그에 대한 정보가 모두 담겨있을 레포지토리를 하나 생성해야한다.
왠지는 모르겠지만 대부분 (사용자 이름).github.com 이런 식으로 이름을 설정하는 것 같다.

이런식으로 이름을 설정하고 레포지토리를 생성해 준다. (!!!나의 방식을 따라하려면 절대로 readme파일 생성하지 않아야한다!!!)

이렇게 레포지토리를 만들면(readme파일이 없을시) 다음과 같이 맨 밑에 import code 버튼이 생기는 데 눌러준다.

가장 많이 쓴다고 하는 이 테마를 적용하기위해 https://github.com/mmistakes/minimal-mistakes 테마를 적용할 것이다.

이 테마의 git clone url을 붙혀넣고, begin import 해주면 진행이 되는데 이게 꽤 시간이 걸린다. 그냥 밥이나 먹고오자.

기본정보 셋팅

_config.yml

_config.yml에서 여러가지 세팅을 하게되는데, 사실 이건 사용자가 하고싶은대로 필요 정보를 수정하면된다.
어떤영역이 무슨 역할을 하는지에 대한 설명은 7271kim님의 깃허브 를 참고하였다.

내가 주로 수정한 부분은 다음과 같다.

# Site Author
author:
  name             : "J-Mook"
  avatar           : # path of avatar image, e.g. "/assets/images/bio-photo.jpg"
  bio              : "귀찮아..."
  location         : "Republic of Korea"
  email            : 
  links:
    - label: "Email"
      icon: "fas fa-fw fa-envelope-square"
      url: jwonmook@gmail.com
    - label: "Website"
      icon: "fas fa-fw fa-link"
      # url: "https://your-website.com"
    - label: "Twitter"
      icon: "fab fa-fw fa-twitter-square"
      # url: "https://twitter.com/"
    - label: "Facebook"
      icon: "fab fa-fw fa-facebook-square"
      # url: "https://facebook.com/"
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      url: "https://github.com/J-Mook"
    - label: "Instagram"
      icon: "fab fa-fw fa-instagram"
      # url: "https://instagram.com/"
    - label: "Youtube"
      icon: "fab fa-fw fa-youtube"
      url: "https://www.youtube.com/channel/UCBKMpq5kHuNMNRDBPMxv6Jg"

108번째 줄 쯤에 Site Author - 왼쪽의 사용자 정보

_data/navigation.yml

여기에선 상단의 Categories Tags About posts 와 같이 메뉴 역할의 영역을 설정해준다. 기본적으로 튜토리얼 가이드가 위치한 위치이다.

  main:
  - title: "Categories"
    url: /categories/
  - title: "Tags"
    url: /tags/
  - title: "About"
    url: /about/
  - title: "Posts"
    url: /posts/

나는 이렇게 설정해 주었다.

_pages

이 곳에다가 자신이 띄우고 싶은 페이지 들을 넣어주면된다. (처음에 폴더나 파일들이 없으니 만들어서 사용하자!)

• category-archive.md
  category-archive.md를 다음과 같이 작성하여 상단 navigation에선 카테고리를 눌렀을 때 카테고리 페이지가 나오도록 하였다.
• --- title: "Posts by Category" layout: categories permalink: /categories/ author_profile: true ---
• 404.md
  이 페이지는 404에러 페이지이다. 그냥 이상한 경로로 접근했을떄 뜨는 페이지
• --- title: "404 Page" excerpt: "Page not found. Your pixels are in another canvas." permalink: /404.html author_profile: false --- Page Not Found 요청하신 페이지를 찾을 수 없습니다. <script> var GOOG_FIXURL_LANG = 'en'; var GOOG_FIXURL_SITE = 'https://devinlife.com' </script> <script src="https://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"> </script> </code> </pre>
• posts-archive.md

  ---
  title: "Posts"
  layout: posts
  permalink: /posts/
  author_profile: true
  ---

• 전체 포스트를 모아놓은 페이지

위의 세팅까지 끝내니 기본적인 블로그같은 형상이 잡혔다. 다음은 세부적인 세팅을 해봐야겠다.