This commit is contained in:
Joren 2025-05-29 17:32:58 +02:00
parent d3499f20af
commit d9a51b2ae4
Signed by: Joren
GPG Key ID: 280E33DFBC0F1B55
38 changed files with 47508 additions and 253 deletions

View File

@ -0,0 +1,81 @@
---
title: "Building My Hugo Website on a VPS"
image: "/images/project/project-1.jpg"
date: "2025-05-29 00:00:00 +0000 UTC"
description: "How I built and deployed my personal blog using Hugo and hosted it on a minimal Alpine Linux VPS."
draft: false
---
I built my personal blog using [Hugo](https://gohugo.io/) and deployed it on a lightweight Alpine Linux VPS. I chose this setup to have full control, keep things simple, and avoid bloated platforms or services. Heres how the process went from site generation to live deployment.
<br>
### Creating the Hugo Site
On my development machine, I created a new Hugo site:
```
hugo new site howest-blog
```
I used the `professors-hugo` theme and copied its `exampleSite` content into my project. I customized the layout, structure, and styling by editing content files, SCSS in `assets/scss/custom.scss`, and partial templates in the theme directory.
All content lives under `content/`, with separate folders for `blog/` and `project/`, each containing `.md` files with front matter and Markdown content.
<br>
### Customization
I edited the `config/_default/hugo.toml` to configure site parameters like the base URL, theme, language, and menus. SCSS and image assets go in `assets/`, and are processed by Hugo's pipeline. Static files like favicons are placed in `static/`.
To preview the site locally:
```
hugo server
```
To build the static site:
```
hugo
```
This generates everything in the `public/` folder.
<br>
### VPS Deployment
I rented a minimal Alpine Linux VPS and installed only what I needed. After setting up SSH and a basic nginx web server, I copied the `public/` folder over using `scp`:
```
scp -r public/* user@my-vps:/var/www/html
```
On the VPS, I installed nginx:
```
apk add nginx
```
And configured `/etc/nginx/conf.d/default.conf` to serve files from `/var/www/html`. Then I enabled and started nginx:
```
rc-service nginx start
rc-update add nginx
```
Now my Hugo site is live and served directly as static files—no backend, no database, just HTML, CSS, and JS.
<br>
### Why Alpine + Hugo?
Alpine Linux is minimal and fast, perfect for serving static sites with low resource usage. Combined with Hugos speed and flexibility, I get a complete, performant setup that I fully control. Its secure, lightweight, and easy to update—just rebuild and re-upload the `public/` folder.
<br>
This setup is perfect if you want full control and minimal overhead for a personal blog or portfolio.

View File

@ -270,6 +270,8 @@
"caption-an image caption",
"code-and-syntax-highlighting",
"contact",
"creating-the-hugo-site",
"customization",
"cyber-defence-on-the-digital-frontline-a-mission-with-nato",
"drmdtool",
"email",
@ -318,9 +320,11 @@
"toggler",
"ui-previews",
"unordered-list",
"vps-deployment",
"web-ui--cli",
"what-even-is-locked-shields",
"whats-new",
"why-alpine--hugo",
"why-it-mattered",
"you-cant-prepare-for-this",
"youtube-video"

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>\[&#34;Cybersecurity&#34;, &#34;Event Recap&#34;] on Professors - Personal Portfolio Theme</title>
<link>http://localhost:1313/professors/site/categories/%5Ccybersecurity-event-recap/</link>
<description>Recent content in \[&#34;Cybersecurity&#34;, &#34;Event Recap&#34;] on Professors - Personal Portfolio Theme</description>
<generator>Hugo</generator>
<language>en</language>
<atom:link href="http://localhost:1313/professors/site/categories/%5Ccybersecurity-event-recap/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Cybersecurity on Professors - Personal Portfolio Theme</title>
<link>http://192.168.90.54:1313/categories/cybersecurity/</link>
<description>Recent content in Cybersecurity on Professors - Personal Portfolio Theme</description>
<generator>Hugo</generator>
<language>en</language>
<lastBuildDate>Tue, 13 May 2025 00:00:00 +0000</lastBuildDate>
<atom:link href="http://192.168.90.54:1313/categories/cybersecurity/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Cyber Defence on the Digital Frontline: A Mission with NATO</title>
<link>http://192.168.90.54:1313/blog/post-2/</link>
<pubDate>Tue, 13 May 2025 00:00:00 +0000</pubDate>
<guid>http://192.168.90.54:1313/blog/post-2/</guid>
<description>&lt;h1 id=&#34;cyber-defence-on-the-digital-frontline-a-mission-with-nato&#34;&gt;Cyber Defence on the Digital Frontline: A Mission with NATO&lt;/h1&gt;&#xA;&lt;h4 id=&#34;on-a-mission-with-nato-cyber-defence-on-the-frontline&#34;&gt;On a Mission with NATO: Cyber Defence on the Frontline&lt;/h4&gt;&#xA;&lt;p&gt;Howests ongoing commitment to world-class cybersecurity training took center stage again as six lecturers from the Cyber Security program joined forces with experts from Latvia, Luxembourg and Belgium in one of NATO&amp;rsquo;s most intensive simulations: the Locked Shields exercise, hosted by the Cooperative Cyber Defence Centre of Excellence (CCDCOE). Now in its fifth year of participation, the Howest team shared their firsthand experiences at a special evening talk at Howest Bruges.&lt;/p&gt;</description>
</item>
<item>
<title>On a Mission with NATO: Cyber Defence on the Frontline</title>
<link>http://192.168.90.54:1313/blog/post-1/</link>
<pubDate>Tue, 13 May 2025 00:00:00 +0000</pubDate>
<guid>http://192.168.90.54:1313/blog/post-1/</guid>
<description>&lt;h1 id=&#34;on-a-mission-with-nato-cyber-defence-on-the-frontline&#34;&gt;On a Mission with NATO: Cyber Defence on the Frontline&lt;/h1&gt;&#xA;&lt;p&gt;I didnt expect to leave a Tuesday evening talk thinking about satellite law, botched firewall configs, and how easy it is to accidentally nuke your own DNS root. But thats exactly what happened at &lt;strong&gt;Howest Bruges&lt;/strong&gt; on May 13.&lt;/p&gt;</description>
</item>
</channel>
</rss>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Education on Professors - Personal Portfolio Theme</title>
<link>http://192.168.90.54:1313/categories/education/</link>
<description>Recent content in Education on Professors - Personal Portfolio Theme</description>
<generator>Hugo</generator>
<language>en</language>
<lastBuildDate>Tue, 13 May 2025 00:00:00 +0000</lastBuildDate>
<atom:link href="http://192.168.90.54:1313/categories/education/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>On a Mission with NATO: Cyber Defence on the Frontline</title>
<link>http://192.168.90.54:1313/blog/post-1/</link>
<pubDate>Tue, 13 May 2025 00:00:00 +0000</pubDate>
<guid>http://192.168.90.54:1313/blog/post-1/</guid>
<description>&lt;h1 id=&#34;on-a-mission-with-nato-cyber-defence-on-the-frontline&#34;&gt;On a Mission with NATO: Cyber Defence on the Frontline&lt;/h1&gt;&#xA;&lt;p&gt;I didnt expect to leave a Tuesday evening talk thinking about satellite law, botched firewall configs, and how easy it is to accidentally nuke your own DNS root. But thats exactly what happened at &lt;strong&gt;Howest Bruges&lt;/strong&gt; on May 13.&lt;/p&gt;</description>
</item>
</channel>
</rss>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Event Recap on Professors - Personal Portfolio Theme</title>
<link>http://192.168.90.54:1313/categories/event-recap/</link>
<description>Recent content in Event Recap on Professors - Personal Portfolio Theme</description>
<generator>Hugo</generator>
<language>en</language>
<lastBuildDate>Tue, 13 May 2025 00:00:00 +0000</lastBuildDate>
<atom:link href="http://192.168.90.54:1313/categories/event-recap/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Cyber Defence on the Digital Frontline: A Mission with NATO</title>
<link>http://192.168.90.54:1313/blog/post-2/</link>
<pubDate>Tue, 13 May 2025 00:00:00 +0000</pubDate>
<guid>http://192.168.90.54:1313/blog/post-2/</guid>
<description>&lt;h1 id=&#34;cyber-defence-on-the-digital-frontline-a-mission-with-nato&#34;&gt;Cyber Defence on the Digital Frontline: A Mission with NATO&lt;/h1&gt;&#xA;&lt;h4 id=&#34;on-a-mission-with-nato-cyber-defence-on-the-frontline&#34;&gt;On a Mission with NATO: Cyber Defence on the Frontline&lt;/h4&gt;&#xA;&lt;p&gt;Howests ongoing commitment to world-class cybersecurity training took center stage again as six lecturers from the Cyber Security program joined forces with experts from Latvia, Luxembourg and Belgium in one of NATO&amp;rsquo;s most intensive simulations: the Locked Shields exercise, hosted by the Cooperative Cyber Defence Centre of Excellence (CCDCOE). Now in its fifth year of participation, the Howest team shared their firsthand experiences at a special evening talk at Howest Bruges.&lt;/p&gt;</description>
</item>
</channel>
</rss>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Nato on Professors - Personal Portfolio Theme</title>
<link>http://192.168.90.54:1313/categories/nato/</link>
<description>Recent content in Nato on Professors - Personal Portfolio Theme</description>
<generator>Hugo</generator>
<language>en</language>
<lastBuildDate>Tue, 13 May 2025 00:00:00 +0000</lastBuildDate>
<atom:link href="http://192.168.90.54:1313/categories/nato/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>On a Mission with NATO: Cyber Defence on the Frontline</title>
<link>http://192.168.90.54:1313/blog/post-1/</link>
<pubDate>Tue, 13 May 2025 00:00:00 +0000</pubDate>
<guid>http://192.168.90.54:1313/blog/post-1/</guid>
<description>&lt;h1 id=&#34;on-a-mission-with-nato-cyber-defence-on-the-frontline&#34;&gt;On a Mission with NATO: Cyber Defence on the Frontline&lt;/h1&gt;&#xA;&lt;p&gt;I didnt expect to leave a Tuesday evening talk thinking about satellite law, botched firewall configs, and how easy it is to accidentally nuke your own DNS root. But thats exactly what happened at &lt;strong&gt;Howest Bruges&lt;/strong&gt; on May 13.&lt;/p&gt;</description>
</item>
</channel>
</rss>

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -1203,6 +1203,142 @@
</div>
</div>
<div class="project-item mb-4">
<div class="card bg-dark rounded-3">
<a href="/project/project-2/" class="overflow-hidden p-3" data-aos="fade-up">
<picture>
<source
srcset="/images/project/project-1_hu_98654f7384c9076a.webp"
media="(max-width: 575px)" />
<source
srcset="/images/project/project-1_hu_e4cae9e70a1af997.webp"
media="(max-width: 767px)" />
<source
srcset="/images/project/project-1_hu_d7d16f7ac12d17d8.webp"
media="(max-width: 991px)" />
<source
srcset="/images/project/project-1_hu_f0c58a4fd9943d65.webp"
/>
<img
loading="lazy" decoding="async"
src="/images/project/project-1_hu_7e17e6600708d7c7.jpg"
class=" rounded-2 img"
alt="Building My Hugo Website on a VPS"
width="5208"
height="3859" />
</picture>
</a>
<div class="card-body pb-4">
<div class="px-2">
<div data-aos="fade-up" data-aos-delay="50">
<h3 class="h5 card-title fw-medium text-capitalize">
<a class="text-white" href="/project/project-2/">Building My Hugo Website on a VPS</a>
</h3>
<p class="card-text mb-3">How I built and deployed my personal blog using Hugo and hosted it on a minimal Alpine Linux VPS.</p>
</div>
<a class="card-btn text-primary d-inline-block" href="/project/project-2/" data-aos="fade-up" data-aos-delay="100">Discover<i class="fa-solid fa-arrow-right-long"></i></a>
</div>
</div>
</div>
</div>
</div>

File diff suppressed because one or more lines are too long

View File

@ -6,8 +6,15 @@
<description>Recent content in Home | Joren on Professors - Personal Portfolio Theme</description>
<generator>Hugo</generator>
<language>en</language>
<lastBuildDate>Wed, 21 May 2025 00:00:00 +0000</lastBuildDate>
<lastBuildDate>Thu, 29 May 2025 00:00:00 +0000</lastBuildDate>
<atom:link href="http://192.168.90.54:1313/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Building My Hugo Website on a VPS</title>
<link>http://192.168.90.54:1313/project/project-2/</link>
<pubDate>Thu, 29 May 2025 00:00:00 +0000</pubDate>
<guid>http://192.168.90.54:1313/project/project-2/</guid>
<description>&lt;p&gt;I built my personal blog using &lt;a href=&#34;https://gohugo.io/&#34;&#xA;&#xA;&#xA;&#xA;&#xA; target=&#34;_blank&#34;&#xA; &#xA;&#xA;&#xA;&gt;Hugo&lt;/a&gt; and deployed it on a lightweight Alpine Linux VPS. I chose this setup to have full control, keep things simple, and avoid bloated platforms or services. Heres how the process went from site generation to live deployment.&lt;/p&gt;</description>
</item>
<item>
<title>DRMDTool Project</title>
<link>http://192.168.90.54:1313/project/project-1/</link>

9380
public/post-2/index.html Normal file

File diff suppressed because one or more lines are too long

View File

@ -385,6 +385,140 @@
<div class="projects align-items-start overflow-hidden">
<div class="project-item mb-4">
<div class="card bg-dark rounded-3">
<a href="/project/project-2/" class="overflow-hidden p-3">
<picture>
<source
srcset="/images/project/project-1_hu_98654f7384c9076a.webp"
media="(max-width: 575px)" />
<source
srcset="/images/project/project-1_hu_e4cae9e70a1af997.webp"
media="(max-width: 767px)" />
<source
srcset="/images/project/project-1_hu_d7d16f7ac12d17d8.webp"
media="(max-width: 991px)" />
<source
srcset="/images/project/project-1_hu_f0c58a4fd9943d65.webp"
/>
<img
loading="lazy" decoding="async"
src="/images/project/project-1_hu_7e17e6600708d7c7.jpg"
class=" rounded-2 img"
alt="Building My Hugo Website on a VPS"
width="5208"
height="3859" />
</picture>
</a>
<div class="card-body pb-4">
<div class="px-2">
<h3 class="h5 card-title fw-medium text-capitalize">
<a class="text-white" href="/project/project-2/">Building My Hugo Website on a VPS</a>
</h3>
<p class="card-text mb-3">How I built and deployed my personal blog using Hugo and hosted it on a minimal Alpine Linux VPS.</p>
<a class="card-btn text-primary" href="/project/project-2/">Discover<i class="fa-solid fa-arrow-right-long"></i></a>
</div>
</div>
</div>
</div>
<div class="project-item mb-4">
<div class="card bg-dark rounded-3">

View File

@ -6,8 +6,15 @@
<description>Recent content in Recent Projects on Professors - Personal Portfolio Theme</description>
<generator>Hugo</generator>
<language>en</language>
<lastBuildDate>Wed, 21 May 2025 00:00:00 +0000</lastBuildDate>
<lastBuildDate>Thu, 29 May 2025 00:00:00 +0000</lastBuildDate>
<atom:link href="http://192.168.90.54:1313/project/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Building My Hugo Website on a VPS</title>
<link>http://192.168.90.54:1313/project/project-2/</link>
<pubDate>Thu, 29 May 2025 00:00:00 +0000</pubDate>
<guid>http://192.168.90.54:1313/project/project-2/</guid>
<description>&lt;p&gt;I built my personal blog using &lt;a href=&#34;https://gohugo.io/&#34;&#xA;&#xA;&#xA;&#xA;&#xA; target=&#34;_blank&#34;&#xA; &#xA;&#xA;&#xA;&gt;Hugo&lt;/a&gt; and deployed it on a lightweight Alpine Linux VPS. I chose this setup to have full control, keep things simple, and avoid bloated platforms or services. Heres how the process went from site generation to live deployment.&lt;/p&gt;</description>
</item>
<item>
<title>DRMDTool Project</title>
<link>http://192.168.90.54:1313/project/project-1/</link>

View File

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<head><script src="/professors/site/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=professors/site/livereload" data-no-instant defer></script>
<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" />
<title>Foster Youth in Ma Schools</title>
<title>Building My Hugo Website on a VPS</title>
<meta
@ -28,11 +28,11 @@
<link rel="shortcut icon" href="/professors/site/images/favicon_hu_e23ec60231f79d1f.png" type="image/x-icon">
<link rel="icon" href="/professors/site/images/favicon_hu_e23ec60231f79d1f.png" type="image/x-icon">
<link rel="icon" type="image/png" sizes="48x48" href="/professors/site/images/favicon_hu_8fe24b8d7739e95a.png">
<link rel="icon" type="image/png" sizes="96x96" href="/professors/site/images/favicon_hu_e23ec60231f79d1f.png">
<link rel="apple-touch-icon" sizes="144x144" href="/professors/site/images/favicon_hu_a0382c90d2ab5755.png">
<link rel="shortcut icon" href="/images/favicon_hu_e23ec60231f79d1f.png" type="image/x-icon">
<link rel="icon" href="/images/favicon_hu_e23ec60231f79d1f.png" type="image/x-icon">
<link rel="icon" type="image/png" sizes="48x48" href="/images/favicon_hu_8fe24b8d7739e95a.png">
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon_hu_e23ec60231f79d1f.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/favicon_hu_a0382c90d2ab5755.png">
@ -41,7 +41,7 @@
<link rel="manifest" href="/professors/site/manifest.webmanifest" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta
name="msapplication-TileColor"
content="#18b0a2" />
@ -70,7 +70,7 @@
<base href="http://localhost:1313/professors/site/project/project-2/" />
<base href="http://192.168.90.54:1313/project/project-2/" />
@ -81,7 +81,7 @@
<title>Foster Youth in Ma Schools</title>
<title>Building My Hugo Website on a VPS</title>
@ -106,7 +106,7 @@
<meta
name="description"
content="Indicate the layers of school issues that are impacting foster youth in Massachusetts schools." />
content="How I built and deployed my personal blog using Hugo and hosted it on a minimal Alpine Linux VPS." />
@ -159,14 +159,14 @@
<meta property="og:image" content="http://localhost:1313/professors/site/images/project/project-2.jpg" />
<meta name="twitter:image" content="http://localhost:1313/professors/site/images/project/project-2.jpg" />
<meta property="og:image" content="http://192.168.90.54:1313/images/project/project-1.jpg" />
<meta name="twitter:image" content="http://192.168.90.54:1313/images/project/project-1.jpg" />
<meta
name="twitter:card"
content="summary_large_image" />
<meta property="og:image:width" content="5221" />
<meta property="og:image:width" content="5208" />
<meta property="og:image:height" content="3859" />
@ -184,14 +184,14 @@
<meta property="og:title" content="Foster Youth in Ma Schools" />
<meta property="og:description" content="Indicate the layers of school issues that are impacting foster youth in Massachusetts schools." />
<meta property="og:title" content="Building My Hugo Website on a VPS" />
<meta property="og:description" content="How I built and deployed my personal blog using Hugo and hosted it on a minimal Alpine Linux VPS." />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://localhost:1313/professors/site/project/project-2/" />
<meta property="og:url" content="http://192.168.90.54:1313/project/project-2/" />
<meta name="twitter:title" content="Foster Youth in Ma Schools" />
<meta name="twitter:description" content="Indicate the layers of school issues that are impacting foster youth in Massachusetts schools." />
<meta name="twitter:title" content="Building My Hugo Website on a VPS" />
<meta name="twitter:description" content="How I built and deployed my personal blog using Hugo and hosted it on a minimal Alpine Linux VPS." />
@ -271,7 +271,7 @@
<link rel="stylesheet" href="/professors/site/css/style.css" />
<link rel="stylesheet" href="/css/style.css" />
@ -300,27 +300,27 @@
<li class="nav-item d-block">
<a class="nav-link d-flex align-items-center" aria-current="page" href="/professors/site#banner"><i class="fa-solid fa-user me-3"></i><span>Introduction</span></a>
<a class="nav-link d-flex align-items-center" aria-current="page" href="/#banner"><i class="fa-solid fa-user me-3"></i><span>Introduction</span></a>
</li>
<li class="nav-item d-block">
<a class="nav-link d-flex align-items-center" aria-current="page" href="/professors/site#skill"><i class="fa-solid fa-list-check me-3"></i><span>My Skills</span></a>
<a class="nav-link d-flex align-items-center" aria-current="page" href="/#skill"><i class="fa-solid fa-list-check me-3"></i><span>My Skills</span></a>
</li>
<li class="nav-item d-block">
<a class="nav-link d-flex align-items-center" aria-current="page" href="/professors/site#resume"><i class="fa-solid fa-address-card me-3"></i><span>Resume</span></a>
<a class="nav-link d-flex align-items-center" aria-current="page" href="/#resume"><i class="fa-solid fa-address-card me-3"></i><span>Resume</span></a>
</li>
<li class="nav-item d-block">
<a class="nav-link d-flex align-items-center" aria-current="page" href="/professors/site#portfolio"><i class="fa-solid fa-box me-3"></i><span>Portfolio</span></a>
<a class="nav-link d-flex align-items-center" aria-current="page" href="/#portfolio"><i class="fa-solid fa-box me-3"></i><span>Portfolio</span></a>
</li>
<li class="nav-item d-block">
<a class="nav-link d-flex align-items-center" aria-current="page" href="/professors/site#blog"><i class="fa-solid fa-blog me-3"></i><span>Blog</span></a>
<a class="nav-link d-flex align-items-center" aria-current="page" href="/#blog"><i class="fa-solid fa-blog me-3"></i><span>Blog</span></a>
</li>
<li class="nav-item d-block">
<a class="nav-link d-flex align-items-center" aria-current="page" href="/professors/site#contact"><i class="fa-solid fa-paper-plane me-3"></i><span>Contact</span></a>
<a class="nav-link d-flex align-items-center" aria-current="page" href="/#contact"><i class="fa-solid fa-paper-plane me-3"></i><span>Contact</span></a>
</li>
</ul>
@ -382,14 +382,14 @@
<div class="col-xxl-10 mx-auto" data-aos="fade-up" data-aos-delay="100">
<button class="text-primary mb-5 border-0 bg-transparent" onclick="history.back()"><i class="fa-solid fa-backward me-2"></i>Back</button>
<article>
<h1 class="text-capitalize h3 mb-4">Foster Youth in Ma Schools</h1>
<h1 class="text-capitalize h3 mb-4">Building My Hugo Website on a VPS</h1>
<div class="post-meta d-flex flex-wrap flex-lg-nowrap align-items-center mb-4">
<ul class="list-inline me-5">
<li class="list-inline-item">
<i class="fa-solid fa-calendar-days me-2"></i>02 Jan 2022
<i class="fa-solid fa-calendar-days me-2"></i>29 May 2025
</li>
</ul>
<span>Last updated on Jan 2, 2022</span>
<span>Last updated on May 29, 2025</span>
</div>
@ -473,30 +473,30 @@
<picture>
<source
srcset="/professors/site/images/project/project-2_hu_622af60db48c24ce.webp"
srcset="/images/project/project-1_hu_98654f7384c9076a.webp"
media="(max-width: 575px)" />
<source
srcset="/professors/site/images/project/project-2_hu_978436bc2caeb426.webp"
srcset="/images/project/project-1_hu_e4cae9e70a1af997.webp"
media="(max-width: 767px)" />
<source
srcset="/professors/site/images/project/project-2_hu_10599f90716c860c.webp"
srcset="/images/project/project-1_hu_d7d16f7ac12d17d8.webp"
media="(max-width: 991px)" />
<source
srcset="/professors/site/images/project/project-2_hu_f16266a4ab3178db.webp"
srcset="/images/project/project-1_hu_f0c58a4fd9943d65.webp"
/>
<img
loading="lazy" decoding="async"
src="/professors/site/images/project/project-2_hu_b87bfcccc817d8cf.jpg"
src="/images/project/project-1_hu_7e17e6600708d7c7.jpg"
class=" featured-image lazy mb-5 rounded-3 img"
alt="Foster Youth in Ma Schools"
width="5221"
alt="Building My Hugo Website on a VPS"
width="5208"
height="3859" />
</picture>
@ -513,221 +513,45 @@
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>I built my personal blog using <a href="https://gohugo.io/"
target="_blank"
>Hugo</a> and deployed it on a lightweight Alpine Linux VPS. I chose this setup to have full control, keep things simple, and avoid bloated platforms or services. Heres how the process went from site generation to live deployment.</p>
<br>
<h3 id="project-goal">Project Goal</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h3 id="creating-the-hugo-site">Creating the Hugo Site</h3>
<p>On my development machine, I created a new Hugo site:</p>
<pre tabindex="0"><code>hugo new site howest-blog
</code></pre><p>I used the <code>professors-hugo</code> theme and copied its <code>exampleSite</code> content into my project. I customized the layout, structure, and styling by editing content files, SCSS in <code>assets/scss/custom.scss</code>, and partial templates in the theme directory.</p>
<p>All content lives under <code>content/</code>, with separate folders for <code>blog/</code> and <code>project/</code>, each containing <code>.md</code> files with front matter and Markdown content.</p>
<br>
<p>When referring to Lorem ipsum, different expressions are used, namely fill text , fictitious text , blind text or placeholder text
in short, its meaning can also be zero, but its usefulness is so clear as to go through the centuries and resist the ironic
and modern versions that came with the arrival of the web.</p>
<h3 id="customization">Customization</h3>
<p>I edited the <code>config/_default/hugo.toml</code> to configure site parameters like the base URL, theme, language, and menus. SCSS and image assets go in <code>assets/</code>, and are processed by Hugo&rsquo;s pipeline. Static files like favicons are placed in <code>static/</code>.</p>
<p>To preview the site locally:</p>
<pre tabindex="0"><code>hugo server
</code></pre><p>To build the static site:</p>
<pre tabindex="0"><code>hugo
</code></pre><p>This generates everything in the <code>public/</code> folder.</p>
<br>
<!-- internal link -->
<div
class=" gallery ">
<div class="gallery-item">
<img
loading="lazy"
src="/professors/site/images/gallery/project-1_hu_5e809ce3a121fe7a.jpg"
class="img"
style="margin: 0;"
alt="project-1.jpg"
onerror="this.onerror='null';this.src='\/professors\/site\/images\/gallery\/project-1_hu_5e809ce3a121fe7a.jpg'" />
</div>
<div class="gallery-item">
<img
loading="lazy"
src="/professors/site/images/gallery/project-3_hu_c2dfbcbdc0a21e9.jpg"
class="img"
style="margin: 0;"
alt="project-3.jpg"
onerror="this.onerror='null';this.src='\/professors\/site\/images\/gallery\/project-3_hu_c2dfbcbdc0a21e9.jpg'" />
</div>
</div>
<h3 id="vps-deployment">VPS Deployment</h3>
<p>I rented a minimal Alpine Linux VPS and installed only what I needed. After setting up SSH and a basic nginx web server, I copied the <code>public/</code> folder over using <code>scp</code>:</p>
<pre tabindex="0"><code>scp -r public/* user@my-vps:/var/www/html
</code></pre><p>On the VPS, I installed nginx:</p>
<pre tabindex="0"><code>apk add nginx
</code></pre><p>And configured <code>/etc/nginx/conf.d/default.conf</code> to serve files from <code>/var/www/html</code>. Then I enabled and started nginx:</p>
<pre tabindex="0"><code>rc-service nginx start
rc-update add nginx
</code></pre><p>Now my Hugo site is live and served directly as static files—no backend, no database, just HTML, CSS, and JS.</p>
<br>
<h3 id="solution">Solution</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h3 id="why-alpine--hugo">Why Alpine + Hugo?</h3>
<p>Alpine Linux is minimal and fast, perfect for serving static sites with low resource usage. Combined with Hugos speed and flexibility, I get a complete, performant setup that I fully control. Its secure, lightweight, and easy to update—just rebuild and re-upload the <code>public/</code> folder.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>This setup is perfect if you want full control and minimal overhead for a personal blog or portfolio.</p>
</div>
</article>
@ -9538,7 +9362,7 @@ commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum
<script>
if ('serviceWorker' in navigator){navigator.serviceWorker.register("/professors/site/service-worker.js");}
if ('serviceWorker' in navigator){navigator.serviceWorker.register("/service-worker.js");}
</script>

View File

@ -2,13 +2,16 @@
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://192.168.90.54:1313/project/project-1/</loc>
<lastmod>2025-05-21T00:00:00+00:00</lastmod>
<loc>http://192.168.90.54:1313/project/project-2/</loc>
<lastmod>2025-05-29T00:00:00+00:00</lastmod>
</url><url>
<loc>http://192.168.90.54:1313/</loc>
<lastmod>2025-05-21T00:00:00+00:00</lastmod>
<lastmod>2025-05-29T00:00:00+00:00</lastmod>
</url><url>
<loc>http://192.168.90.54:1313/project/</loc>
<lastmod>2025-05-29T00:00:00+00:00</lastmod>
</url><url>
<loc>http://192.168.90.54:1313/project/project-1/</loc>
<lastmod>2025-05-21T00:00:00+00:00</lastmod>
</url><url>
<loc>http://192.168.90.54:1313/categories/</loc>

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 797 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 763 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB