ghost Featured

고스트(Ghost) 개인 블로그 설정 팁

고스트(Ghost.org) 플랫폼으로 블로그 만들기 및 목차 추가, 한글 폰트, 이미지 사이즈, 자바스크립트로 기능 추가하기

Van Dekr

Aug 16, 2022 • 7 min read

손으로 매번 테마를 수정하기도 힘들고, 워드프레스는 너무 더 힘들고, 티스토리는 제약이 많고, 네이버는 음 너무 장벽이 높고, Ghost.org 고스트 플랫폼으로 블로깅을 한 번 해보자. 글쓰기에는 최적으로 되어 있다고 하니 medium.com 처럼 사용할 수 있는 환경이긴 하네.

티스토리에 적은 글들을 하나씩 옮겨 와 둘까 생각중..

💡

한글 폰트가 보기 싫어서 일단 폰트 변경 내용만 정리

Ghost.org 에서 사이트 생성

그냥 설명이 필요없다. 그냥 원하는 대로 넣으면 된다. 이름만 정하면 나머지는 그냥 기본 값으로 하며 된다. 테마도 그냥 젤 처음 나오는 거로 단, 카드 번호 넣을 때 약간 찝찝했지만... :)

도메인이 있으면 쉽게 붙일 수도 있다. tech.kblck.com 으로 연동 시켜두고, 연동법은 어렵지 않다. 그냥 CNAME만 추가하면 될 듯

CNAME www <subdomain>.ghost.io

여기 페이지에 자세히 나와 있다.

Using custom domains with your Ghost(Pro) publication - Tutorial

Map any domain you own directly to your Ghost(Pro) publication and make your site more memorable!

Ghost Help CenterSarah Frantz

한글 폰트 적용하기

Admin에서 Code injection 의 헤더 부분에 아래와 같이 복사하세요. 사용한 폰트는 pretendard 한글 폰트 입니다. 폰트 다운로드는 여기를 방문해요

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard.css" />
<style>
body,  
h1, h2, h3, h4, h5, h6,  
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer,{
	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;    
}
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;    
</style>

참고한 사이트

A link 새 창 띄우기

코드 추가에 가서 bottom 쪽에 아래 코드를 넣으면, 외부 사이트 접속시에 새창으로 접속이 된다. 즉, target="_blank" 를 추가해주는 코드라고 할까 :)

<script>
// from https://github.com/gernotstarke/minimal-mistakes/blob/master/assets/js/mod_outer_links.js
$(function () {
  // add `target="_blank"` to outgoing links.
  var host = document.location.host;
  $("a[href]").each(function () {
    var re = new RegExp(host, "g");
    if ($(this).attr("href").match(/\/\//) && !$(this).attr("href").match(re)) {
      $(this).attr("target", "_blank");
      $(this).attr("rel", "noopener noreferrer");
    }
  });
});
</script>

Ghost.org 테마에서 그림 크기 조정

Code Injection 대부분을 해결해야 되네 쩝 암튼 해결이 되네요

마우스 우클릭, 복사 방지 하기

아래 자바 스크립트 코드를 code injection 부분에 추가하면 된다.

<script>
    window.oncontextmenu = function () {
        return false;
    }
    /* 복사 방지, 개발자 도구 방지 from https://twoicefish-secu.tistory.com/277 */
    $(document).keydown(function(event) {
        if (event.keyCode == 123) { // Prevent F12
            return false;
        } else if ((event.ctrlKey && event.shiftKey && event.keyCode == 73) || (event.ctrlKey && event.shiftKey && event.keyCode == 74)) {
//        } else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) { // Prevent Ctrl+Shift+I        
            return false;
        } else if (event.ctrlKey &&
                   (event.keyCode === 67 ||
                    event.keyCode === 86 ||
                    event.keyCode === 85 ||
                    event.keyCode === 117)) {
            return false;
        }
    });    
</script>

글 너비 키우기

글 너비가 너무 좁아서, 요즘 모니터도 다들 크신데 좀 키우고 싶다. 테마를 손 볼 수 없으니 또 code injection에서 그냥 override 해보자.

720px -> 1000px 로 변경, 약간 넓어짐

.gh-canvas {
    display: grid;
    grid-template-columns: [full-start]minmax(max(4vmin,20px),auto) [wide-start] minmax(auto,240px) [main-start] min(1000px,calc(100% - max(8vmin, 40px))) [main-end] minmax(auto,240px) [wide-end] minmax(max(4vmin,20px),auto) [full-end];
}
.article-excerpt {
    max-width: 1000px;
}

코드 블럭 syntax highlighting 적용

설명서는 여기를 참고 - Add Prism via Code Injection

Site Header에 코드 추가하기

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Site Footer에 코드 추가하기

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

짠!! 결과는 아래와 같이 잘 나온다 👍