GitHub 타임라인형 게시판 배포 [후기]

rakaso Timeline

rakaso Feed

 

---

 

깃허브에는 `유저명.github.io` 리포지토리를 통해 정적 웹페이지를 배포하는 기능이 있습니다.

 

이번에 유저명 저장소를 업데이트 한 겸, 후기를 작성합니다.

 

rakaso Timeline (PC화면)

 

HTML로 전체적인 구조를 정의하고 `/` 루트 위치에 배치했습니다.

`/images` 에는 이미지가 들어가도록,

그리고 `/items`에는 게시물을 담당하는 데이터를 넣었습니다.

 

`/items/items.json` 파일은 게시물의 데이터를 표현합니다.

 

rakaso598.github.io/item/items.json

 

이렇게요!

 

json은 문자열 데이터 포맷이기때문에 문자열을 구조화하여 저장하는 것이 가능합니다.

가장 큰 틀을 대괄호로 감싸고 중괄호로 게시물을 구분하게 했습니다.

 

중괄호 `{}`안에는 키와 값으로 구분되도록 데이터를 정리하면 됩니다.

 

    [
        {
            "id": 4,
            "author": "rakaso598",
            "profile_image": "/images/profile1.jpg",
            "content": "제 블로그도 방문해주시겠어요? ✨ 👉 <a href='https://rexondex.tistory.com/' target='__blank'>바로가기</a>",
            "image": "/images/post3.png",
            "timestamp": "2025-01-26 21:35"
        }
    ]

 

가장 최근 게시물 구조는 이렇게 생겼습니다.

 

`게시물 id, 작성자, 프로필 이미지의 경로, 게시물 내용, 게시물 이미지, 타임스탬프`

를 직접 정의할 수 있습니다.

 

제 경우는 자동화되어있진 않아서 `/images`에 직접 이미지를 저장한 후,

`/items/items.json`을 직접 수정하는 방식으로 게시물을 작성하고 있습니다.

 

json 파일은 내용을 구분하기도 쉽고 사람이 읽기에도 가독성이 좋아서

`items.json`을 열어 간단하게 텍스트를 작성하면 바로 게시물이 작성된다는 점은

직관적이며 편리한 것 같습니다!

 

모바일로 접속했을 때 화면

 

최대한 깔끔하고 단순하게, 가독성이 좋아보이도록 했습니다.

그리고 이번 배포에선 최대한 경로를 간결하게 만드는 걸 목표로 삼았습니다.

 

깃허브 블로그 배포하는 방법 중에 Jeykll(지킬) 이라는 도구가 있습니다.

오픈소스 정적 웹사이트 생성기라고 설명되어 있는데요.

 

다른사람들이 만든 테마를 적용하는 것도 가능하고,

깃허브에서 포크를 통해 저장소를 가져와 편리하게 배포할 수도 있습니다.

 

편하게 미리 디자인된 테마를 적용하고, 블로그를 업데이트 할 수 있다는 점은 좋았으나

단점으로는, 테마 제작자마다 블로그 구성 방법이 다르기때문에

게시물을 작성하기 위해 정해진 파일을 직접 수정해줘야한다는 점.

 

또 업데이트가 멈춰 제대로 동작하지 않는 테마도 있으며,

섬세하게 구성되어 있는 테마의 경우, 건드렸을 때 문제가 생기면 복구하는게 힘들었습니다.

 

그럼에도 미리 디자인된 테마와 빠른 배포를 생각한다면 매우 좋은 기능이라고 생각합니다.

 

다만, 제 경우 경로가 복잡하게 보이기 시작하면 블로그를 작성하기 힘들어질 때가 많았습니다.

그리고 잔오류로 게시물 하나 작성하는데 외부요인을 정리하느라 시간을 더 많이 할애한 적도 있습니다.

 

그래서 이번 배포에서는, 최대한 간단하면서 유지보수가 쉬운 방법을 생각하며 HTML로 만들어봤습니다.

 

이번 배포 게시판의 구조

 

루트에 `index.html`을 두고, 이미지와 아이템 2가지 디렉토리로만 구성했습니다.

 

게시물을 작성하기 위해서는

`items.json`을 열어 중괄호 안에 데이터를 입력하기만 하면 됩니다.

 

이미지를 추가하려면 이미지 디렉토리에 이미지를 추가시킨 후,

`items.json`에 이미지 파일의 경로와 파일명만 추가시키면 자동으로 적용 배포됩니다.

 

---

 

제 계정을 도메인으로 하는 기본 웹페이지인 만큼,

최대한 간단하며, 소식 위주로, 그리고 날짜와 사진, 텍스트와 같은 기본적인 요소들을 통해

로딩이 빠르고, 접근이 쉬우며, 하이퍼링크를 활용해

바로바로 새 페이지를 띄울 수 있도록 구성했습니다.

 

타임라인형 게시판, 또는 피드형 게시판의 아이디어를 떠올리고 나서,

제 요구사항에 맞게 간단한 수정을 거친 결과,

 

의도했던 정적 웹페이지를 성공적으로 구성할 수 있었습니다.