Google Blogger에서 Github.io까지

Google Blogger에서 Github.io까지


네. 제가 드디어 5년만에 블로그 플랫폼을 바꿔버립니다. 2015년인가.. 티스토리에서 구글 블로그로 이적인 이후에 많은 부분들(커스텀하기 좋다)에 만족하며 잘 유지해왔지만 결국 구글 블로거는 마크다운을 지원해주지 않았습니다.

그래서 강력한 2순위였던 github.io로 넘어가기로 결정하고 이번 주말에 모든 작업을 끝내기 위해 빠르게 진행했었습니다.

그래서, 아마 이 글이 github.io에서 작성한 첫 글이 될 것 같은 느낌이 드네요. 오늘은 제가 구글 블로거에서 github page로 넘어가기 위해 진행했던 것들에 대해 정리해둡니다.

Make git repo

당연히 github에서 저장소를 만들어줘야합니다. 사실 이름은 크게 상관없으나 임의로 짓는 경우에는 user.github.io/프로젝트이름 으로 들어가기 때문에 별로 구조가 안좋아보여서 그냥 user.github.io로 지었습니다.

(물론 hahwul.github.io 는 들어가셔도 안보일겁니다. private repo거든요. 여기서 중요한건.. github pro 이상 사용자가 아니면 private repo에선 페이지를 만들 수 없으니, 일반 유저라면 꼭 public으로 만들어주세요)

1) github에서 username.github.io 라는 이름으로 저장소 생성

git clone gitbub.com/hahwul/hahwul.github.io

2) git clone 및 jekyll 설치

cd hahwul.github.io
gem install bundler jekyll minima jekyll-feed tzinfo-data rdiscount

3) jekyll 로 앱 생성 및 실행해보기

jekyll new .
bundle exec jekyll serve

Theme?

기존 블로거때는 만들거나 기본적인 템플릿에 커스텀하면서 사용했었는데, 이번에는 시간이 없으니 맘에드는 테마를 하나 적용해서 발전해나가기로 했습니다. 물론 테마 가격 자체도 얼마 하진 않아서 유로버전 중에 맘에드는걸로 하나 구매했네요 :D

Blogger to github.io Migration

자.. 이제 blogger에서 github page로 글 데이터를 옮겨야하는데요, 다행이 많은 분들이 이런 고민을 하고 해결책을 만들어두어서 쉽게 처리했습니다. (물론 뒤에 보시면.. 멘탈 붕붕)

Blogger > 설정 > 블로그 관리 > 콘텐츠 백업 (바뀐 UI 그지같아..)

이후에 jekyll-import 를 이용해 blogger 백업 결과를 파싱해서 html 파일들로 만들어줍시다.

https://import.jekyllrb.com/docs/blogger/

$ gem install jekyll-import
$ ruby -r rubygems -e 'require "jekyll-import";
    JekyllImport::Importers::Blogger.run({
      "source"                => "./blog-08-01-2020.xml",
      "no-blogger-info"       => true, # not to leave blogger-URL info (id and old URL) in the front matter
      "replace-internal-link" => false, # replace internal links using the post_url liquid tag.
    })'

각 검색 서비스의 크롤러들은 내 기존 URL 패턴을 알텐데?

jekyll-import로 게시글을 변환하고 난 뒤 급 고민이 생겼었습니다. 바로 github.io와 blogger의 URL 포맷이 다른점인데요..

githubio : /2020/09/01/abcd.html
blogger  : /2020/09/abcd.html

그래서 좋은 편법이 있을가 구글링해봤던니, jekyll-redirect-from 이란게 있었네요.

https://github.com/jekyll/jekyll-redirect-from

이 Gem이 하는 역할을 보면, 문서 상단에 명시하는 영역에 jekyll-redirect-from 등을 통해 특정 URL 패턴이 해당 문서를 바라보게(redirect 되도록) 할 수 있습니다. 우선 Gem 설치해주고, _config.yml에 플러그인에 추가해줍니다.

