blog-ahmza-com/public/posts/hugo-static-site-generator/index.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.cea311b1d5843eeee9ccb805d4520f69aa5e2843db5d66ace5369ce8f1942c0f.css integrity="sha256-zqMRsdWEPu7pzLgF1FIPaapeKEPbXWas5Tac6PGULA8=" 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 mor
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&rsquo;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&rsquo;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&rsquo;t need to worry about backing up databases.</p><p>Markdown makes life a lot easier, Its quick, easy and doesn&rsquo;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 &ldquo;Suggest Changes&rdquo; 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&rsquo;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>&copy; 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.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>