티스토리 스킨을 워드프레스에 담아보기

왼쪽: 티스토리 / 오른쪽: 워드프레스 결과물

 

11월 초에 티스토리 포럼(링크)에서 티스토리 서비스종료 찌라시가 잠시 퍼진 적이 있습니다.
다음CIC의 실적이 계속 떨어지니 카카오가 매각을 할지도 모르며
마찬가지로 다음CIC 소속인 티스토리 역시 운명을 알 수 없다는 내용이었습니다.

 

비록 요즘은 블로그에 글을 쓰는 일도 뜸하긴 하지만
이곳은 저의 첫 블로그로서 많은 흑역사 아니, 추억이 남아있는 곳입니다.
티스토리가 섭종한다 해서 추억을 전부 날려버릴 수는 없겠죠

 

 

그래서 이 추억들을 반영구적으로 보존하는 방법을 강구해 보았는데
그냥 직접 웹서버를 만드는 수밖에 없겠더라구요(?)

넵.. 위 사진이 바로 결과물입니다.

 

 

세부 조정 작업까지 해서 한 달 정도 작업한 것 같은데
제가 생각해도 정말 고생했네요 :(
그래도 결과물을 보고 있으면 뿌듯하긴 합니다.

 

 

 

 

 

 

[혹시나 궁금하신 분들을 위한 제작 과정 요약]

요약을 해도 내용이 너무 길어서
궁금하신 분들만 '더보기'를 열어서 확인해주세용

 

티스토리에서 HTML, CSS, 자바스크립트 정도만 깔짝이던 저였기에
게시글 에디터 등 모든 것을 처음부터 제작하기엔 공부량이 너무 방대해서, 오픈소스 기반의 설치형 블로그 '워드프레스'로 웹서버를 만들기로 노선을 정하고 시작했습니다.

 

1. 아파치(Apache) 설치

아파치는 포트를 개방하여 인터넷 주소창에 내 아이피를 입력하면, 내가 설정한 페이지로 접속할 수 있게 해주는 프로그램입니다.

 

아파치 설치 후 conf 폴더에서 httpd.conf 파일을 메모장으로 열어주고
ServerRoot, 사용할 포트, DocumentRoot, ServerName 등을 설정해줍니다.

끝났으면 명령 프롬프트(cmd)를 관리자 권한으로 열어서 아파치 경로를 잡아주고
install 및 start. (httpd -k install / httpd -k start)

 

 

그러면 이렇게 접속이 가능해지면서
DocumentRoot로 잡아준 경로의 index.html이 출력됩니다.

 

 

 

 

2. PHP 설치

워드프레스는 프로그래밍 언어인 PHP를 기반으로 제작된 오픈소스입니다. 따라서 PHP를 설치해서 연결해주는 과정이 필요했습니다.

 

PHP 설치 후 간단한 디렉토리 설정을 마치고
아파치의 httpd.conf 파일에서 PHP와 아파치를 연결시켜 주었습니다.

 

 

 

 

3. MySQL 설치

서버의 데이터(DB)를 관리할 수 있는 툴이 필요합니다. 저는 오라클사의 MySQL을 설치해 주었습니다.

cmd에서 관리자 아이디와 비밀번호를 설정하고
워드프레스의 데이터가 들어갈 '데이터베이스 테이블'을 생성해 줍니다.
저는 wordpress 라는 테이블을 생성해 주었습니다.

PHP에서 MySQL 관련 extension의 주석을 해제하는 일도 잊지 않습니다.

 

 

 

 

4. 워드프레스 설치

설치형 워드프레스 홈페이지(https://wordpress.org/)에서 패키지를 받은 후,
아파치 DocumentRoot에 압축을 풀어줍니다.

저 같은 경우에는 wordpress라는 폴더로 풀어주었고
폴더 루트인 http://localhost/wordpress로 접속하면
wp-config.php 파일을 만들기 위한 설정 페이지가 나옵니다.

 

 

 

데이터베이스 이름에는
위에서 MySQL에 생성한 데이터베이스 테이블 이름을,

사용자명/비밀번호는
MySQL의 관리자 정보를 입력해 주었습니다.

 

설정이 끝났으면 나만의 홈페이지가 출력됩니다...
이제 거의 다 왔어요.
라고 생각했었는데 여기부터 시작이었습니다...

 

[이후에 제가 한 일]

1. 공유기를 사용하고 있어서 공유기상의 80포트(http용)와 443포트(https용)를 오픈하고, 외부 접속이 있는 경우 서버 컴퓨터로 연결시켜 주는 설정을 함
2. 위 설정을 했는데 500Mbps용 인터넷 모뎀이 공유기 역할을 하고 있는 걸 발견해서 브릿지 모드로 변경.
3. 아파치에 개인 도메인을 연결시켜 주고 포트를 설정 (80포트와 443포트 각각 가상호스트 설정)
4. 아이피 주소 변경을 대비한 DDNS 발급 및 도메인 적용
5. Let's Encrypt 인증서(SSL) 발급 후 아파치 설정에 연결
6. Alias 설정으로 서버를 통해 공유하는 파일을 늘림
7. PHPMyAdmin이라는 웹 DB 관리 툴을 설치해주고, 보안을 위해 서버 영역과 분리시켜서 local에서만 접속할 수 있도록 조치 (외부 접속을 차단)
8. 가입 이메일 인증 및 비밀번호 찾기를 위한 SMTP 설정
9. 관리자 페이지 무차별 공격 대비를 위한 로그인 시도 제한 설정
10. 웹 페이지 출력 속도를 향상시키고, 서버의 부담을 줄이기 위한 캐시 설정

 

댓글 기능들(비밀댓글/사진첨부/링크첨부/영상첨부/스포일러)

 

워드프레스는 비밀댓글, 댓글 수정 등 기능이 많이 결여되어 있어서
고수들의 소스를 가져와서 수정 후 적용했고,
응용해서 스포일러 댓글 기능도 넣어보았습니다.

 

그리고 티스토리 블로그와 똑같이 출력시키기 위해 css와 자바스크립트를 수정하고

 

왼쪽: 기본 로그인 페이지 / 오른쪽: 커스텀 로그인 페이지

로그인 페이지에도 오타쿠의 로망을 집어넣었습니다.