Hal Yang Saya Lakukan Pindah Dari Blogger Ke Hugo

  • calendar_today
  • styletutorial
  • shareshare
  • question_answercomment
Thumbnail - Hal Yang Saya Lakukan Pindah Dari Blogger Ke Hugo

Pada kesempatan kali ini saya akan membagi tutorial bagi kamu yang ingin berpindah dari blogger dan ingin membuat website baru yang mudah dan cepat. Saya akan membagi tutorial kali ini menjadi beberapa bagian sampai web bisa di gunakan.

  1. mengexport kontent di blogger dan mengubahnya kedalam markdown
  2. menyiapkan hugo serta porting template blogger
  3. build hugo dan hosting blog ke netlify

Mengambil kontent blogger

Ada beberapa tool yang bisa digunakan untuk bisa mengambil seluruh post, tag, page dan komentar yang ada pada blogger diantaranya:

  • blogimport - A tool to import from Blogger posts to Hugo.
  • blogger-to-hugo - Another tool to import Blogger posts to Hugo. It also downloads embedded images so they will be stored locally.
  • hugo-extended - Saya menggunakan yang extend agar bisa assets bundling dan minify.
  • blog2md - Works with exported xml file of your YOUR-TLD.blogspot.com website. It also saves comments to YOUR-POST-NAME-comments.md file along with posts.
  • BloggerToHugo - Yet another tool to import Blogger posts to Hugo. For Windows platform only, and .NET Framework 4.5 is required. See README.md before using this tool.

Namun untuk kali ini saya akan coba menggunakan blog2md ini karena menggunakan javascript yang saya mengerti. Selain itu blog2md bisa digunakan untuk mengimport comment pada post. Ada beberapa vitur lainnya dari tool ini diantaraya:

  • Membaca XML
  • Parse Entries (Posts and comments) (with xpath?)
  • Parse Title, Link, Created, Updated, Content, Link
  • Content ke MD - pandoc?
  • Membuat output dir

Installation (usual node project)

  • Buka halaman download di halaman github
  • Ekstrak file telah didownload
  • Buka lokasi file
  • Buka PowerShell dengan Shift + klik kanan pilih open PowerShell windows here
  • Jalankan npm install pada PowerShell

Export Blogger Data

  1. Buka Setelah pada halaman Admin Blogger
  2. Klik di Lainnya
  3. Klik Backup Konten
  4. Simpan Ke Komputer

Menjalakan Export Tools

Kali ini akan menggunakan tools blog2md yang nantinya akan mengambil data dari xml file hasil export blogger ke markdown file untuk hugo.

  1. Taruh data XML Blogger pada lokasi ekstrak blog2md
  2. Pada PowerShell Yang telah terbuka sebelumnya.
    Jalankan node .\index.js b .\blog-09-13-2018.xml out m
  3. Buka folder out maka kamu akan menemukan folder baru out yang berisi file markdown

Note:

  • node - Program untuk menjalankan tools
  • .\index.js - Tools untuk convert blogger xml ke berkas markdown
  • b - Argument yang menyatakan bahwa akan mengambil blogger xml
  • .\blog-09-13-2018.xml - File XML yang sebelumnya di export
  • out - nama folder lokasi semua file markdown akan di simpan
  • m - Argumet menyampaikan bahwa akan meletakan komentar pada post di dalam satu berkas. jadi komentar akan diletakan sebagai properti di dalam markdown post.

Membuat Project Hugo

  1. Membuat project baru dengan hugo new site blogger
  2. Pindahkan semua markdown file di out ke dalam folder blogger > content
  3. Jalankan hugo new theme blogger untuk membuat tema baru untuk situs kamu
  4. Gunakan hugo serve untuk menjalankan server di komputer
  5. Buka yang tertera pada outuput http://localhost:3000/

Tambahkan tema dibuat sebelumnya blogger kedalam config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "blogger"

Pada halaman yang kamu buka kamu akan melihat halaman kosong, tenang pada bagian berikutnya saya akan membahas cara merubah tema blogger menjadi tema hugo. Jika kamu tidak ingin menggunakan tema di blogger sebelumnya dan ingin menggunakan yang sudah jadi bisa menggunakan tema yang ada pada https://themes.gohugo.io/ disana banyak tema yang bisa kamu coba cukup download dan letakan pada folder themes di lokasi project.

Mengubah Tema Blogger Ke Hugo

Struktur folder dari template yang akan buat akan memiliki struktur sebagai berikut:

.
|
├───archetypes
├───assets
│   ├───css
│   └───js
├───layouts
│   ├───partials
│   └───_default
└───static

