https://misterthree.netlify.app/tags/hugo/Recent content in hugo on MisterThreeHugo -- gohugo.iomisterthree.blog@gmail.com (Misterthree)misterthree.blog@gmail.com (Misterthree)This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.Fri, 24 Jun 2022 12:12:54 +0700https://misterthree.netlify.app/blog/membuat-breadcrumb-dengan-markup-microdata-di-hugo/Fri, 24 Jun 2022 12:12:54 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/membuat-breadcrumb-dengan-markup-microdata-di-hugo/Apa itu Breadcrumbs Breadcrumbs adalah elemen pada website yang memiliki fungsi sebagai navigasi halaman. Breadcrumbs bisa disebut sebagai navigasi sekunder dalam website, karena breadcrumbs dapat menunjukan urutan struktur halaman-halaman yang sudah dibuka oleh pengunjung website. Breadcrumbs ini belum tentu bisa ditemukan pada setiap website, karena ada beberapa website yang tidak memiliki breadcrumbs. Padahal jika Anda tahu breadcrumbs ini memiliki banyak fungsi penting untuk website. Agar lebih jelasnya berikut kami berikan contoh penerapan breadcrumbs pada website dan blog.https://misterthree.netlify.app/blog/mengenal-shortcode/Tue, 02 Nov 2021 15:19:07 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/mengenal-shortcode/Apa itu Shortcodes? Shortcodes adalah syntax singkat yang dibuat oleh Hugo untuk merender berbagai kebutuhan tag HTML tambahan yang tidak tersedia oleh format markdown. Hugo sendiri sudah menyediakan beberapa shortcodes bawaan yang dapat Anda gunakan untuk menyematkan video, gambar, tweet, dll. Beberapa Shortcodes Yang Disediakan Oleh Hugo: Video Menampilkan atau embed video Youtube di Hugo {{< youtube ID-VIDEO >}} Gambar Menampilkan atau embed gambar di Hugo {{< figure src="LINK-GAMBAR.png" title="JUDUL GAMBAR" >}} Tweethttps://misterthree.netlify.app/blog/hugo-table-of-contents/Wed, 18 Aug 2021 11:48:35 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/hugo-table-of-contents/Jadi dalam posting singkat ini, kita akan membahas cara mengatur daftar isi di blog Hugo Anda. Kami akan membahas dua metode di bawah ini: Konten Template Pada metode pertama yang menggunakan shortcode, Anda harus memanggil tag shortcode secara manual di setiap file markdown. Keuntungannya adalah, Anda dapat menempatkannya di mana saja seperti didalam postingan, baik itu di heading pertama, paragraf pertama, dll. Pada metode kedua, kita akan menambahkan daftar isi dalam file template single.https://misterthree.netlify.app/blog/related-post-for-hugo/Thu, 29 Jul 2021 12:53:22 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/related-post-for-hugo/Artikel ini akan menunjukkan cara menambahkan Posting/Konten Terkait berdasarkan Tags di situs web Hugo Anda. Buat sebuah file di thema kalian :layouts/partials/related.html dan masukan code ini: {{ $related := .Site.RegularPages.Related . | first 3 -}} {{ with $related -}} <h3>Related Posts</h3> <ul> {{ range . -}} <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li> {{ end -}} </ul> {{ end -}} First 3 adalah jumlah Posting/Konten yang akan tampil di related Untuk memangil kode di atas kalian harus mengedit thema _default/single.https://misterthree.netlify.app/blog/custom-sitemap-hugo/Sat, 29 May 2021 19:24:09 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/custom-sitemap-hugo/Apa itu Sitemap? Sitemap adalah file yang berisi daftar semua halaman penting dari sebuah website. Alasan menyimpan semuanya dalam satu file “XML Sitemap” adalah karena ini membantu crawler menemukan semua halaman di satu tempat, dibandingkan menemukannya melalui link internal. Sitemap di Hugo Hugo sudah menyediakan template XML sitemap secara default, Namun template XML sitemap yang disediakan secara default akan me-list seluruh URL yang terkait dengan situs termasuk taxonomy seperti tag, series, dan category.https://misterthree.netlify.app/blog/memasang-pwa-di-hugo/Fri, 30 Apr 2021 13:09:35 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/memasang-pwa-di-hugo/Apa itu PWA? Istilah Progressive Web App diperkenalkan oleh Alex Russel, salah seorang Google Chrome engineer, dan Frances Berriman, desainer yang bekerja untuk Google pada tahun 2015. Google mendefinisikan PWA sebagai berikut: Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web’s low friction at every moment. Tujuan utama PWA adalah untuk memungkinkan web developer mengubah web yang sudah ada agar bisa berperilaku layaknya aplikasi mobile native tanpa melakukan banyak perubahan atau menambah programmer khusus.https://misterthree.netlify.app/blog/optimasi-seo-di-hugo/Mon, 26 Apr 2021 15:16:35 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/optimasi-seo-di-hugo/Seo dalam sebuah website sangat di butuhkan dengan menerapkan sejumlah langkah optimasi SEO, website atau blog lebih mudah mendapatkan ranking tinggi di hasil pencarian Google. SEO adalah Search Engine Optimization, biasa disingkat SEO adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritme mesin pencari tersebut. Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan.https://misterthree.netlify.app/blog/memasang-disqus-di-hugo/Fri, 16 Apr 2021 12:26:46 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/memasang-disqus-di-hugo/Cara memasang komentar Disqus di blog yang menggunakan hugo tidaklah sulit. Apakah Anda sudah mendengar Disqus sebelumnya? Sebagai informasi, Disqus merupakan layanan fitur komentar dan diskusi pada sebuah website. Plugin Disqus memudahkan Anda dalam memberikan komentar pada sebuah website. Selain itu, adanya plugin ini membuat suatu konten lebih interaktif. Layanan ini menghubungkan website dengan orang yang berkomentar melalui komunitas diskusi. Pertama-tama Anda harus memiliki akun Disqus terlebih dahulu sebelum memasangnya ke blog hugo.https://misterthree.netlify.app/blog/membuat-pagination-hugo/Sun, 04 Apr 2021 11:04:01 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/membuat-pagination-hugo/Fitur Pagination adalah salah satu fitur yang membuat website dapat menampilkan data dengan lebih cepat, karena kita melakukan pembatasan terhadap berapa jumlah konten yang ditampilkan, sehingga website tidak perlu load seluruh data saat halaman halaman ditampilkan. Sebagai contoh kita memiliki 100 konten, jika tidak mengunakan pagination atau membatasi konten yang tampil, maka website kita akan menampilkan 100 konten tersebut, tentunya itu akan memakan banyak ruang dan waktu sampai 100 konten tersebut dapat ditampilkan.https://misterthree.netlify.app/blog/deploy-hugo-github/Thu, 01 Apr 2021 12:37:25 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/deploy-hugo-github/Github Pages adalah sebuah website yang memanfaatkan hosting github langsung dari repositori yang ada. Setiap akun atau organisasi hanya memiliki satu Repositori, namun hosting yang kamu miliki masih bisa di manfaatkan sebagai media penyimpanan proyek yang sedang kamu kerjakan. Nah, disini kita akan mencoba memanfaatkan akun github yang kita miliki sebagai hosting Hugo. Jika kamu belum memiliki akun github, kamu perlu mendaftar terlebih dahulu untuk dapat menggunakannya. Berdasarkan panduan yang saya baca dari situs resmi Hugo, ada empat cara yang bisa digunakan untuk hosting hugo di github :https://misterthree.netlify.app/blog/mengenal-taxonomy/Sun, 28 Mar 2021 12:56:00 +0000misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/mengenal-taxonomy/Pada dasasarnya saat membuat konten blog, kita akan mengelompokkan konten tersebut berdasarkan kategori atau tag yang sesuai dengan topik yang sedang di angkat, hal ini bertujuan untuk mempermudah pembaca menemukan konten yang sedang mereka cari. Untuk mengelompokkan kategori atau tag di hugo kita dapat mengunakan sistem taxonomy. Fungsi taxonomy di Hugo Secara logika taxonomy dapat mengelompokan beberapa konten kedalam satu atau lebih kategori dan tags. Kita memiliki sebuat blog video, maka kita dapat mengelompokan video tersebut kedalam kategori atau tag yang kita inginkanhttps://misterthree.netlify.app/blog/membuat-postingan-baru/Sat, 27 Mar 2021 12:56:00 +0000misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/membuat-postingan-baru/Konten adalah salah satu bagian penting dari blog, tanpa konten yang baik tentu blog tersebut tidak memiliki arti. Alur pembuatan konten di Hugo juga perlu diperhatikan agar pengalaman menulisnya juga lebih maksimal dan terhindar dari error yang tidak berarti. Untuk itu di post kali ini, kita akan melihat bagaimana cara membuat blog post di Hugo, tidak hanya kontennya saja, tetapi juga cara mengatur postingan itu sendiri, seperti kapan post itu dipublikasikan, judul, dan image.https://misterthree.netlify.app/blog/mengenal-front-matter-hugo/Fri, 26 Mar 2021 12:56:00 +0000misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/mengenal-front-matter-hugo/Apa itu Front Matter di Hugo Front Matter adalah data-data yang tersimpan untuk konten kita yang berisi informasi meta dari file tersebut. Isinya bisa apa saja, sebagai contoh untuk memberi judul, tanggal, tags, image dan apakah postingannya ingin berupa draft atau dipublish langsung. Contoh Front Matter di Hugo Kalau kamu sudah pernah membuat postingan di Hugo, berarti kamu sudah pernah melihat front matter ini +++ title = "Judu Posting" date = 2020-08-15T09:44:10+08:00 tags = ["hugo", "post"] image = "/image.https://misterthree.netlify.app/blog/membuat-tema-hugo/Thu, 25 Mar 2021 12:56:00 +0000misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/membuat-tema-hugo/Ini adalah tutorial membuat tema Hugo dari nol. Hugo sudah mempermudah kita untuk bereksperimen dengan menyediakan perintah untuk membuat tema baru. Alasan Membuat Tema Baru Kode tema yang digunakan masih berantakan. Kode CSS-nya masih murni dari tema yang disediakan oleh Hugo. Ingin belajar membuat tema sendiri Membuat Tema Baru di Hugo Hugo sudah menyediakan perintah untuk membuat tema baru: hugo new theme [name] Sebagai contoh, saya akan membuat tema bernama misterthree.https://misterthree.netlify.app/blog/membuat-blog-dengan-hugo/Wed, 24 Mar 2021 08:00:00 +0000misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/membuat-blog-dengan-hugo/Jika kamu belum familiar dengan kosep static site generator, saya akan mencoba menjelaskannya secara singkat. Static site generator mengijinkan kamu memegang kendali penuh atas konten kamu dan output nya akan berupa versi statis dari website kamu. Yang dimaksud versi statis adalah, web yang hanya berisikan html css dan javascript. Ada beberapa keuntungan dari situs statis, diantaranya : Cepat dari segi performa, karena situs ini tidak membutuhkan proses pengambilan data dari database.