Gemfile

gem 'jekyll-redirect-from'
bundle

_config.yml

plugins:
  - jekyll-redirect-from

자 예시로 하나를 바꿔보면..

vim _posts/2018-01-22-hacking-documentbuilderfactory-xxe-feat.html

---
layout: post
title: "[HACKING] DocumentBuilderFactory XXE 취약점 관련 연구(?) 중간 정리(feat apktool)"
date: '2018-01-22T00:20:00.001+09:00'
author: HAHWUL
tags:
- Hacking
- Vuln&Exploit
- "#Hacking"
- Mobile
modified_time: '2019-05-28T00:22:50.839+09:00'
thumbnail: https://2.bp.blogspot.com/-pWMbja5JyAc/WmSsiKrF6vI/AAAAAAAACv8/HDudPuGhAGMuoKiS51f_I4Efh8XcR10YgCLcBGAs/s72-c/1.PNG
---

아주 오랜만에 글을 씁니다..... 생략...
http://localhost:4000/2018/01/hacking-documentbuilderfactory-xxe-feat.html
=>
http://localhost:4000/2018/01/22/hacking-documentbuilderfactory-xxe-feat.html

/YYYY/MM/POST 패턴의 URL을 요청해도 /YYYY/MM/DD 패턴으로 잘 리다이렉트 되는걸 확인할 수 있습니다.

자..이제 다 바꾸면 되는데.

╭─ HAHWUL   ~/HAHWUL/tool/hahwul.github.io/_posts     master   
╰─ ls -al * | wc -l
     629

629라니.. 망했다. 무려 page를 제외한 post의 갯수다.

노가다 vs 자동화를 위한 노가다

어차피 무분별한 태그(구글에선 라벨) 정보도 수정해야해서, 직접 노가다를 할까 생각은 했지만.. 600개가 넘는걸 솔직히 조금 부담스러운 작업인건 사실입니다. (카피할 데이터가 바뀌어야한다는게 어마어마하죠)

대충 짜서 테스트해보면..

Dir.entries(".").each do | name |
  if name != "1.rb" || name.strip != "."  || name != ".."
    y = name.partition("-")
    m = y[2].partition("-")
    d = m[2].partition("-")
    file = d[2]
    #puts y[0]
    burl = "/"+y[0]+"/"+m[0]+"/"+file
    #puts name
    #puts burl
    puts name
    begin
    data = File.read(name)
    fdata = data.gsub("author: HAHWUL", "redirect_from:\n- "+burl+"\nauthor: HAHWUL")
    puts fdata
    rescue
    end
#  puts redirectName
  end
end
---
layout: post
title: XSS Polyglot Challenge(v2)에 참여하며 XSS에 대한 고민을 더 해봅시다!
date: '2018-09-09T00:09:00.000+09:00'
redirect_from:
- /2018/09/xss-polyglot-challengev2-lets-do-it.html
author: HAHWUL
tags:
- Polyglot
- Web Hacking
- XSS
- Hacking
- "#Web Hacking"
- "#Hacking"
modified_time: '2019-05-28T00:23:16.767+09:00'
thumbnail: https://2.bp.blogspot.com/-4W2iV77abEU/W5PloJjgRJI/AAAAAAAADcE/TX1RNRc-IlMtMt9gV-o94efB6IhTLf0ggCLcBGAs/s72-c/Selection_020.png
---

polyglot이란 여러 환경? 에서도...

이제 실제 수정하는 코드만 더 추가해서..

Dir.entries(".").each do | name |
  if name != "1.rb" || name.strip != "."  || name != ".."
    y = name.partition("-")
    m = y[2].partition("-")
    d = m[2].partition("-")
    file = d[2]
    #puts y[0]
    burl = "/"+y[0]+"/"+m[0]+"/"+file
    #puts name
    #puts burl
    puts name
    begin
      data = File.read(name)
      fdata = data.gsub("author: HAHWUL", "redirect_from:\n- "+burl+"\nauthor: HAHWUL")
      puts fdata
      File.open(name, "w") do | f |
        f.write(fdata)
      end
    rescue
    end
