How to create a static website using Jekyll
Jekyll is a static site generator written in Ruby. Jekyll is best when it comes to personal blogs, portfolios, and static websites, etc. We can also take templates and edit them. We can find free templates in some sources on the internet. Beauty in Jekyll is that you can provide the content in a markup language (as plain text) and Jekyll will automatically generate static HTML pages.
After selecting a template we can clone it to the local system and update the changes as per our requirements, build it locally and then serve. we can change the website name, description, images, and other things by editing ‘.config.yml’. After making changes in the ‘.config.yml’ file we need to restart the local server, to see the changes. for example, I took a template(check below) to show how it works.
if we call {{ site.title }}in markdown file then the output will be Xaviers Guest House. we can add a new item also as per requirements. we can change the theme.
In the markdown file, we can add the images, text, and layout. At the top of the file, YAML front matter is surrounded by triple hyphens. Here, we’re specifying that this file should be processed as the content for the default.html layout.
To change the image we need to add the new image into the img folder and call it by the path ‘/img/image.jpg’. we can use HTML syntax also. In Jekyll .
_includes folder will include all the pieces that come repeatedly on the website such as header, footer, etc. We will create a file inside this folder for an additional section in the webpage and then add the file name in Jekyll format in the default.html file which is in the _layouts folder.
If we require any change in the website page we can add in the particular section html file and add the CSS rule in the css folder. I took a template and made the required changes in all sections as per the requirements.
To check the changes made we should run it on the local server. we require ruby to be installed to run it. To check whether ruby is installed or not in your system. use: ‘ruby -v’ it shows the version of ruby.
“brew install ruby” to install. The ruby version can be checked using: ‘ruby -v’ on mac
Install Jekyll and bundler. If you have already installed these gems, you can skip this step “gem install bundler jekyll”
Bundler provides a consistent environment for Ruby projects by tracking and installing the exact gems and versions that are needed. Now go to the directory of the ruby project, here it is my project directory. To install the dependency gems use the following command. “bundle install”
Build the project and serve the site using a development server “ bundle exec jekyll serve”
Now, we can visit our website locally at http://localhost:4000/. To stop the server press ctrl+c. In the same way, I built a website. If you want your own website, I can create for you :) contact me: sriharsha1608@gmail.com