212 lines
92 KiB
HTML
212 lines
92 KiB
HTML
<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Setup a HUGO Site | ahmza's ramblings</title>
|
|||
|
|
<meta name=keywords content="blog,website,web development,HUGO"><meta name=description content="Always wanted to setup a static website. Look no further !! In this post we go over the basics of setting up a HUGO site"><meta name=author content="ahmza"><link rel=canonical href=https://blog.ahmza.com/Page%28/posts/setting-up-a-hugo-site.md%29><link crossorigin=anonymous href=/assets/css/stylesheet.49e35863ac4b53ab71c7e3249dd5e722c701ee07f8d0cb006a4f4e954364b6fe.css integrity="sha256-SeNYY6xLU6txx+MkndXnIscB7gf40MsAak9OlUNktv4=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script><link rel=icon href=https://blog.ahmza.com/img/favicon.png><link rel=icon type=image/png sizes=16x16 href=https://blog.ahmza.com/img/favicon.png><link rel=icon type=image/png sizes=32x32 href=https://blog.ahmza.com/img/favicon.png><link rel=apple-touch-icon href=https://blog.ahmza.com/img/favicon.png><link rel=mask-icon href=https://blog.ahmza.com/img/favicon.png><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><noscript><style>#theme-toggle,.top-link{display:none}</style></noscript><script async src="https://www.googletagmanager.com/gtag/js?id=G-HSJHLHP8FZ"></script><script>var doNotTrack=!1;if(!doNotTrack){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-HSJHLHP8FZ",{anonymize_ip:!1})}</script><meta property="og:title" content="Setup a HUGO Site"><meta property="og:description" content="Always wanted to setup a static website. Look no further !! In this post we go over the basics of setting up a HUGO site"><meta property="og:type" content="article"><meta property="og:url" content="https://blog.ahmza.com/posts/setup-a-hugo-site/"><meta property="og:image" content="https://blog.ahmza.com/img/hugo/feature.webp"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-12-31T22:03:52+00:00"><meta property="article:modified_time" content="2022-12-31T22:03:52+00:00"><meta property="og:site_name" content="ahmza's ramblings"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://blog.ahmza.com/img/hugo/feature.webp"><meta name=twitter:title content="Setup a HUGO Site"><meta name=twitter:description content="Always wanted to setup a static website. Look no further !! In this post we go over the basics of setting up a HUGO site"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":2,"name":"Posts","item":"https://blog.ahmza.com/posts/"},{"@type":"ListItem","position":3,"name":"Setup a HUGO Site","item":"https://blog.ahmza.com/posts/setup-a-hugo-site/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Setup a HUGO Site","name":"Setup a HUGO Site","description":"Always wanted to setup a static website. Look no further !! In this post we go over the basics of setting up a HUGO site","keywords":["blog","website","web development","HUGO"],"articleBody":"Introduction Hugo is a static site generator, a tool that allows us to pre-compile our website into static HTML, CSS and JS. The main benefit of using such methods is speed. A Static site takes a lot less time to load than a site that uses databases.\nFor more information on HUGO read my other post Hugo Static Site Generator Prerequisites Git Installing HUGO Official steps The HUGO binary is what we will use throughout the creation of our project to initially setup our site then create posts etc… This step will vary depending on your operating system and distribution. I will show the steps for MacOS and Arch based Linux distros.\nMacOS Install homebrew brew install hugo Arch sudo pacman -S hugo Confirm Installation hugo version Create your site This a
|
||
|
|
The main benefit of using such methods is speed.
|
||
|
|
A Static site takes a lot less time to load than a site that uses databases.</p><p>For more information on HUGO read my other post <a href=https://blog.ahmza.com/posts/hugo-static-site-generator/ target=_blank>Hugo Static Site Generator</a></p><h2 id=prerequisites><strong>Prerequisites</strong><a hidden class=anchor aria-hidden=true href=#prerequisites>#</a></h2><ul><li>Git</li></ul><h2 id=installing-hugo><strong>Installing HUGO</strong><a hidden class=anchor aria-hidden=true href=#installing-hugo>#</a></h2><p><a href=https://gohugo.io/installation/ target=_blank>Official steps</a></p><p>The HUGO binary is what we will use throughout the creation of our project to initially setup our site then create posts etc…
|
||
|
|
This step will vary depending on your operating system and distribution.
|
||
|
|
I will show the steps for MacOS and Arch based Linux distros.</p><h3 id=macos>MacOS<a hidden class=anchor aria-hidden=true href=#macos>#</a></h3><ul><li>Install <a href=https://brew.sh/ target=_blank>homebrew</a></li></ul><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>brew install hugo
|
||
|
|
</span></span></code></pre></div><h3 id=arch>Arch<a hidden class=anchor aria-hidden=true href=#arch>#</a></h3><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>sudo pacman -S hugo
|
||
|
|
</span></span></code></pre></div><h3 id=confirm-installation>Confirm Installation<a hidden class=anchor aria-hidden=true href=#confirm-installation>#</a></h3><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>hugo version
|
||
|
|
</span></span></code></pre></div><h2 id=create-your-site>Create your site<a hidden class=anchor aria-hidden=true href=#create-your-site>#</a></h2><p>This assumes a few steps for you, i.e the theme used. The settings in this guide will mimic the base config of my site</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>hugo new site -f yml <your-sitename>
|
||
|
|
</span></span><span class=line><span class=cl><span class=nb>cd</span> <your-sitename>
|
||
|
|
</span></span><span class=line><span class=cl>git init
|
||
|
|
</span></span><span class=line><span class=cl>git submodule add --depth<span class=o>=</span><span class=m>1</span> https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
|
||
|
|
</span></span><span class=line><span class=cl><span class=nb>echo</span> <span class=s2>"theme: 'PaperMod'"</span> >> config.yml
|
||
|
|
</span></span></code></pre></div><h2 id=create-content>Create Content<a hidden class=anchor aria-hidden=true href=#create-content>#</a></h2><p>We will now begin adding new content to our website. Lets create our first post.</p><p>Lets start by creating a template for our posts.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>vim archetypes/posts.md
|
||
|
|
</span></span></code></pre></div><p>Paste the following base template</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-markdown data-lang=markdown><span class=line><span class=cl>---
|
||
|
|
</span></span><span class=line><span class=cl>title: {{ replace .TranslationBaseName "-" " " | title }}
|
||
|
|
</span></span><span class=line><span class=cl>date: {{ .Date }}
|
||
|
|
</span></span><span class=line><span class=cl>author: "<span class=p><</span><span class=nt>author</span><span class=p>></span>"
|
||
|
|
</span></span><span class=line><span class=cl>draft: true
|
||
|
|
</span></span><span class=line><span class=cl>weight:
|
||
|
|
</span></span><span class=line><span class=cl>
|
||
|
|
</span></span><span class=line><span class=cl>tags: [""]
|
||
|
|
</span></span><span class=line><span class=cl>description: ""
|
||
|
|
</span></span><span class=line><span class=cl>canonicalURL: "{{ .Page | absURL }}"
|
||
|
|
</span></span><span class=line><span class=cl>
|
||
|
|
</span></span><span class=line><span class=cl>cover:
|
||
|
|
</span></span><span class=line><span class=cl> image: "<span class=p><</span><span class=nt>image</span> <span class=na>path</span><span class=err>/</span><span class=na>url</span><span class=p>></span>" # image path/url
|
||
|
|
</span></span><span class=line><span class=cl> alt: "<span class=p><</span><span class=nt>alt</span> <span class=na>text</span><span class=p>></span>" # alt text
|
||
|
|
</span></span><span class=line><span class=cl> caption: "<span class=p><</span><span class=nt>text</span><span class=p>></span>" # display caption under cover
|
||
|
|
</span></span><span class=line><span class=cl> relative: false # when using page bundles set this to true
|
||
|
|
</span></span><span class=line><span class=cl>
|
||
|
|
</span></span><span class=line><span class=cl>---
|
||
|
|
</span></span><span class=line><span class=cl>
|
||
|
|
</span></span><span class=line><span class=cl><span class=gu>## **Introduction**
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=gu></span>
|
||
|
|
</span></span><span class=line><span class=cl><span class=gu>## **Conclusion**
|
||
|
|
</span></span></span></code></pre></div><p>If the posts folder does not exist, create it</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>mkdir content/posts
|
||
|
|
</span></span></code></pre></div><p>Create and edit a post</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>hugo new posts/<post-name>.md
|
||
|
|
</span></span><span class=line><span class=cl>vim content/posts/<post-name>.md
|
||
|
|
</span></span></code></pre></div><h2 id=start-the-server>Start the server<a hidden class=anchor aria-hidden=true href=#start-the-server>#</a></h2><p>Now that we have created our site, installed a theme and created a post lets start the server.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>hugo server -D
|
||
|
|
</span></span></code></pre></div><p><em>The -D flag tells hugo server to build drafts. (notice how we have a draft: option in our posts template.)</em>
|
||
|
|
<em>Of course once you have finished a post you set draft to false like so draft: false</em></p><p>You will be shown something like the following:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-fallback data-lang=fallback><span class=line><span class=cl>➜ hugo server -D
|
||
|
|
</span></span><span class=line><span class=cl>Start building sites …
|
||
|
|
</span></span><span class=line><span class=cl>hugo v0.109.0+extended darwin/arm64 BuildDate=unknown
|
||
|
|
</span></span><span class=line><span class=cl>
|
||
|
|
</span></span><span class=line><span class=cl> | EN
|
||
|
|
</span></span><span class=line><span class=cl>-------------------+-----
|
||
|
|
</span></span><span class=line><span class=cl> Pages | 10
|
||
|
|
</span></span><span class=line><span class=cl> Paginator pages | 0
|
||
|
|
</span></span><span class=line><span class=cl> Non-page files | 0
|
||
|
|
</span></span><span class=line><span class=cl> Static files | 0
|
||
|
|
</span></span><span class=line><span class=cl> Processed images | 0
|
||
|
|
</span></span><span class=line><span class=cl> Aliases | 2
|
||
|
|
</span></span><span class=line><span class=cl> Sitemaps | 1
|
||
|
|
</span></span><span class=line><span class=cl> Cleaned | 0
|
||
|
|
</span></span><span class=line><span class=cl>
|
||
|
|
</span></span><span class=line><span class=cl>Built in 12 ms
|
||
|
|
</span></span><span class=line><span class=cl>Watching for changes in /home/ahmza/prj/ahmza/{archetypes,assets,content,data,layouts,static,themes}
|
||
|
|
</span></span><span class=line><span class=cl>Watching for config changes in /home/ahmza/prj/ahmza/config.yml
|
||
|
|
</span></span><span class=line><span class=cl>Environment: "development"
|
||
|
|
</span></span><span class=line><span class=cl>Serving pages from memory
|
||
|
|
</span></span><span class=line><span class=cl>Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
|
||
|
|
</span></span><span class=line><span class=cl>Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
|
||
|
|
</span></span><span class=line><span class=cl>Press Ctrl+C to stop
|
||
|
|
</span></span></code></pre></div><p><em>Notice the second line to the bottom. Web Server… This line gives you a localhost url that you can use in your browser to view your site locally.</em></p><h2 id=configure-site>Configure Site<a hidden class=anchor aria-hidden=true href=#configure-site>#</a></h2><p>Open the config.yml file in a text editor.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>vim config.yml
|
||
|
|
</span></span></code></pre></div><p><strong>Important changes you need to make</strong></p><ul><li>baseURL - this is the URL your site will be accessed externally. In my case. <a href=https://blog.ahmza.com target=_blank>https://blog.ahmza.com</a></li><li>title - is the title of your page.</li></ul><p>Here is my config.yml with bits redacted so you can fill them in</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>baseURL</span><span class=p>:</span><span class=w> </span><span class=s2>"<your sites URL>"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=l><your site title></span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>paginate</span><span class=p>:</span><span class=w> </span><span class=m>5</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>theme</span><span class=p>:</span><span class=w> </span><span class=l>PaperMod</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>enableRobotsTXT</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>buildDrafts</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>buildFuture</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>buildExpired</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>enableEmoji</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>googleAnalytics</span><span class=p>:</span><span class=w> </span><span class=l><Google Analytics Tag></span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>minify</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>disableXML</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>minifyOutput</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>outputs</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>home</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>HTML</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>RSS</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>JSON</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>params</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>env</span><span class=p>:</span><span class=w> </span><span class=l>production</span><span class=w> </span><span class=c># to enable google analytics, opengraph, twitter-cards and schema.</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=l><title></span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>"<description>"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>keywords</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=l>Blog, Portfolio, PaperMod]</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>author</span><span class=p>:</span><span class=w> </span><span class=l><author></span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>images</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>"<link or path of image for opengraph, twitter-cards>"</span><span class=p>]</span><span class=w> </span><span class=c>#Change this</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>DateFormat</span><span class=p>:</span><span class=w> </span><span class=s2>"January 2, 2006"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>defaultTheme</span><span class=p>:</span><span class=w> </span><span class=l>auto</span><span class=w> </span><span class=c># dark, light</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>disableThemeToggle</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowReadingTime</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowShareButtons</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowPostNavLinks</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowBreadCrumbs</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowCodeCopyButtons</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowWordCount</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowRssButtonInSectionTermList</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>UseHugoToc</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>disableSpecial1stPost</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>disableScrollToTop</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>hideFooter</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>comments</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>hidemeta</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>hideSummary</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>showtoc</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>tocopen</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>assets</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># disableHLJS: true # to disable highlight.js</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># disableFingerprinting: true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>favicon</span><span class=p>:</span><span class=w> </span><span class=s2>"/img/favicon.png"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>favicon16x16</span><span class=p>:</span><span class=w> </span><span class=s2>"/img/favicon.png"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>favicon32x32</span><span class=p>:</span><span class=w> </span><span class=s2>"/img/favicon.png"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>apple_touch_icon</span><span class=p>:</span><span class=w> </span><span class=s2>"/img/favicon.png"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>safari_pinned_tab</span><span class=p>:</span><span class=w> </span><span class=s2>"/img/favicon.png"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>label</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>text</span><span class=p>:</span><span class=w> </span><span class=s2>"<Home>"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>icon</span><span class=p>:</span><span class=w> </span><span class=l>/img/favicon.png</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>iconHeight</span><span class=p>:</span><span class=w> </span><span class=m>35</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># profile-mode</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>profileMode</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>enabled</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w> </span><span class=c># needs to be explicitly set</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>"Welcome \U0001F44B"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>subtitle</span><span class=p>:</span><span class=w> </span><span class=s2>"<subtitle>"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>imageUrl</span><span class=p>:</span><span class=w> </span><span class=s2>"/img/favicon.png"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>imageWidth</span><span class=p>:</span><span class=w> </span><span class=m>120</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>imageHeight</span><span class=p>:</span><span class=w> </span><span class=m>120</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>imageTitle</span><span class=p>:</span><span class=w> </span><span class=s2>"my image"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>buttons</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>posts</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=l>posts</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>archive</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=l>archives</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>tags</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=l>tags</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># home-info mode</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>homeInfoParams</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>Title</span><span class=p>:</span><span class=w> </span><span class=s2>"Welcome \U0001F44B"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>Content</span><span class=p>:</span><span class=w> </span><span class=s2>"subtitle"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>socialIcons</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>LinkedIn</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=s2>"https://linkedin.com/in/"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>gitlab</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=s2>"https://gitlab.com/"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>cover</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>hidden</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w> </span><span class=c># hide everywhere but not in structured data</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>hiddenInList</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w> </span><span class=c># hide on list pages and home</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>hiddenInSingle</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w> </span><span class=c># hide on single page</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>editPost</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>URL</span><span class=p>:</span><span class=w> </span><span class=s2>"https://gitlab.com/<user>/<repo>/-/blob/main/content"</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>Text</span><span class=p>:</span><span class=w> </span><span class=s2>"Suggest Changes"</span><span class=w> </span><span class=c># edit text</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>appendFilePath</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w> </span><span class=c># to append file path to Edit link</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># for search</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># https://fusejs.io/api/options.html</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>fuseOpts</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>isCaseSensitive</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>shouldSort</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>location</span><span class=p>:</span><span class=w> </span><span class=m>0</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>distance</span><span class=p>:</span><span class=w> </span><span class=m>1000</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>threshold</span><span class=p>:</span><span class=w> </span><span class=m>0.4</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>minMatchCharLength</span><span class=p>:</span><span class=w> </span><span class=m>0</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>keys</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>"title"</span><span class=p>,</span><span class=w> </span><span class=s2>"permalink"</span><span class=p>,</span><span class=w> </span><span class=s2>"summary"</span><span class=p>,</span><span class=w> </span><span class=s2>"content"</span><span class=p>]</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>menu</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>main</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>identifier</span><span class=p>:</span><span class=w> </span><span class=l>posts</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>posts</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=l>/posts/</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>weight</span><span class=p>:</span><span class=w> </span><span class=m>1</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>identifier</span><span class=p>:</span><span class=w> </span><span class=l>archive</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>archive</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=l>/archives/</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>weight</span><span class=p>:</span><span class=w> </span><span class=m>10</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>identifier</span><span class=p>:</span><span class=w> </span><span class=l>tags</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>tags</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=l>/tags/</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>weight</span><span class=p>:</span><span class=w> </span><span class=m>20</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>identifier</span><span class=p>:</span><span class=w> </span><span class=l>search</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>search</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=l>/search/</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>weight</span><span class=p>:</span><span class=w> </span><span class=m>30</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=c># Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>pygmentsUseClasses</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>markup</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>highlight</span><span class=p>:</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>noClasses</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>codeFences</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>guessSyntax</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
|
||
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># lineNos: true</span><span class=w>
|
||
|
|
</span></span></span></code></pre></div><h2 id=run-the-server-again>Run the server again<a hidden class=anchor aria-hidden=true href=#run-the-server-again>#</a></h2><p>Run the server and check out your hard work. Change settings make posts etc. Have fun !!</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl>hugo server -D
|
||
|
|
</span></span></code></pre></div><h2 id=publish-your-site>Publish your site<a hidden class=anchor aria-hidden=true href=#publish-your-site>#</a></h2><p>Once you are happy with your site, you may want to publish it to the internet.</p><p>In the next post <a href=https://blog.ahmza.com/posts/publishing-your-hugo-site/ target=_blank>Publishing your HUGO site</a>
|
||
|
|
I will cover a basic method of publishing your site as well as a more complicated but automated workflow that I use.</p><h2 id=conclusion><strong>Conclusion</strong><a hidden class=anchor aria-hidden=true href=#conclusion>#</a></h2><p>Through this post you have learned to create your own HUGO site as well as create and edit posts.
|
||
|
|
We also learned about</p><ul><li>archetypes</li><li>Mark posts as drafts (expand on this</li><li>The hugo built in server (still need to add this))</li><li>webp + webm (still need to add this)</li><li>shortcodes (still need to add this)</li></ul></div><footer class=post-footer><ul class=post-tags><li><a href=https://blog.ahmza.com/tags/blog/>blog</a></li><li><a href=https://blog.ahmza.com/tags/website/>website</a></li><li><a href=https://blog.ahmza.com/tags/web-development/>web development</a></li><li><a href=https://blog.ahmza.com/tags/hugo/>HUGO</a></li></ul></footer></article></main><footer class=footer><span>© 2023 <a href=https://blog.ahmza.com>ahmza's ramblings</a></span>
|
||
|
|
<span>Powered by
|
||
|
|
<a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
|
||
|
|
<a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script src=https://storage.ko-fi.com/cdn/scripts/overlay-widget.js></script><script>kofiWidgetOverlay.draw("ahmza",{type:"floating-chat","floating-chat.donateButton.text":"Tip","floating-chat.donateButton.background-color":"rgb(145, 70, 255)","floating-chat.donateButton.text-color":"#fff"})</script><script>let menu=document.getElementById("menu");menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){e.preventDefault();var t=this.getAttribute("href").substr(1);window.matchMedia("(prefers-reduced-motion: reduce)").matches?document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(t)}']`).scrollIntoView({behavior:"smooth"}),t==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${t}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove("dark"),localStorage.setItem("pref-theme","light")):(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))})</script><script>document.querySelectorAll("pre > code").forEach(e=>{const n=e.parentNode.parentNode,t=document.createElement("button");t.classList.add("copy-code"),t.innerHTML="copy";function s(){t.innerHTML="copied!",setTimeout(()=>{t.innerHTML="copy"},2e3)}t.addEventListener("click",t=>{if("clipboard"in navigator){navigator.clipboard.writeText(e.textContent),s();return}const n=document.createRange();n.selectNodeContents(e);const o=window.getSelection();o.removeAllRanges(),o.addRange(n);try{document.execCommand("copy"),s()}catch{}o.removeRange(n)}),n.classList.contains("highlight")?n.appendChild(t):n.parentNode.firstChild==n||(e.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?e.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(t):e.parentNode.appendChild(t))})</script></body></html>
|