Colophon
2 min to read
I wanted to write about my current setup for my website behind the scenes. Before we dive in, I’ll talk about the domain & hosting and their costs (spoiler: it’s pretty cheap).
The domain is hosted on Squarespace for $15 annually. It was previously Google Domains but it was bought out and transferred a few years ago.
I created a DigitalOcean droplet that’s currently costing $6 a month. I think they have a cheaper one that was made available since I started, but it seems you can’t downsize droplets.
This website was built was 11ty, a static site generator. In other words, it takes a bunch of templates of different types, builds them, and spits them out into a website. It’s simple, but very powerful! All I have to do is write a few lines into a Markdown file, built it with Eleventy and a new page is generated quickly.
I’m using Visual Studio Code to develop. I keep a folder of all of the website files on my computer and 11ty does the rest. I installed a few additional extensions, but if you’re also looking into using 11ty, I think these are completely optional! Here’s what I’m using:
- Nunjucks & Liquid: template languages used by 11ty. Helps with formatting and making sure the code is valid.
- GitHub Repositories: For version control. I can push new commits from VS Code to a GitHub repository.
I have a Github Action that automatically deploys changes to the main branch of my repository directly to the server! Here is the YAML for that:
on:
push:
branches:
- 'main'
name: 🚀 Deploy website on push
jobs:
web-deploy:
name: 🎉 Deploy
runs-on: ubuntu-latest
steps:
- name: 🚚 Get latest code
uses: actions/checkout@v4
- name: Use Node.js 18
uses: actions/setup-node@v2
with:
node-version: '18'
- name: 🔨 Build Project
run: |
npm install
npm run build
- name: 📂 Upload via SSH
uses: appleboy/scp-action@v0.1.7
with:
host: $
username: $
password: $
port: $
source: "./_site/*"
target: /var/www/html/
strip_components: 1