Community

Blog Events Webinars Tutorials Forum
  1. Blog
  2. Events
  3. Webinars
  4. Tutorials
  5. Forum
Create Account
×
Community Blog Using Git with Jekyll on Alibaba

Using Git with Jekyll on Alibaba

In this tutorial, you will install and deploy Jekyll on an Alibaba Cloud ECS instance running an NGINX server.

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.

Prerequisites

For this tutorial, you will have the following ready:

  • An Alibaba Cloud ECS instance with Ubuntu 16.04 installed
  • A non-root user with sudo privileges
  • Nginx deployed on your ECS instance
  • Ruby version 2.2.5 or above (run the test with ruby -v)
  • RubyGems (check installed version with gem -v)
  • GCC and Make (check installed version by running gcc -v, g++ -v and make -v in 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.

1. Install Jekyll

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.

2. Configure the firewall

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)

3. Initiate a development site

To initiate a new development site, switch to the home directory like so:

cd ~

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.

Next, install 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:

cd /home/myRepo/www

Next, run the command below to see the structure of the files and folders:

tree /home/myRepo/www

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

4. Create a Git Account on Production Server

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:

ssh-copy-id

All good, now we shall proceed to create a repo and configure Git hooks on it.

5. Creating a Git Repository

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:

mkdir ~/myRepo.git

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.

In the hooks directory, create a post-receive file like so:

nano ~/myRepo.git/hooks/post-receive

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.

6. Effecting Git Post-Receive Hook

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:

cd ~/www

Initialize local Git repository like so:

git init

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 git@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 git@example.com: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 git@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.

Conclusion

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.

Do you have an Alibaba Cloud account? Sign up for an account and try over 40 products for free worth up to $1200. Get Started with Alibaba Cloud to learn more.

nginx Tech Share Web Dev Tutorials Jekyll Git repository
0 0 0
Share on

Read previous post:

Boosting Redis's Security in Four Easy Steps

Read next post:

Application Containerization

Alex

53 posts | 10 followers

You may also like

Alex

53 posts | 10 followers

Related Products

More Posts by Alex

See All