깃허브 페이지(github page)는 tibyte.github.io와 같은 github.io 주소로 접속하였을 때 HTTPS를 지원하지만 커스텀 도메인을 설정하였을 경우 그림 1과 같이 지원되지 않는 것을 볼 수 있다.

그림 1. 커스텀 도메인 설정한 깃허브 페이지를 접속하였을 때의 주소창



 커스텀 도메인을 연결한 깃허브 페이지에 SSL(Secure Sockets Layer)을 설정하기 위해서는 먼저 SSL 인증서를 발급받아 설치해야 하는데, Cloudflare의 네임서버를 사용하면 이 과정을 간단하게 할 수 있다.

 Cloudflare의 Add Website 페이지에서 도메인을 등록하면 DNS 레코드들을 자동으로 불러온다. 목록을 확인한다.


그림 2. DNS 레코드 설정화면



 DNS 레코드를 확인 후 설정을 저장하고, 소유하고 있는 도메인의 관리 페이지(도메인 등록 대행업체)로 들어가서 네임서버를 Cloudflare에서 안내한 주소로 연결한다.


그림 3. 네임서버 설정



 도메인 네임서버 주소 변경은 전파되는 데 수 분에서 수 일까지 걸릴 수 있다. 정상적으로 전파되었다면, Cloudflare의 Crypto 메뉴에서 SSL 사용여부를 선택할 수 있다. 여기서 옵션이 있는데 github 페이지는 HTTPS를 지원하므로 권장방식인 Full SSL을 선택한다.

그림 4. SSL 설정


 설정을 완료하고, https:// 를 명시한 커스텀 도메인을 사용하여 github 페이지를 접속해 보면 HTTPS가 적용된 것을 볼 수 있다. CA는 COMODO사의 것으로 나온다.

       

그림 5. 커스텀 도메인 설정한 깃허브 페이지를 접속하였을 때의 주소창


 

  주소창에 https://를 입력하지 않고 접속하였을 경우엔 이전과 같이 HTTPS가 미적용된 페이지가 나오는데, 코드상에서 리다이렉팅을 시키면 되지만 Page Rule을 적용하여도 이 효과를 볼 수 있다.

그림 6. HTTPS 강제 리다이렉트 설정







01.

github 저장소에서 임의의 gh-pages브랜치로 페이지를 만들어서 도메인을 연결할 수 있다.

그런데 루트도메인이 다른 사이트를 가리키고 있는 상태에서 서브도메인만 github 저장소의 페이지에 연결하고 싶은데 검색이 잘 되지 않아서 이 포스트를 작성하게 되었다.






02.

1. 먼저 임의의 github 저장소의 브랜치를 만든다. 브랜치 이름은 gh-pages로 해야 한다.


2. gh-pahes 브랜치에 이름이 CNAME인 파일을 만들고 그 안에 연결할 서브도메인을 적는다. 현재 github은 저장소 당 한 개의 도메인 연결을 지원하고 있다. ex) sub.yourdomain.com


3. 보유하고 있는 도메인의 DNS레코드 설정으로 들어가서 A 레코드에 github에서 고지한 IP주소를 적는다. 이 글 작성시점에서는 192.30.252.153이지만 나중에 바뀔수도 있다. 서브도메인명은 중복되지 않게 아무거나 적는다. 여기서는 테스트를 위해 test로 적어보았다.


4. CNAME레코드의 서브도메인명은 2번에서 적은 서브도메인(sub)을, URL주소에는 3번에서 정한 이름(test.yourdomain.com)을 적는다.


5. 저장하고 DNS변경내역 전파시간만큼 기다리면 루트도메인에 관계없이 해당 서브도메인으로 저장소 페이지에 접근할 수 있다. 이 때, gh-pages 브랜치에 index.html파일이 있어야 한다.





VPN(Virtual Private Network : 가상 사설망)접속을 이용하면

외부 네트워크에서도 마치 내부망에서 접속하는 것처럼 사설망을 구성할 수 있다.


외부망에서 기존에 연결되어 있던 네트워크 회선 위에서 VPN연결을 하는 것으로

