HUGO on kenji.blog

Daftar Perintah Hugo

Fri, 31 May 2024 01:36:00 +0900

Apa itu Hugo

Hugo adalah salah satu pembuat situs statis (static site generator). Ini memungkinkan Anda membuat situs web dengan mengubah file Markdown menjadi HTML. Hugo ditulis dalam bahasa Go dan berjalan sangat cepat.

Blog ini juga dibuat menggunakan Hugo.

Instalasi CLI Hugo

Untuk menginstal CLI Hugo, jalankan perintah berikut.

※ Ini adalah contoh untuk macOS. Untuk OS lain, silakan merujuk ke dokumentasi resmi.

1

brew install hugo

Anda dapat menginstalnya menggunakan Homebrew.

Daftar Perintah Hugo

Hugo menyediakan berbagai perintah. Berikut ini adalah ringkasan perintah yang sering digunakan.

Membuat situs baru

1

hugo new site <Nama Situs>

Perintah untuk membuat situs baru. Tentukan nama situs pada <Nama Situs>.

Membuat artikel baru

1

hugo new <Nama Artikel>.md

Perintah untuk membuat artikel baru. Tentukan nama artikel pada <Nama Artikel>.

Memulai server

1

hugo server

Perintah untuk memulai server lokal. Anda dapat mengaksesnya di http://localhost:1313.

Membangun (Build) situs

1

hugo

Perintah untuk membangun situs. File HTML akan dihasilkan di direktori public.

Melakukan deploy

1

hugo deploy

Perintah untuk men-deploy situs. Pengaturan deploy dikonfigurasi dalam file config.toml.

Menampilkan daftar artikel

1

hugo list all

Perintah untuk menampilkan daftar artikel.

Memeriksa konfigurasi

1

hugo config

Perintah untuk memeriksa konfigurasi.

Menampilkan bantuan

1

hugo help

Perintah untuk menampilkan bantuan.

Menampilkan versi

1

hugo version

Perintah untuk menampilkan versi.

Demikianlah daftar perintah Hugo. Ada banyak perintah lain yang tersedia, jadi silakan merujuk ke dokumentasi resmi.

Referensi

Dokumentasi Resmi Hugo

Cara Mendapatkan dan Menempatkan Peringkat Halaman Populer dari Google Analytics

Mon, 10 Apr 2023 20:26:57 +0900

Pengantar

Dengan menggunakan layanan bernama Ranklet , Anda dapat dengan mudah mendapatkan dan menempatkan peringkat halaman populer dari Google Analytics.

Dalam artikel ini, saya akan menunjukkan cara menempatkannya di blog HUGO.

Contoh Hasil

Persiapan

Google Analytics harus disiapkan di situs

Langkah-langkah

Akses Ranklet
Klik Sign in with Google untuk masuk dengan akun Google (harus ditautkan ke akun Google Analytics)

Klik Izinkan

Atur informasi dasar

Saya telah mengaturnya seperti yang ditunjukkan di atas.

Pada Google Analytics View , pilih tampilan yang ingin Anda dapatkan peringkatnya.

Atur penggantian teks

Saya telah mengaturnya seperti yang ditunjukkan di atas. Ini diatur untuk menghapus | kenji.blog dari judul halaman.

Atur templat

