2025-02-28 00:18:22 +01:00

241 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" dir="auto">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script><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="noindex, nofollow">
<title>Automating Hugo Deployment with Gitea Actions | Dev Logbook</title>
<meta name="keywords" content="gitea, ci/cd, hugo">
<meta name="description" content="Recently, I tried setting up Gitea Actions to automatically update my Hugo blog whenever I pushed new content. The idea was simple:
Use Giteas built-in CI/CD to pull the repo,
Build the site using Hugo,
Deploy it to the server.
Setting Up Gitea Actions
First, I created a .gitea/workflows/deploy.yml file with the following steps:
name: Deploy Hugo Site
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Clone repository
uses: actions/checkout@v3
- name: Install Hugo
run: |
sudo apt update &amp;&amp; sudo apt install -y hugo
- name: Build site
run: hugo -D
- name: Deploy to server
run: |
scp -r public/* user@server:/var/www/html/
Authentication Issues 😩
To deploy, I needed SSH access to the server. Gitea doesnt have built-in secrets management (like GitHub Actions), so I had to hardcode my SSH private key inside the workflow.">
<meta name="author" content="Dev">
<link rel="canonical" href="http://localhost:1313/posts/first-attempt/">
<link crossorigin="anonymous" href="/assets/css/stylesheet.45e028aa8ce0961349adf411b013ee39406be2c0bc80d4ea3fc04555f7f4611a.css" integrity="sha256-ReAoqozglhNJrfQRsBPuOUBr4sC8gNTqP8BFVff0YRo=" rel="preload stylesheet" as="style">
<link rel="icon" href="http://localhost:1313/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:1313/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:1313/favicon-32x32.png">
<link rel="apple-touch-icon" href="http://localhost:1313/apple-touch-icon.png">
<link rel="mask-icon" href="http://localhost:1313/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<link rel="alternate" hreflang="en" href="http://localhost:1313/posts/first-attempt/">
<noscript>
<style>
#theme-toggle,
.top-link {
display: none;
}
</style>
</noscript>
</head>
<body class="" id="top">
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
}
</script>
<header class="header">
<nav class="nav">
<div class="logo">
<a href="http://localhost:1313/" accesskey="h" title="Dev Logbook (Alt + H)">Dev Logbook</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 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</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"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</button>
</div>
</div>
<ul id="menu">
</ul>
</nav>
</header>
<main class="main">
<article class="post-single">
<header class="post-header">
<h1 class="post-title entry-hint-parent">
Automating Hugo Deployment with Gitea Actions
</h1>
<div class="post-meta"><span title='2025-02-27 00:00:00 +0000 UTC'>February 27, 2025</span>&nbsp;·&nbsp;Dev
</div>
</header>
<div class="post-content"><p>Recently, I tried setting up <strong>Gitea Actions</strong> to automatically update my Hugo blog whenever I pushed new content. The idea was simple:</p>
<ul>
<li>Use Giteas built-in CI/CD to pull the repo,</li>
<li>Build the site using Hugo,</li>
<li>Deploy it to the server.</li>
</ul>
<h2 id="setting-up-gitea-actions">Setting Up Gitea Actions<a hidden class="anchor" aria-hidden="true" href="#setting-up-gitea-actions">#</a></h2>
<p>First, I created a <code>.gitea/workflows/deploy.yml</code> file with the following steps:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">name</span>: <span style="color:#ae81ff">Deploy Hugo Site</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">on</span>:
</span></span><span style="display:flex;"><span> <span style="color:#f92672">push</span>:
</span></span><span style="display:flex;"><span> <span style="color:#f92672">branches</span>:
</span></span><span style="display:flex;"><span> - <span style="color:#ae81ff">main</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">jobs</span>:
</span></span><span style="display:flex;"><span> <span style="color:#f92672">build</span>:
</span></span><span style="display:flex;"><span> <span style="color:#f92672">runs-on</span>: <span style="color:#ae81ff">ubuntu-latest</span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">steps</span>:
</span></span><span style="display:flex;"><span> - <span style="color:#f92672">name</span>: <span style="color:#ae81ff">Clone repository</span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">uses</span>: <span style="color:#ae81ff">actions/checkout@v3</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> - <span style="color:#f92672">name</span>: <span style="color:#ae81ff">Install Hugo</span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">run</span>: |<span style="color:#e6db74">
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> sudo apt update &amp;&amp; sudo apt install -y hugo</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> - <span style="color:#f92672">name</span>: <span style="color:#ae81ff">Build site</span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">run</span>: <span style="color:#ae81ff">hugo -D</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> - <span style="color:#f92672">name</span>: <span style="color:#ae81ff">Deploy to server</span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">run</span>: |<span style="color:#e6db74">
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> scp -r public/* user@server:/var/www/html/</span>
</span></span></code></pre></div><h1 id="authentication-issues-">Authentication Issues 😩<a hidden class="anchor" aria-hidden="true" href="#authentication-issues-">#</a></h1>
<p>To deploy, I needed SSH access to the server. Gitea doesnt have built-in secrets management (like GitHub Actions), so I had to hardcode my SSH private key inside the workflow.</p>
<p><img alt="My SSH Key" loading="lazy" src="/images/mykey.png"></p>
<p>I knew this wasn&rsquo;t ideal, but I just wanted to get it working first. Unfortunately, after multiple attempts, it still failed with permission denied (publickey) errors.</p>
<h1 id="whats-next-">What&rsquo;s Next? 🤔<a hidden class="anchor" aria-hidden="true" href="#whats-next-">#</a></h1>
<p>Instead of fighting with Gitea Actions, I decided to try something else. In my next post, I&rsquo;ll explain how I switched to a simpler, more reliable approach using a sync service.</p>
</div>
<footer class="post-footer">
<ul class="post-tags">
<li><a href="http://localhost:1313/tags/gitea/">Gitea</a></li>
<li><a href="http://localhost:1313/tags/ci/cd/">Ci/Cd</a></li>
<li><a href="http://localhost:1313/tags/hugo/">Hugo</a></li>
</ul>
</footer>
</article>
</main>
<footer class="footer">
<span>&copy; 2025 <a href="http://localhost:1313/">Dev Logbook</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>
let menu = document.getElementById('menu')
if (menu) {
menu.scrollLeft = localStorage.getItem("menu-scroll-position");
menu.onscroll = function () {
localStorage.setItem("menu-scroll-position", menu.scrollLeft);
}
}
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
var id = this.getAttribute("href").substr(1);
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
behavior: "smooth"
});
} else {
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
}
if (id === "top") {
history.replaceState(null, null, " ");
} else {
history.pushState(null, null, `#${id}`);
}
});
});
</script>
<script>
var mybutton = document.getElementById("top-link");
window.onscroll = function () {
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
mybutton.style.visibility = "visible";
mybutton.style.opacity = "1";
} else {
mybutton.style.visibility = "hidden";
mybutton.style.opacity = "0";
}
};
</script>
<script>
document.getElementById("theme-toggle").addEventListener("click", () => {
if (document.body.className.includes("dark")) {
document.body.classList.remove('dark');
localStorage.setItem("pref-theme", 'light');
} else {
document.body.classList.add('dark');
localStorage.setItem("pref-theme", 'dark');
}
})
</script>
</body>
</html>