- Github계정 & 원격/로컬 Repository 생성하기
- Jekyll 설치하기
- 테마 입히기
- 테마와 Post 수정하기
- favicon 수정하기
- 댓글 기능 추가하기
- Google Analytics 추가하기
먼저 Git을 설치
그 다음 Github 계정을 생성해야 하지만
기존에 쓰던 Github 계정이 있기 때문에 따로 생성하진 않음
Github Page를 만들 것이기 때문에 Repository name을
<username.github.io>로 지정해 Repository를 하나 생성
내 username은 250b 이기 때문에 Repository name을 '250b.github.io'로 지정함
clone 명령어를 통해 원격저장소와 로컬저장소 연결
https://250b.github.io/blog/Git&Github/
ㄴ보다 자세한 과정과 사진은 위 Post에 포함되어있음
(+ Git & Github에 대한 설명, Git 이용방법)
https://rubyinstaller.org/downloads/
위 페이지에서 윈도우용 루비 + 개발자킷(DevKit) 설치 프로그램을 다운로드 후 설치
루비 설치가 정상적으로 완료되면, Start Command Prompt with Ruby를 실행
gem install jekyll bundler 를 입력해 패키지 설치
jekyll -v 를 입력해 jekyll이 잘 설치되었는지 확인
자신의 블로그 디렉토리로 이동
jekyll new . 를 입력해 현재 디렉토리 내부에 블로그 파일 생성
jekyll serve 를 입력해 지킬 실행
위의 과정을 통해 Jekyll 환경을 구성함
수업 notion의 두 사이트에서 마음에 드는 테마 선택
테마 링크로 이동해 ZIP으로 다운
ZIP내부 파일을 모두 복사해 250b.github.io 폴더에 넣어 덮어씌움
_config.yml의 title 을 수정함으로써 페이지의 제목을 BORI'S BLOG로 바꿈
navigation, social 부분 또한 적절하게 수정
_includes 폴더의 header 파일에서 불필요한 header는 없애고 내 github과 velog로 교체
각 post 파일에 html 형식으로 글 작성
작성한 post 파일들을 _post 폴더에 넣음
_post 구성에 쓰인 사진들은 assets/img 폴더에 담음
assets/css 폴더의 style.css를 수정해 여러 post의 디자인, 배치 조정
favicon이란? 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 주소창에 조그맣게 표시되는 아이콘
원하는 사진을 찾아 .ico로 변환한 후
파일 이름을 favicon으로 바꾸고
assets/img에 넣어 기존의 것과 교체
https://disqus.com
Disqus 가입
"I want to install Disqus on my site" 선택
Website Name 기입 ( 나중에 필요하니 잘 기억해두기)
나는 Git 계정 이름과 동일하게 250b로 지정함
Category 는 Tech로 설정
Create Site 클릭
여러 버전 중 Basic을 선택, 하단 Subscribe Now 버튼 클릭
Jekyll을 사용해 블로그를 만들었으므로, 많은 플랫폼 중 Jekyll 선택
configure 버튼 클릭
이전의 Website Name, Website URL, 입력
나는 250b, https://250b.github.io 입력함
Next 버튼 클릭
두가지 선택사항이 나오는데 원하는 정책으로 선택
나는 Balanced를 선택했음
Complete Setup 버튼 클릭
해당 Website Name으로 지정되게 이동
Disqus Home의 상단 Admin 클릭
installing Disqus 클릭
본문의 Universal Embed Code 클릭
하단 코드 복사 (코드에 Example이 아닌 자신의 Website Name이 들어가있는지 확인)
(사진은 강의자료 참고)
_config.yml 파일을 열어 위와 같이 수정
_layouts/post.html 을 열어 복사해둔 코드 붙여넣기(테마마다 다를 수 있음)
복사한 코드가 강의 자료의 코드와 달라 참고해 수정함
댓글 기능을 추가하고 싶은 post의 파일에 comments: true 설정을 추가
https://250b.github.io/blog/GoogleAnalytics/
ㄴ자세한 과정과 사진이 위 post에 포함되어있음
(추적 ID로 UA-형식이 필요했기 때문에 그에 따른 방법으로 진행함)