A demo to showcase converting a plain HTML site to a Jekyll site
Note this site is not finished yet - the navbar is not set up right, but the styling and page structure is setup.
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.
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.
This repo was created from scratch in that session. I encourage you to watch that video and compare it with this repo.
I found this article of 99 free HTML templates.
The first option on that list is this CodePen, which I liked.
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.
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.
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):
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:
Clone the repo.
Install Ruby and Bundler globally.
Install project gems.
$ make install
Start dev server.
$ make serve
Do a production build and output as _site
directory.
$ make build
- Get a copy of this repo on GitHub.
- Go to Setting for your repo, Pages and then enable GitHub Pages on the main branch on the root path.
- Wait for your site to build.
- Check the Environment tab and find the URL for your site.
Released under MIT by @MichaelCurrin.