https://github.com/michaelcurrin/html-to-jekyll-sample
A demo to showcase converting a plain HTML site to a Jekyll site 🌏 🧪
https://github.com/michaelcurrin/html-to-jekyll-sample
gh-pages-site jekyll template tutorial
Last synced: 6 months ago
JSON representation
A demo to showcase converting a plain HTML site to a Jekyll site 🌏 🧪
- Host: GitHub
- URL: https://github.com/michaelcurrin/html-to-jekyll-sample
- Owner: MichaelCurrin
- Created: 2021-05-17T08:39:12.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-08T21:03:23.000Z (over 4 years ago)
- Last Synced: 2025-03-04T15:47:30.159Z (11 months ago)
- Topics: gh-pages-site, jekyll, template, tutorial
- Language: HTML
- Homepage: https://michaelcurrin.github.io/html-to-jekyll-sample/
- Size: 97.7 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML to Jekyll Sample 🌏 🧪
> A demo to showcase converting a plain HTML site to a Jekyll site
[](https://github.com/MichaelCurrin/html-to-jekyll-sample/releases/)
[](#license)
[](https://ruby-lang.org)
[](https://jekyllrb.com)
[](https://pages.github.com/)
## 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
[](https://github.com/MichaelCurrin/html-to-jekyll-sample/generate)
[](https://michaelcurrin.github.io/html-to-jekyll-sample/)
## 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](https://jekyllrb.com/tutorials/convert-site-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](https://www.youtube.com/watch?v=6v5vEBUmkGs)
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](https://html.com/resources/free-html-templates/)
The first option on that list is this CodePen, which I liked.
- [Asperion HTML5 template](https://codepen.io/alexdevero/pen/GCirD) by [Alex Devero](http://alexdevero.com) / [@alexdevero](https://github.com/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](/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](https://github.com/MichaelCurrin/themeless-jekyll-quickstart)
If you are interested in a Jekyll site with a theme, see:
- [Jekyll Blog Demo](https://github.com/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](https://github.com/MichaelCurrin/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](https://github.com/MichaelCurrin/jekyll-theme-quickstart)
## Installation
Clone the repo.
Install Ruby and Bundler globally.
Install project gems.
```sh
$ make install
```
## Usage
Start dev server.
```sh
$ make serve
```
Do a production build and output as `_site` directory.
```sh
$ 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](/LICENSE) by [@MichaelCurrin](https://github.com/MichaelCurrin).