Hal yang perlu di persiapkan untuk mengubah tema blogger ke dalam tema hugo adalah sebagai berikut:

  1. Chrome Browser - Saya akan menggunakan Inspect Tools di Chrome untuk mempercepat workflow saya.
  2. dokumentasi hugo - Ini saya gunakan sebagai referesi penggunaan sintak, variable, dan fungsi yang bisa digunakan.
  3. front-end doc - Biar mudah menggunakan javascript, css, html
  4. Visual Studio Code - Untuk mengendit semua file yang ada

Bagi kamu yang ingin mendownload template yang saya, bisa mendownload di link yang ada pada akhir postingan saya ini.

Menyiapkan Content View

Kontent View mirip dengan Partial tetapi memiliki perbedaan dengan kontent view bisa membuat alternative dari sebuah tampilan. Misalkan mempunyai section tutorial dan artikel menggunakan layout _default/list.html yang memiliki list posts , misalkan kamu ingin membuat tutorial dan artikel memiliki tampilan list yang berbeda tanpa perlu membuat layout untuk masing - masing section jadi kamu bisa membuat content view untuk setiap section.

Pada tema blogger yang saya gunakan terdiri dari 3 jenis kontent view yang akan saya buat medium dan card view.

  1. Medium view memiliki thumbnail persegi, judul, tanggal, dan tag

    {{ $image := delimit (first 1 (split (delimit (findRE "https?:.*" .RawContent 1) "") ")")) " " | safeURL }}
    <div class="post">
      <div class="post-content">
        <a class="post-image-link" href="{{  .Permalink }}">
          <img alt="{{  .Title }}" class="post-thumb" src="{{ partial "postimage" . }}">
        </a>
        <div class="post-info">
          <h2 class="post-title">
            <a href="{{  .Permalink }}">{{  .Title }}</a>
          </h2>
          <div class="post-meta">
            <span class="post-date published" datetime="{{ .Lastmod.Format "2006-01-02T15:04:05JST" }}">{{ .Lastmod.Format (.Site.Params.dateformat | default "Jan 2, 2006") }}</span>
          </div>
        </div>
      </div>
    </div>

  2. Card view memiliki ukuran yang lebih besar dengan menonjolkan gambar thumbnail

    {{ $tag := cond (isset .Params "tags") .Params.tags slice }}
    <div class='blog-post hentry index-post'>
      <div class='post-info blog-post-info'>
        <h2 class='post-title'>
          <a href='{{  .Permalink }}'>{{ .Title }}</a>
        </h2>
        <div class='post-meta'>
          <span class='post-author'><em>oleh</em>
            <a href='https://plus.google.com/111546777627930093863' target='_blank' title='KangMicin Web'>KangMicin Web</a></span>
          <span class='post-date published' datetime='{{ .Lastmod.Format "2006-01-02T15:04:05JST" }}'>{{ .Lastmod.Format (.Site.Params.dateformat | default "Jan 2, 2006") }}</span>
          <span class='post-reply'><a href='{{  .Permalink }}#comments'>0
              Comments</a></span>
        </div>
      </div>
      <div class='post-image-wrap'>
        <a class='post-image-link' href='{{  .Permalink }}'>
          <img alt='How dress shops make you a better lover' class='post-thumb' src='{{ partial "postimage" . }}' />
        </a>
      </div>
      <div class='post-content'>
        <p class='post-snippet'>{{ substr .Summary 0 269 }}&#8230;</p>
        <div class='post-footer'>
          <span class='post-tag'>{{ range (first 1 $tag) }} {{.}}{{end}}</span>
          <a class='read-more' href='{{  .Permalink }}'>Baca selengkapnya</a>
        </div>
      </div>
    </div>

Mengatasi Thumbnail yang Kosong

Ada beberapa partial yang saya buat untuk melengakapi dari tampilan hugo saya ini diantara saya menambahkan sebuah partial yang otomatis menambahkan thumbnail kedalam content view, ini karena pada blog2md yang saya gunakan tidak menambahkan thumbnail ke dalam parameter di filenya sehingga saya perlu membuat sebuah partial yang mengambil url gambar yang terdapat di dalam setiap kontent sebagai berikut:

{{- $image := delimit (first 1 (split (delimit (findRE "https?:.*" .RawContent 1) "") ")")) " " | safeURL -}}
{{- if $image -}}
{{ $image }}
{{- else -}}
{{ "https://4.bp.blogspot.com/-O3EpVMWcoKw/WxY6-6I4--I/AAAAAAAAB2s/KzC0FqUQtkMdw7VzT6oOR_8vbZO6EJc-ACK4BGAYYCw/s1600/nth.png" | safeURL}}
{{- end }}

Membuat Base Layout

