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.
What the heck is Jekyll anyways?
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!
Step 1: Install rbenv
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:
1
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.
Step 2: Set environment variables
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:
1
2
export GEM_HOME="$HOME/.gem"
export PATH="$HOME/.gem/ruby/2.6.0/bin:$PATH"
Step 3: Install Ruby
Now that rbenv is set up and configured, we can install the latest version of Ruby by running:
1
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.
Step 4: Install Jekyll and Bundler
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:
1
gem install jekyll bundler --user-install
If you’re using an M1 Mac, you’ll also need to install ffi:
1
gem install --user-install ffi -- --enable-libffi-alloc
Step 5: Create a GitLab repository
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.
Step 6: Create a new Jekyll website
Once the repository is cloned, navigate to the directory and run the following command:
1
jekyll new pycvalade-website
This will create a new directory called pycvalade-website that contains the basic structure of a Jekyll website.
Step 7: Configure the website
Navigate into the pycvalade-website directory and run:
1
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.
Open the _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.
Step 8: Build and Deploy the website
Once you’ve made the necessary changes, navigate back to the parent directory and run:
1
2
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.
Run bundle to install the dependencies defined in the Gemfile, and jekyll build to build your website.
1
2
bundle
jekyll build
Add, commit, and push your changes to the GitLab repository:
1
2
3
git add .
git commit -m "base jekyll website"
git push origin main
Step 9: Link Cloudflare and GitLab
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.
Step 10: Enjoy your live website!
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!