HUGO on kenji.blog

Hugo कमांड सूची

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

Hugo क्या है

Hugo एक स्टैटिक साइट जनरेटर है। आप Markdown फ़ाइलों को HTML में परिवर्तित करके एक वेबसाइट बना सकते हैं। Hugo Go भाषा में लिखा गया है और बहुत तेज़ी से काम करता है।

यह ब्लॉग भी Hugo से बनाया गया है।

Hugo CLI स्थापित करना

Hugo CLI स्थापित करने के लिए, नीचे दिया गया कमांड चलाएँ।

※ यह macOS का एक उदाहरण है। अन्य ऑपरेटिंग सिस्टम के लिए, कृपया आधिकारिक दस्तावेज़ देखें।

1

brew install hugo

आप इसे Homebrew का उपयोग करके स्थापित कर सकते हैं।

Hugo कमांड सूची

Hugo में विभिन्न कमांड उपलब्ध हैं। नीचे आमतौर पर उपयोग किए जाने वाले कमांड दिए गए हैं।

एक नई साइट बनाना

1

hugo new site <साइट का नाम>

एक नई साइट बनाने का कमांड। <साइट का नाम> में, साइट का नाम निर्दिष्ट करें।

एक नया लेख बनाना

1

hugo new <लेख का नाम>.md

एक नया लेख बनाने का कमांड। <लेख का नाम> में, लेख का नाम निर्दिष्ट करें।

सर्वर शुरू करना

1

hugo server

स्थानीय सर्वर शुरू करने का कमांड। इसे http://localhost:1313 पर एक्सेस किया जा सकता है।

बिल्ड करना

1

hugo

साइट को बिल्ड करने का कमांड। HTML फ़ाइलें public निर्देशिका (डायरेक्टरी) में उत्पन्न होंगी।

डिप्लॉय करना

1

hugo deploy

साइट को डिप्लॉय करने का कमांड। डिप्लॉयमेंट गंतव्य की सेटिंग config.toml फ़ाइल में की जाती है।

लेखों की सूची प्रदर्शित करना

1

hugo list all

लेखों की सूची प्रदर्शित करने का कमांड।

सेटिंग्स की जाँच करना

1

hugo config

सेटिंग्स की जाँच करने का कमांड।

मदद प्रदर्शित करना

1

hugo help

मदद प्रदर्शित करने का कमांड।

संस्करण प्रदर्शित करना

1

hugo version

संस्करण (वर्जन) प्रदर्शित करने का कमांड।

यह Hugo कमांड की सूची थी। कई अन्य कमांड उपलब्ध हैं, इसलिए कृपया आधिकारिक दस्तावेज़ देखें।

संदर्भ

Hugo आधिकारिक दस्तावेज़

Google Analytics से लोकप्रिय पेज रैंकिंग प्राप्त करके प्रदर्शित करने का तरीका

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

परिचय

Ranklet नामक सेवा का उपयोग करके, आप Google Analytics से लोकप्रिय पेज रैंकिंग प्राप्त करके आसानी से प्रदर्शित कर सकते हैं।

इस लेख में, मैं HUGO ब्लॉग में इसे प्रदर्शित करने का तरीका बताऊंगा।

डेमो छवि

तैयारी

साइट पर Google Analytics सेटअप होना चाहिए

चरण

Ranklet पर जाएं
Sign in with Google पर क्लिक करें और Google खाते से लॉग इन करें (यह Google Analytics खाते से जुड़ा होना चाहिए)

अनुमति दें पर क्लिक करें

बुनियादी जानकारी सेट करें

मैंने इसे ऊपर दिखाए अनुसार कॉन्फ़िगर किया।

Google Analytics View में वह व्यू चुनें जिससे आप रैंकिंग प्राप्त करना चाहते हैं।

टेक्स्ट प्रतिस्थापन सेट करें

मैंने इसे ऊपर दिखाए अनुसार सेट किया। पेज शीर्षक से | kenji.blog को हटाने के लिए इसे सेट किया गया है।

टेम्प्लेट सेट करें

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
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 (फ़ॉन्ट आकार बदला और विवरण को 3 पंक्तियों में प्रदर्शित करने के लिए सेट किया)

 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 में कोई बदलाव नहीं

“साइट पर प्रकाशित करें” से HTML कॉपी करें

प्रदर्शित HTML को कॉपी करें

HUGO टेम्प्लेट में पेस्ट करें

layouts/partials/ranklet.html बनाएं और कॉपी किए गए HTML को पेस्ट करें

1

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

layouts/_default/single.html में </footer> से पहले वाली पंक्ति पर नीचे दिया गया कोड पेस्ट करें

1

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

बस इतना ही। अब रैंकिंग इस पेज के नीचे दिखाए अनुसार प्रदर्शित होगी।

