HTML and CSS can be considered the bread and butter of any website. HTML is the standard markup language for creating web pages and CSS is a language that describes the style of an HTML element. Be it a complex website like Amazon or a simple static website, the information will be displayed to end-user users as rendered HTML. If you are a rockstar developer or a newbie, you might have to bang your head against a wall to figure out the ideal tech-stack and framework to build a website.
The goal of this article is to help you understand how easy it is to build a simple, blog-aware, static website with Jekyll in no time.
Jekyll is a static site generator written in Ruby by Tom Preston-Werner, GitHub’s co-founder. Jekyll is at its best when it comes to personal blogs, portfolios, and static websites. The real beauty in Jekyll is that you can provide the content you want to publish on a website in your favorite markup language (as plain text) and Jekyll will automagically generate static HTML pages for you.
If you already have a Ruby development environment, you can get a simple static website up and running in just four steps. [Ruby development environment install guide]
1. Install Jekyll and bundler. If you have already installed these gems, you can skip this step.
gem install jekyll bundler
2. Create a new project named personal-blog.
jekyll new myblog
3. Change into the project directory.
cd personal-blog
4. Build the project and serve the site using a development server.
bundle exec jekyll serve
Open your favorite web browser and navigate to http://localhost:4000 to view the website just created. If everything has gone well, you should get the webpage shown below.
Let’s take a step back and see exactly what Jekyll had done and the files that were generated for us when we created the new project.
├── 404.html # The default 404 error page ├── Gemfile # Project related Gem dependencies ├── Gemfile.lock # Used by Bundler to record installed Gem versions ├── _config.yml # The main configuration file of the project ├── _posts/ # Holds the blog posts ├── _site/ # Holds the generated site ├── about.md # The default about page └── index.md # The home page
The auto-generated file structure is pretty straightforward. But if you look at our website, you will notice that it’s already styled. That’s because Jekyll uses a default theme called minima and it is specified in a _config.yml file. Jekyll comes with an extensive theming system (or layouts in Jekyll nomenclature) and provides full support for community maintained templates. The minima theme comes with Jekyll Gem. If you want to customize the look and feel of the site, you need to copy minima into the project directory and make the required changes.
The next challenge is to deploy this website and make it available to public users. When it comes to deployment, you can go ahead with one of the following options:
A. Web Servers – NGINX/Apache
B. AWS S3 for static site hosting
C. GitHub Pages
If you want to go ahead with option A or B, you need to build the project to get the distribution ready version of the website which you can achieve by executing the following command in the project directory.
jekyll build
Compared to option A and B, option C is very straightforward and hasslefree. It does not involve any cost and you can host your website for free with Github Pages. Also, you do not have to build the site each time you make a change; just commit your changes to GitHub and Jekyll will automagically build and publish your website.
Resources
Hosting a Static Website on Amazon S3