48 lines
19 KiB
HTML
48 lines
19 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>HUGO Static Site Generator | ahmza's ramblings</title>
|
||
<meta name=keywords content="blog,website,web development,HUGO"><meta name=description content="HUGO is a static site generator. No idea what that is ? Check out this post to learn more !"><meta name=author content="ahmza"><link rel=canonical href=https://blog.ahmza.com/Page%28/posts/hugo-static-site-generator.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="HUGO Static Site Generator"><meta property="og:description" content="HUGO is a static site generator. No idea what that is ? Check out this post to learn more !"><meta property="og:type" content="article"><meta property="og:url" content="https://blog.ahmza.com/posts/hugo-static-site-generator/"><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="2021-12-26T00:23:22+00:00"><meta property="article:modified_time" content="2021-12-26T00:23:22+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="HUGO Static Site Generator"><meta name=twitter:description content="HUGO is a static site generator. No idea what that is ? Check out this post to learn more !"><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":"HUGO Static Site Generator","item":"https://blog.ahmza.com/posts/hugo-static-site-generator/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"HUGO Static Site Generator","name":"HUGO Static Site Generator","description":"HUGO is a static site generator. No idea what that is ? Check out this post to learn more !","keywords":["blog","website","web development","HUGO"],"articleBody":"Introduction Hugo is a static site generator, which basically means it’s a tool that allows us to pre-compile all of our website into static HTML, CSS and JS. The main benefit of using such methods to crate a site is speed. A Static site takes a lot less time to load than a site that uses databases for example.\nDisadvantages Some of the disadvantages I have come across are as follows:\nA lot more backend work Harder to manage content Editing and creating content can be a pain This is to no fault of hugo itself but to the unnecessary complexity in my infrastructure!! Deploying the site in my environment was a challenge as I had to get the site files from gitlab and build a docker image that would compile the site as well as create an image to be deployed in my docker swarm. I do feel I made this more complicated than it needed to be, however now that I have it working the workflow is great.\nThe content is manually managed meaning you have to create edit and delete posts yourself. HUGO does a great job at making this as pleasant of an experience as possible but coming from a CMS (Content Management System) it is a lot more involved.\nBecause there is no integrated webui or CMS for Hugo, the experience you get when creating content will vary person to person depending on the environment you use to create the content. When using a CMS I took dragging and dropping images for granted where now I have to explicitly define full paths to images which can get me out of the flow of writing content, however it’s finding solutions for these challenges that makes this interesting.\nThen Why? The main reason for switching to a static site generator is speed and how lightweight the final product is, at the time of writing this the total size of the content on this site including images is ~5mb which is considerably smaller than a full CMS and database alone with no content.\nSome advantages of static sites in general:\nSecurity Reliability Scalability Low Resource Requirement Although the pursuit of speed brought me to HUGO, here are a few things that kept me:\nGit Markdown Simplicity Live Preview As mentioned before my initial reason for switching to a static site generator was speed and how lightweight the final product is, at the time of writing this the total size of the content on this site including images is ~5mb which is considerably smaller than a full CMS and database alone with no content.\nI have recently started to use git a lot more and I’m able to implement a content versioning system that can follow me everywhere and on any device very easily. It also means there is always a backup of my site on gitlab and I don’t need to worry about backing up databases.\nMarkdown makes life a lot easier, Its quick, easy and doesn’t require me to right click or use buttons. Markdown is also very transferable, scroll up to the top of this page and hit the “Suggest Changes” button and you will see how a markdown file can be interpreted by not only HUGO but gitlab too and so many other tools.\nRegarding themes, HUGO allows you to easily create your own, or just as easily implement other peoples themes.\nAlthough at the start HUGO seemed difficult to me I managed to learn it pretty quickly and appreciate the simplicity it brings to the table. I wouldn’t say my workflow is perfect by any means but I feel HUGO makes it easy to develop a smooth workflow.\nLive Preview allows you to start up a light weight web server locally and has an auto refresh feature so whenever a change is made the web page refreshes so you can see changes without manually refreshing.\nConclusion This post is a quick intro to HUGO and why I choose to use it, However there is another post on setting up a HUGO site from start to finish.\nSetting Up a HUGO Site ","wordCount":"687","inLanguage":"en","image":"https://blog.ahmza.com/img/hugo/feature.webp","datePublished":"2021-12-26T00:23:22Z","dateModified":"2021-12-26T00:23:22Z","author":{"@type":"Person","name":"ahmza"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.ahmza.com/posts/hugo-static-site-generator/"},"publisher":{"@type":"Organization","name":"ahmza's ramblings","logo":{"@type":"ImageObject","url":"https://blog.ahmza.com/img/favicon.png"}}}</script></head><body class=dark id=top><script>localStorage.getItem("pref-theme")==="light"&&document.body.classList.remove("dark")</script><header class=header><nav class=nav><div class=logo><a href=https://blog.ahmza.com accesskey=h title="ahmza's ramblings (Alt + H)">ahmza's ramblings</a><div class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button></div></div><ul id=menu><li><a href=https://blog.ahmza.com/posts/ title=posts><span>posts</span></a></li><li><a href=https://blog.ahmza.com/archives/ title=archive><span>archive</span></a></li><li><a href=https://blog.ahmza.com/tags/ title=tags><span>tags</span></a></li><li><a href=https://blog.ahmza.com/contact title=contact><span>contact</span></a></li><li><a href=https://blog.ahmza.com/search/ title="search (Alt + /)" accesskey=/><span>search</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://blog.ahmza.com>Home</a> » <a href=https://blog.ahmza.com/posts/>Posts</a></div><h1 class=post-title>HUGO Static Site Generator</h1><div class=post-description>HUGO is a static site generator. No idea what that is ? Check out this post to learn more !</div><div class=post-meta><span title='2021-12-26 00:23:22 +0000 UTC'>December 26, 2021</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;687 words&nbsp;·&nbsp;ahmza | <a href=https://gitlab.com/AHMZA/blog/-/blob/main/content/posts/hugo-static-site-generator.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><figure class=entry-cover><img loading=lazy src=https://blog.ahmza.com/img/hugo/feature.webp alt="HUGO logo"><p>The HUGO logo</p></figure><div class=toc><details><summary accesskey=c title="(Alt + C)"><span class=details>Table of Contents</span></summary><div class=inner><ul><li><a href=#introduction aria-label=Introduction><strong>Introduction</strong></a></li><li><a href=#disadvantages aria-label=Disadvantages><strong>Disadvantages</strong></a></li><li><a href=#then-why aria-label="Then Why?"><strong>Then Why?</strong></a></li><li><a href=#conclusion aria-label=Conclusion><strong>Conclusion</strong></a></li></ul></div></details></div><div class=post-content><h2 id=introduction><strong>Introduction</strong><a hidden class=anchor aria-hidden=true href=#introduction>#</a></h2><p>Hugo is a static site generator, which basically means it’s a tool that
|
||
allows us to pre-compile all of our website into static HTML, CSS and
|
||
JS. The main benefit of using such methods to crate a site is speed. A
|
||
Static site takes a lot less time to load than a site that uses
|
||
databases for example.</p><h2 id=disadvantages><strong>Disadvantages</strong><a hidden class=anchor aria-hidden=true href=#disadvantages>#</a></h2><p>Some of the disadvantages I have come across are as follows:</p><ul><li>A lot more backend work</li><li>Harder to manage content</li><li>Editing and creating content can be a pain</li></ul><p><strong>This is to no fault of hugo itself but to the unnecessary complexity
|
||
in my infrastructure!!</strong> Deploying the site in my environment was a
|
||
challenge as I had to get the site files from gitlab and build a docker
|
||
image that would compile the site as well as create an image to be
|
||
deployed in my <a href=https://blog.ahmza.com/posts/building-a-docker-swarm-with-pis target=_blank>docker swarm.</a>
|
||
I do feel I made this more complicated than it needed to be, however now
|
||
that I have it working the workflow is great.</p><p>The content is manually managed meaning you have to create edit and
|
||
delete posts yourself. HUGO does a great job at making this as pleasant
|
||
of an experience as possible but coming from a CMS (Content Management
|
||
System) it is a lot more involved.</p><p>Because there is no integrated webui or CMS for Hugo, the experience
|
||
you get when creating content will vary person to person depending on
|
||
the environment you use to create the content. When using a CMS I took
|
||
dragging and dropping images for granted where now I have to explicitly
|
||
define full paths to images which can get me out of the flow of writing
|
||
content, however it’s finding solutions for these challenges that makes
|
||
this interesting.</p><h2 id=then-why><strong>Then Why?</strong><a hidden class=anchor aria-hidden=true href=#then-why>#</a></h2><p>The main reason for switching to a static site generator is speed and
|
||
how lightweight the final product is, at the time of writing this the
|
||
total size of the content on this site including images is ~5mb which
|
||
is considerably smaller than a full CMS and database alone with no
|
||
content.</p><p>Some advantages of static sites in general:</p><ul><li>Security</li><li>Reliability</li><li>Scalability</li><li>Low Resource Requirement</li></ul><p>Although the pursuit of speed brought me to HUGO, here are a few things
|
||
that kept me:</p><ul><li>Git</li><li>Markdown</li><li>Simplicity</li><li>Live Preview</li></ul><p>As mentioned before my initial reason for switching to a static site
|
||
generator was speed and how lightweight the final product is, at the
|
||
time of writing this the total size of the content on this site
|
||
including images is ~5mb which is considerably smaller than a full CMS
|
||
and database alone with no content.</p><p>I have recently started to use git a lot more and I’m able to
|
||
implement a content versioning system that can follow me everywhere and
|
||
on any device very easily. It also means there is always a backup of my
|
||
site on gitlab and I don’t need to worry about backing up databases.</p><p>Markdown makes life a lot easier, Its quick, easy and doesn’t require
|
||
me to right click or use buttons. Markdown is also very transferable,
|
||
scroll up to the top of this page and hit the “Suggest Changes” button
|
||
and you will see how a markdown file can be interpreted by not only
|
||
HUGO but gitlab too and so many other tools.</p><video autoplay loop muted playsinline aria-label='i love it' style=display:block;margin-left:auto;margin-right:auto;width:50%;height:auto;padding:10px>
|
||
<source src=/webm/i-love-it.webm type=video/webm></video><p>Regarding themes, HUGO allows you to easily create your own, or just as
|
||
easily implement other peoples themes.</p><p>Although at the start HUGO seemed difficult to me I managed to learn it
|
||
pretty quickly and appreciate the simplicity it brings to the table. I
|
||
wouldn’t say my workflow is perfect by any means but I feel HUGO makes
|
||
it easy to develop a smooth workflow.</p><p>Live Preview allows you to start up a light weight web server locally
|
||
and has an auto refresh feature so whenever a change is made the web
|
||
page refreshes so you can see changes without manually refreshing.</p><h2 id=conclusion><strong>Conclusion</strong><a hidden class=anchor aria-hidden=true href=#conclusion>#</a></h2><p>This post is a quick intro to HUGO and why I choose to use it, However
|
||
there is another post on setting up a HUGO site from start to finish.</p><p><a href=https://blog.ahmza.com/posts/setup-a-hugo-site target=_blank>Setting Up a HUGO Site</a></p></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> |