HTML (angka peringkat disembunyikan)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<div class="ranklet ranklet-reset">
 <table class="ranklet-table">
 <tbody class="ranklet-pages">
 {{#context.pages}}
 <tr class="ranklet-page">
 <td class="ranklet-image">
 {{#image}}
 <a href="{{url}}" class="ranklet-link">
 <img class="ranklet-img" src="{{image}}" />
 </a>
 {{/image}}
 </td>
 <td class="ranklet-meta">
 <div class="ranklet-title">
 <a href="{{url}}" class="ranklet-link">
 {{title}}
 </a>
 </div>
 {{#description}}
 <div class="ranklet-description">
 <a href="{{url}}" class="ranklet-link">
 {{description}}
 </a>
 </div>
 {{/description}}
 </td>
 </tr>
 {{/context.pages}}
 </tbody>
 </table>
</div>

CSS (ukuran font diubah, deskripsi akan ditampilkan dalam 3 baris)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


#ranklet-{{context.id}} {
 .ranklet-reset { // リセット
 table, tr, td, div, span {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 line-height: 1;
 box-sizing: border-box;
 }
 }

 .ranklet-table {
 border-collapse: separate;
 border-spacing: 8px 24px;
 width: 100%;
 word-break: break-all;

 td {
 vertical-align: middle;
 }

 .ranklet-rank {
 text-align: center;
 font-size: 120%;
 }

 .ranklet-image {
 text-align: center;
 img {
 max-width: 128px;
 max-height: 128px;
 }
 }

 .ranklet-meta {
 .ranklet-title {
 font-size: 20px;
 line-height: 125%;
 }

 .ranklet-description {
 font-size: 16px;
 margin-top: 8px;
 line-height: 125%;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 行数 */
 }
 }
 }
}

JavaScript tidak ada perubahan

Salin HTML dari publikasi di situs

Salin HTML yang ditampilkan

Tempel ke templat HUGO

Buat layouts/partials/ranklet.html dan tempel HTML yang disalin

1

<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

Tempel kode di bawah ini pada baris sebelum </footer> di layouts/_default/single.html

1

{{- partial "ranklet.html" . }}

Itu saja. Peringkat akan ditampilkan di bagian bawah halaman ini seperti yang ditunjukkan di bawah ini.

Cara Mengaktifkan KaTeX (Tampilan Rumus Gaya LaTeX) di hugo

Fri, 31 Mar 2023 23:11:26 +0900

Apa itu KaTeX?

KaTeX adalah pustaka javascript untuk menampilkan rumus matematika bergaya LaTeX dalam HTML.

Secara khusus, Anda dapat menampilkan rumus seperti berikut ini:

$$f(x) = x^2 + x + 41$$

Tampaknya ada pustaka tampilan rumus bergaya LaTeX lainnya, tetapi KaTeX dikenal karena sederhana dan cepat.

Cara menambahkan ke hugo

Buat file baru layouts/partials/math.html dalam hierarki folder hugo.

Isinya harus sebagai berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
 renderMathInElement(
 document.body,
 {
 delimiters: [
 {left: "$$", right: "$$", display: true},
 {left: "\\[", right: "\\]", display: true},
 {left: "$", right: "$", display: false},
 {left: "\\(", right: "\\)", display: false}
 ]
 });
 });
</script>

Selanjutnya, tambahkan kode berikut ke file yang sudah ada layouts/partials/extend_head.html.

1
2
3


{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

Sekarang Anda siap menggunakan KaTeX.

Dengan menambahkan math: true ke front matter halaman, Anda dapat mengaktifkan KaTeX.

Yang harus Anda lakukan adalah menulis rumus gaya LaTeX di badan artikel.

1

$$ e^{i \pi} = -1 $$

Saat ditulis seperti di atas, ini akan ditampilkan sebagai berikut:

$$ e^{i \pi} = -1 $$

Referensi

Menggunakan Tag HTML di HUGO

Tue, 17 Jan 2023 19:20:32 +0900

Secara default, HUGO tidak mengizinkan penggunaan tag HTML di dalam artikel, tetapi Anda dapat mengaktifkannya dengan menambahkan kode berikut pada file config.toml.

1
2


[markup.goldmark.renderer]
 unsafe = true

Referensi: Configure Markup

Kode pendek yang dapat digunakan di HUGO

Sun, 11 Sep 2022 22:59:52 +0900

Kode pendek yang dapat digunakan di HUGO

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

Lainnya

Shortcodes

Catatan sampingan

Jika Anda ingin menampilkan {{< foo >}} di situs, Anda perlu menulisnya sebagai {{</* foo */>}}.

Perubahan Tata Letak Gambar PaperMod

Sun, 11 Sep 2022 18:50:40 +0900

Tata letak default menempatkan gambar di tengah dengan lebar 100%, tetapi kadang-kadang saya merasa itu agak terlalu besar, jadi saya mencoba membungkus gambar di bawah judul dan mengubah lebarnya menjadi sekitar 150px.

Lokasi perubahan file adalah sebagai berikut.

blank.css

Untuk mengubah margin, ukuran gambar, dan baris tampilan teks, tambahkan deskripsi berikut ke blank.css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

Karena definisi tidak dapat dihapus di sisi blank.css, hapus satu baris berikut di post-entry.css.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← hapus baris ini
 height: auto;
}

list.html

Untuk mengubah tata letak gambar, saya mengubah bagian berikut dari list.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- pindah ke bawah -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- pindah ke bawah -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- tambahkan -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- tambahkan -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- pindah dari atas -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- pindah dari atas -->
 </div><!-- tambahkan -->
 <div style="width:100%;"><!-- tambahkan -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- tambahkan -->
 </div><!-- tambahkan -->
</article>

Sepertinya ada cukup banyak permintaan serupa.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

Saya akan berterima kasih jika pengembang asli juga mendukungnya.

Cara Mengatur Twitter Card di PaperMod

Sat, 10 Sep 2022 18:41:22 +0900

Pendahuluan

Tema PaperMod mendukung Twitter Card. Namun, pengaturan Twitter Card harus ditulis dalam config.toml atau di informasi header *.md pada setiap artikel. Jika diatur di artikel maupun di config.toml, informasi header dari setiap artikel akan diprioritaskan.

Cara Pengaturan

config.toml

Di config.toml, tambahkan item bernama images di bawah [params]. Di images, tulis path ke gambar yang akan ditampilkan di Twitter Card. Jika Anda menempatkan gambar di folder static, Anda hanya perlu menentukan nama filenya saja.

1
2


[params]
 images = ["twitter_card.jpg"]

Struktur folder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Tulis di sini)
├─content
│ └─posts
│ └─folder artikel
│ │ index.md (Tulis di sini)
│ └─images
│ cover.png (Tempatkan di sini)
└─static
 twitter_card.jpg (Tempatkan di sini)

Informasi header setiap artikel

Di informasi header setiap artikel, tambahkan item bernama image di bawah cover. Jika Anda mengatur relative menjadi true, Anda dapat menentukannya dengan path relatif dari *.md artikel tersebut.

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

Jika Anda tidak ingin menampilkannya di bagian atas artikel

Jika Anda tidak ingin menampilkan gambar sampul di bagian atas artikel, tambahkan item bernama hidden di bawah cover dan atur menjadi true.

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

Tentang Ukuran Gambar

Berdasarkan spesifikasi PaperMod saat ini, ukuran Twitter Card tampaknya hanya mendukung summary_large_image. Ukuran yang tepat (resolusi) untuk summary_large_image bervariasi, namun sekitar 800 x 418 (rasio gambar 1.91:1) tampaknya sudah baik.

Situs referensi 1 Situs referensi 2

Jika memungkinkan, kami sarankan mengubah ukuran gambar sebelum mempublikasikannya.

Cara memeriksa pengaturan

Untuk memeriksa pengaturan Twitter Card, gunakan Twitter Card Validator. Namun, di lingkungan saya, pratinjau tidak ditampilkan dengan benar, jadi jika pratinjau tidak muncul, kami sarankan untuk memeriksanya sekali sebelum mempublikasikannya dengan menggunakan akun privat atau sejenisnya.

Mengubah Skema Warna PaperMod

Wed, 07 Sep 2022 15:30:21 +0900

Saya telah mengubah skema warna tema PaperMod. Saya merujuk ke bawah ini untuk metode perubahannya.

https://github.com/adityatelange/hugo-PaperMod/discussions/645

Path CSS adalah sebagai berikut.

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

Untuk saat ini, tidak ada perubahan pada mode gelap.

【HUGO】Pratinjau Tampilan di Lingkungan Lokal

Mon, 05 Sep 2022 12:28:01 +0900

Instalasi HUGO

Unduhan

Unduh HUGO

Dari situs web di atas, unduh dan ekstrak modul Windows yang sesuai dengan lingkungan Anda. Dalam kasus saya, saya mengunduh “hugo_0.102.3_Windows-64bit.zip”.

Ekstrak

Ekstrak file zip yang diunduh dan salin hugo.exe di dalamnya ke direktori yang Anda buat, misalnya C:\bin.

Daftarkan ke Variabel Lingkungan

Daftarkan ke variabel lingkungan untuk menjalankan hugo.exe dari lokasi mana pun. Ini adalah operasi di Windows 11, tetapi Anda dapat mendaftarkannya dengan prosedur berikut.

Tekan tombol Win+Pause untuk membuka Tentang.
Klik Pengaturan sistem lanjutan.
Klik Variabel Lingkungan.
Pilih Path dan klik Edit.
Klik Baru, masukkan “C:\bin” di baris baru, dan klik OK untuk menutup dialog.

Pratinjau Blog

Pergi ke folder blog HUGO di Command Prompt dan jalankan perintah berikut.

hugo server -D

Hasil eksekusinya ada di bawah. (-D adalah opsi untuk menampilkan artikel draf.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
 Pages | 39
 Paginator pages | 0
 Non-page files | 7
 Static files | 0
 Processed images | 0
 Aliases | 13
 Sitemaps | 1
 Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Alamat akan ditampilkan pada saat eksekusi (dalam contoh di atas, http://localhost:1313/), jadi salin alamat tersebut ke browser Anda. Pratinjau akan diperbarui secara otomatis setiap kali file disimpan. Untuk mengakhiri pratinjau, masukkan Ctrl+C di command prompt.