태그, 네비게이션 바, 푸터 등이 포함됩니다.index.hbs블로그의 홈 페이지를 담당합니다.최신 포스트 목록을 렌더링.post.hbs단일 포스트를 렌더링하는 템플릿입니다.제목, 본문, 메타데이터 등을 표시.page.hbs블로그의 개별 페이지(예: "About" 페이지)를 처리.partials/재사용 가능한 템플릿 조각(Partial)을 저장하는 폴더입니다.예: 네비게이션 메뉴(navigation.hbs), 헤더(header.hbs).3. 독특한 파일 확장자: .hbs.hbs는 핸들바 템플릿 파일의 확장자입니다.이 파일은 템플릿에 변수와 조건문, 반복문 등을 삽입하여 동적인 HTML을 생성합니다.4. CSS 및 JavaScript 통합고스트는 프론트엔드에서 스타일링과 스크립트를 통합하기 위해 일반적인 웹 기술을 사용합니다:CSS/SCSS: assets/css/ 폴더에 저장.xxJavaScript: assets/js/ 폴더에 저장.코드 삽입: 고스트의 Code Injection 기능을 통해 추가적인 CSS와 JavaScript 삽입 가능.5.
테마 커스터마이징 과정고스트의 프론트엔드 구조는 비교적 간단하여 쉽게 수정 가능합니다:원하는 템플릿 파일(.hbs)을 열고 수정.partials/ 폴더를 활용하여 공통 요소를 재사용.수정 후 테마를 다시 활성화하거나 ghost restart로 서버를 재시작.그렇다고 합니다. 이런 구조를 가지고 있어서... default, post, page 등 원하는 파일에 수정을 통해루틴하게 노출되는 영역을 구미에 맞게 수정해서 사용할 수 있습니다. 테마까지 기본적인 형태를 갖추고,세부적인 기능들을 손을 더 봐야합니다. 포스팅 마이그레이션 기존 네이버 블로그 글을 옮겨올 수 있는 방법을 찾아봤습니다.
물론 수작업으로 하나씩 글을 옮길수도 있지만, 이미 써놓은 글이 많으면 하나하나 옮기는 것도 일이니까요. 일단 고스트에서는 API integration 기능을 지원합니다. /ghost/#/settings/integrations 에서add custom integration을 통해서 API key 를 발급 받을 수 있고요. 해당 API를 통해 게시글의 CRUD(Create, Read, Update, Delete) 조작이 가능합니다. 관련해서는 ghost api 관련 공식 도큐먼트 참고하시면 됩니다. https://ghost.org/docs/admin-api/Ghost Admin API DocumentationManage content via Ghost's Admin API, with secure role-based authentication. Read more on Ghost Docs 👉ghost.org 이제 API를 통해 글 작성은 가능하게 되었으니, 기존 블로그의 글을 가져와서, 등록만 하면 됩니다. 기존 블로그 글주소를 불러오는게 문제인데, 고유주소가 패턴이 없다보니 하나하나 입력해야 하는 수고스러움이 필요한데요.
꿀팁을 찾은것이 바로... https://blog.naver.com/PostList.naver?blogId=블로그아이디¤tPage=숫자 이 형식의 주소인데요. 숫자 부분에 1부터 원하는 숫자를 입력하면, 최신글 순으로 접근이 가능합니다. 그럼 이제 숫자만 바꾸면 여러개의 글을 가져올 수 있게 되는것이죠. 코드도 공유해봅니다. 게시글을 마이그레이션 하는 부분은 관심있으신 분들이 있을듯해서 나중에 조금 더 자세히 설명드리면 좋을거 같고요. 지도 삽입하기 포스팅 하단에 지도가 항상 노출되도록 하려면앞서 언급했던 post.hbs 파일을 수정해야 합니다. 지도 삽입은 네이버의 경우에는 네이버 디벨로퍼스에서 api key를 발급받아서 사용해야 하고요.요런 내용의 글들 참고하시면 됩니다. https://jisoo-log.tistory.com/12[html] 웹페이지에 네이버 지도 넣기 (NAVER Map API)최근 만드는 개인 웹페이지에 네이버 지도를 넣게 되었다. 웹페이지에 지도가 들어가 있는건 너무 흔해서, html 복붙만 하면 뿅 하고 끝날거라고 예상했다.
하지만 찾아보다보니 구글/카카오와 jisoo-log.tistory.com https://developers.naver.com/main/NAVER Developers네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음developers.naver.com 일단은 번거로워서, API 설정이 필요없는 구글맵 삽입 방식을 채택했습니다. https://help.campaignus.me/article/414-googlemap페이지에 구글 지도 삽입하기 (API 설정 불필요) - 캠페이너스 도움말 센터페이지에 구글 지도 삽입하기 (API 설정 불필요) 페이지에 단일 지도 위젯에서 구글 지도를 사용하려면, 앞서 구글 지도 API 설정을 마쳐야 합니다. 이 방법은 설정과정이 다소 번거롭지만, 한 번 help.campaignus.me 검색노출을 위한 웹마스터도구 등록하기 아무리 외부 독립형 웹사이트라고 하더라고, 트래픽이 발생하려면 검색노출이 어느 정도는 되어야겠죠.
웹사이트의 경우, 검색엔진에 반영되게끔 하기 위해 웹마스터도구를 통해 직접 웹사이트를 등록해야 합니다.구글과 네이버 각각 등록해야 합니다. 아래 글 참고해주세요. https://imweb.me/faq?&mode=view&category=29&category2=35&idx=72135구글 검색결과에 내 사이트 노출하기 (Google Search Console)구글 검색 결과에 내 사이트를 노출하고 싶다면 Google Search Console에 내 사이트를 등록해 보세요!참고: Google Search Console에 내 사이트를 등록imweb.mehttps://imweb.me/faq?mode=view&category=29&category2=35&idx=72134네이버 검색결과에 내 사이트 노출하기 (네이버 웹마스터 도구)네이버 검색 결과에 내 사이트를 노출하고 싶다면 네이버 웹마스터 도구에 내 사이트를 등록해 보세요!참고: 네이버 웹마스터 도구에 내 사이트를 등록하더라도 네이버 검색 결과에 내 사imweb.me 구글 애널리틱스 등록하기 방문통계를 확인하는 애널리틱스도 등록합니다.등록 방법은 아래 글 참고하시면 되고요. https://dbcart.net/postinggoogleanalytics.html쉽고 빠른 디비수집 - 디비카트간편한 랜딩페이지 생성으로 쉬운 디비 수집,수집된 디비를 안전하고 빠르게 관리,디비수집,랜딩사이트,랜딩구성,최적화된 디비수집,간단한 입력박스,랜딩페이지 제작,마이크로사이트,마이크dbcart.net 태그 기능 - 카테고리 구분 고스트에서는 네이버 블로그처럼 게시판 카테고리 구분 기능은 제공하지 않아서, 개별적으로 태그를 활용해 카테고리를 만들어 사용할 수 있습니다. 태그단위로 볼수 있는 주소를 제공을 하고 있고, 페이지별로 꾸밀수도 있게 되어있어상단 네비게이션 메뉴 등과 적절하게 활용하면 좋을것 같습니다.
그 외 조금 더 헤맸던 기능 관련해서도 언급을 해보면요. 회원가입 기능 오류 이슈 고스트에서는 회원 등급을 설정할 수 있고, 회원 등급에 따라 게시글 조회 권한도 달라질 수 있습니다.해서, 치료 후기 같이 회원 가입 이후에 볼 수 있는 내용들을 아카이빙 할 수 있다는 장점도 있습니다. 근데 회원가입을 받는 기능을 구현하는게 좀 생소했는데요.일단 기능 자체는 설치 하자마자 들어가있지만, 실제 회원을 받으려면 관리자의 이메일 설정이 필요했습니다.(이걸 알아내는게 시간이 좀 걸렸습니다.) 고스트 서버에 접근해서, config.production.json 파일에 SMTP 설정을 해야 한다.이렇게 이해하시면 되고요. 방법이 크게 어려운건 아니지만, 일단 모르면 헤매는 부분이라 추가로 말씀 드려봅니다. 이미지 로딩 오류 이슈 이 부분은 처음에는 이유를 몰라서 헤맨 부분인데요. 초기 고스트의 설정이 https가 아니라 http로 되어있다보니 이미지가 제대로 로딩이 안되는 이슈가 있었습니다. 이 부분도 위와 마찬가지로 config.production.json 의 기본 설정을 변경하는 이슈였고요.
이렇게 하면 이미지도 정상적으로 보여지게 됩니다. 네... 여기까지가 제가 고스트라는 오픈소스를 통해서 직접 블로그를 설치해본 후기이고요. 아마 관심 없으신 분들이 더 많으시겠지만... 직접 해보고 싶으신 분들도 계실듯 하여작업에 참고하실 수 있도록 정리를 해봤습니다. 긴 글