6 Quick Steps to Set Up Jekyll with Nginx on Debian

Ready to build a static website using Jekyll and Nginx? 

Jekyll easily transforms text into static blogs, and when paired with Nginx, you get a powerful website setup. This guide will walk you through installing Jekyll on Debian and integrating it with Nginx.

Although I’ll be demonstrating on Debian 12, the steps are applicable to older versions as well.

Let’s dive in.

What You’ll Need

Ensure you have the following before starting the tutorial:

• Debian installed and running on your system (guide)
• Familiarity with the command line interface and Linux commands (guide)
• Root account or sudo privileges (guide)
• Ruby version 2.5.0 or higher, RubyGems, GCC, and Make (covered in Step 1 of this tutorial)
• A stable internet connection

Now, let’s begin with the first step.

How to Set Up Jekyll with Nginx on Debian: Step-By-Step

Step 1: Install the Necessary Software and Dependencies

Start by installing the dependencies for Jekyll. This can be done efficiently with a single command.

1. First, ensure your system is up to date by updating the package repository cache. This step ensures that all installed software is the latest version. Execute the following command to update:

sudo apt update

2. Next, install the dependencies using the below command:

sudo apt install ruby-full build-essential zlib1g-dev

3. After installation, it’s important to confirm the success of each component. Check the versions of the installed packages with the following commands:

For Ruby: ruby -v

For RubyGems: gem -v

For GCC: gcc -v

For G++: g++ -v

For Make: make -v

If the version numbers are displayed correctly, your system is prepared for the Jekyll installation on Debian.

Step 2: Install Jekyll on Debian

Now, let’s proceed to install Jekyll. We’ll use Gem for the installation process.

1. Execute the following command to install Jekyll and Bundler on Debian:

sudo gem install jekyll bundler

1. To confirm the installation, check Jekyll’s version by running this command:

jekyll -v

As you can notice from the above screenshot, it shows us version 4.3.2 which indicates the installation was successful.

Step 3: Create a Static Blog Website Using Jekyll

With Jekyll now installed, let’s proceed to create a static website. We’ll start with a simple blog.

1. Start by creating a new directory for your project. For this tutorial, let’s name it “jekyll.” Create the directory with:

mkdir jekyll

2. Next, move into your new directory:

cd jekyll

3. Now, generate your static Jekyll website in this directory:

jekyll new myblog

4. To check if the process was successful, list the directory items using this command:

ls

5. If you see the “myblog” directory listed, move into it:

cd myblog

6. Next, make a note of the directory path. You can easily copy it to your clipboard. Check the current directory path with:

pwd

7. Select and copy the displayed path using Ctrl+C.

Now you’re ready for the next step.

Step 4: Set Up Jekyll as a Systemd Service

Next, let’s set up Jekyll as a systemd service for automatic startup with your device.

1. Create a file for the Jekyll service. You can use any text editor for that. I’m using the Nano text editor. Create the file using nano by running this command:

sudo nano /etc/systemd/system/jekyll.service

2. Insert the following configuration into the file:

[Unit]

Description=Jekyll Service

After=network.target

[Service]

Type=simple

Restart=always

RestartSec=1

User=root

WorkingDirectory=/home/zunaid/jekyll/myblog

ExecStart=/usr/local/bin/jekyll serve --host 0.0.0.0 --port 4000

[Install]

WantedBy=multi-user.target

3. Make sure to replace “/home/zunaid/jekyll/myblog” with the actual path to your Jekyll project.

4. Save the file with Ctrl+O, and exit with Ctrl+X.
5. Execute the following commands to enable and start the Jekyll service:

systemctl enable jekyll
systemctl start jekyll

6. In both cases, you’ll need to provide authentication. So enter your password, and press the Authenticate button.

After completing these steps, Jekyll will automatically start with your system.

Step 5: Launch Your New Blog Site

Now, let’s launch your newly created site to ensure everything is functioning correctly.

1. If you’re not already in the directory where you created the blog site, then navigate there first. For your convenience, I’ll show you where mine was located:

2. Run the blog locally with:

bundle exec jekyll serve

Or, for root access: 

sudo bundle exec jekyll serve

3. If you’re using a Ruby version higher than 3.0, you may face some dependency errors. To resolve those, run the below command:

sudo bundle install

4. For live updates during development, use:

bundle exec jekyll serve --livereload

This automatically refreshes the page when source files change.

5. Open a web browser and visit:

http://localhost:4000

Congratulations! Your website is now running locally. The final step is to integrate it with Nginx.

Step 6: Add Nginx Web Server to Your Jekyll Site

We’ll add the Nginx web server as a reverse proxy in this step.

1. Install Nginx using the command:

sudo apt install nginx

2. Create a new Nginx configuration file for your Jekyll site:

sudo nano /etc/nginx/sites-available/jekyll

3. Add the below configuration to the file:

[Unit]

server {

    listen 80;

    listen [::]:80;

    server_name my-domain-name;

    location / {

        proxy_pass http://localhost:4000;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_set_header X-Forwarded-Proto $scheme;

    }

}

Note: Replace your-domain-name with your actual domain name.

4. Save the file with Ctrl+O, then exit with Ctrl+X.
5. Create a symlink to enable the site and check the configuration:

6. Create a symlink to enable the site and check the configuration:

sudo ln -s /etc/nginx/sites-available/jekyll /etc/nginx/sites-enabled/
sudo nginx -t

7. Restart Nginx to apply changes:

systemctl restart nginx

8. Finally, you can test if all the configurations are working together. The easy way to do that is by going to a web browser and visiting your domain name. You could also run this command:

wget http://my-domain-name

Note: Again, replace your-domain-name with your actual domain name.

Congratulations! You’ve now successfully integrated Nginx with your Jekyll site.

Conclusion

Well done! You’ve successfully set up a blog site using Jekyll and configured Nginx to route traffic to your domain. Your next move is to personalize and develop your website further. For guidance, the official Jekyll documentation is an excellent resource.

If this guide helped you, please share it.