[GitHub] 블로그 만들기 (1)

💬 주저리

개발 관련된 자료들을 찾아볼 때 오... 조금 멋있는데? 싶은 블로그들을 보면 대부분이 GitHub 블로그였다.

막 개발에 관심이 생겼을 때쯤 깃헙 블로그 만드는 방법을 알아보다가 시간도 많이 들 것 같았고, 더 쉬운 툴들이 많다는 얘기를 듣고 벨로그를 접하게 됐었다. 만족스러운 비주얼과 프레임은 아니었으나 마크다운 문법을 익히기에도 좋고, 무엇보다도 심플했다. 그렇게 playgrounds 공부를 진행하면서 사부작사부작 적고 있다가 공부에 🔥불🔥을 지펴줄 멋쟁이 사자처럼 앱 스쿨을 만나게 됐다.

1주일간의 교육과 특강, 팀 회고를 하면서 개인 노션에 꾸준히 기록하고 있었으나, 공개적으로 기록할 수 있는 곳이 필요하다는 생각을 하게 되었다. 개인 노션에는 교육 과정상 공개할 수 없는 부분들이 많기도 하고, 공개된 곳에 올리는 것이 누구에게든 피드백을 받기 쉬울 거라고 판단했다. 공개적으로 글을 올리기로 마음먹은 김에 게시물을 작성할 플랫폼에 대해서도 다시 한번 고민해보기로 했다.

❓ 왜?

🤔 노션에 비해 벨로그를 덜 사용하게 되는 이유는?

1. 너!무! 심플해서 예쁘다고 느껴지지 않고,
   
2. 카테고리별 분류가 태그/시리즈로만 이루어져 가독성이 좋지 않다...
   멋쟁이 사자처럼 앱 스쿨 기록 중인 노션 페이지(1번 사진)에 비해 벨로그가 심플하지만 그만큼 가독성이 좋은지는 모르겠다.
   
3. 에디터의 미리보기에서는 적용이 되지만, 실제 포스팅에는 반영되지 않는 부분들이 있어서 (HTML 문법을 완벽하게 지원하지 않는 것 같음!)
   
   

🧑🏻‍⚖️ 땅땅!

Tistory, Github, Medium, 네이버 블로그 등 많은 고민 끝에 결정한 플랫폼은 GitHub이었다.

🤔 GitHub 블로그로 결정한 이유는?

Tistory와 GitHub 중에서 제일 많이 고민했었다. 이전에 42서울 라피신 과정에 참여하며 C언어 기초에 대한 부분을 공부하며 Tistory에 기록했던 적이 있는데 코드블럭에 Syntax Highlighting이 지원되지 않아 작성 후에 다시 코드를 볼 때 가독성이 떨어져 불편했다.
예전에 작성했던 아주 정신없는 티스토리 게시물... Syntax Highlighting의 중요성을 알아가는 시간이었다 ^^...

1. 예쁘게 만들 수 있고 (자유롭게 커스터마이징 가능)
2. 가독성이 좋으며, (카테고리 커스텀 가능, Syntax Highlighting을 지원)
3. HTML과 마크다운 문법이 모두 지원되기 때문에

다른 플랫폼보다 GitHub 블로그가 벨로그를 덜 사용하게 되었던 이유를 잘 해결해줄 수 있다고 생각했다.
그리고 내가 공부하고자 하는 '앱 개발'은 프론트엔드의 영역이기도 하기 때문이다.

🤔 흠...? 잠깐만요!

• 앱은 프론트엔드의 영역인가요? 백엔드의 영역인가요? 아니면 독자적인 영역인가요?
  프론트는 최종 사용자와의 접점이 있어야 하고, 백앤드는 그 이면에서 작동하는 프로세스로 생각할 수 있다. 하지만 대부분 앱 단위로 편하게 말할 때, iOS 앱은 프론트엔드, 서버는 모두 백엔드라는 식으로 구분짓는게 통상적인 업계 상황이라고 한다!

시간 될 때 블로그를 이리저리 만져보며 여러 시도를 해볼 예정! 👊

📖 GitHub 블로그 TIL 작성 시 필요한 준비물

• 공부할 내용
• 열정
• GitHub 블로그

근데… GitHub 블로그가 없네…?

👊 그래서!

GitHub 블로그를 만드는 과정을 기록으로 남기고 싶어서 작성하게 되었다.
만드는 과정 기록이 끝나면 이 기록들도 GitHub 블로그에 옮겨야지!

🎬 샘플 블로그 생성부터 해볼까요?!

1. Ruby 설치하기

🤔 흠...? 잠깐만요!

• Ruby를 왜 설치하나요?
  지킬(Jekyll)을 사용하기 위해서! 지킬이 루비로 만든 정적 웹사이트 생성기이기 때문!

• 정적 웹사이트는 뭔가요?
  Static websites는 한 웹사이트 주소에 접속한 모든 사람들에게 동일한 결과물을 보여주는 것!

• Jekyll이 뭔데요?
  마크다운(markdown) 파일을 사용하는 블로그 플랫폼!

• GitHub Pages와 지킬이 무슨 상관이에요?
  지킬만 사용하는 경우 로컬 컴퓨터에서 블로그 웹호스팅을 하게 되지만, 정적 웹사이트 호스팅 서비스 GitHub Pages를 이용하면 관리가 편함!

