How to Deploy a Static Website with Jekyll on Ubuntu
Deploying a static website using Jekyll on Ubuntu is a popular choice for developers and content creators who want a simple, flexible, and efficient platform. Jekyll allows users to create a website using markdown, and it generates static HTML pages that can be hosted on various platforms, including GitHub Pages. In this guide, we will walk through the process of setting up a Jekyll environment on Ubuntu, creating a static site, and deploying it. This step-by-step approach will ensure that even those new to Jekyll can follow along without confusion.
Prerequisites
Before we start, make sure you have the following:
- Ubuntu 20.04 or newer: This guide is focused on Ubuntu, but Jekyll can run on other Linux distributions with slight variations in installation steps.
- Ruby and RubyGems: Jekyll is a Ruby-based static site generator, so you need to install Ruby and RubyGems first.
- Bundler: Bundler helps manage Ruby project dependencies, including Jekyll.
- Basic Command-Line Knowledge: Familiarity with terminal commands is required to install and configure Jekyll.
Step 1: Update Your System
Before installing any software, it’s a good idea to update your system’s package list. Run the following command in your terminal:
sudo apt update && sudo apt upgrade
This will ensure that all your installed packages are up to date, which helps avoid compatibility issues during the installation process.
Step 2: Install Ruby and RubyGems
Jekyll is built using Ruby, so the first step is to install Ruby. Ubuntu includes an older version of Ruby, but for the best results, install the latest stable version. First, install Ruby’s dependencies:
sudo apt install ruby-full build-essential zlib1g-dev
Once the dependencies are installed, set up RubyGems (the Ruby package manager) to install gems in your home directory, avoiding permission issues:
echo ‘# Install Ruby Gems to ~/.gem’ >> ~/.bashrc
echo ‘export GEM_HOME=”$HOME/gems”‘ >> ~/.bashrc
echo ‘export PATH=”$HOME/gems/bin:$PATH”‘ >> ~/.bashrc
source ~/.bashrc
Now you have Ruby and RubyGems set up, and you can install the necessary gems without using sudo.
Step 3: Install Jekyll and Bundler
Once Ruby is ready, the next step is to install Jekyll and Bundler. Run the following command to install both:
gem install jekyll bundler
This installs the core Jekyll package and Bundler, which is essential for managing the site’s dependencies.
Step 4: Create a New Jekyll Site
With Jekyll installed, you can now create a new static site. Navigate to the directory where you want to store your project, then use the following command to create a new Jekyll site:
jekyll new my-awesome-site
Replace my-awesome-site with the name of your site. This command will generate a new directory with a default Jekyll template, ready for customization.
Step 5: Navigate to Your Site Directory
Now, move into the directory where the site files were created:
cd my-awesome-site
Once inside, you can build and serve your Jekyll site locally. But first, you need to install the necessary dependencies.
Step 6: Install Dependencies
Jekyll uses Bundler to manage its dependencies. To install them, run:
bundle install
This will install all the required gems specified in the Gemfile.
Step 7: Build and Serve Your Site
After the dependencies are installed, you can build and serve your site locally to preview it. Run the following command:
bundle exec jekyll serve
Jekyll will build the static site and start a local server. By default, it runs on http://localhost:4000, where you can preview the site in your browser.
Step 8: Customize Your Jekyll Site
At this point, you have a basic Jekyll site running locally. Now, you can start customizing it by editing the files in the project directory. Here are a few key components you might want to adjust:
- _config.yml: This file contains global configuration options for your site, such as the title, URL, and permalinks structure.
- _posts: This folder is where you store your blog posts. Each post is written in markdown and is saved with a filename structure like YYYY-MM-DD-title.md.
- _layouts and _includes: These directories allow you to create reusable components and templates to structure your pages.
Jekyll is flexible, so feel free to dive into the documentation to learn more about how to customize themes, layouts, and site behavior.
Step 9: Deploying Your Jekyll Site
Once you’re satisfied with your site, it’s time to deploy it. There are many ways to host a Jekyll site, but one of the most popular and easiest methods is to use GitHub Pages. GitHub Pages offers free hosting for static websites and integrates seamlessly with Jekyll.
Create a new repository on GitHub and push your Jekyll site files to it.
In your terminal, initialize a Git repository in your Jekyll site directory:
git init
git add .
git commit -m “Initial commit”
git remote add origin https://github.com/yourusername/yourrepository.git
git push -u origin master
Once the files are pushed, go to your repository settings on GitHub. Scroll down to the GitHub Pages section, and set the source to master or main branch.
After saving the settings, your site will be available at https://yourusername.github.io/yourrepository.
Alternatively, you can host your Jekyll site on other platforms like Netlify or Vercel, which also offer simple static site hosting solutions with continuous integration and deployment features.
Step 10: Maintaining and Updating Your Site
To keep your Jekyll site up to date, periodically update your dependencies with:
bundle update
If you’re using GitHub Pages, you can trigger an automatic rebuild every time you push new changes to your repository. For other platforms, you might need to configure automated deployments or manually trigger the build process.
Thank you for visiting our page! Be sure to explore our other article via the link below to boost your Linux expertise. Also, don’t miss our guide on How to Set Up a Jenkins Pipeline for Automated Builds! 🙂