Base Layout adalah pondasi dari layout tujuan dari dibuat base layout ini agar tidak perlu mengulangi pembuatan layout dari awal lagi. Untuk tutorial kali ini saya menggunakan template spicer yang dibuat oleh way2Themes kamu bisa membuka situs contohnya di halaman ini. akan mencari bagan dari halaman home untuk pertama kali. Jika sudah membuat base layout langkah selanjutnya akan jauh lebih mundah karena tinggal di extend dari base layout ini saja.

Jika diperhatikan pada tema spicer ini terdiri dari sebuah header, main, dan footer. Pada bagian header terdapat judul, deskripsi dan sebuah navigasi. Di dalam main terdapat kontent yang berisi artikel terbaru beserta sebuah sidebar yang stick. Untuk bagian footer terdapat kontent dan copyright. Pertama akan melihat sumber halaman beranda dan akan mencopy keseluruan dan menghapus beberapa element yang tidak penting. Jadi saya ctrl+u di halaman beranda dan saya copy semua ke baseof.html.

jalankan local server dengan membuka powershell / CMD pada project yang di buat dan jalankan hugo serve buka pada http://localhost:1313/ maka akan namapk halaman kosong berwarna putih, ini karena pada layout yang di buat sebelumnya menyertakan layout index.html yang masih kosong. Selanjutnya saya akan memotong dan memindahkan header footer ke lokasi yang berbeda ke dalam partial.

Saya taruh file itu tinggal saya taruh di baseof.html sebagai partial , partial ini bisa di panggil di berbagai layout, tujuan dari di pindahkan menjadi partial agar jumlah baris tidak terlalu besar sehingga mudah untuk di baca. Untuk header dan footer tinggal saya cut dan pindahkan ke head.html dan untuk footer ke footer.htm saya memberikan nama sesuai dengan isi element di dalamnya. berikut tampilan dari baseof.html sekarang.

Untuk sidebar karena terlalu banyak dan saya akan membuat beberapa widget untuk dijadikan partial. Sama seperti sebelumnya saya ispect element trus saya copy class dan mencari element yang ingin saya potong. untuk kasusu saya ini .widget yang ada didalam sidebar. Saya Juga menambahkan block yang nantinya bisa di define oleh anak layoutnya.

{{ partial "head" . }}
<!-- Content Wrapper -->
<div class='row' id='content-wrapper'>
    <div class='container wrapper'>
        <!-- Main Wrapper -->
        <div id='main-wrapper' class="content">
            {{ block "main" . }}{{ end }}
        </div>
        <!-- Sidebar Wrapper -->
        <div id='sidebar-wrapper' class="sidebar">
            <div class='sidebar common-widget section' id='sidebar-right' name='Sidebar Right'>
                {{ partial "popularpost" . }}
                {{ partial "facebook" . }}
                {{ partial "categories" . }}
                {{ partial "tags" . }}
            </div>
        </div>
    </div>
</div>
{{ partial "footer" . }}

Membuat Single Layout

Karena sekarang telah berhasil membuat baseof.html sekarang untuk membuat tinggal define block, karena pada layout ini menaruh artike pada main block jadi yang saya define adalah main block. Berkas single.html ini nanti akan menampung juga halaman beranda, dan blog post. Kalau membuat halaman index.html di layout maka yang digunakan sebagai layout adalah index.html