인터넷이 끊겨 있으면 이용할 수 없으며 모바일기기에서 3G/4G접속 시

통신사 데이터요금 없이 인터넷을 이용할 수 있는 것이 아니다.


VPN의 목적으로는 여러가지가 있지만..

비교적 적은 비용으로 외부에서 사설망에 접근할 수 있는 일종의 터널을 만드는 데에 쓰이거나

아니면 A, B, C가 있다고 할 때, A에서 C로의 접근은 차단되어 있으나 B에서 C로는 접속할 수 있고,

B에 VPN서버가 열려있고 A가 권한이 있다면, A에서 B를 거쳐 C로 접속할 수도 있다.



윈도우7(Windows7)이상에서는 자체적으로 VPN 서버를 여는 기능이 있는데

공유기 기종이나 네트워크 연결상황에 따라 안 될 수도 있다.

(공유기에서 직접 VPN서버를 열 수 있는 것도 있습니다)



1. 제어판에서 '네트워크 및 공유센터'로 들어가 '어댑터 설정 변경'을 누른다.






2. Alt키를 눌러서 메뉴를 연 뒤 '파일 - 새로 들어오는 연결'을 누른다





3. '사용자 추가'를 눌러서 계정을 만든다.

  여기서 '사용자 이름'과 '암호'는 VPN접속을 할 때 ID와 비밀번호가 되므로 잘 정해둬야 한다.





4. 체크한 뒤 다음버튼을 누른다.






5. Internet Protocol Version 4 (TCP/IPv4) 를 선택한 뒤 속성을 눌러서 IP주소를 할당한다.

  IP주소의 시작과 끝에 각각

10.1.0.1 , 10.1.0.10 이나,

192.168.5.1 , 192.168.5.10 등

현재 네트워크와 충돌하지 않는 사설IP 대역을 정해주면 된다.


하지만 VPN접속측에서 VPN서버측을 통해 인터넷으로 나가려고 할 때

VPN서버측에 공유기(DHCP서버)가 있다면 공유기의 서브넷과 맞춰줘야한다.

가령 공유기 DHCP서버의 서브넷마스크가 255.255.255.0이고  192.168.50.100 ~ 192.168.50.200 대역의 IP를 할당한다면, VPN IP주소 할당은 192.168.50.201 ~ 192.168.50.210 로 하는 것이다.

(서브넷은 같게, 공유기의 DHCP할당대역과는 다르게)






6. 위 5번에서 설정이 다 끝났으면 '엑세스 허용'을 눌러 완료한다.

  그러면 '들어오는 연결'이라는 항목이 생겨 있는데 연결을 암호화하려면 '모든 사용자의 암호 및 데이터 보안 필요'에 체크한다.






7. 공유기가 있을 경우

  1723번 포트와 47번 포트를 각각 포트포워딩해야 한다.

  그리고 공유기의 PPTP기능을 활성화시켜준다.

  공유기에 따라서 VPN관련 설정을 따로 하는 부분이 있을 수 있다.

 

포트포워딩 시 IP주소로는 VPN서버를 여는 컴퓨터의 사설IP를 입력한다.

(시작 - 맨아래 프로그램 및 파일 검색 - cmd - cmd.exe실행 후 ipconfig 명령어 입력하면 사설 IP를 볼 수 있습니다.)






8. 이제 외부 네트워크에서 접속하는 것을 테스트해 보는데

  모바일기기의 3G/LTE를 이용하면 쉽게 할 수 있어서 그걸로..


 기기마다 다 다르지만 보통 네트워크 설정하는 메뉴에서 VPN연결을 찾아볼 수 있다.








9. 외부망에서 접속하는  테스트를 위해 와이파이 대신 3G나 LTE로 연결한다.

 이름 입력란에는 이 설정의 이름을 알아볼 수 있게 적어두는 것으로 위 3번 그림에서 입력한 이름과는 관련없다.


서버주소는 VPN서버를 연 쪽의 공인IP를 적어야하는데,

그쪽 컴퓨터에서 http://ipconfig.co 등의 사이트에 접속해보면 알 수 있다.


