안녕하세요 lovefield 입니다.
오늘은 AMP 프로젝트를 jekyll 에 적용하는 법을 설명해 드리겟습니다.

우선 아래 글의 파일을 받으시고 설명을 정독하셔야합니다.

Link : GitHub - amp-jekyll(juusaw)

위 글에서 중요한 파일은 amp_generate.rb와 amp_filter.rb 그리고 amp.html 입니다.

먼저 amp_generate.rb와 amp_filter.rb은 blog 디렉토리에서 _plugins 폴더를 생성해 넣어줍니다.

amp.html은 _layout 폴더에 넣어줍니다.

파일은 준비가 완료되었습니다.
그다음 Gemfile 파일에

gem 'fastimage', '~> 2.0', '>= 2.0.1'

gem 'amp-jekyll', '~> 1.0', '>= 1.0.1'

을 추가해줍니다.

추가 후에는 CMD창에서 bulder install을 실행해주시기 바랍니다.

그다음 _config.yml 파일에

ampdir: /YOURDIR

gems:
  - amp-jekyll

을 추가해줍니다.

그다음으로 head 상에

[% if page.path contains '_posts' %]
	<link rel="amphtml" href="[[ page.id | prepend: '/YOURDIR' | prepend: site.baseurl | prepend: site.url ]]">
[% endif %]

(중괄호가 코드로 인식되어 대괄호로 변경했습니다, 사용하실떈 중괄호로 변경해주세요.)

을 추가해줍니다.

CMD 창에서 gem install amp-jekyll 을 입력해 설치합니다.

자 이제 AMP를 위한 준비가 끝낫습니다.

아래의 항목을 모두 충족 시켜주시면 됩니다. (디버깅은 주소뒤에 #development=1 을 붙이시면 됩니다.)

  1. <html> 에 amp 와 lang="ko" 속성을 추가해줍니다.
  2. <meta name="viewport" content=""> 는 필수 요소입니다.
  3. <script async src="https://cdn.ampproject.org/v0.js"></script> 을 추가해 주세요.
  4. 페이지에서 사용하는 모든 css는 <head>의 <style amp-custom> 안에 기입하셔야 합니다.
  5. AMP 에서 제공하는 script 이외에는 script를 사용할수 없습니다.

대략적으로 이정도입니다.
그외에도 AMP 규정은 많지만 공식 홈페이지나 디버깅으로 확인 부탁 드리겠습니다.

Google Analytics 적용

  1. <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> 를 <head> 에 추가해주세요.
  2. <amp-analytics type="googleanalytics"> 안에 코드를 넣고 <body>안에 넣어주세요.

code:

<script type="application/json">
{
	"vars": {
	"account": "UA-XXXXXXXX-X"
	},
	"triggers": {
	"trackPageview": {
		"on": "visible",
		"request": "pageview"
	}
	}
}
</script>