#  puts redirectName
  end
end
grep "redirect_from" *
...다 바뀜

전 블로그를 단순 글 쓰는 용도가 아닌, javascript를 이용한 도구 페이지, 각종 PoC 코드를 제공하기 위한 페이지 등으로 사용합니다. 그러다보니, 기본 page navigator에 잡히지 않는 페이지를 만들어야하는데, 약간의 꼼수로 해결이 가능했습니다.

$ cat _pages/~~~~~~~~.html
---
layout: page
title: ~~~~~~
show: none
---
<div class="form-container">

이런식으로 yaml 속성으로 하나 만들어주고(저는 show라고 했죠), 실제 navi 쪽 코드에서 if 문으로 걸러줬습니다.

cat _includes/navigation.html
<ul class="nav__list list-reset">
  <li class="nav__item">
    <a href="{{ site.baseurl }}/" class="nav__link">Home</a>
  </li>
  {% for page in site.pages %}
    {% unless page.name == 'tags.html' or page.name == '404.html' %}
      {% if page.show != 'none' %}
      {% if page.title %}
      <li class="nav__item">
        <a href="{{ page.url | prepend: site.baseurl }}" class="nav__link">{{ page.title }}</a>
      </li>
      {% endif %}
      {% endif %}
    {% endunless %}
  {% endfor %}
</ul>

문법이야… ehtml이랑 거의 비슷해서(당연한게, 지킬도 루비기반이니깐) 그냥 {% if page.show != 'none' %} 이런식의 코드 한줄로 출력을 방지할 수 있습니다. 다만, sitemap을 사용하신다면.. 충분히 찾아낼 수 있습니다. 요건 방법을 찾아봐야겠네요.

RSS Feed, Sitemap 만들기

검색엔진의 유리한 접근을 위해서는 rss feed와 sitemap이 있는게 좋습니다. (체크해서 새로운 글이 있으면 크롤링하도록) ~jekyll plugin으로 쉽게 적용할 수 있지만 github page는 jekyll plugin을 사용할 수 없기 때문에 직접 xml 파일을 만들어서 처리해줘야합니다.

인줄 알았으나 https://pages.github.com/versions/ 를 보니 jekyll-sitemap, jekyll-feed 모두 지원합니다.

Gemfile

gem 'jekyll-feed'
gem 'jekyll-sitemap'

_config.yml

plugins:
  - jekyll-feed
  - jekyll-sitemap

이후에 /sitemap.xml /feed.xml 접근하면 잘 나옵니다.

(추가) jekyll-feed는 naver rss 검증에서 실패하기 때문에 아래 코드로 추가해주시면 됩니다.

---
---
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>{{ site.title | xml_escape }}</title>
    <description>{{ site.description | xml_escape }}</description>
    <link>{{ site.url }}{{ site.baseurl }}/</link>
    <atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>
    <pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
    <lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
    <generator>Jekyll v{{ jekyll.version }}</generator>
    {% for post in site.posts limit:30 %}
      <item>
        <title>{{ post.title | xml_escape }}</title>
        <description>{{ post.content | xml_escape }}</description>
        <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
        <link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
        <guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
        {% for tag in post.tags %}
        <category>{{ tag | xml_escape }}</category>
        {% endfor %}
        {% for cat in post.categories %}
        <category>{{ cat | xml_escape }}</category>
        {% endfor %}
      </item>
    {% endfor %}
  </channel>
</rss>

도메인 적용하기 및 SSL 처리

Repo > Setting > Github pages > Custom domain 변경, 이후에 DNS 설정에서 CNAME 으로 등록해주면 됩니다.