PPP암호화는 위 6번에서 암호화에 체크를 했으면 여기서도 체크한다.




10. 설정이 끝났으면 3G/LTE상태인것을 확인하고

위 3번에서 설정했던 사용자이름과 비밀번호를 입력한다.



연결 성공시 화면





VPN서버가 있는 컴퓨터쪽에서도 연결이 들어온 것을 확인할 수 있다.





이제 모바일기기에서 공인IP주소를 확인해보면

서버쪽 IP를 통해 인터넷으로 나간다는 것을 볼 수 있다.





  1. ㅇㅇ 2014.04.14 00:03

    정말 유용할것 같네요.

  2. dd 2014.08.06 15:51

    혹시 VPN라우터가 꼭 필요한가요? 설정까지마쳤지만 안되네요...

    • BlogIcon 티바이트 2014.08.07 00:03

      저는 자체에서 VPN을 지원하는 공유기가 없어서 지원안되는걸로 했었어요. 대신 이 포스트처럼 컴퓨터 윈도 OS에서 VPN서버를 열였구요(컴퓨터를 켜놓을 때만 접속할 수 있었던..) 그리고 1723번 포트와 47번 포트만 제대로 포트포워딩 되는것이 관건인 것 같습니다. 공유기 종류에 따라 이 포트들이 막히거나 하는건지는 정확히 모르겠습니다..

  3. 2014.08.11 00:31

    설정까지 다마쳤는데 연결이 안돼요ㅜㅜ

    • BlogIcon 티바이트 2014.08.19 14:36 신고

      공유기 기종에 따라 안 될 수도 있습니다..ㅜㅠ
      공유기 자체에서 vpn서버기능을 지원하는 게 가장 좋

  4. 2014.08.11 21:01

    공유기가 어느정도의IP를 할당하는지 어떻게 아나요?

  5. ㅋㅋ 2015.01.29 17:23

    pptp가 없으면 어떻게하죠?

    • BlogIcon 티바이트 2015.01.31 01:49 신고

      공유기를 통하여 인터넷이 PC로 연결되어있을 경우 공유기에서 pptp를 지원해야 윈도우로 vpn서버를 열 수 있습니다.
      이 기능이 없다면 다른 방법으로 vpn서버를 여는 것(공유기 자체에서 지원하는 vpn기능 등)을 찾아보세요

  6. ㅋㅋ 2015.01.29 17:23

    pptp가 없으면 어떻게하죠?

  7. 반갑습니다. 2015.07.14 22:25

    연결까진 정삭적으로 됩니다..
    그러나 연결 성공시 네트워크 아이콘이 연결끊김인 상태로 나옵니다..
    인터넷 연결은 문제 없는데 말이죠.. 아이콘을 연결 상태로 바꿀 수 있을지요.

  8. 공돌이 2016.10.12 12:57

    공유기가 없어도 사용가능한가요

    • BlogIcon 티바이트 2016.10.14 01:04 신고

      외부에서 사설IP가 할당되어 들어온다거나 하면 안될수도 있습니다.

  9. Clock 2016.11.27 22:13

    연결을 만들 수 없습니다.
    들어오는 연결이 시작할 수 없는 라우팅 및 원격 엑세스 서비스에 의존합니다. 자세한 내용은 시스템 이벤트 로그를 참조하십시오.
    이게 무슨 오류인가요? 저는 DMZ쓰고있는데 포트포워딩만 되는건가요?

    • BlogIcon 티바이트 2016.11.27 23:01 신고

      공유기에서 관련기능을 지원해야하지만, 그런것과는 상관 없는 오류인 것 같고 IP설정 문제인 것 같은데 질문자님이 어떤상황인지 자세히 모르겠습니다.. 어떤단계에서 오류가 발생하시나요?

  10. 도움이필요해요 2016.12.16 14:45

    안녕하세요 . 해외 게임 이용을위해 유료 VPN 을 알아보던중 공유기 설정으로 구축할수 있단느걸 알게 되었는데요 .

    • BlogIcon 티바이트 2016.12.16 18:29 신고

      자신의 공유기나 PC를 VPN서버로 사용할 경우 똑같이 국내접속이기 때문에 해외게임을 이용할 수 없습니다.

  11. 도와줘요 2019.02.14 17:31

    공유기가 없는 네트워크 환경에서 접속되게 서버를 구축했는데 cmd창에서는 아이피가 변경되어 있지만 웹에서 내아이피를 확인할때 기존의 아이피로 남아 있습니다. 사용자쪽에 아이피가 제공하는쪽의 아이피로 바뀌지가 않고 그대로 있을때 어떻게 해결하는 방법이 있나요?


