HTML to Jekyll Sample 🌏 🧪

A demo to showcase converting a plain HTML site to a Jekyll site

Preview

Note this site is not finished yet - the navbar is not set up right, but the styling and page structure is setup.

Use this project

Tutorial

This explains how I create this project as a new Jekyll site, starting from an HTML site.

For intetest, see also the HTML to Jekyll tutorial in the Jekyll docs.

YouTube video

My intention was to take an existing site with content and styling and build a Jekyll site out of it.

I hosted a live session on YouTube to do just that. It is available as a recording.

• Jekyll live coding

This repo was created from scratch in that session. I encourage you to watch that video and compare it with this repo.

Choose an HTML base

I found this article of 99 free HTML templates.

• 99 Free HTML Templates You Can Download Right Now

The first option on that list is this CodePen, which I liked.

• Asperion HTML5 template by Alex Devero / @alexdevero.

So I used that for the tutorial.

It has "template" in the name, so I feel comfortable that the creator indended the code to be reused by others.

Uploaded repo

I cleaned up the code after the live session and uploaded it as this repo. This is a demo or sample which supplements the tutorial video.

I also copied the rendered content to sample.html as well to make it easier to compare the Jekyll site against it and in case the pen disappears.

Related projects

A example of a Jekyll site also with no theme, based on a tutorial in the Jekyll docs (linked so you can follow the steps too):

• Jekyll Themeless Quickstart

If you are interested in a Jekyll site with a theme, see:

• Jekyll Blog Demo
  • A typical Jekyll site that has minimal basic functionality and a theme and is served on on GH Pages
• Jekyll Themed Site Quickstart
  • A site with few files that demonstrates using a theme on a GH Pages site.

If want to build your own theme and then install it in another project of yours, or let the Jekyll community use your theme, see:

• Jekyll Theme Quickstart

Installation

Clone the repo.

Install Ruby and Bundler globally.

Install project gems.

$ make install

Usage

Start dev server.

$ make serve

Do a production build and output as _site directory.

$ make build

Deploy

1. Get a copy of this repo on GitHub.
2. Go to Setting for your repo, Pages and then enable GitHub Pages on the main branch on the root path.
3. Wait for your site to build.
4. Check the Environment tab and find the URL for your site.

License

Released under MIT by @MichaelCurrin.