In this tutorial, we'll deploy Jekyll static site on Ubuntu with Nginx.
Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.
Deploying a static site with Jekyll and serving it through Nginx on Ubuntu 24.04 is a reliable, high-performance way to host fast, secure content. In this guide, we’ll walk through each step—from installing dependencies to configuring Nginx—so that our site is production-ready. Let’s dive in!
Prerequisites
Before starting, make sure our new Ubuntu server is ready. The following components should be installed and configured:
- A Ubuntu 24.04 installed dedicated server or KVM VPS.
- A root user or normal user with administrative privileges.
- A domain name pointing A record to server IP.
Deploy Jekyll Static Site on Ubuntu with Nginx
1. Update and Prepare the System
Before installing anything, we make sure our Ubuntu 24.04 server is fully up to date:
sudo apt update
sudo apt upgrade -y
This ensures we have the latest security patches and package lists.
2. Install Ruby, Nginx, and Build Tools
Jekyll is a Ruby-based static site generator. We install Ruby, Bundler (for managing gems), Nginx, and essential build tools:
sudo apt install -y ruby-full build-essential zlib1g-dev nginx
- ruby-full: Installs the full Ruby interpreter.
- nginx: For web server.
- build-essential: Provides compilers and libraries needed to compile native gems.
- zlib1g-dev: Lets Ruby build process compress and decompress files.
To avoid installing gems as root (which can lead to permission issues), we configure Bundler’s install location in our home directory:
echo '# Install Ruby gems to ~/.gem' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/.gem"' >> ~/.bashrc
echo 'export PATH="$HOME/.gem/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
3. Install Jekyll and Bundler Gems
With Ruby in place, we install Bundler and Jekyll:
gem install bundler jekyll
- bundler: Manages gem dependencies for our project.
- jekyll: The static site generator itself.
4. Create and Build a New Jekyll Site
We scaffold a fresh Jekyll site in our home directory:
jekyll new myblog
cd myblog
Jekyll sets up a directory structure with posts, layouts, and configuration. To build the site into static HTML:
bundle exec jekyll build
By default, Jekyll outputs the generated site into the ./_site folder. We can preview locally:
bundle exec jekyll serve --host 0.0.0.0
Point a browser to http://<server-ip>:4000 to verify everything looks right.
5. Deploy Static Files to Nginx Directory
We'll host our generated site under /var/www/myblog. First, create the directory and copy files:
sudo mkdir /var/www/myblog
sudo cp -r _site/* /var/www/myblog/
Adjust ownership so the web server can read the files:
sudo chown -R www-data:www-data /var/www/myblog
6. Configure Nginx
Create a new server block to serve our Jekyll site:
sudo tee /etc/nginx/sites-available/myblog << EOF
server {
listen 80;
server_name example.com www.example.com;
root /var/www/myblog;
index index.html;
location / {
try_files $uri $uri/ =404;
}
# Optional: enable Gzip for faster delivery
gzip on;
gzip_types text/css application/javascript text/plain application/xml;
}
EOF
- server_name: Replace with our domain or server IP.
- root: Points to our deployed _site content.
- try_files: Ensures proper 404 handling for missing pages.
- gzip: Compresses assets to speed up page loads.
Enable the site and test configuration:
sudo ln -s /etc/nginx/sites-available/myblog /etc/nginx/sites-enabled/
sudo nginx -t
If the test passes, reload Nginx:
sudo systemctl reload nginx
7. Configure Firewall
If you have enabled UFW, follow this step. We need to open a HTTP and HTTPS ports in firewall.
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
8. Secure with HTTPS (Let’s Encrypt)
Serving over HTTPS is now essential. We’ll use Certbot:
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com
Certbot will automatically obtain and configure a free TLS certificate. It also sets up automatic renewal via a cron job.
9. Automate Future Builds (Optional)
Whenever we update content, we need to rebuild and redeploy. We can simplify this with a simple script:
cat << EOF > ~/deploy_myblog.sh
#!/bin/bash
cd ~/myblog
git pull origin main
bundle exec jekyll build
sudo rsync -av --delete _site/ /var/www/myblog/
sudo systemctl reload nginx
EOF
Make it executable:
chmod +x ~/deploy_myblog.sh
Now, running ~/deploy_myblog.sh will fetch our latest Markdown changes, rebuild the site, sync files to Nginx, and reload the server. For real automation, we could tie this to a Git hook or CI/CD pipeline.
10. Final Verification
- Visit
https://example.comand confirm the site loads over HTTPS. - Inspect page assets (CSS, JS, images) to ensure they’re cached appropriately.
- Check Nginx logs (/var/log/nginx/access.log and error.log) for any warnings or errors.
In this tutorial, we've deployed Jekyll static site on Ubuntu with Nginx. By following these steps, we’ve set up a modern Jekyll workflow on Ubuntu 24.04 and configured Nginx to deliver our static site efficiently and securely. With our automated deploy script, updating content becomes a breeze—just write, commit, and let our server handle the rest. Enjoy sharing your creations!
