Build Free Website with Jekyll on IBM Cloud

How to stand out with an amazing portfolio in the job market?

Interested in how to build and deploy your own website to help you stand out from the competition? Click here to build this web step-by-step with CognitiveClass.ai Guided Project

Build Free Website with Jekyll on IBM Cloud

In today’s highly competitive world, no matter whether you are a new graduate developer or a new startup company must take bold steps to stand out from the crowd. One such step is creating a website that effectively showcases your skills and experience or your business products. A well-designed website serves as a powerful platform to attract potential employers or clients. And with Jekyll on IBM Cloud Object Storage, it’s never been easier to create a stunning website that will help you stand out from the crowd.

With easy-to-follow instructions, you’ll be able to build a professional-looking website in no time and setup on IBM Cloud Object Storage for FREE. Plus, with IBM Cloud Object Storage, you can easily have the benefit of these amazing features:

• Free for commercial companies to publish their static web
• Highly scalable for handling large volumes of data and media files
• Supports multiple APIs and protocols for easy integration with various web development tools and platforms
• Enables lightning-fast big file uploads

The project is perfect for developers at any level who isn’t well-versed in HTML. So what are you waiting for? Let’s start building your website today! But before diving in, let’s get a better idea of what kind of website we will build by clicking the following button.

As demonstrated above, this guided project will instruct you on transforming a basic template into a sleek personal portfolio. However, the techniques and principles employed in this project are equally applicable when constructing a business website.

What is Jekyll?

Jekyll is a static site generator that enables you to create and publish websites quickly and easily. It takes content, usually written in Markdown or HTML, and generates a complete website that can be hosted on any web server. Unlike traditional content management systems like WordPress, Jekyll does not require a database or server-side processing. It generates a series of static HTML pages that can be served by any web server. Jekyll is also secure, easily cached by CDNs, and generates sites quickly, allowing users to focus on creating content rather than worrying about maintenance.

It’s important to note that Jekyll is written in Ruby programming language, so it’s essential to ensure that you have a complete Ruby development environment set up correctly. Fortunately, CognitiveClass.ai already has the configuration set up for you to start building Jekyll right away called Cloud IDE. However, it would be beneficial for you to have some basic knowledge of Ruby before we begin the project. If you’re new to Ruby, this page can help you learn some of the terminologies.

There are three essential parts of Ruby: Gems, Gemfile, and Bundler.

• Gems are packages that contain Ruby code and can be easily shared and reused across different projects. They can include code, documentation, and dependencies and can be installed and managed using the RubyGems package manager. For example, Jekyll and many Jekyll plugins are also gems.
• Gemfile is a configuration file used in Ruby projects to specify the gems that the project depends on, along with any version constraints. Typically, the Gemfile is located in the root directory of the project and is used by tools such as Bundler to manage the project’s dependencies.
• Bundler is a tool used in Ruby projects to manage gem dependencies and ensure that the correct versions of gems are installed. Bundler reads the Gemfile and installs the required gems, along with their dependencies, into a “bundle” that is stored in the project directory.

Update Personal Information

First things first, let’s update the basic information on your site. The _config.yml file is a configuration file in Jekyll templates, which is a static site generator that is widely used for building websites and blogs. It provides a centralized location for configuring and customizing the site’s various settings. It also allows for easy maintaining the site and adds extra functionality through plugins and collections.

Here is where you usually can find this file in the GitHub repository:

Inside the _config.yml file, you’ll find several sections that can be easily edited. Simply follow the instructions and update your personal information as needed.

Basic Information and Header Setting

In the first part of the files, you will find these codes at the beginning of the file. Update the informaiton by instruciton:

# Site settings
title: Cognitive Class
email: your-email@domain.com
url: https://github.com/Sheng-Kai-IBM/Skills-Network-Jekyll-Freelancer-Theme
description: "Welcome to IBM CognitiveClass.ai"
keywords: "Artificial Intelligence, AI Application, Machine Learning, Web Development, Data Science"
skills: "Artificial Intelligence - AI Application - Machine Learning - Web Development - Data Science"
meta_author: Cognitive Class

• title is a critical part that will appear in the most prominent place, so it’s essential to put your full name there.
• You need to change the email with your personal email address.
• url is the base hostname and protocol for your site. You can simply paste your GitHub repository URL here.
• description & keywords are the information that you want to appear in the Google search results and your feed.xml site description.
• skills is another crucial parameter that displays the words under the title. It’s best to include 1-3 positions you are looking for or have previously worked in.
• meta_author contains the editor’s name.

Color Setting

Here’s the section where you can modify the site’s color by customize the HEX code to your preferred color.

# Color settings (hex-codes without the leading hash-tag)
color:
  primary: 546093  #80B3FF
  primary-rgb: "24,288,156" #"128,179,255"
  secondary: 0E4B66 #FD6E8A
  secondary-dark: 233140 #A2122F

Social Media Link Setting

You can add your social media links to your portfolio by editing lines 41–51. The title parameter will automatically find the icon related to the string you provide, while the url parameter is where you should add the link you want people to visit.

