A barebones Jekyll site without an external theme - based on the Jekyll docs tutorial
All the styling and assets are included in this repo. This gives you more control and configuring a theme. But it means the repo is heavy - including both your own content and the appearance setup.
This project is based on following the Jekyll Step-by-Step tutorial and serves the following purposes:
- Create a project quickly from this one, using the Use this template button.
- This is a reference for other projects.
- There is demo site hosted as a GitHub Pages site.
Note that this project has no theme. If you want to see use of a theme in a simple project, see these projects:
This project demonstrates how to do a few things in Jekyll, but the approaches are not necessarily best practice. See minima project for a good idea of how to set up a navbar, styling, JS, includes files and other pieces which are more typical of Jekyll sites and easier to scale and maintain.
This project is a good starting point if you have some existing HTML and CSS that you've built or downloaded as a theme and now you want to build a Jekyll site from it to make it easy to maintain. As you'll get to use a config file and layouts for templating plus you can use the included gems like Jekyll sitemap to handle SEO for you.
This project has limited styling and does not use a theme gem, so it is good to use.
You can easily make a new project from this template and replace the layouts with content from an existing folder of static HTML. Add any includes files you need like head.html, analytics.html or gallery.html. Delete or rename the pages.
You can add CSS as external content in the head tag or as CSS files on the repo.
The contents of this project shows how to work with Liquid templating and Jekyll (Ruby gem for generating static sites).
The frontmatter (HTML and markdown content) pages are built with the template engine to produce HTML which is served. In this case, the output is kept simple - a few pages, each with a navigation bar that has current page highlighted.
Usually a Jekyll theme is used for static sites so they can have styling, then you override the sections you want. However this project has no theme set.
- Navigation bar using configured a navigation.html data file and rendered using navigation.html file.
- Blog page and posts.
- Blog post authors are in the _authors directory, enabled as a collection in config and then referenced by blog post with an
authorfield. - Skills are listed in the skills.yml data file and are iterated over in the my_skills.md page.
- The _layouts directory has a few layouts and these are matched to pages using the config file.
- Plugins are set in the Gemfile and config.
A note on generating pages as a collection. Each author markdown file generate its own author page because of the setup above. When iterating, you can use the default ordering, or use a Jekyll filter to order them or reverse them or you could add a priority (or order or weight) field in each to sort by (e.g. sort by this value ascending where 1 would mean 1st position).
This cannot unfortunately be done using a single YAML data file. Unless you use a plugin, or generate markdown files from a CSV as suggested in this Jekyll issue conversation.
- Jekyll collections
- Some useful links which helped me with learning how to use Jekyll are in this gist.
This project can be setup on GitHub Pages.
Do this by setting up GitHub Pages section of the GitHub repo's Settings.
This project is available at:
Since this is a project page, the subpath of themeless-jekyll-quickstart is automatically set using the repo's name. In order to keep navigation and asset URLs in line with this and prevent errors, the baseurl in the config file is also set to that subpath.
Set up the project locally - instructions are for Linux or macOS systems.
Optionally addd this to your own repos - either fork this repo or click this button to get a copy .
Then clone your repo or this one.
Navigate to the repo's root directory locally.
You can view commands in the Makefile or skip that and continue.
$ make helpInstall Ruby and Bundler - see instructions.
Install gems for your project - including Jekyll.
$ make installRun this command in future to upgrade to the latest gems.
$ make upgradeThe Gemfile.lock file will be updated if there were any changes. You can commit this. That file is optional for GitHub Pages, but required if you want to deploy to Netlify.
Build to the _site directory and start the Jekyll dev server.
Set baseurl value in the config - this should be changed to match the repo name. This makes it easy to mirror how sites run on Github Pages.
$ make serveOpen the browser at:
$ make serve-rootOpen the browser at:
When building site content to deploy to production, replace the default 'development' value with production.
$ make buildThis will affect any checks in the files such as if jekyll.environment == "production". This is useful for example to only show Google Analytics tag on Production site.
Then copy the contents of the _site directory to your server and then serve the static content. GitHub Pages and Netlify can do the build, copy, and serve steps for you all in the cloud.
The following plugins were recommended as part of the deploy step of the Jekyll tutorial tutorial and so are used in this project in both the gem file and Jekyll config.
- jekyll-sitemap - Creates a robots and sitemap file, to help search engines index content.
- jekyll-feed - Creates an RSS feed for your posts. This is typically shown on as link in the header or footer.
- jekyll-seo-tag - Makes meta tag snippets available, to help with SEO.
The first doesn't need any setup other than in the two files mentioned above. Serving the site will give following:
The other two plugins have been added to the defaults file as {% feed_meta %} and {% seo %} tags in the head (view the source of any page to see the result). If using a theme like minima, you will find that those are already included in the theme's default layout.
The RSS Feed is available here:
If not overriding the configured baseurl, the paths of all pages (including the feed and sitemap) will be off of the subpath. The links inside the feed and sitemap files will reflect that too.
Released under MIT.