Compare commits
4 commits
43eec03edd
...
70a8cb8f9f
| Author | SHA1 | Date | |
|---|---|---|---|
| 70a8cb8f9f | |||
| 51bbb8ff11 | |||
| fb782e8cf2 | |||
| a9440d6844 |
11 changed files with 382 additions and 221 deletions
BIN
posts/img/post-index-build-script.webm
Normal file
BIN
posts/img/post-index-build-script.webm
Normal file
Binary file not shown.
BIN
posts/img/systemsobscure-forgejo-runners.png
Normal file
BIN
posts/img/systemsobscure-forgejo-runners.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
|
|
@ -10,8 +10,10 @@ my time at the BBC. I was fortunate to have a really supportive and personable
|
|||
manager who was great to work with and who took a real interest in my
|
||||
professional development.
|
||||
|
||||
|
||||
|
||||
<div style="display:flex; flex-direction: row; justify-content: center; margin:
|
||||
1rem 0;">
|
||||
<img src="./img/bbc-leave-gruv-small.png" width="300" />
|
||||
</div>
|
||||
I worked with a variety of stakeholders on applications used internally within
|
||||
the Corporation. I was able to work across the frontend and the backend in a
|
||||
"full-stack" capacity, enhancing my understanding of AWS serverless, Docker,
|
||||
|
|
|
|||
136
posts/self-hosting-this-site.md
Normal file
136
posts/self-hosting-this-site.md
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
---
|
||||
title: "Self-hosting this site"
|
||||
slug: /self-hosting-this-site/
|
||||
date: 2025-07-21
|
||||
tags: ["self-hosting"]
|
||||
---
|
||||
|
||||
[Previously](https://systemsobscure.blog/posts/how-I-deploy-this-site) this site
|
||||
was deployed as follows. I used [Gatsby.js](https://gatsbyjs.com) to generate a
|
||||
static website from React JavaScript. When changes to the `main` branch were
|
||||
pushed to the remote GitHub repository, a GitHub action would execute, building
|
||||
the source files and transferring them to an S3 bucket. The HTML generated was
|
||||
then served using AWS Cloud Front.
|
||||
|
||||
As I am now trying to self-host as many services as I can, it was time remove
|
||||
the dependency on AWS and GitHub and instead serve the site from my VPS and
|
||||
manage deployment via my
|
||||
[self-hosted Forgejo instance](https://forgejo.systemsobscure.net/thomasabishop).
|
||||
|
||||
As part of this process I went on a bit of a side-quest to rebuild the site
|
||||
without Gatsby.
|
||||
|
||||
When I tried to update to the lastest version of Gatsby I faced several problems
|
||||
mostly due to Gatsby trying to foist server-side rendering on every project. For
|
||||
such a small blog site with next to zero traffic this is unnecessary. Moreover,
|
||||
I realised that I could also do without all the bloat that Gatsby adds via its
|
||||
plugin ecosystem. (Perhaps if frontend bundles weren't so large, SSR wouldn't be
|
||||
needed lol.)
|
||||
|
||||
So I decided to simplify the blog and build it as a [Vite](https://vite.dev)
|
||||
React application that gets its content from a JSON index that is generated via
|
||||
a pre-build script.
|
||||
|
||||
I
|
||||
[wrote a script](https://forgejo.systemsobscure.net/thomasabishop/systems-obscure/src/branch/main/scripts/generate-post-index.js)
|
||||
in JavaScript that loops through all the blog posts in Markdown format from a
|
||||
`/posts` directory at the project root. It creates a JSON array with an entry
|
||||
for each post. For example, this post would be represented as follows:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"slug": "self-hosting-this-site",
|
||||
"title": "Self-hosting this site",
|
||||
"date": "2025-07-22T00:00:00.00Z",
|
||||
"tags": ["self-hosting"],
|
||||
"html": "<p>Previously this site was..."
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
To convert the raw markdown to HTML I used
|
||||
[marked](https://github.com/markedjs/marked). I also added the following steps:
|
||||
|
||||
- convert `<code>` tags into syntax highlighted blocks using
|
||||
[shiki](https://shiki.style/)
|
||||
- compress and resize images and then transfer them to the `public/` directory
|
||||
where Vite sources static assets when deployed
|
||||
- find and replace all image `src` attributes in the resulting HTML with the
|
||||
`public/` file path
|
||||
|
||||
When I run `npm run build:posts` this generates the `post-index.json` file and
|
||||
saves it to `/public` so that the React application can read from it when
|
||||
rendering the site content.
|
||||
|
||||
<figure style="margin: 1rem 0">
|
||||
<video controls>
|
||||
<source src="./img/post-index-build-script.webm" type="video/webm">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<figcaption>Running the pre-build script to generate the site content.</figcaption>
|
||||
</figure>
|
||||
|
||||
I created a custom hook called `usePosts` that fetches the index and saves it to
|
||||
the session storage to avoid unnecessary network requests. You can see this
|
||||
being invoked in the
|
||||
[template component for blog posts](https://forgejo.systemsobscure.net/thomasabishop/systems-obscure/src/commit/43eec03edd2e6330362cc5605a48a91387eb49d3/src/templates/BlogTemplate.tsx).
|
||||
|
||||
Having rebuilt the site without the dependency on Gatsby, the next step was to
|
||||
deploy it.
|
||||
|
||||
I wanted to retain the "push and deploy" model that I previously achieved via
|
||||
the GitHub Action. This was easy because the syntax for Forgejo Actions is
|
||||
practically identical. You place the YAML declaration in the `.forejo/`
|
||||
directory of the project and Forejo picks it up on each push to the remote.
|
||||
|
||||
Here's the file:
|
||||
|
||||
```yaml
|
||||
name: Deploy Blog
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
container: node:18
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- run: npm install
|
||||
- run: npm run build:posts
|
||||
- run: npm run build
|
||||
- run: |
|
||||
echo "${{ secrets.SSH_FORGEJO_KEY }}" > /tmp/ssh_key
|
||||
chmod 600 /tmp/ssh_key
|
||||
ssh -i /tmp/ssh_key -o StrictHostKeyChecking=no ${{ vars.VPS_USER }} "bash -c 'rm -rf /var/www/systemsobscure.blog/*'"
|
||||
scp -i /tmp/ssh_key -o StrictHostKeyChecking=no -r dist/* ${{ vars.VPS_USER }}:/var/www/systemsobscure.blog/
|
||||
rm /tmp/ssh_key
|
||||
```
|
||||
|
||||
Before compiling the build I first run the pre-build script to generate the post
|
||||
index. Then I remove the existing source files for the site in `var/www/` over
|
||||
`ssh` and then transfer the new source files using `scp`. (While I run most
|
||||
third-party services on my VPS via Docker, I prefer to keep it simple with my
|
||||
own applications and not use containers.)
|
||||
|
||||
|
||||
|
||||
In order for the site to be served from `var/www/systemsobscure.blog`, I had to
|
||||
give my Docker instance of nginx running on the VPS access to this directory by
|
||||
[adding it to the volume mappings](https://forgejo.systemsobscure.net/thomasabishop/self-host/commit/8c380b71735f278f4309bbd14ad96cb9a29104b7)
|
||||
in the `docker-compose.`
|
||||
|
||||
Then I added an
|
||||
[nginx `.conf` file for the blog](https://forgejo.systemsobscure.net/thomasabishop/self-host/src/branch/main/proxy/nginx/conf.d/systemsobscure.conf).
|
||||
This file specifies the SSL certificate to use and sets `index.html` as the
|
||||
document root. It also adds some default caching and compression, along with
|
||||
security headers.
|
||||
|
||||
Finally I
|
||||
[updated my SSL certificate generation script](https://forgejo.systemsobscure.net/thomasabishop/self-host/commit/61cdbe43c2041d5961ef74416270794eb6fb91c6)
|
||||
to include `systemsobscure.blog`.
|
||||
|
||||
And that's it. My personal website is now self-hosted on my VPS and is
|
||||
automatically deployed via pushes to my self-hosted Git forge. No more GitHub,
|
||||
no more AWS.
|
||||
|
|
@ -15,23 +15,27 @@ const processBlogImages = async () => {
|
|||
fs.mkdirSync(destDir, { recursive: true })
|
||||
}
|
||||
|
||||
// Copy all images
|
||||
const files = fs.readdirSync(srcDir)
|
||||
const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg"]
|
||||
const imageExtensions = [
|
||||
".jpg",
|
||||
".jpeg",
|
||||
".png",
|
||||
".gif",
|
||||
".webp",
|
||||
".svg",
|
||||
".webm",
|
||||
]
|
||||
|
||||
// Use for...of loop instead of forEach to work with async/await
|
||||
for (const file of files) {
|
||||
const ext = path.extname(file).toLowerCase()
|
||||
if (imageExtensions.includes(ext)) {
|
||||
const inputPath = path.join(srcDir, file) // Define inputPath and outputPath
|
||||
const outputPath = path.join(destDir, file)
|
||||
|
||||
if (ext === ".svg") {
|
||||
// SVGs just get copied
|
||||
if (ext === ".svg" || ext === ".webm") {
|
||||
fs.copyFileSync(inputPath, outputPath)
|
||||
console.info(`📸 Copied ${file}`)
|
||||
} else {
|
||||
// Process other images
|
||||
await sharp(inputPath)
|
||||
.resize(1200, 800, {
|
||||
fit: "inside",
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ const Menu = () => {
|
|||
const Header = () => {
|
||||
const { theme, setTheme } = useTheme()
|
||||
return (
|
||||
<header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-background">
|
||||
<header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-sidebar">
|
||||
<div className="w-full px-0 md:px-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" asChild>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
|
|||
return (
|
||||
<>
|
||||
<div className="mb-5">
|
||||
<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
|
||||
<h2 className="scroll-m-20 text-[1.3rem] font-semibold border-b pb-2">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -44,7 +44,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
|
|||
))}
|
||||
</div>
|
||||
{showAllButton && (
|
||||
<Button asChild variant="" className="w-full mt-4">
|
||||
<Button asChild variant="secondary" className="w-full mt-4">
|
||||
<Link to="/posts/page/1">View all</Link>
|
||||
</Button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -28,17 +28,17 @@ const AboutPage = () => {
|
|||
, Bletchley Park.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
|
||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||
I'm a self-taught software engineer based on the south coast of England.
|
||||
This blog is my technical scrapbook. I document the details of my
|
||||
technical life so I can have a record of progress when I look back.{" "}
|
||||
</p>
|
||||
|
||||
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
|
||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||
I completed a degree in Philosophy at the University of Warwick (2009)
|
||||
and hold a Postgraduate Certificate of Education (2011).
|
||||
</p>
|
||||
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
|
||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||
Currently I work for{" "}
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
|
||||
|
|
@ -53,7 +53,7 @@ const AboutPage = () => {
|
|||
<a
|
||||
href="https://en.wikipedia.org/wiki/BBC"
|
||||
target="_blank"
|
||||
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
|
||||
className="underline decoration-1 hover:text-primary/80 underline-offset-2 font-medium"
|
||||
>
|
||||
BBC
|
||||
</a>{" "}
|
||||
|
|
@ -69,7 +69,7 @@ const AboutPage = () => {
|
|||
teacher.{" "}
|
||||
</p>
|
||||
|
||||
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
|
||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||
Some things I like:
|
||||
<ul className="pt-2">
|
||||
<li className="mb-1">🐶 Staffies and other bull-breeds</li>
|
||||
|
|
@ -78,7 +78,7 @@ const AboutPage = () => {
|
|||
</ul>
|
||||
</p>
|
||||
|
||||
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
|
||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||
Some things I'm interested in:
|
||||
<ul className="pt-2">
|
||||
<li className="mb-1">🧑💻 Self-hosting and digital resiliance</li>
|
||||
|
|
@ -92,7 +92,7 @@ const AboutPage = () => {
|
|||
</ul>
|
||||
</p>
|
||||
|
||||
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
|
||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||
I self-host my own Git forge at{" "}
|
||||
<a
|
||||
href="https://forgejo.systemsobscure.net/thomasabishop"
|
||||
|
|
|
|||
|
|
@ -9,14 +9,25 @@ const HomePage = () => {
|
|||
const { posts } = usePosts()
|
||||
return (
|
||||
<MainTemplate>
|
||||
<div className="mb-7 border border-foreground py-7 px-6 dark:bg-sidebar">
|
||||
<h1 className="scroll-m-20 text-left text-2xl font-semibold">
|
||||
Another software engineer with a blog
|
||||
</h1>
|
||||
<p className="leading-[1.7] [&:not(:first-child)]:mt-5">
|
||||
I'm a self-taught software engineer currently working at ITV,
|
||||
previously at the BBC. This blog is a technical scrapbook and digital
|
||||
garden.
|
||||
</p>
|
||||
</div>
|
||||
{/*
|
||||
<Card className="mb-8 rounded-none">
|
||||
<CardHeader>
|
||||
<h1 className="scroll-m-20 text-left text-3xl font-semibold">
|
||||
Another software engineer with a blog
|
||||
<h1 className="scroll-m-20 text-left text-2xl font-semibold">
|
||||
Another software engineer with a blog!
|
||||
</h1>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
|
||||
<p className="leading-[1.7] [&:not(:first-child)]:mt-7">
|
||||
I'm a self-taught software engineer currently working at ITV,
|
||||
previously at the BBC. This blog is a technical scrapbook and
|
||||
digital garden.
|
||||
|
|
@ -28,6 +39,13 @@ const HomePage = () => {
|
|||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Button asChild>
|
||||
<Link to="/about">About</Link>
|
||||
</Button>
|
||||
|
||||
|
||||
|
||||
*/}
|
||||
|
||||
<PostListing
|
||||
title="Recent posts"
|
||||
|
|
|
|||
|
|
@ -26,13 +26,14 @@ const PostsPage = () => {
|
|||
const navigate = useNavigate()
|
||||
|
||||
const { posts } = usePosts()
|
||||
const postsPerPage = 10
|
||||
const postsPerPage = 8
|
||||
|
||||
const currentPage = Number(page) || 1
|
||||
const totalPages = Math.ceil(posts.length / postsPerPage)
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage < 1 || currentPage > totalPages) {
|
||||
// Only redirect if we have posts and the page is definitively invalid
|
||||
if (totalPages > 0 && (currentPage < 1 || currentPage > totalPages)) {
|
||||
navigate(`/posts/page/1`, { replace: true })
|
||||
}
|
||||
}, [currentPage, totalPages, navigate])
|
||||
|
|
@ -65,7 +66,7 @@ const PostsPage = () => {
|
|||
All posts
|
||||
</h2>
|
||||
</div>
|
||||
<div className="min-h-[calc(100vh-200px)] flex flex-col">
|
||||
<div className="flex flex-col">
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 gap-3 flex-grow">
|
||||
{currentPosts.map((post) => (
|
||||
<Link
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@ const BlogTemplate = () => {
|
|||
</div>
|
||||
<div
|
||||
className="
|
||||
[&>h2]:text-xl [&>h2]:border-b [&>h2]:pb-2 [&>h2]:font-semibold [&>h2]:first:mt-0 [&>h2:not(:first-child)]:mt-8
|
||||
[&>h2]:text-xl [&>h2]:font-semibold [&>h2]:first:mt-0 [&>h2:not(:first-child)]:mt-8
|
||||
[&>h3]:text-xl [&>h3]:sm:text-1xl [&>h3]:font-semibold [&>h3:not(:first-child)]:mt-5
|
||||
[&>h4]:text-lg [&>h4]:sm:text-xl [&>h4]:font-semibold [&>h4:not(:first-child)]:mt-4
|
||||
[&>p]:leading-7 [&>p:not(:first-child)]:mt-6
|
||||
[&>p]:leading-7 [&>p:not(:first-child)]:mt-4
|
||||
[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
|
||||
[&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground [&>blockquote]:text-sm
|
||||
[&>ul]:my-4 [&>ul]:ml-6 [&>ul]:list-disc [&>ul>li]:mt-2
|
||||
|
|
@ -57,10 +57,10 @@ const BlogTemplate = () => {
|
|||
[&>p+pre]:mt-6
|
||||
[&>pre+p]:mt-6
|
||||
[&>ul+pre]:mt-6
|
||||
[&>li]:leading-[1.5]
|
||||
[&>li]:leading-[1.6]
|
||||
[&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-muted [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal
|
||||
[&>p]:mt-6 [&>p]:leading-[1.5]
|
||||
[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground
|
||||
[&>p]:mt-6 [&>p]:leading-[1.6]
|
||||
[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground [&_a]:font-medium
|
||||
[&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto
|
||||
[&>figure>img]:w-full
|
||||
[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue