#2: Cara Membuat Hugo Theme From Scratch - Partials

mrfdn.com - Pada artikel sebelumnya sudah dijelaskan beberapa hal yang penting diketahui tentang file baseof.html. Pada artikel ini saya akan membahas tentang cara membuat dan setting file yang terdapat pada folder partials di theme hugo yang sedang dibuat. Partials merupakan kumpulan part atau bagian dari sebuah tag html yang saling berkaitan sehingga menjadi sebuah struktur html yang utuh. Partials ini sifatnya seperti bootstrap, maksudnya saling berkaitan satu sama lain. Jika sebuah halaman yang ingin diload butuh untuk menampilkan elemen tertentu maka kita bisa membuatkan elemen partials nya. ...

November 15, 2022 · 3 min · Rafi

#1: Cara Membuat Hugo Theme From Scratch - Baseof.html

mrfdn.com - Kali ini saya akan membahas tentang cara membuat theme hugo sendiri. Artikel akan dibagi menjadi beberapa sub bahasan supaya lebih terstuktur. Karena jika dijelaskan melalui satu artikel ini saja maka akan sangat panjang dan pusing membacanya. Ada beberapa persiapan yang harus diketahui sebelumnya. Apa saja itu? Setidaknya anda harus mengetahui tentang: HTML CSS Go templating language (opsional). Untuk yang pertama dan kedua saya pikir anda sudah mengetahuinya, karena itu memang hal dasar yang harus diketahui. ...

November 14, 2022 · 4 min · Rafi

Kenapa Saya Menggunakan Hugo untuk Membuat Website Online?

mrfdn.com - Akhirnya saya tertarik menggunakan Hugo sebagai platform untuk kegiatan blogging saya. Kenapa sih pakai Hugo? Kan ada wordpress yang jauh lebih powerfull. Oh iya, sebelumnya saya pernah membuat website hugo gratis yang dihosting di github pages. Dan begini cara hosting Hugo di VPS sendiri. Nah di sini saya ingin menjelaskan alasan kenapa saya menggunakan hugo untuk kebutuhan nge-blog, serta plus minus menggunakan hugo sebagai platform blogging. Berikut penjelasan lengkapnya. Daftar Isi Apa itu Hugo? Apa itu static site? Perbandingan hugo dengan wordpress Theme Database Workflow Kenapa pakai hugo? Belajar hal baru Wordpress terlalu overkill untuk kebutuhan nge-blog saja Space VPS hosting nganggur Apa itu Hugo? Hugo adalah salah satu platform untuk membuat halaman web statis (static site). ...

November 12, 2022 · 5 min · Rafi

Menampilkan Summary atau Description di Hugo

mrfdn.com - Setelah membuat file list.html di hugo kita mungkin ingin merender deskripsi atau summary. Dimana deskripsi akan muncul ketika ketika diset pada bagian frontmatter artikel, tapi jika tidak di set maka akan merender summary dari artikel. Pastikan pada frontmatter telah diset seperti ini, ada description. --- title: judul artikel description: ini adalah deskripsi artikel --- Kita bisa menggunakan beberapa metode pengkondisian seperti berikut: Menampilkan description atau summary artikel Hugo menggunakan kondisi if <p>{{ if isset .Params "description"}} {{.Params.description}} {{ else }} {{.Summary}} {{ end }}</p> Menampilkan description atau summary artikel Hugo menggunakan cond <p>{{ cond (isset .Params "description") .Params.description .Summary}}</p> Menampilkan description atau summary artikel Hugo menggunakan or <p>{{ or .Description .Summary }}</p> Demikian artikel singkat tentang cara membuat conditional pada template hugo. ...

November 12, 2022 · 1 min · Rafi

Script Set Category Hugo Markdown

mrfdn.com - Kalau sebelumnya saya sudah membagikan script untuk set thumbnail berdasarkan gambar pertama pada artikel markdown di hugo, kali ini saya ingin membuat agar salah satu tag menjadi category. Ini dikarenakan karena pada saat convert artikel wordpress/blogger ke hugo, hugo tidak otomatis mengatur category. Semua taxonomy (tag, category, label) disatukan ke dalam taxonomy (tag) di Hugo. Jika anda ingin agar category tetap ada di Hugo, maka ini adalah triknya. Kita buatkan script untuk memindahkan keyword category tertentu yang terdapat pada baris tags, lalu memindahkannya ke baris baru yang diawali dengan category:. ...

November 5, 2022 · 2 min · Rafi

Menghapus CSS yang Tidak Perlu pada Hugo dengan PurgeCSS

mrfdn.com - Teknologi dunia web development hari ini semakin canggih. Tidak terkecuali pada pemanfaatan file HTML + CSS secara dasar. Sebagaimana kita ketahui bahwa file css adalah file yang digunakan untuk mempercantik tampilan website. Dengan menulis file css kita bisa mengatur tiap elemen html sesuai keinginan kita. Pada situs ini, saya sudah membagikan beberapa tutorial tentang Hugo. Namun sepertinya belum sampai pada tutorial pembuatan template/theme hugo. Materi masih disusun, entah kapan kelarnya.. hehe.. ...

September 14, 2022 · 3 min · Rafi

Cara Membuat Shortcode di Hugo untuk Menampilkan Tag iframe Google Maps

mrfdn.com - Menulis konten dengan format Markdown di HUGO memang sangat mudah dan menyenangkan. Sebagaimana sudah diketahui bahwa hugo akan mengkonversi file markdown (.md) menjadi file html yang siap untuk dipublish ke internet. Tapi ada satu hal yang agak tricky dilakukan ketika hendak menambahkan maps pada postingan blog kita. Untuk dapat menyematkan maps pada artikel markdown, google memberikan kode dalam bentuk tag html <iframe>. Tapi kode tersebut tidak bisa langsung dicopy paste begitu saja pada file .md kita. Pasti tidak terbaca. ...

August 6, 2022 · 1 min · Rafi

Memasang Schema dan Breadcrumb Json-LD pada Template Hugo

mrfdn.com - Memasang schema dan breadcrumb pada blog sangat berguna pada sisi SEO nya. Json LD merupakan format yang disarankan oleh google. Mari kita pasang di template hugo yang sudah dibuat. Pertama buat file partial bernama breadcrumbs.html dan schema.html Format Schema Json-LD Hugo SEO Untuk file schema.html, paste kode berikut di dalamnya: {{ if .IsHome -}} <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "{{ .Site.Title }}", "url": "{{ .Site.BaseURL }}", "description": "{{ .Site.Params.description }}", "thumbnailUrl": "{{ .Site.Params.Logo | absURL }}", "license": "{{ .Site.Params.Copyright }}" } </script> {{ else if .IsPage }} {{ $author := or (.Params.author) (.Site.Params.author) }} {{ $favicon := .Site.Params.favicon | absURL }} <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BlogPosting", "articleSection": "{{ .Section }}", "name": "{{ .Title | safeJS }}", "headline": "{{ .Title | safeJS }}", "alternativeHeadline": "{{ .Params.lead }}", "description": "{{ if .Description }} {{ .Description | safeJS }} {{ else }} {{ if .IsPage }} {{ .Summary }} {{ end }} {{ end }}", "inLanguage": {{ .Site.LanguageCode | default "en-us" }}, "isFamilyFriendly": "true", "mainEntityOfPage": { "@type": "WebPage", "@id": "{{ .Permalink }}" }, "author" : { "@type": "Person", "name": "{{ .Site.Params.author.name }}", "url": "{{ .Site.BaseURL }}" }, "creator" : { "@type": "Person", "name": "{{ .Site.Params.author.name }}" }, "accountablePerson" : { "@type": "Person", "name": "{{ .Site.Params.author.name }}" }, "copyrightHolder" : { "@type": "Person", "name": "{{ .Site.Params.author.name }}" }, "copyrightYear" : "{{ .Date.Format "2006" }}", "dateCreated": "{{ .Date.Format "2006-01-02T15:04:05.00Z" | safeHTML }}", "datePublished": "{{ .PublishDate.Format "2006-01-02T15:04:05.00Z" | safeHTML }}", "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05.00Z" | safeHTML }}", "publisher":{ "@type":"Organization", "name": {{ .Site.Params.author.name }}, "url": {{ .Site.BaseURL }}, "logo": { "@type": "ImageObject", "url": "{{ (printf "%s%s" $favicon "favicon-32x32.png") }}", "width":"32", "height":"32" } }, "image": {{ if .Params.images }} [{{ range $i, $e := .Params.images }} {{ if $i }} , {{ end }} {{ $e | absURL }} {{ end }} ] {{ else }} [{{ range $i, $e := .Site.Params.images }} {{ if $i }} , {{ end }} {{ $e | absURL }} {{ end }} ] {{ end }}, "url" : "{{ .Permalink }}", "wordCount" : "{{ .WordCount }}", "genre" : [ {{ range $index, $tag := .Params.categories }} {{ if $index }} , {{ end }} "{{ $tag }}" {{ end }}], "keywords" : [ {{ range $index, $keyword := .Params.tags }} {{ if $index }} , {{ end }} "{{ $keyword }}" {{ end }}] } </script> {{ end }} Format Breadcrumb Json-LD Hugo SEO Untuk file breadcrumbs.html paste kode berikut ini di dalamnya : ...

July 29, 2022 · 4 min · Rafi

Tutorial Cara Redirect URL dari Blogger ke Hugo

mrfdn.com - Setelah migrasi dari Blogger ke Hugo ada satu hal yang sangat penting untuk diperhatikan yaitu trafik pengunjung. Trafik pengunjung sangat erat kaitannya dengan url yang terpasang di situs. Apabila situs sudah berjalan cukup lama dan sudah mendapatkan pengunjung yang banyak maka jangan sampai mereka kabur gara-gara kesalahan. Sebagaimana diketahui bahwa url memiliki format yang selalu ada yaitu tahun dan bulan dan diakhiri dengan .html di tiap artikel. Format url seperti ini disebut uglyurl. ...

May 20, 2022 · 3 min · Rafi

Migrasi situs dari Blogger ke HUGO

mrfdn.com - Hugo merupakan salah satu teknologi bernama SSG (static site generator). Artinya aplikasi untuk membuat website halaman statis. Blogger pun begitu, halaman yang dihasilkan juga merupakan halaman statis yang diakhiri dengan .html. Ada banyak alasan orang memutuskan untuk pindah dari blogger ke platform lain, misalnya ke Wordpress. Salah satu alasannya adalah karena url blogger yang bertipe uglyurl. Baca juga : Cara migrasi url blogger di hugo Jika anda berniat untuk berpindah platform blogging dari Blogger ke platform lain, silahkan coba Hugo. ...

May 20, 2022 · 2 min · Rafi