Java World Knowledge Sharing Portal: Jekyll to Create and Deploy site using github pages

Jekyll is a static site generator. It takes text written in your favorite markup language and uses layouts to create a static website.

Using Jekyll for creating GitHub Pages offers several benefits, including:

Ease of Backup: Since Jekyll generates static sites, backing up your site is straightforward. You simply need to copy the generated files. This eliminates the complexity associated with databases and ensures that if your server goes down, you can rebuild the entire site from your local copy

Flexibility: Jekyll allows for high flexibility in customization. You can easily add custom meta tags and leverage its theme templating system to tailor the appearance of your site according to your needs

Offline Editing: With Jekyll, you can edit your site offline using any text editor. This approach avoids the issues associated with online editors, such as losing drafts or needing constant internet access. It also means you can work on your site without worrying about server availability 5.
Efficiency: Jekyll sites run quickly and cost-effectively because they don’t require server-side processing like PHP. They can be hosted anywhere that supports file hosting, offering greater versatility in where you choose to host your site.

GitHub Pages Support: Hosting your site on GitHub Pages is free and comes with the added benefits of HTTPS and custom domain support. This makes it a compelling option for those looking for a reliable and cost-effective hosting solution.

Security: Jekyll sites are inherently secure since they consist of flat files. This reduces the risk of vulnerabilities often found in server-side applications. Additionally, hosting on GitHub Pages further enhances security by leveraging GitHub’s infrastructure.

Themes and Plugins: Jekyll supports a wide range of themes and plugins, allowing you to customize your site’s appearance and functionality. You can add a Jekyll theme to your GitHub Pages site to change its look and feel, and extend its capabilities through plugins.

Despite these advantages, it’s important to note that Jekyll might not be the best fit for everyone due to its reliance on local development and the need for familiarity with Git and Markdown. However, for those comfortable with these tools, Jekyll offers a powerful and flexible platform for creating static websites and blogs.

Prerequisites

Jekyll requires the following:

1- Ruby version 2.5.0 or higher
2- RubyGems
3- GCC and Make

lets do the Installation of all. We are using windows OS.

Jekyll is a Ruby Gem that can be installed on most systems.

Requirements

Ruby version 2.5.0 or higher, including all development headers (check your Ruby version using ruby -v)
RubyGems (check your Gems version using gem -v)
GCC and Make (check versions using gcc -v,g++ -v, and make -v)

for windows follow belwo url
https://jekyllrb.com/docs/installation/windows/

1- Download and install a Ruby+Devkit version from this url :- https://rubyinstaller.org/downloads/

we are using rubyinstaller-devkit-3.2.4-1-x64

One you install the above software it will ask for other option to install From the options choose

MSYS2 and MINGW development tool chain.

2- Now Install Jekyll and Bundler using below command

gem install jekyll bundler

3- Check if Jekyll has been installed properly:

jekyll -v

C:\Users\Admin>jekyll -v
jekyll 4.3.3

There are many theme available please refer to https://jekyllrb.com/resources/

for our proof of concept we are going to use belwo theme available on this location

https://jamstackthemes.dev/theme/jekyll-professional-resume/

check out the code to local machine and update the files as per requirement.

run the command bundle as shown below

C:\to_delete\git-hub\jekyll-professional-resume>bundle
Fetching gem metadata from https://rubygems.org/............
Resolving dependencies...
Fetching mercenary 0.3.6
Fetching rouge 3.30.0
Fetching wdm 0.1.1
Fetching webrick 1.7.0
Fetching tzinfo 2.0.6
Fetching sass-listen 4.0.0
Installing mercenary 0.3.6
Installing rouge 3.30.0
Installing wdm 0.1.1 with native extensions
Installing webrick 1.7.0
Installing sass-listen 4.0.0
Installing tzinfo 2.0.6
Fetching sass 3.7.4
Installing sass 3.7.4
Fetching tzinfo-data 1.2024.1
Installing tzinfo-data 1.2024.1
Fetching jekyll-sass-converter 1.5.2
Installing jekyll-sass-converter 1.5.2
Fetching jekyll 3.9.5
Installing jekyll 3.9.5
Fetching jekyll-feed 0.17.0
Fetching jekyll-seo-tag 2.8.0
Fetching jekyll-sitemap 1.3.1
Installing jekyll-feed 0.17.0
Installing jekyll-seo-tag 2.8.0
Installing jekyll-sitemap 1.3.1
Bundle complete! 10 Gemfile dependencies, 35 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Post-install message from sass:
 
Ruby Sass has reached end-of-life and should no longer be used.
 
* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install
 
* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme
 
* For more details, please refer to the Sass blog:
  https://sass-lang.com/blog/posts/7828841

Finally run this command

1	`bundle exec jekyll serve --livereload`

and open this url

http://localhost:4000/

you will be able to see follwoing pages

Now lets change the content of the files as required. Open the project in your editor. I am sing VSCode.
Change the files which needed and check your site on url if the code change is reflected.

Once the whole change is done now it is time to upload this theme and text on our github repository.
Make sure to use *.github.io in your repository name as show below

siddhu-jekyll-professional-resume.github.io

Now let build and deploy the project on Github site for that follow the below steps

1- go to setting
2- go to pages
3- under build and deployment keep source as Deploy from a branch and in branch option select the main branch as shown below and save it.
4- Now go to action tab and we will be able to see “pages build and deployment” and an Option on the left side “Deployments” click on it. Make sure the icon on the left side of the “pages build and deployment” should be green with correct.
5- you will get depoyment url of our site build on gitub pages.