By Alex Mungai Muchiri, Alibaba Cloud Community Blog author
Jekyll is loved for its simplicity, familiar blog features, being a powerful solution for many popular websites. Jekyll handles content by rendering Markdown and Liquid templates into static web pages that can run on Nginx and other web servers. A good example of Jekyll in use is the GitHub Pages that enable developers to import websites to their web servers from a GitHub repository. Being a static site, Jekyll does not need much memory to run and you could thus run it on the most basic Alibaba Cloud ECS instances.
One of the most popular uses of Jekyll is as a WordPress alternative to share content and blogs. Without requiring a database, it is very well-suited for offline activities, light editing and content forms with version control requirements.
In this tutorial, you will install and deploy a Jekyll website on an Alibaba Cloud ECS instance running an NGINX server. On the production server, we shall track what changes have been made to our website from a Git repository. Git is especially useful when we need to undo changes made. To protect our site from unauthorized access, we shall employ the use of git-shell. Lastly, we need to link our server with the Git repository to get updates and push changes.
For this tutorial, you will have the following ready:
make -vin the command line interface)
As a rule, you should always start with updating your package list by running the update command like so:
sudo apt-get update
Now let's begin with the installation setup.
We begin by installing the Jekyll dependencies by running the command below:
sudo apt-get install ruby-full build-essential zlib1g-dev
After this command is run, Ruby will be installed on your system along with all the dependencies necessary to run Jekyll. Usually, it is not advised to install Jekyll as a root user and with that in mind we will create a gem directory for your installation. To include the installation path in the configuration, we'll use the ~/.bashrc file environment variables by using the commands below:
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc source ~/.bashrc
Now we are ready to install Jekyll:
gem install jekyll bundler
Now we can proceed with firewall configuration.
In this step, we shall configure the firewall to allow traffic to our site. Jekyll by default runs on port 4000, which we shall need to open like so:
sudo ufw allow 4000
Now run a status check to see if the changes have been effected:
sudo ufw status
We should now have the following reflected if the configuration was successful:
Output To Action From -- ------ ---- 4000 ALLOW Anywhere 4000 ) ALLOW Anywhere (v6)
To initiate a new development site, switch to the home directory like so:
Next, create a Jekyll support in a sub-directory named www like so:
jekyll new www
This should install all dependencies and themes necessary to run your Jekyll website. You should then see an output similar to the one below:
Output New jekyll site installed in /home/myRepo/www.
tree to help you see the structure of your Jekyll support subdirectory:
sudo apt-get install tree
Change to the
/home/myRepo/www directory like so:
Next, run the command below to see the structure of the files and folders:
You should see something like so:
. ©À©¤©¤ _config.yml ©À©¤©¤ _data | ©¸©¤©¤ members.yml ©À©¤©¤ _drafts | ©À©¤©¤ begin-with-the-crazy-ideas.md | ©¸©¤©¤ on-simplicity-in-technology.md ©À©¤©¤ _includes | ©À©¤©¤ footer.html | ©¸©¤©¤ header.html ©À©¤©¤ _layouts | ©À©¤©¤ default.html | ©¸©¤©¤ post.html ©À©¤©¤ _posts | ©À©¤©¤ 2007-10-29-why-every-programmer-should-play-nethack.md | ©¸©¤©¤ 2009-04-26-barcamp-boston-4-roundup.md ©À©¤©¤ _sass | ©À©¤©¤ _base.scss | ©¸©¤©¤ _layout.scss ©À©¤©¤ _site ©À©¤©¤ .jekyll-metadata ©¸©¤©¤ index.html # can also be an 'index.md' with valid front matter
We begin by creating a Git account for our Jekyll website repository. That way, we shall secure our site from unauthorized access. We shall execute Got Hooks using the Git user. Create a user account like so:
sudo adduser git
Next, provide a password as prompted and any other user information and confirm.
Output Adding user `git' ... ... Enter new UNIX password: Retype new UNIX password: Is the information correct? [Y/n]
Confirm by using
[Y] so the new user is created. Let us now create a web root for our new site. We will set the git user as the owner of the directory to grant them rights to make changes to the site. It shall be in www-data group. Run the command below:
sudo chown git:www-data /var/www/html
Before proceeding further, remove the default html site using the command below:
sudo rm /var/www/html/index.nginx-debian.html
Copy the SSH key for the git so that we can access the server from GitHub:
All good, now we shall proceed to create a repo and configure Git hooks on it.
Let's now proceed to create a Git repository on our server using Git hook that will generate our website. The repository we are creating will maintain all commits and changes for the website. The git user's home directory shall host our repository
Run the command below:
su - git
Now we shall create a folder to host the Git repo in the web root. Notably, it should be in the
name.git format to be discoverable to
git commands. The name of our site is MyRepo. Run the command below:
In the directory we created, use the
git init command to initialize the repo and set it up for server hosting with the
--bare flag. Run the command below:
cd ~/myRepo.git git init --bare
You should anticipate an output like the one below:
Output Initialized empty Git repository in /home/git/myRepo.git
Run the command below to check the contents of the directory:
ls Output branches config description HEAD hooks info objects refs
Repeat these steps if you do not see a similar result, and ensure you switch to the right directory for the steps.
Now let's proceed to configure Git hooks, first creating a post-receive hook that will regenerate the site with the updated repository.
hooks directory, create a
post-receive file like so:
Our hook shall be used to clone changes in the repository to a temporary folder. It shall then regenerate the website and save it to
/var/www/html for ease of access. In an editor, the open file we created, add the following code:
~/myRepo.git/hooks/post-receive #!/usr/bin/env bash GIT_REPO=$HOME/myRepo.git TMP_GIT_CLONE=/tmp/myRepo PUBLIC_WWW=/var/www/html git clone $GIT_REPO $TMP_GIT_CLONE pushd $TMP_GIT_CLONE bundle exec jekyll build -d $PUBLIC_WWW popd rm -rf $TMP_GIT_CLONE exit
Save the changes and exit the editor.
Next, run the following command to ensure that the script is executable:
chmod +x ~/myRepo.git/hooks/post-receive
Now we shall secure the SSH access in the next step.
We shall now see how to push changes to the repository we have just configured on the Alibaba Cloud server. To begin with, we should initialize a local Git repository linked to the remote repository. On your local machine, run the command below to switch to the directory containing your website:
Initialize local Git repository like so:
You should see an output like the one below:
Output Initialized empty Git repository in /home/alex/www
Run the command below an any laptop that you want to use to deploy, which shall track the remote repository.
git remote add deploy email@example.com:~/ myRepo.git
Each commit is pushed to the remote repository and tracked by our object. A commit has all the information regarding the changes that were made. Include all files as part of your commit like so:
git add .
Use the command below to push changes to the myRepo repository on our server:
git push deploy master
You should see an output outlining the progress of the push like so:
Push output Counting objects: 14, done. Delta compression using up to 4 threads. Compressing objects: 100% (12/12), done. Writing objects: 100% (14/14), 110.80 KiB | 0 bytes/s, done. Total 14 (delta 0), reused 0 (delta 0) remote: Cloning into '/tmp/myRepo'... remote: done. remote: /tmp/myRepo ~/myRepo.git remote: Configuration file: /tmp/myRepo/_config.yml remote: Source: /tmp/myRepo remote: Destination: /var/www/html remote: Incremental build: disabled. Enable with --incremental remote: Generating... remote: done in 1.222 seconds. remote: Auto-regeneration: disabled. Use --watch to enable. remote: ~/myRepo.git To firstname.lastname@example.org:myRepo.git * [new branch] master -> master
The site has been successfully uploaded to the server in readiness for regeneration. To see your site, access it at
http://Your_ECS_IP. When you include new files in a commit and then push changes, your site will be regenerated.
When you change your files, add them to the commit using the command below. With new files, however, use the git add method to add them. We shall call our commit this time as
"update version 1". Now let's commit:
git commit -am "updated files"
Now, push the changes like so:
git push origin master
You should see an output similar to the one below:
Push output remote: Cloning into '/tmp/myRepo'... remote: /tmp/myRepo ~/myRepo.git remote: Configuration file: /tmp/myRepo/_config.yml remote: Source: /tmp/myRepo remote: Destination: /var/www/html remote: Auto-regeneration: disabled. Use --watch to enable. remote: ~/myRepo.git To email@example.com:myRepo.git * [new branch] master -> master
To see your site, access it at
http://Your_ECS_IP. We have successfully attained the objective of our tutorial.
In this tutorial, you have successfully installed Jekyll and implemented Git hooks to push website changes to our Alibaba Cloud ECS repository. With the setup, you can easily deploy changes to your remote repository from a local development machine. The setup is very useful for developers who wish to quickly deploy changes and track them at the same time.
Alibaba Clouder - September 27, 2019
Alibaba Clouder - January 27, 2020
Alibaba Clouder - April 15, 2019
Alibaba Clouder - March 10, 2021
Alibaba Cloud MVP - November 8, 2019
Alibaba Clouder - July 4, 2018
Explore Web Hosting solutions that can power your personal website or empower your online business.Learn More
Explore how our Web Hosting solutions help small and medium sized companies power their websites and online businesses.Learn More
Web App Service allows you to deploy, scale, adjust, and monitor applications in an easy, efficient, secure, and flexible manner.Learn More
A cloud firewall service utilizing big data capabilities to protect against web-based attacksLearn More
More Posts by Alex