ह्यूगो (hugo) में KaTeX (LaTeX-शैली गणित सूत्र प्रदर्शन) को कैसे सक्षम करें

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

KaTeX क्या है

KaTeX HTML में LaTeX-शैली के गणित सूत्रों को प्रदर्शित करने के लिए एक जावास्क्रिप्ट (javascript) लाइब्रेरी है।

विशेष रूप से, आप नीचे दिए गए जैसे गणित सूत्र प्रदर्शित कर सकते हैं।

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

LaTeX-शैली के अन्य गणित सूत्र प्रदर्शन पुस्तकालय भी प्रतीत होते हैं, लेकिन KaTeX अपनी सादगी और गति के लिए जाना जाता है।

hugo में कैसे शामिल करें

hugo के फ़ोल्डर पदानुक्रम में एक नया layouts/partials/math.html बनाएँ।

सामग्री इस प्रकार होनी चाहिए।

 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>

इसके बाद, मौजूदा फ़ाइल layouts/partials/extend_head.html में निम्नलिखित कोड जोड़ें।

1
2
3


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

अब आप KaTeX का उपयोग करने के लिए तैयार हैं।

आप पेज के front matter में math: true जोड़कर KaTeX को सक्षम कर सकते हैं।

इसके बाद आपको बस पेज लेख के मुख्य भाग में LaTeX-शैली में सूत्र लिखना है।

1

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

जैसा कि ऊपर लिखा गया है, यह नीचे दिए गए अनुसार प्रदर्शित होगा।

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

संदर्भ

HUGO में HTML टैग का उपयोग करना

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

डिफ़ॉल्ट रूप से, HUGO लेखों में HTML टैग के उपयोग की अनुमति नहीं देता है, लेकिन आप config.toml में निम्नलिखित विवरण जोड़कर इसे सक्षम कर सकते हैं।

1
2


[markup.goldmark.renderer]
 unsafe = true

संदर्भ: Configure Markup

HUGO में इस्तेमाल होने वाले शॉर्टकोड

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

HUGO में इस्तेमाल होने वाले शॉर्टकोड

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

अन्य

Shortcodes

अतिरिक्त जानकारी

यदि आप साइट पर {{< foo >}} प्रदर्शित करना चाहते हैं, तो आपको {{</* foo */>}} लिखना होगा।

PaperMod में इमेज लेआउट बदलना

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

डिफ़ॉल्ट लेआउट में इमेज को 100% चौड़ाई के साथ केंद्र में रखा गया है, लेकिन क्योंकि मुझे कभी-कभी यह थोड़ा बड़ा लगता था, मैंने इमेज को शीर्षक के नीचे रैप करने की कोशिश की, और चौड़ाई को लगभग 150px में बदल दिया।

फ़ाइलों में परिवर्तन इस प्रकार हैं।

blank.css

मार्जिन, इमेज का आकार और टेक्स्ट डिस्प्ले लाइन को बदलने के लिए, 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

चूंकि मैं blank.css में परिभाषा को नहीं हटा सका, इसलिए मैंने post-entry.css में निम्नलिखित स्थान पर 1 पंक्ति हटा दी।

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← इस लाइन को हटा दें
 height: auto;
}

list.html

इमेज लेआउट को बदलने के लिए, मैंने 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) }} --><!-- नीचे ले जाएँ -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- नीचे ले जाएँ -->
 <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;"><!-- जोड़ा गया -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- जोड़ा गया -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- ऊपर से लाया गया -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- ऊपर से लाया गया -->
 </div><!-- जोड़ा गया -->
 <div style="width:100%;"><!-- जोड़ा गया -->
 {{- 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><!-- जोड़ा गया -->
 </div><!-- जोड़ा गया -->
</article>

ऐसा लगता है कि ऐसे कुछ अनुरोध नहीं हैं।

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

अगर मूल डेवलपर्स भी इसका समर्थन कर सकें तो बहुत अच्छा होगा।

PaperMod में Twitter Card कैसे सेट करें

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

परिचय

PaperMod थीम Twitter Card का समर्थन करती है। हालाँकि, Twitter Card सेटिंग्स को config.toml में या प्रत्येक लेख के *.md की हेडर जानकारी में लिखा जाना चाहिए। यदि आप प्रत्येक लेख और config.toml दोनों में सेट करते हैं, तो प्रत्येक लेख की हेडर जानकारी को प्राथमिकता दी जाएगी।

सेट कैसे करें

config.toml

config.toml में, [params] के तहत images नामक एक आइटम जोड़ें। images में, Twitter Card पर प्रदर्शित होने वाली छवि का पथ लिखें। यदि आप छवि को static फ़ोल्डर में रखते हैं, तो केवल फ़ाइल नाम निर्दिष्ट करना ठीक है।

1
2


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

फ़ोल्डर संरचना

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (यहाँ लिखें)
├─content
│ └─posts
│ └─लेख फ़ोल्डर
│ │ index.md (यहाँ लिखें)
│ └─images
│ cover.png (यहाँ रखें)
└─static
 twitter_card.jpg (यहाँ रखें)

प्रत्येक लेख की हेडर जानकारी

प्रत्येक लेख की हेडर जानकारी में, cover के तहत image नामक एक आइटम जोड़ें। यदि आप relative को true पर सेट करते हैं, तो आप इसे लेख के *.md से सापेक्ष पथ के रूप में निर्दिष्ट कर सकते हैं।

1
2
3


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

यदि आप इसे लेख के शीर्ष पर प्रदर्शित नहीं करना चाहते हैं

यदि आप लेख के शीर्ष पर कवर छवि प्रदर्शित नहीं करना चाहते हैं, तो cover के तहत hidden नामक एक आइटम जोड़ें और इसे true पर सेट करें।

1
2
3
4


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

छवि आकार के बारे में

वर्तमान PaperMod विनिर्देश में, ऐसा लगता है कि Twitter Card आकार केवल summary_large_image का समर्थन करता है। summary_large_image के लिए उपयुक्त आकार (रिज़ॉल्यूशन) के कई सिद्धांत हैं, लेकिन 800 x 418 (छवि अनुपात 1.91:1) के आसपास अच्छा लगता है।

संदर्भ साइट 1 संदर्भ साइट 2

यदि संभव हो, तो हम पोस्ट करने से पहले छवि का आकार बदलने की सलाह देते हैं।

सेटिंग्स की जांच कैसे करें

Twitter Card सेटिंग्स की जांच करने के लिए, Twitter Card Validator का उपयोग करें। हालाँकि, चूंकि मेरे वातावरण में पूर्वावलोकन ठीक से प्रदर्शित नहीं हुआ था, यदि पूर्वावलोकन प्रदर्शित नहीं होता है, तो मैं पोस्ट करने से पहले एक बार निजी खाते आदि का उपयोग करके इसकी जांच करने की सलाह देता हूं।

PaperMod की रंग योजना बदलना

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

मैंने PaperMod थीम की रंग योजना बदल दी है। परिवर्तन विधि के लिए मैंने निम्नलिखित का संदर्भ लिया।

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

CSS का पथ नीचे दिया गया है।

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 {
}

डार्क मोड के लिए अभी कोई बदलाव नहीं।

【HUGO】स्थानीय वातावरण में पूर्वावलोकन प्रदर्शित करें

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

HUGO की स्थापना

डाउनलोड

HUGO डाउनलोड करें

उपरोक्त वेबसाइट से, अपने वातावरण के अनुकूल Windows मॉड्यूल डाउनलोड करें और उसे निकालें। मेरे मामले में, मैंने “hugo_0.102.3_Windows-64bit.zip” डाउनलोड किया।

निकालना

डाउनलोड की गई zip फ़ाइल को निकालें, और उसके अंदर स्थित hugo.exe को आपके द्वारा बनाए गए फ़ोल्डर में कॉपी करें, उदाहरण के लिए C:\bin।

पर्यावरण चर में पंजीकृत करें

इसे पर्यावरण चर में पंजीकृत करें ताकि आप कहीं से भी hugo.exe को चला सकें। निम्नलिखित क्रियाएँ Windows 11 के लिए हैं, लेकिन आपको समान चरणों के साथ पंजीकरण करने में सक्षम होना चाहिए:

संस्करण जानकारी खोलने के लिए Win+Pause बटन दबाएँ
उन्नत सिस्टम सेटिंग्स पर क्लिक करें
पर्यावरण चर पर क्लिक करें
Path चुनें और संपादित करें पर क्लिक करें
नया पर क्लिक करें, नई लाइन में “C:\bin” दर्ज करें और डायलॉग बंद करने के लिए ठीक पर क्लिक करें

ब्लॉग का पूर्वावलोकन करें

कमांड प्रॉम्प्ट में, HUGO ब्लॉग फ़ोल्डर में जाएँ और नीचे दिए गए कमांड को चलाएँ।

hugo server -D

निष्पादन परिणाम नीचे दिया गया है। (-D ड्राफ्ट लेखों को प्रदर्शित करने का विकल्प है।)

 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

चूंकि निष्पादन के दौरान पता प्रदर्शित होता है (उपरोक्त उदाहरण में http://localhost:1313/), उस पते को अपने ब्राउज़र में कॉपी करें। हर बार फ़ाइल सहेजने पर पूर्वावलोकन स्वचालित रूप से अपडेट हो जाता है। पूर्वावलोकन समाप्त करने के लिए, कमांड प्रॉम्प्ट में Ctrl+C दर्ज करें।