2025-02-28 00:10:44 +01:00

262 lines
9.6 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:
``yaml
name: Deploy Hugo Site
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Clone repository
uses: actions/checkout@v3">
<meta name="author" content="Dev">
<link rel="canonical" href="http://localhost:1313/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/first-attempt/">
<noscript>
<style>
#theme-toggle,
.top-link {
display: none;
}
</style>
<style>
@media (prefers-color-scheme: dark) {
:root {
--theme: rgb(29, 30, 32);
--entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197);
--code-block-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
}
.list {
background: var(--theme);
}
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
}
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
}
}
</style>
</noscript>
</head>
<body class="" id="top">
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
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>
<p>``yaml
name: Deploy Hugo Site</p>
<p>on:
push:
branches:
- main</p>
<p>jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Clone repository
uses: actions/checkout@v3</p>
<pre><code> - 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/
</code></pre>
<pre tabindex="0"><code>
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.
&lt;placeholder&gt;
I knew this wasn&#39;t ideal, but I just wanted to get it working first. Unfortunately, after multiple attempts, it still failed with permission denied (publickey) errors.
What&#39;s Next? 🤔
Instead of fighting with Gitea Actions, I decided to try something else. In my next post, I&#39;ll explain how I switched to a simpler, more reliable approach using a sync service.
</code></pre>
</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>