# Social networks usernames (many more available: google-plus, flickr, dribbble, pinterest, instagram, tumblr, linkedin, etc.)
social:
  - title: twitter
    url: https://twitter.com/cognitiveclass
  - title: facebook
    url: https://www.facebook.com/cognitiveclass
  - title: linkedin
    url: https://www.linkedin.com/school/cognitiveclass/
  - title: youtube
    url: https://www.youtube.com/user/TheBigDataUniversity
  - title: github
    url: http://github.com/

Address Setting

In lines 54–56, you can include the name of the city where you currently reside. This way, HR or your potential employers can get a general idea of your location.

Note: For security reasons, we advise against including your full mailing address in a public portfolio. Therefore, we recommend only providing city or town information in this section.

# Postal address (add as many lines as necessary)
address:
  - line: Unionville
  - line: Ontario L6G 1C7, Canada

Upload Site To IBM Cloud Object Storage

Having completed all the necessary customization on your website, it is now time to unveil it to the world. However, before deployment, there are two important considerations that require your attention.

• You need to have a registered IBM Cloud account
• IBM Cloud Object Storage is only free for the deployment of static websites.

Join IBM Cloud Without Credit Card Information

If you’re tired of the inconvenience of having to provide credit card information during registration, we have some great news for you. We understand how frustrating it can be to constantly have to input sensitive information, which is why we’re excited to announce that enrolling in the CognitiveClass.ai Guided Project is the solution you’ve been searching for. By following the project’s instructions, you will receive a unique code that will enable you to register your IBM Cloud account without the need for credit card information. Don’t miss out on this hassle-free opportunity to take your IBM Cloud experience to the next level!

Build Free Website with Jekyll on IBM Cloud

Use Cloud IDE To Save Setup Time

Now that you have obtained an IBM Cloud account, it’s time to take the next step and deploy your site to the public. However, it’s important to keep in mind that IBM Cloud Object Storage is only free for the deployment of static websites. This means that you will need to execute your Jekyll using the following code to ensure optimal functionality.

bundle exec jekyll serve

For those who are unfamiliar with installing Ruby in their environment or simply do not have the time to set up a new programming language on their computer, CognitiveClass.ai has the perfect solution for you. Our Cloud IDE provides an exceptional pre-built environment that comes equipped with Ruby and a variety of other command-based programming languages such as Python, Java, and C++. Enroll in the Cloud IDE today and easily execute the previous command to get a _site folder like the figure shows.

Build Free Website with Jekyll on IBM Cloud

Once downloaded in Cloud IDE, you’ll find a file labeled _site.tar in your local download directory. Remember to unzip the file for our upcoming step.

Create IBM Cloud Object Storage Instances

Upon logging into your account, our next task is to establish a new Cloud Object Storage Instance. Click the following link and follow the steps outlined in the following figure:

Cloud Object Storage — IBM Cloud

1. Choose IBM Cloud
2. Select the Lite Plan
3. Assign a name to your server (for instance, we used “Cloud Object Storage-y0” as an example)
4. Create an Instance

Once completed, you will see a page displaying the Cloud Object Storage Instances you have just generated. Click on the Instance to proceed to the following step.

Create Bucket

Now click on the Create bucket .

Then you will see the page with different options to create different types of buckets, but here you should choose Customize your bucket.

Please adhere to the steps outlined in the following figure to set up your bucket, leaving all other settings as default:

1. Assign a name to your bucket (ensure that you employ the same name utilized in Step 1)
2. Choose the Single Site option
3. Select Smart Tier

Upon successfully creating the bucket, you’ll find the subsequent information displayed in the top right corner. Next, click on the upload button.

Refer to the instructions in the accompanying figure to upload the _site folder that you recently downloaded from the Cloud IDE.

Edit Bucket Policy

Last but not least, it is imperative that you make this bucket public so that individuals can access your portfolio site. To begin, navigate to the Permission section located at the top of the page. Select Public access and modify the “Role for this bucket” section to Object Reader. Then, create an access policy according to the figure depicted below.

Upon successfully creating the policy, you will receive the subsequent message:

You will also observe that the Public Access to your bucket has switched from No to Yes.

Now, wait approximately 2–3 minutes to allow for the cloud to update the policy. Afterward, RELOAD the bucket page that encompasses all the files you recently uploaded. Enter “_site/index” in the Prefix filter to locate our target file.

When you select the index.html file, you will see the Object Public URL. This link represents the public portfolio that you may freely share with others.

Congratulations!

You are now fully equipped to edit the majority of Jekyll templates and publish them free of charge on IBM Cloud.

However, don’t close this page just yet! While this article has only provided you with the basic methods to link your HTML with IBM Cloud, there is so much more to explore on how to showcase your project and add more customization to your web portfolio. Dive deeper to discover more secrets of editing HTML themes like a pro in this comprehensive and free CognitiveClass.ai Guided Project. Don’t wait any longer; upgrade your knowledge today and unleash your full potential!

Build Free Website with Jekyll on IBM Cloud

Here is the link to the author who created these fantastic Jekyll templates. You can visit his site and maybe give a star to his GitHub repository.

Web: https://jekyllthemes.io/theme/freelancer-theme

GitHub: https://github.com/jeromelachaud/freelancer-theme

Feel free to connect with me on LinkedIn as well!