https://ad25aderram.github.io/my-portfolio/tags/hugo/HugoHugoBlox Kit (https://hugoblox.com)en-usWed, 01 Apr 2026 00:00:00 +0000https://ad25aderram.github.io/my-portfolio/media/icon_hu_b93c5070c370bd46.pnghttps://ad25aderram.github.io/my-portfolio/tags/hugo/https://ad25aderram.github.io/my-portfolio/projects/portfolio-website/Wed, 01 Apr 2026 00:00:00 +0000https://ad25aderram.github.io/my-portfolio/projects/portfolio-website/<p>A personal portfolio site built from scratch — and a hands-on introduction to the modern developer workflow, from static site generation to automated deployment.</p> <h2 id="overview">Overview</h2> <p>The goal was simple: have a live portfolio to showcase projects. The outcome was something more valuable — a practical understanding of how modern deployment pipelines actually work, gained by building one myself.</p> <h2 id="approach">Approach</h2> <p>The stack centres on <strong>Hugo</strong> as the static site generator, with <strong>HugoBlox</strong> for theming and layout configuration. Content is written in Markdown with YAML front matter, and every push to the main branch triggers an automated deployment via <strong>GitHub Actions</strong> to <strong>GitHub Pages</strong>.</p> <p>Key learning areas:</p> <ul> <li><strong>YAML</strong> — understanding the syntax, structure, and role of <code>.yml</code> files in configuring GitHub Actions workflows</li> <li><strong>Markdown customisation</strong> — using front matter to configure pages, projects, and metadata within a static site generator</li> <li><strong>GitHub Actions</strong> — writing and reading CI/CD workflows that automate build and deploy steps</li> <li><strong>Linux environment</strong> — setting up and managing the entire development workflow on Arch Linux for the first time</li> </ul> <h2 id="architecture">Architecture</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">[Push to main] → [GitHub Actions Trigger] </span></span><span class="line"><span class="cl"> ↓ </span></span><span class="line"><span class="cl"> [Hugo Build Step] </span></span><span class="line"><span class="cl"> ↓ </span></span><span class="line"><span class="cl"> [Deploy to GitHub Pages] </span></span></code></pre></div><p><em>Every commit kicks off the full build-and-deploy cycle automatically — no manual steps.</em></p> <h2 id="tech-stack">Tech Stack</h2> <ul> <li><strong>Static Site Generator</strong>: Hugo + HugoBlox</li> <li><strong>Deployment</strong>: GitHub Pages</li> <li><strong>Automation</strong>: GitHub Actions</li> <li><strong>Configuration</strong>: YAML, Markdown</li> <li><strong>Environment</strong>: Arch Linux</li> </ul> <h2 id="key-takeaways">Key Takeaways</h2> <p>Sometimes the side-quests are the real learning. Setting up this portfolio introduced version-controlled deployments, declarative configuration, and Linux-native development workflows — all in the context of a project that was genuinely mine to own end to end.</p>