Songzi Vong
YoungJin
공부한 내용을 기록하기 위한 공간

[Blog]첫 포스팅 과정(mac환경 블로그만들기)

~

intro

국비과정을 수료한 후 프로젝트 하는 중에 배웠던 개념들과 과정들을 기록하기 위해 기술블로그를 만들게 되었다.
이제 취업을 위해 기본 CS(Computer Science) 지식을 공부한 것을 기록하고 알고리즘도 꾸준히 문제를 푸는 과정들도 기록 할 예정이다.
블로그 생성 과정을 이 게시물에 적은 후 마크다운 문법들을 별도로 게시글을 작성할 예정임.

1. GitHub Repository 생성

레포등록사진

  1. 레포지토리 이름을 하단의 형식으로 작성한다. 
    1

    username.github.io
  2. Add a README file을 선택한 후 레포지토리 생성

2. Git clone 이후 테스트까지

  1. 생성한 레포지토리를 터미널 환경에서 git clone http주소형식으로 생성한 레포지토리 주소를 입력하여 로컬에 저장한다. 주소복사 
    1
2

    # 클론 예시
git clone https://github.com/parkyoungjiin/parkyoungjiin.github.io.git
  2. clone 한 폴더로 이동하여 테스트를 위해 Index 파일 생성(파일이 없는 경우 자동생성 된다.) 
    1
2

     cd username.github.io
 echo "Hello World" > index.html
  • cd : 디렉토리 이동 명령어 
    1

    cd 디렉토리명
  • echo: 문자열을 출력하는 명령어. echo "문자열" > 파일명.html 을 할 경우 덮어쓰기 옵션으로 인해 파일명에 문자열 내용이 저장된다. echo "문자열" >> 파일명.html의 경우는 추가
  1. 생성된 파일은 ls 명령어로 확인 할 수 있음. 
    1
2
3
4

     # 클론한 깃허브 폴더로 이동
 cd username.github.io
 # 디렉토리 목록 확인
 ls
  2. 파일이 올라갔을 경우 git에 올려주기 ! 위 명령어를 차례대로 입력해주면 깃허브에 올라간다. 
    1
2
3

      git add .
  git commit -m "메시지"
  git push origin main
  3. 주소에 http://username.github.io 를 입력하면 홈페이지가 만들어진 것을 확인할 수 있다.

3. ruby 설치

1
2

여기서부터 전쟁이였다.. 
ruby가 무엇이고 jekyll이 무엇인지 너무나 생소하여 정리해보려 한다.

ruby

  • ruby란 동적 객체 지향 스크립트 프로그래밍 언어이다.
  • 스크립트 언어란, 기존에 이미 존재하는 소프트웨어를 제어하기 위한 용도로 쓰이는 언어이다.(javascript, Python이 있다.)
  • 여기서는 jekyll이 Ruby 언어로 만들어졌기에 설치한다 정도로 알면 될것 같다.

ruby 설치과정

여기서 homebrew를 통해 ruby를 설치했다.

1
2
3
4
5
6
7
8
9

# homebrew 설치
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 루비 설치
brew install ruby

# 루비 경로설정(zsh)
echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc

rbenv

rbenv는 루비버전을 관리해주는 프로그램.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# rbenv 설치
brew install rbenv

# rbenv 설정(zsh)
echo [[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)" >> ~/.zshrc

# 쉘 환경에 rbenv 연동되도록 설정
rbenv init

# 해당 명령어를 통해 설치가능한 ruby 버전 확인
rbenv install -l

# 루비 설치(최신 버전으로 진행했음.)
rbenv install 3.2.1

# 전역에서 사용할 ruby 버전을 지정
rbenv global 3.2.1

# ruby, rbenv 버전 확인
ruby -v
rbenv versions

# rehash
rbenv rehash

4. jekyll과 bundler 설치

Bundler

요약하자면, 여러 개의 파일을 하나로 묶어주는 프로그램이다. 번들러 설명은 여기!

jekyll

  • ruby 언어로 구성
  • 깃허브 블로그 작성 시에 많이 사용함.
  • 마크다운 언어로 작성한 글을 포스팅
  • 정적인 웹사이트로 만들기에 매우 빠르고 가볍다는 특징이 있음.
  • 홈페이지 자동 생성기라고 많이 알려짐.

설치

1
2
3
4
5
6
7
8
9
10

# bundler, jekyll 설치

gem install bundler
gem install jekyll

# 다운로드 후 기존 index.html 파일을 삭제
rm -f index.html

# git clone 한 폴더에서 jekyll 생성
jekyll new ./

jekyll 설치 완료 화면

성공1

디렉토리 조회 시

성공12

사진 넣을 공간(성공 시) 2개

설치 후

1
2
3
4
5
6

# 번들 업데이트, 설치
bundle update
bundle install

# jekyll 서버시작 후 테스트
bundle exec jekyll serve

서버 시작 후 성공했을 때의 화면이 나타나고 성공2

http://127.0.0.1:4000/ 를 들어갔을 때 홈페이지에 올라 간것을 확인할 수 있다. 성공3

테스트 완료 후

이제 깃에 최신화한 뒤 username.github.io 를 입력하여 자신의 깃허브 블로그 홈페이지에서 작동이 잘 되는 지 확인하면 된다!

후기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

블로그를 만들고, 포스팅까지 5일이 걸렸다.
그 과정에서 좌절하고 이것에 시간을 쏟는 게 맞는지 생각이 들었다.

실패하면서 정말 스트레스를 받았지만, 여유를 가져야 한다는 것을 배웠다.
실패하면서 조급해 할 수록 더욱 안된다는 것을 느꼈고
조금은 여유를 가지고 포기하지 않고 끝까지 해야 한다는 것을 다시 느꼈다.

마크다운 언어에 적응이 필요할 것 같고 생각보다는 단순하다.
그리고 블로그 포스팅에 숙달되기 위해서는 미리 사진은 캡쳐를 해둬야 할 것 같다.

이제 알고리즘 문제 풀이, 프로젝트 했던 작업들을 올릴 것이며
면접을 대비하여 CS 지식도 같이 공부하면서 기록할 생각이다.

생각보다 어려운 포스팅이였고, 
도전 했던것을 포기하지 않고 끝까지 해내서 다행이라 생각한다.

참고사이트

https://supermemi.tistory.com/145
https://zeddios.tistory.com/1222
https://ansohxxn.github.io/blog/i-made-my-blog/#3-ruby-%EC%84%A4%EC%B9%98
https://hoons-up.tistory.com/3

목차