1. apt 명령어로 Ruby 설치!

$ sudo apt install ruby ruby-dev build-essential

🖥: 어...? 엥...? java가 없는디용?
😎: 우리에겐 Homebrew가 있지!

$ brew install ruby

2. .bashrc 파일에 루비 환경설정 추가, source 명령어로 업데이트!

$ echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
$ echo 'export GEM_HOME=$HOME/gems' >> ~/.bashrc
$ echo 'export PATH=$HOME/gems/bin:$PATH' >> ~/.bashrc
$ source ~/.bashrc

❗️ Ruby Install Success

2. Jekyll과 bundler 설치하기

gem 명령어를 사용하여 Jekyll과 bundler를 설치!

$ gem install jekyll bundler

❗️ Jekyll and bundler Install Success

🤔 흠...? 잠깐만요!

• gem이 뭔가요?
  분산 패키지 시스템으로 작성, 공개, 설치를 도와주는 시스템으로 리눅스의 apt 시스템과 유사하며, 루비는 gem을 사용하여 라이브러리 설치를 진행함!

3. 샘플 블로그 생성하기

👀: 갑자기요? 이렇게 빨리요?
😎: 지킬은 명령어 2개만 있으면 샘플 블로그 만들 수 있어요!

1. HelloBoMyBlog라는 이름의 홈페이지 생성!

$ jekyll new HelloBoMyBlog

2. 웹 사이트 호스팅!

$ cd HelloBoMyBlog
$ bundle exec jekyll serve

3. 주소창에 http://127.0.0.1:4000/ 입력!
🖥: 짜잔! 기본 블로그 화면 등장!

🤔 흠...? 잠깐만요!

• 127.0.0.1 ...? 저게 뭔가요? 저 주소로 다 접속되는 거 아니에요?
  127.0.0.1은 내 컴퓨터 주소를 의미! 위의 주소로 접속할 수 있는 컴퓨터는 내 컴퓨터(지킬을 구동하고 있는 컴퓨터)이다!

4. 다른 사용자도 접근하게 하려면?
지킬을 실행시킬 때 호스트 주소(테스트 컴퓨터의 ip주소)를 기재!

$ bundle exec jekyll serve -H 192.168.___.___

📱: 짜잔! 다른 유저한테도 기본 블로그 화면 등장!

🤔 흠...? 잠깐만요!

• 맥에서 ip주소 어떻게 봐요?
  🍎 > 시스템 환경설정 > 네트워크
  

🎬 Jekyll theme?!

1. Jekyll theme 선택하기

🤔 흠...? 잠깐만요!

• 지킬 테마가 뭐예요?
  지킬의 강력한 장점으로 다른 사용자들이 이미 만들어놓은 템플릿을 말함! 많은 테마가 무료로 공개되어 있으며, 유료로 판매하는 것도 있음

Jekyll theme 추천 사이트

• http://jekyllthemes.org/
• https://jekyll-themes.com/free/
• https://drjekyllthemes.github.io/new
• https://jekyllthemes.io/free
• http://themes.jekyllrc.org/
• https://jekyllthemes.dev/

나중을 위해 추천 사이트를 리스트업했지만... 블로그 따라하기 시리즈에서 추천해준 깔끔하고 간결한 템플릿, minimal-mistakes를 사용해 보고자 한다.

2. minimal-mistakes 다운로드

1. minimal-mistakes 접속 후, 녹색 Code 버튼을 눌러 주소를 복사 후 git repo를 clone!

$ git clone https://github.com/mmistakes/minimal-mistakes.git

remote: Enumerating objects: 18943, done.
remote: Total 18943 (delta 0), reused 0 (delta 0), pack-reused 18943
Receiving objects: 100% (18943/18943), 45.01 MiB | 6.37 MiB/s, done.
Resolving deltas: 100% (11262/11262), done.

2. 소스 다운로드 후, 다운로드한 폴더 안으로 이동(cd 폴더명)으로 이동하여 bundle 명령어 입력! Gemfile을 검사 후 필요한 목록들을 설치한다!

$ cd minimal-mistakes
$ bundle
Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 10.5.0
...
Bundle complete! 3 Gemfile dependencies, 40 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
$

3. 테마가 적용됐는지 확인!
🖥: 짜잔! minimal-mistakes theme 적용한 화면 등장!
😎: 나 좀 짱이다... 👍

일단 오늘은 테마 적용까지! 대략 4시간쯤 걸렸다...!
그 전까지 공부하게 되는 내용들은 벨로그에 업데이트할 예정! 😂
주말이 왜 이렇게 짧은 건지 모르겠지만 그만큼 시간을 알차게 썼다는 거겠지!!!

username.github.io 주소로 웹 호스팅하는 것부터는 다음에 하는 걸로!
남은 22주간 열심히 달리고 좋은 주니어 개발자 되어보자고~! 👊

🔗 참고자료

• mango 님의 '[Github] TIL 작성법'
• SW developer 님의 'GitHub Pages 블로그 따라하기 시리즈'

썸네일은 Banner Maker로 제작하였습니다.