{{ define "main" }}
<div class="main section" id="main" name="Main Posts" style="margin-top: -26px">
  <div class="widget Blog" data-version="2" id="Blog1">
    <div class="blog-posts hfeed item-post-wrap">
      <div class="blog-post hentry item-post">
        <div class="post-content-wrap">
          <div class="post-header blog-post-info">
            <h1 class="post-title">
              {{ .Title}}
            </h1>
            <div class="post-meta">
              <span class="post-author"><em>by</em>
                <a href="https://plus.google.com/111546777627930093863" target="_blank" title="KangMicin Web">KangMicin
                  Web</a></span>
              <span class="post-date published" datetime="{{ .Lastmod.Format "2006-01-02T15:04:05JST" }}">{{ .Lastmod.Format ( .Site.Params.dateformat | default "Jan 2, 2006") }}</span>
              <span class="post-reply"><a href="{{ .Permalink }}#comments">0
                  Comments</a></span>
            </div>
          </div>
          <div class="post-body post-content">
            {{ .Content }}
          </div>
          <div class="post-content-footer">
            <div class="post-labels">
              <span class="labels-icon"></span>
              {{ range .Params.tags }}
              <span class="Label"><a class="label-link" href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}/"
                  rel="tag">{{ . }}</a></span>
              {{ end }}
            </div>
            <div class="post-share">
              <ul class="share-links social">
                <li class="facebook-f"><a class="facebook" href="https://www.facebook.com/sharer.php?u={{ .Permalink }}"
                    onclick="window.open(this.href, 'windowName', 'width=550, height=650, left=24, top=24, scrollbars, resizable'); return false;"
                    rel="nofollow"></a></li>
                <li class="twitter"><a class="twitter" href="https://twitter.com/share?url={{ .Permalink }}&amp;text={{ .Title }}"
                    onclick="window.open(this.href, 'windowName', 'width=550, height=450, left=24, top=24, scrollbars, resizable'); return false;"
                    rel="nofollow"></a></li>
                <li class="pinterest-p"><a class="pinterest" href="https://www.pinterest.com/pin/create/button/?url={{ .Permalink }}&amp;media=//4.bp.blogspot.com/-_CYa4viSHPQ/VffHrbXEn5I/AAAAAAAAN0Y/_k5r7fhabI4/s1600/fashion_white-hair-flying-light-blue_069K.jpg&amp;description={{ .Title }}"
                    onclick="window.open(this.href, 'windowName', 'width=735, height=750, left=24, top=24, scrollbars, resizable'); return false;"
                    rel="nofollow"></a></li>
                <li class="gplus"><a class="gplus" href="https://plus.google.com/share?url={{ .Permalink }}"
                    onclick="window.open(this.href, 'windowName', 'width=400, height=500, left=24, top=24, scrollbars, resizable'); return false;"
                    rel="nofollow"></a></li>
                <li class="linkedin"><a class="linkedin" href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}"
                    onclick="window.open(this.href, 'windowName', 'width=1000, height=650, left=24, top=24, scrollbars, resizable'); return false;"
                    rel="nofollow"></a></li>
                <li class="whatsapp whatsapp-desktop"><a class="whatsapp" href="https://web.whatsapp.com/send?text={{ .Title }} | {{ .Permalink }}"
                    onclick="window.open(this.href, 'windowName', 'width=900, height=550, left=24, top=24, scrollbars, resizable'); return false;"
                    rel="nofollow"></a></li>
                <li class="whatsapp whatsapp-mobile"><a class="whatsapp" href="https://api.whatsapp.com/send?text={{ .Title }} | {{ .Permalink }}"
                    rel="nofollow" target="_blank"></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{ end }}

Membuat List Layout

Untuk Listnya saya tinggal melakukan hal yang sama tetapi saya menaruhnya pada file list.html untuk menampung list, taxonomy, terms, dan pagination. Jadi saya tinggal define dan dengan menambahkan pagination sehingga menjadi berikut ini.

Membuat Not Found Layout

Untuk cepatnya saya tinggal mengetik url asal-asalan agar muncul halaman notfound kemudian saya cari html elementya dan tinggal saya copy>copyOuterHTML untuk mencopy DOM element dan tinggal saya taruh pada berkas 404.html di dalam folder layout.

Karena permalink di blogger tidak sama dengan yang ada di hugo akibatnya jika situs telah terindex di google search dan seseorang mengunjungi halaman sebelunya di blogger maka akan di arahkan ke halaman 404.html tentu ini akan menurunkan jumlah pengunjung dan menurunkan google index dari page. Oleh karena itu mesti mengatur permalink dari setiap content yang di export sebelumnya menggunakan blog2md. Hal ini karena pada blog2md tidak menyertakan properti url di artike. Saya menambahkan konfigurasi berikut pada config.toml

[permalinks]
blog = "/:year/:month/:slug/"

jadi semua kontent yang ada di dalam subfolder blog di dalam content akan memiliki format yang sama dengan di blogger.

Hosting Hugo Di Netlify

Untuk mendeploy situs yang dibuat dengan hugo tinggal menjalankan hugo maka hugo akan membuat sebuah folder baru bernama public yang menampung semua HTML, JS, CSS dan aset-aset lainnya. Untuk tutorial kali ini saya akan mencoba mendeploy di netlify ini karena prosess cukup mudah tinggal drag dan drop saja. Kemudian tunggu sampai selesai di buka dan tinggal membuka url yang diberikan. Tapi tunggu kok tampilanya jadi hancur, itu karena mesti mengatur base url sesuai dengan url yang ada pada di netlify.

baseURL = "http://url.netlify.com/"

Kesimpulan

Teknologi static site generator seperti hugo jarang di gunakan di Indonesia dan banyak orang yang menggunakan blogger dan wordpress padahal dengan menggunakan hugo bisa menambahkan fitur yang lebih mudah dan cepat, contohnya pada blogger kita tidak disediakan kategori dalam post property sehingga hanya bisa menggunakan tag saja. Dibandingan dengan membuat tema di blogger dan di hugo lebih cepat karena pada tema di blogger kita kesulitan mengetes tema, sulit mencari error, dan penggunaan tag xml yang menurut saya membingungkan jika digabungkan dengan html, kalau menggunakan hugo kita bisa mengetes langsung tema di komputer sebelum digunakan dalam produksi

Jika ada yang ditanyakan bisa langsung di komentar atau bisa bergabung di dalam chanel telegram