Github blog
Github blog
01. 개발환경 설치
1. github fork
2. Ruby for Windows
02. 블로그 포스팅 하는법
02-01. MarkDown을 지원하는 에디터 실행
vscode와 같은 에디터를 사용한다.
02-02. _posts 폴더를 생성
github아이디.github.io 이름의 로컬 폴더 위치에 _posts 폴더를 생성
02-03. yyyy-mm-dd-title.md 형식의 파일 생성
포스트 파일의 확장자는 md 이어야 하고, yyyy-mm-dd 형식의 날짜와 함께 -포스트 제목 을 붙여준다.
포스트 제목은 영어로 쓰는것이 좋긴해
02-04. 머릿말(Front-Matter)을 상단에 작성해 주어야 함
md 파일에 포스트를 작성하기 전에 정보를 머릿말로 적어줘야 함
title: '포스팅 하는 방법'
excerpt: 'md 파일에 마크다운 문법으로 작성하여...'
categories:
- blog
tags:
- [Blog, jekyll, Github, Git]
toc: true
toc_sticky: true
- 우선 위 아래에
---를 써서 머릿말 쓰는 영역을 구분행야 한다 - title: 포스트의 제목을
""로 적어준다. 안적으면.md파일 이름응로 적어주었던 title 부분이 제목으로 업로드 된다. - excerpt: 포스트 목록에서 보여지는 블로그 소개 글로 들어간다.
- categories: 이 포스트의 카테고리는
Blog로 정했다. - tags: 태그와 카테고리의 차이점은 카테고리는 sub url 이 붙는 페이지가 있지만 테그는 없다는 것, 카테고리 보다 조금더 세부적,
[]대괄호 안에서,로 구별해주어 여러개의 태그를 이 포스트에 지정할 수 있다. - toc: Table of Contents. 포스트의 헤더들만 보여주는 목차를 사용할 것인지의 여부, ture로 해주면 포스트의 목차가 보이게 된다.
- toc_sticky: true로 해주면 목차가 스크롤을 따라 움직이게 된다. 이밖에도 이 포스트의 toc_icon, toc_label 도 설정 할 수 있다.
- date: 글을 처음 작성한 날자
- last_modified_at: 이 글을 수정한 날짜.
02-05. 포스트 내용을 Markdown 문법으로 작성한다.
머릿말이 ---로 끝난 이후 부터는 포스트 본문 영역임, jekyll은 HTML과 MarkDown을 지원하는데 MarkDown이 더 편하다
02-06. 이미지 추가하기
Typora 환경설정 -> 이미지 -> 이미지 삽입 시 사용자 정의 폴더로 이미지 복사 -> 경로(../images/{파일이름})
02-07. minimal-mistakes 구조 한눈에 보기
폴더 구조는 필요한 폴더에 들어가 cmd창 연 후, tree > 파일이름.txt로 하면 트리구조로 .txt파일에 저장된다.
minimal-mistakes
├─.jekyll-cache
│ └─Jekyll
│ └─Cache
│ ├─Jekyll--Cache
│ ├─Jekyll--Converters--Markdown
│ └─Module
├─assets
│ ├─css
│ ├─images
│ └─js
│ ├─lunr
│ ├─plugins
│ └─vendor
│ └─jquery
├─_data # data files for customizing the theme
├─_includes
│ ├─analytics-providers
│ ├─comments-providers
│ ├─footer
│ ├─head
│ └─search
├─_layouts
├─_pages
├─_posts
├─_sass # SCSS partials
│ └─minimal-mistakes
│ ├─skins
│ └─vendor
│ ├─breakpoint
│ │ └─parsers
│ │ ├─double
│ │ ├─resolution
│ │ ├─single
│ │ └─triple
│ ├─magnific-popup
│ └─susy
│ ├─plugins
│ │ └─svg-grid
│ └─susy
├─_site
│ ├─about
│ ├─assets
│ │ ├─css
│ │ └─js
│ │ └─lunr
│ ├─category
│ ├─github
│ │ └─posting
│ ├─images
│ ├─markdown
│ │ └─first
│ ├─search
│ ├─startup
│ │ └─startup
│ ├─svelte
│ │ └─svelte
│ └─tag
├─_config.yml
├─Gemfile
├─index.html
└─package.json
📝 _data 폴더
theme 을 customizing하기 위한 data file들이 모여있는 folder이다.
사이트에 사용할 데이터를 적절한 포맷으로 정리하여 보관하는 디렉토리이다.
.yml,.yaml,.json,.csv,.tsv 같은 파일들을 둔다면 이 파일들을 자동으로 읽어들여 site.data로 사용 할 수 있다.
예를 들어 _data 디렉터리에 members.yml 라는 파일이 있다면 site.data.members로 입력하여 그 파일을 사용할 수 있다.
├─_data # data file for customizing the theme
│ ├─navigation.yml # main naviation links
│ ├─ui-text.yml # text used throughout the theme`s UI
📝 navigation.yml
# main links
main:
- title: "About"
url: /about/
- title: "Category"
url: /category/
- title: "Tag"
url: /tag/
- title: "Search"
url: /search/
상단 메뉴바 메뉴바를 커스터마이징 할 때 이 문서를 건드리면 된다.
📝 ui-text.yml
각국 언어별로 어떤 텍스트로 표시되는지 나열한 문서이다.
minimal mistakes의 TOC 라벨은 기본적으로 On this page로 나타나는데, Index로 바꿀수 있다.
toc_label : "Index"
📝 _includes 폴더
많이 재사용 되는 html 파일들을 모와둔 폴더이다.
댓글, 카테고리, 태그, 비디오, head, fotter, toc 등등 블로그에서 자주 쓰이거나 항상 보이는 공통된 컴포넌트 들을 담은 코드들만 모와둔 것이다
필요에 따라 Liquid언어의 태그로 포스트나 레이아웃에 _includes 폴더 내의 코드를 쉽게 삽입하여 재사용 할 수 있다.
예를들어
{&include file.ext %}를 쓰면 이 부분에 `_includes 폴더에 있는 file.ext 파일의 코드가 삽입되는 식이다.
✔ analytics-providers
어떤 analytics 플랫폼을 사용할 것인지의
사용방법
analytics: provider: "google-gtag" google: tracking_id: "~~~" anonymize_ip: false #default
provider에 사용할 analytics에 맞는 html 파일 이름을 문자열로 적어준다.
구글 analytics 말고 다른 analytics를 사용하려면 provider: custom을 한 후 custom.html에 그 analytics의 embed code를 추가해 준다.
✔ comments-providers
어떤 댓글 플랫폼을 사용할 것인지 ex) disqus, facebook, …
마찬가지로 custom.html은 _includes/comments-providers에 없는 댓글 플랫폼을 사용하려 할 때 여기에 embeded code를 추가해준다
✔ footer, head
폴더에 들어있는 custom.html에 footer와 head의 커스터 마이징 내용을 적어주면 된다. favicon(파비콘) 삽입 태그를 _includes/head/custom.html에 삽입해주었다.
✔ search
어떤 검색 엔진을 사용할 것인지, 우선 블로그내 검색기능을 사용하려면 _config.yml에 search: true로 변경해주면 된다
default 검색 엔지는 Lunar 이며, Google Custom Search Engine 에서 내 입맛대로 검색 엔진을 만들 수있다.
검색 기능을 사용하려면, _config.yml에 search_provider값을 추가하면 된다.
✔ nav_list
메뉴 상단바 리스트
_data 폴더에 있는 naviation.yml에 foo 라는 이름의 네비게이션을 작성한다고 하면
Parent Link 1, 2 라는 이름의 페이지가 상단 메뉴바에 생길 것이고, 각각 자식페이지는 child-1, 2-page, child-1,2,3-page가 될것이다.
이러고 포스트 머리말에 side bar: nav: "foo" 혹은 포스트 본문에 를 써주면 foo라는 이름으로 지정된 네비게이션이 삽입 될 것이다.
03. 업데이트 내역 실시간 확인하기
공식 블로그에 있는 Getting start -> installation -> dependencies 에서 offical documentation 들어간 후
- ruby 설치
- github.io가 저장되어있는 폴더에서 cmd 연 후에
gem install jekyll gem install bundlercd github.io폴더bundle add webrickbundle exec jekyll serve --trace- 이후 4000번 포트에서 실행(로컬호스트)
ISSUE : bundle add webrick 할 때 ERROR
[!] There was an error parsing `injected gems`: You cannot specify the same gem twice with different version requirements.
You specified: webrick (~> 1.7) and webrick (>= 0). Gem already added. Bundler cannot continue.
- 문제는 새로 만드는것이 아닌 기존에 있던 github에 올라가 있는 사이트를 clone 해서 실행한 경우
-
원인은 다운받은 사이트의 bundler 버전과 시스템에 설치된 버전이 달라서 그렇다.
- 쉬운 해결 방법은 gemfile.lock를 삭세하고 새롭게 설치하는 방법이다.
bundle install
- 혹은 gemfile.lock 파일을 열어 bundled with 항복에 버전을 시스템과 사이트를 동일하게 맞추는 것
04. 블로그 설정 변경하기(_config.yml)
_config.yml 에서 모든 설정을 바꿀 수 있음
- configration > configration 설정이 적혀있는 사이트 / 들어가서 확인하셈
05. 댓글 & 구글 애널리틱스 추가하기
configration 에서 댓글 기능 추가하는 법이 나와있음
- Disqus에 들어간 후
- add -> get start
- 기타 설정 완료 후
- jekyll 블로그 선택
- 우측에 config 선택 후 사이트 url 입력(깃헙주소) 이후 next -> setup
- confing.yml에 하단에 있는 comments를 true로 변경
- 32번째 줄 comments에 provider 를 disqus로 변경
- disqus site들어가서 admin 들어간 후 short name 확인
- 이후 disqus 하위에 shortname을 확인한 이름으로 변경
- 이후 새로고침하면 안뜸 ?
- 로컬호스트라 그럼 -> github.io로 들어가면 뜰꺼임
- 댓글 관련 설정은 disqus사이트의 admin에서 주기적으로 확인해줘야 함
- 댓글 관련 analytics도 제공을 해주는데,, 살펴봐도 좋음
- 광고설정이나 reaction 설정도 바꿀 수 있음 ++ prompot도 바꿀 수 있음
- generate 들어가서 프로필 사진 등을 바꿀 수 있음
- 광고를 삭제할려면 돈내렴^^ 근데 사실 setting 들어가면 어느정도 광고 제거 가능함
google analytics 설정하기 // 방문자 추적해버렸
- _config.yml의 88번째 줄 analytics의 provider를 google-gtag로 변경함
- 이후 tracking id를 넣어줘야하는데
- google analytics 들어가서 계정 이름을 설정한 후
- 속성이름을 만들어줌 (jekyll-blog) / 시간은 대한민국 ㅎㅎ / 통화도 대한민국(원)
- 플랫폼을 web으로 설정하고 github.io주소 입력 / 이름도 잘 입력하고
- 이후 나오는 특정 아이디를 복사 한 후 그 이상한거 tracking id에 넣어줌
- 머머 ip는 false로 하셈
- 이후 구글 analy 들어가서 확인하면 잘 확인할수 있음! 끗
- 수익창출도 해보덩가
06. 테마변경, SNS링크 삽입, Pagination 설정
ISSUE : bundle exec jekyll serve –trace 할 때, Dependency Error
Dependency Error: Yikes! It looks like you don't have tzinfo or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. If you've run Jekyll with `bundle exec`, ensure that you have included the tzinfo gem in your Gemfile as well. The full error message from Ruby is: 'cannot load such file -- tzinfo' If you run into trouble, you can find helpful resources at https://jekyllrb.com/help/!
-
문제가 생겼다. 이는 windows에서 ruby interfreter가 IANA 타임존 정보를 처리하는데 필요한 정보 원천이 없어서 환경변수인 TZ 를 사용한다고 한다
-
해결방법 : github.io 블로그 디랙토리 내 Gemfile을 열여서 아래 내용을 추가
- 참고자료: https://sujinlee.dev/errors/windows-jekyll-tzinfo-error/
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo'
gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
07. 카테고리 기능, #태그 기능 추가하기
08. 글 목차, 404 페이지 에러 구현하기
09. 구글, 네이버 검색엔진 등록하기
10. 블로그 내 글 검색기능 추가하기
Author profile 보이기/안보이기 옵션
위의 부분이 author profile을 보여주는건데, 문제는 포스트에 들어갔을대 author이 따라다닌다는것임
이를 껐다 켰다 할 수 있는 옵션이 있음
---
layout: ~~~
...
author_profile: false // author profile 설정
---
sidebar navigation 수정
좌측에 author profile 부분에 author 이외에 카테고리 등 다른걸 넣고싶다면
_data/naviation.yml 에 들어가서 내용을 추가하면 됨
댓글남기기