웹페이지에 소스코드를 올릴 때 그냥 붙여넣으면 모두 같은 색으로 나와서 읽기가 어렵다.

이럴 때 SyntaxHighlighter는 코드의 키워드나 명령문, 주석 등에 색을 입혀서 가독성을 높여준다.



(▼ 코드가 색칠된 모습을 볼 수 있다.)




 SyntaxHighlighter를 블로그에 적용하면 게시물을 쓸 때

간단한 태그로 쉽게 코드에 색을 입힐 수 있다.


먼저 http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서 최신 버전의 파일을 내려받는다.

scripts 폴더를 보면 각종 프로그래밍 언어들의 Brush 파일들이 있는데

shAutoloader, shCore, shLegacy파일은 필수적으로 업로드하고, 추가로 자신이 쓸 언어들을 더 올린다.

여기서는 AS3, Cpp, Java, JS, Php, Xml 파일을 선택했다.





그 다음 스타일시트 파일을 올리는데, shCore.css 파일은 기본적으로 올려야 하고

기본 스타일로 하려면 shCoreDefault, shThemeDefault 파일을 선택한다.

하이라이터가 다른 모양으로 나타나게 하려면 그 테마의 스타일시트 파일을 올려야 한다.

테마가 적용된 모습은 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 여기서 볼 수 있다. 




필요한 파일을 다 올렸으면 메인 스킨의 html파일로 들어가서

head태그 안에 아래와 같은 코드를 추가해야 한다.

<link rel="stylesheet" type="text/css" href="./images/shCore.css" />
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css" />
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

코드를 보면 아까 업로드한 css파일과 js파일들의 경로를 볼 수 있다. (티스토리는 리소스 파일들이 images폴더에 저장되어 저런 경로를 써주어야한다.)

테마나 다른 언어를 추가하고자 할 땐 이것도 추가해야 한다.

그리고 마지막으로는 SyntaxHilighter.all();함수를 호출한다.


 


이제 블로그 게시글을 쓸 때 하이라이터를 쓸 수 있는데,

<pre class="brush:언어의 명칭(alias)">

코드

</pre>

HTML 모드로 들어가서 위와 같이 적어주면 된다.


예를 들어 C++언어를 쓰려고 한다면

<pre class="brush:cpp">

코드

</pre>

로 적어주면 되는것이다.


나머지 언어들의 alias들은 여기서 확인할 수 있다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/





한가지 중요한 주의점이 있는데

코드에 < 문자가 들어가면 코드가 깨지고 하이라이팅도 정상적으로 되지 않으므로

<문자가 있으면 모두 &lt; 로 바꿔야 한다.

찾아바꾸기를 지원하는 텍스트 에디터를 쓰거나 직접 간단한 프로그램을 작성하여 일괄적으로 바꿔놓으면 간단하다.


<pre>태그 대신 <srcipt>태그를 쓰면 이 문제는 해결되지만

특정환경(티스토리 모바일 등)에선 코드가 아예 안보이게 되는 점을 주의해야 한다.


script태그로 코드를 넣는 법은

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html 

이 주소에 쉽게 설명되어 있다.



그리고 여러 가지 기능을 비롯한 더 자세한 설명은 신택스하이라이터 공식 페이지에 접속하면 볼 수 있다.

