GitHub Actions for hosting 11ty Websites
Free web hosting is offered by GitHub for statically generated websites. The downside is, you must publically showcase your code. A GitHub website that is hosted privately in a repository costs money. For the same cost, you could spin up a VPS or even a CDN with a cloud hosting provider. If you'd like to host a website on a VPS, the following GitHub Workflow would be an excellent guide.
GitHub Actions are a convenient way to build out CI/CD system within a project. Depending on the setup, the actions in jobs can pull code commits from a repository, build, then deploy the changes. In this case, a VPS running Ubuntu will host the 11ty project being deployed.
Actions are the smallest unit of work contained in jobs in order to facilitate various actions against a project. For instance checking out code is a separate action from building an npm project. All of these individual actions run on a virtual runner. The runner can be ran on different operating systems by specifying the runs-on action.
A Concrete Breakdown of GitHub Actions for 11ty Websites
Examine the following code snippets. The last section will display the GitHub Workflow file in its entirety.
Displays the name of the GitHub Workflow. Otherwise it will display the repository relative root path.
name: PublishBlogThis section will trigger this workflow based on the branch type. This workflow will work on the main and feature/* branches. The * indicates a wildcard for a feature branch.
on:
push:
branches:
- main
- feature/*This section indicates the various jobs for building and deploying the 11ty framework.
jobs:
build:The runs-on job declares the underlying operating system the runner will execute on.
runs-on: ubuntu-latestThe following allows you to checkout your repository so the workflow can access it.
steps:
- name: Checkout code
uses: actions/checkout@v2Set up Node on the runner.
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: '18'Install all of the NPM dependencies.
- name: Install dependencies
run: npm installAs the name states, this builds the 11ty project, specifically the _site/ directory from the root.
- name: Build project
run: npx @11ty/eleventyThe tar file is zipped from the _site/ directory within the runner. The zip file is named build.tar.
- name: Archive build files
run: tar -czf build.tar.gz _site/Leveraging the following appleboy action allows files to be securely copy and pasted into the VPS. The target directory is the location where the reverse proxy service would point the domain to the static files.
- name: Copy files to VPS
uses: appleboy/scp-action@v0.1.0
with:
host: $
username: $
password: $
source: 'build.tar.gz'
target: '/var/www/dennisaguilar'This appleboy action allows us to SSH into the VPS and unzip the build folder. It then copy and pastes the files from the _site/ directory into the root directory. The very last command silently removes the build tar and unzipped folder from the directory.
- name: SSH into VPS and deploy
uses: appleboy/ssh-action@master
with:
host: $
username: $
password: $
script: |
cd /var/www/dennisaguilar
tar -xzf build.tar.gz
cd _site/
cp -r . ..
cd ..
rm -rf build.tar.gz _site/The Entire GitHub Workflow File
This section will display the entirety of the previously explained GitHub Workflow file.
name: PublishBlog
on:
push:
branches:
- main
- feature/*
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: '18'
- name: Install dependencies
run: npm install
- name: Build project
run: npx @11ty/eleventy
- name: Archive build files
run: tar -czf build.tar.gz _site/
- name: Copy files to VPS
uses: appleboy/scp-action@v0.1.0
with:
host: $
username: $
password: $
source: 'build.tar.gz'
target: '/var/www/dennisaguilar'
- name: SSH into VPS and deploy
uses: appleboy/ssh-action@master
with:
host: $
username: $
password: $
script: |
cd /var/www/dennisaguilar
tar -xzf build.tar.gz
cd _site/
cp -r . ..
cd ..
rm -rf build.tar.gz _site/