Hugo merupakan salah satu static site generator yang mudah untuk digunakan, dari mulai instalasi, membangun halaman dari markdown file, hingga mengembangkan website yang kamu buat. Seperti yang akan kita bahas pada artikel ini yaitu menggunakan fitur Custom output hugo untuk membuat halaman Google AMP page.

AMP Page

Accelerated Mobile Pages (AMP) adalah open source HTML Framework yang dikembangkan oleh AMP Open Source Project. AMP dioptimalkan untuk penjelajah web pada perangkat mobile dan bertujuan untuk membantu halaman web dapat dimuat dengan cepat1.

AMP umumnya bisa dinikmati pengguna yang menggunakan google search pada chrome browser,ketika pengguna mengklik link hasil pencarian google, maka pengguna akan disuguhkan halaman versi AMP dari website tersebut dari AMP yang telah dicache oleh CDN.

Konfigurasi Hugo

Agar konten halaman pada hugo website/blog bisa ditampilkan dalam bentuk AMP page, yang perlu kita lakukan adalah membuat custom output format. Disini kita akan membuat dua output halaman untuk setiap artikel konten yang kita tulis diantaranya yaitu format HTML dan AMP.

Agar hugo dapat menghasilkan dua output berbeda seperti yang disebutkan diatas, maka pada file konfigurasi situs (config.toml) tambahkan pengaturan berikut:

[outputs]
  page = ['HTML', 'AMP']
Code Snippet 1: Pengaturan untuk config.yaml

Untuk yang menggunakan format yaml:

outputs:
  page:
  - HTML
  - AMP
Code Snippet 2: Pengaturan untuk config.yaml

Pada praktik ini kita hanya akan membuat halaman AMP hanya untuk konten post hugo, jika ingin membuat halaman amp untuk halaman section, home, taxonomy, dan lain sebagainya, bisa tambahkan sendiri seperti yang dijelaskan di dokumentasi hugo2.

Membuat Template Amp Page

Setelah menentukan halaman mana yang akan dibuat dengan menambahkan pengaturan situs, hal yang perlu dilakukan selanjutnya adalah menambahkan template yang akan digunakan untuk halaman konten AMP kita.

Untuk menyederhanakan tutorial kali ini kita hanya akan menggunakan dua template yaitu untuk halaman post dengan nama file single.amp.html dan komponen <amp-img> dengan nama file render-image.amp.html.

Untuk tempat menyimpan kedua file template tersebut, kita dapat menyimpannya dalam folder layout/_default. Folder layout bisa ditemukan pada direktori utama projek situs kamu, atau bisa juga pada direktori utama pada tema yang kamu gunakan.

Jika sudah menemukan folder layout tambahkan template halaman (single.amp.html) pada subdirektori _default dan file komponen <amp-img> (render-image-amp.html) pada subdirektori _markup. direktori _markup dibuat di dalam folder _default. Untuk lebih jelasnya seperti ditampilkan pada direktori tree berikut.

[direktori tema yang kamu gunakan atau direktori situs]
└── layout
   └── _default
      ├── _markup
      │  └── render-image.amp.html
      └── single.amp.html

Template Halaman Post (single.amp.html)

Halaman yang akan kita buat versi AMPnya adalah halaman postingan blog/situs yang kita tulis menggunakan markdown. Untuk struktur penulisan templatenya seperti ditampilkan pada snippet berikut.

Agar tampilan AMP page lebih menarik silakan tambahkan custom css sesuai dengan keinginan.