http://alexgorbatchev.com/SyntaxHighlighter



 




  1. BlogIcon 최종찬 2013.01.17 15:03

    hightlight.js( https://github.com/isagalaev/highlight.js ) 추천

  2. 스타라이트 2013.01.17 18:53

    오! 그러나 저는 파피루스님의 컬러스크립트를 사용합죠....ㅠ

  3. 익명 2013.04.05 10:46

    비밀댓글입니다




티스토리 블로그 글쓰기창이 새 에디터로 바뀌면서

플래시를 삽입할 때 불편함을 느끼셨을 것입니다.


기존 에디터와는 달리 플래시 무비의 크기를 조절하는 인터페이스가 없기 때문입니다.

HTML태그를 봐도 width와 height속성을 어디에 넣어야 할 지 쉽게 알 수 없게 되어있고요.


이럴 때 아래 과정을 거치면 쉽게 플래시의 크기와 위치를 조절할 수 있습니다.







1. 파일 버튼을 눌러서 올릴 플래시를 선택.






2. 파일을 올렸으면 HTML모드로 들어갑니다.






3.  cfile 부터 swf부분까지를 복사합니다.





4. 복사가 되었으면 [## 부터   ##]부분까지를 지우고 다음 태그로 대체합니다.


<embed width="가로크기" height="세로크기" src="/attachment/복사했던 주소" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer">




5. 다시 HTML모드를 해제하면 지정한 크기로 멀티미디어 그림이 나타납니다.






이렇게 해서 새에디터에서도 원하는 크기로 플래시를 넣을 수 있습니다!











  1. 비양 2012.11.08 18:40

    정말 유용한 정보로군요 ^^
    view on 누르고 갑니다 ^^

  2. 해킹 2012.11.14 22:43

    ㅋㅋㅋㅋㅋㅋㅋㅋ

  3. BlogIcon deokji 2012.11.14 22:44

    덕지덕지

  4. BlogIcon SHINY 2013.01.16 02:26

    와웅! 처음으로 플래시 넣어보려 하는데, 정말 좋은 정보 감사합니다!! :)

  5. 도루 2015.07.26 23:17

    마침 티스토리 새 에디터에 swf 파일 넣는거에 고민이었는데
    이런 유용한 정보가 있네요 감사합니다^^

????
???
파이어폭스에선 파비콘이 보이는데 IE에선 안보이네요






IE 8 과
FF 3.6.13 입니다.
  1. 백중 2011.01.05 18:48

    티바이트님 벌써 글이 41개나 달렸네요

  2. ㅋㅋㅋ지존 2011.01.06 09:45

    백발백중님이지요 ㅋㅋㅋㅋ

  3. 삽질맨 2011.02.10 02:27

    즐겨찾기 등록하지 않으면 파비콘 IE에서는 안나옵니다.
    그리고 파비콘 지정 태그가 브라우저마다 약간다른데, 다 지정하지않은 경우도 발생합니다.

  4. BlogIcon TT 2013.05.02 21:58

    크롬,파폭에서는 바로바로 뜨는데 익스에서는 안뜨더라구요.
    저같은 경우는 이렇게 해결했습니다.
    ie 인터넷 옵션가셔서 검색 기록 삭제 하시고 ie 재실행하시면 보이실겁니다.






2차주소를 구입하여 설정해도, tibyte.tistory.com과 같은 주소로 접속하면
주소창의 주소가 2차주소가 아닌 1차주소로 보여지게 됩니다.

<head>태그나 <body>태그 안에 아래와 같은 자바스크립트를 추가하면 1차주소로 접속했을 때 
자동으로 2차주소로 바뀌게 할 수 있습니다.


<script language = javascript>

var url1 ='1차주소';
var url2 ='2차주소';
if(document.URL.match(url1)) document.location.href = document.URL.replace(url1, url2);

</script>


변수 url1에  1차주소를,
변수 url2에  2차주소를 지정합니다.
match 함수를 사용하여 URL이 url1을 포함하고 있는지 검사하고, 있으면, 기존주소에서  url1과 같은 부분을 url2로 치환한 주소를 현재 주소로 합니다.



아래는 사용예시입니다.
===================================================================================================
<script language = javascript>

var url1 ='tibyte.tistory.com';
var url2 ='www.tibyte.kr';
if(document.URL.match(url1)) document.location.href = document.URL.replace(url1, url2);

</script>
==================================================================================================





copyright(C)www.tibyte.kr

+ Recent posts