Deploying a website can be a daunting task, but with the right tools and a little bit of know-how, it’s a breeze. In this post, we’ll be walking through the process of deploying a Jekyll website written in markdown to Cloudflare Pages using GitLab CI. So grab your favorite beverage, sit back, and let’s get started.
Jekyll is a static site generator that allows you to create and manage your website using simple text files, such as Markdown and Liquid. It’s built with simplicity in mind, and it’s perfect for blogs, portfolios, and documentation sites. One of the biggest advantages of using Jekyll is that it’s fast, secure, and easy to maintain. Since Jekyll sites are static, they don’t require any database or server-side processing, which means they can handle high traffic without any issues.
Additionally, Jekyll is built on top of Ruby, which means it has a vast community of developers who constantly create and update plugins and themes to enhance the functionality of your website. With Jekyll, you can focus on creating content and leave the technicalities to the software, it’s a great tool for developers and non-developers alike.
Oh, and by the way, this website is made using Jekyll!
rbenv is a tool that helps you manage multiple Ruby environments. It allows you to easily switch between different versions of Ruby and makes sure that your dependencies are isolated from one another. To install rbenv, you’ll need to run the following command:
brew install rbenv ruby-build
Once that’s done, run
rbenv init to initialize rbenv. This will add some initialization code to your shell configuration file (e.g .bashrc, .zshrc) that loads rbenv automatically whenever you open a new terminal window.
Next, we’ll need to set some environment variables to ensure that rbenv and the gems you install are properly configured. Run the following commands:
Now that rbenv is set up and configured, we can install the latest version of Ruby by running:
rbenv install 3.1.2
This will take a few minutes, depending on your internet connection. Once the installation is complete, make sure to close and reopen your console to make sure the changes take effect.
With Ruby installed, we can now use it to install Jekyll and Bundler, two essential tools for building and deploying Jekyll websites. Run the following command:
gem install jekyll bundler --user-install
If you’re using an M1 Mac, you’ll also need to install
gem install --user-install ffi -- --enable-libffi-alloc
With Jekyll and Bundler installed, it’s time to create a new GitLab repository for your website. Log into your GitLab account, create a new repository, and clone it to your computer.
Once the repository is cloned, navigate to the directory and run the following command:
jekyll new pycvalade-website
This will create a new directory called
pycvalade-website that contains the basic structure of a Jekyll website.
Navigate into the pycvalade-website directory and run:
echo ".DS_Store" >> .gitignore
This will add a
.DS_Store file to the
.gitignore file. This is an important step as it prevents your local MacOS files from being uploaded to the repository.
_config.yml file and make any necessary changes. This file contains the configuration settings for your website, such as the title, author, and other meta information.
Once you’ve made the necessary changes, navigate back to the parent directory and run:
mv pycvalade-website/* .
mv pycvalade-website/.gitignore .
This will move all the files and folders from the
pycvalade-website directory to the parent directory, effectively merging the two directories.
bundle to install the dependencies defined in the Gemfile, and
jekyll build to build your website.
Add, commit, and push your changes to the GitLab repository:
git add .
git commit -m "base jekyll website"
git push origin main
Now that your website is pushed to the repository, it’s time to link your Cloudflare account with GitLab. This will allow Cloudflare to automatically deploy your website whenever you push changes to the repository.
In your Cloudflare account, go to the “Pages” section and click on “Connect to a GitLab repository”. Select the repository you just created, choose “Jekyll” as the type, and leave the defaults as they are. Hit “Deploy” and wait for the process to complete.
Congratulations! Your website is now live on pages.dev. You can access it by visiting
<username>.pages.dev in your browser.
Deploying a website can seem like a daunting task, but with the help of GitLab, Cloudflare, Jekyll, and a little bit of know-how, it’s easier than you think. Happy deploying!