<!doctype html>
<html amp lang="en">
 <head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>{{ .Title }}</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="{{ replace .Permalink "/amp" "" }}">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
  <!-- TAMBAHKAN CUSTOM STYLESHEET DISINI -->
  </style>
  <script type="application/ld+json">
        {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage": {{ .Permalink }},
        "headline": {{ .Params.description }},
        "datePublished": {{ .Date.Format "2006-01-02T15:04:05Z" }},
        {{with .Lastmod }}"dateModified": {{ .Format "2006-01-02T15:04:05Z" }}{{end}},
        "description": {{ .Summary | truncate 200 }},
        "author": {
          "@type": "Person",
          "name": {{ .Params.Author | default .Site.Params.Author | default .Site.Title }}
        },
        {{- $img:= .Resources.ByType "image" -}}
        {{- with (index $img 0 ) -}}
        "image": {
          "@type": "ImageObject",
          {{- if (ne (printf "%s" .MediaType) "image/svg+xml") -}}
          "height": {{ .Height }},
          "width": {{ .Width }},
          {{- end -}}
          "url": {{ .Permalink }}
        },
        {{- end -}}
        "publisher": {
          "@type": "Organization",
          "name": {{ .Site.Title }},
          "logo": {
            "@type": "ImageObject",
            "url": "/icons/android-chrome-512x512.png",
            "width": 512,
            "height": 512
          }
        }
        }
  </script>
  </head>
  <body>
   <header>
    <span class="title">{{ .Site.Title }}</span>
   </header>
   <main class="content">
    <h1 id="{{ .Title | urlize }}">{{ .Title }}</h1>
     <time>{{ .Date.Format "Mon, 2 Jan 2006" }}</time>
       {{.Content}}
  </main>
  <footer>
    {{- with (.Site.RegularPages.Related . | first 5) -}}
    <h3>Related Posts</h3>
    {{- range . -}}
    <a href="{{ .RelPermalink }}">{{ .Title }}</a><br>
    {{- end -}}
   {{- end -}}
   <br>
   <small class="copy"> © {{ .Site.Title }}, {{ now.Format "2006"}} </small>
   <br/>
   <br/>
  </footer>
 </body>
</html>

Komponen <amp-image>

Untuk menampilkan komponen <amp-img> kita akan menggunakan fitur markdown hook template dari hugo, caranya yaitu dengan menambahkan file render-image.amp.html pada direktori _markup dengan berisikan snippet berikut:

{{ $image := newScratch }}
{{- if strings.HasPrefix .Destination "http" }}
{{- $image.Set "data" (resources.GetRemote .Destination) -}}
{{- else -}}
{{- $image.Set "data" (.Page.Resources.GetMatch .Destination) -}}
{{- end -}}
{{- $img:= ($image.Get "data") -}}
{{ if (eq (printf "%s" $img.MediaType) "image/svg+xml") }}
    <amp-img
        alt="{{ .Text }}"
        src="{{ .Destination | safeURL }}"
        layout="responsive">
    </amp-img>
{{- else -}}
    {{- $w:=(slice 865 590 295 148 ) -}}
    <amp-img
        alt="{{ .Text }}"
        src="{{ .Destination | safeURL }}"
        width="{{ $img.Width }}"
        height="{{ $img.Height }}"
        srcset="
            {{- range $w -}}
                {{- if gt $img.Width . -}}
                    {{- $i:= ($img.Resize (printf "%dx" . ) ) -}}
                    {{- printf "%s %dw" $i.Permalink . -}}
                {{- end -}}
                {{- if ne 148 . -}}, {{- end -}}
            {{- end -}}"
        layout="responsive">
</amp-img>
{{- end -}}

Snippet untuk <amp-img> diatas sudah dimodifikasi sedemikian rupa untuk meresize gambar yang kamu tampilkan di markdown untuk menyesuaikan resolusi dari layar perangkat mobile pengunjung website/blog kamu, jadi akan lebih cepat karena pengguna tidak perlu memuat ukuran gambar asli yang ukurannya mungkin lebih besar. Jadi loading konten halaman juga akan lebih cepat.

Menyajikan Konten Dalam Bentuk AMP Page

Setelah selesai mengkonfigurasi hugo dan membuat template AMP untuk menghasilkan halaman dalam bentuk AMP page, kita bisa langsung menjalankan perintah

hugo serve

kemudian kunjugi halaman versi AMPnya menggunakan prefix /amp. Misal http://localhost:1313/amp/link-ke-artikelnya

Untuk menambahkan komponen lain ke halaman situs amp atau tambahan elemen html lain silakan bisa mengikuti ketentuan membuat AMP page di website official AMP Project3.

Referensi

  1. How AMP Works - amp.dev [2022-06-12 Min] ↩︎

  2. Custom Output Formats [2022-06-13 Sen] ↩︎

  3. Starter Code -amp.dev [2022-06-13 Sen] ↩︎