This commit is contained in:
2026-07-09 11:53:06 +02:00
parent dfa7ef98ef
commit 452a9ea0db
10 changed files with 46 additions and 39 deletions
+21 -18
View File
@@ -4,14 +4,14 @@ Quick deploy instructions for an nginx host (Debian/Ubuntu):
1. Copy files to the web root on the server: 1. Copy files to the web root on the server:
sudo mkdir -p /var/www/marcus sudo mkdir -p /var/www/html
sudo cp -r "*" /var/www/marcus/ # run from the project folder or copy files individually sudo cp -r . /var/www/html/
sudo chown -R www-data:www-data /var/www/marcus sudo chown -R www-data:www-data /var/www/html
2. Place the nginx server block (nginx/marcus_allison.conf) into `/etc/nginx/sites-available/` and enable it: 2. Configure nginx with your own server block and enable it:
sudo cp "nginx/marcus_allison.conf" /etc/nginx/sites-available/marcus_allison sudo cp /path/to/your/site.conf /etc/nginx/sites-available/website-but-better
sudo ln -s /etc/nginx/sites-available/marcus_allison /etc/nginx/sites-enabled/ sudo ln -sf /etc/nginx/sites-available/website-but-better /etc/nginx/sites-enabled/
3. Test nginx config and reload: 3. Test nginx config and reload:
@@ -21,41 +21,44 @@ Quick deploy instructions for an nginx host (Debian/Ubuntu):
4. (Optional) Provision HTTPS with Certbot (Let's Encrypt): 4. (Optional) Provision HTTPS with Certbot (Let's Encrypt):
sudo apt update && sudo apt install certbot python3-certbot-nginx sudo apt update && sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d portfolio.example.com -d www.portfolio.example.com sudo certbot --nginx -d yourdomain.example.com -d www.yourdomain.example.com
5. Docker alternative (serve static site with nginx container): 5. Docker alternative (serve static site with nginx container):
docker run --rm -p 80:80 -v "$(pwd):/usr/share/nginx/html:ro" nginx:stable docker run --rm -p 80:80 -v "$(pwd):/usr/share/nginx/html:ro" nginx:stable
Customize: Customize:
- Replace `portfolio.example.com` with your real domain. - Replace `yourdomain.example.com` with your real domain.
- Update contact email in `index.html` (now set to marcus.sailer@organic-server.org). - Update contact email in `index.html`.
- The homepage uses `the server.jpg` as a small lab snapshot; formal photography should live in `images/`.
Photography gallery: Photography gallery:
- To regenerate `images/manifest.json` after adding/removing photos, run: - To regenerate `images/manifest.json` after adding or removing photos, run:
```bash ```bash
python3 scripts/generate_manifest.py py -3 scripts/generate_manifest.py
``` ```
- Alternatively, enable Nginx directory listing for `/images/` so the site can probe the directory. Example server block fragment for `/images/` only: - Alternatively, enable Nginx directory listing for `/images/` so the site can probe the directory. Example server block fragment for `/images/` only:
``` ```
location /images/ { location /images/ {
alias /var/www/marcus/images/; alias /var/www/html/images/;
autoindex on; autoindex on;
} }
``` ```
Blog support: Blog support:
- Add plain text files to the `blog/` directory. Supported extensions are `.txt` and `.text`. Each file should start with a date/time line, then a title line, then the body. - Add plain text files to the `blog/` directory. Supported extensions are `.txt` and `.text`.
- Each file should start with a date/time line, then a title line, then the body.
- To attach a file, place it in `blog/files/` and reference it in the post with `[[file: filename.ext]]` or `[[attachment: filename.ext]]`. - To attach a file, place it in `blog/files/` and reference it in the post with `[[file: filename.ext]]` or `[[attachment: filename.ext]]`.
- Run `python3 scripts/generate_blog_manifest.py` from the project root to refresh `blog/manifest.json` after adding or removing posts. - Run `py -3 scripts/generate_blog_manifest.py` from the project root to refresh `blog/manifest.json` after adding or removing posts.
Git sync: Git sync:
- Use `./scripts/sync_site.sh` from the website root to pull changes from Git via HTTP. - Run the sync script from anywhere by invoking the repo script path, for example `./scripts/sync_site.sh` from the repo root or `/path/to/website-but-better/scripts/sync_site.sh` from another directory.
- The default remote is `https://git.organic-server.org/organic-CPU/website-but-better.git` and the branch is `main`. - The script uses its own location to find the repo root, so it does not need to be started from the web root.
- By default it deploys to `/var/www/html`, which is the default nginx document root on most Linux distributions. - The default remote is `https://git.organic-server.org/organic-CPU/website-but-better.git` and the default branch is `main`.
- By default it deploys to `/var/www/html`.
- Override with `GIT_REPO_URL`, `GIT_BRANCH`, or `DEPLOY_DIR` if needed. - Override with `GIT_REPO_URL`, `GIT_BRANCH`, or `DEPLOY_DIR` if needed.
Automatic sync every 12 hours: Automatic sync every 12 hours:
@@ -68,7 +71,7 @@ sudo systemctl daemon-reload
sudo systemctl enable --now sync_site.timer sudo systemctl enable --now sync_site.timer
``` ```
This makes the website sync twice per day and deploy the latest files to nginx root. This makes the website sync twice per day and deploy the latest files to the nginx root.
Editing the Git link: Editing the Git link:
- Update the header Git link in `index.html` at the element with id `git-link` to your repository URL. - Update the header Git link in `index.html` at the element with id `git-link` to your repository URL.
+2 -2
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Blog — Marcus Allison</title> <title>Blog — Marcus Sailer</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
@@ -28,7 +28,7 @@
</main> </main>
<footer class="site-footer"> <footer class="site-footer">
<div class="container">© Marcus Allison - Self-hosting & Systems Administration</div> <div class="container">© Marcus Sailer - Self-hosting & Systems Administration</div>
</footer> </footer>
<script src="js/blog.js"></script> <script src="js/blog.js"></script>
-4
View File
@@ -1,4 +0,0 @@
2026-07-09 18:30
Welco
This blog is a simple read-only collection of notes from my home lab and self-hosting experiments. Add a new text file to the `blog/` folder with a date/time on the first line, a title on the second line, and the content after a blank line.
-4
View File
@@ -1,4 +0,0 @@
2026-07-09 18:30
Welcome to the blog
This blog is a simple read-only collection of notes from my home lab and self-hosting experiments. Add a new text file to the `blog/` folder with a date/time on the first line, a title on the second line, and the content after a blank line.
-6
View File
@@ -1,6 +0,0 @@
2026-07-10 12:45
Attachment test
This post includes a referenced attachment file.
You can download it here: [[file: sample-attachment.txt]]
@@ -1 +1 @@
This is a sample attachment file used to test blog file linking. This is a sample attachment file used to test blog file linking.
+7
View File
@@ -0,0 +1,7 @@
2026-07-09 12:00
My Self-Hosted Portfolio Website
Finally got around to building a proper home for my lab. Instead of throwing people a list of subdomains, I now have a clean landing page that actually explains what I'm doing and why it matters.
The site has the essentials: a professional summary, a skills showcase (with a dedicated photography card because that's a big part of my life), a gallery that loads from a manifest and supports fullscreen modal viewing, a server snapshot, and a simple contact block. I kept the design consistent with a red theme and made sure everything loads fast without unnecessary bloat.
The deployment is fully automated too. A script pulls the latest repo changes, regenerates manifests, and pushes everything to /var/www/html. I set up a systemd timer to run it every twelve hours, so the site stays fresh without me lifting a finger. The blog runs off plain text files and sorts posts newest-first, which is exactly the kind of simplicity I love about self-hosting.
This post includes a referenced attachment file just to demonstrate the system. You can download it here: [[file: example-attachment.txt]]
+14 -4
View File
@@ -3,13 +3,13 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Marcus Allison - Systems Administrator & Self-Hosting Portfolio</title> <title>Marcus Sailer - Systems Administrator & Self-Hosting Portfolio</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<header class="site-header"> <header class="site-header">
<div class="container"> <div class="container">
<h1>Marcus Allison</h1> <h1>Marcus Sailer</h1>
<p class="tag">Systems Administrator · Self-Hosting · Network Security</p> <p class="tag">Systems Administrator · Self-Hosting · Network Security</p>
<p class="header-links"><a href="blog.html">Blog</a> <a id="git-link" href="https://git.organic-server.org">Gitea</a></p> <p class="header-links"><a href="blog.html">Blog</a> <a id="git-link" href="https://git.organic-server.org">Gitea</a></p>
</div> </div>
@@ -49,6 +49,10 @@
<h3>Web & Data</h3> <h3>Web & Data</h3>
<p>SearXNG, Kiwix, Trilium, Homarr</p> <p>SearXNG, Kiwix, Trilium, Homarr</p>
</div> </div>
<div class="card">
<h3>Photography & Media</h3>
<p>Photo gallery, server lab imagery, thumbnails, and image delivery.</p>
</div>
<div class="card"> <div class="card">
<h3>Monitoring & Time</h3> <h3>Monitoring & Time</h3>
<p>NTP server, UISP (UniFi OS Server)</p> <p>NTP server, UISP (UniFi OS Server)</p>
@@ -82,7 +86,7 @@
</section> </section>
<section id="links"> <section id="links">
<h2>Public Service Links</h2> <h2>Service Links</h2>
<p>May require authentication:</p> <p>May require authentication:</p>
<ul> <ul>
<li><a href="https://organic-server.org">organic-server.org</a></li> <li><a href="https://organic-server.org">organic-server.org</a></li>
@@ -93,6 +97,12 @@
</ul> </ul>
</section> </section>
<section id="lab-snapshot">
<h2>The Server</h2>
<p>This is the server running it all</p>
<img class="lab-photo" src="the%20server.jpg" alt="Server photo" />
</section>
<section id="contact"> <section id="contact">
<h2>Contact</h2> <h2>Contact</h2>
<p>If you'd like to discuss a role, contract, or collaboration, please reach out via email: <a href="mailto:marcus.sailer@organic-server.org">marcus.sailer@organic-server.org</a>.</p> <p>If you'd like to discuss a role, contract, or collaboration, please reach out via email: <a href="mailto:marcus.sailer@organic-server.org">marcus.sailer@organic-server.org</a>.</p>
@@ -100,7 +110,7 @@
</main> </main>
<footer class="site-footer"> <footer class="site-footer">
<div class="container">© Marcus Allison - Self-hosting & Systems Administration</div> <div class="container">© Marcus Sailer - Self-hosting & Systems Administration</div>
</footer> </footer>
<script src="js/gallery.js"></script> <script src="js/gallery.js"></script>
</body> </body>
+1
View File
@@ -13,6 +13,7 @@ body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neu
h2 { margin:32px 0 16px 0; font-size:1.8rem; font-weight:700; color:#7f1d1d; padding-bottom:12px; border-bottom:2px solid #fee2e2; } h2 { margin:32px 0 16px 0; font-size:1.8rem; font-weight:700; color:#7f1d1d; padding-bottom:12px; border-bottom:2px solid #fee2e2; }
h3 { margin:0 0 8px 0; font-size:1.1rem; font-weight:600; color:#7f1d1d; } h3 { margin:0 0 8px 0; font-size:1.1rem; font-weight:600; color:#7f1d1d; }
section { margin-bottom:16px; } section { margin-bottom:16px; }
.lab-photo { display:block; width:100%; max-width:420px; margin-top:16px; border-radius:10px; border:1px solid #e5e7eb; box-shadow:0 8px 24px rgba(139,18,18,0.12); }
p { margin:0 0 12px 0; } p { margin:0 0 12px 0; }
ol, ul { margin:12px 0; padding-left:24px; } ol, ul { margin:12px 0; padding-left:24px; }
li { margin-bottom:8px; } li { margin-bottom:8px; }
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB