This is a site template for Jekyll which lets you use the new Google Material Design in your favorite static site generator.
Live demo: https://vinyanalista.github.io/material-jekyll
It is built on top of the Jekyll's default site template and the following excellent libraries:
- jQuery (MIT License)
- Bootstrap (MIT License)
- Material Design for Bootstrap (MIT License)
- Font Awesome (SIL OFL 1.1 and MIT License)
This template comes out of the box with features desirable for any modern website, including:
- Responsiveness
- Site search (powered by Google and OpenSearch)
- Favicons (made with Favicon Generator)
- Social meta tags (OpenGraph, Twitter Cards and Schema.org)
- Integration to Google Analytics
- Integration to Google AdSense
- Comment system (powered by Disqus)
- Integration to social networks (powered by AddThis)
- Sitemaps.org compliant sitemap (powered by jekyll-sitemap)
This template is out of the box compatible with GitHub Pages (in fact, the live demo itself is hosted on GitHub Pages). The only Jekyll plugin it uses is the Jekyll Sitemap Generator Plugin, which is one of the plugins supported by GitHub Pages.
Material site template for Jekyll is fully open source and distributed under the MIT License. You can use it for commercial projects, open source projects, or really just about whatever you want.
Enjoy!
You may download Material site template for Jekyll as a ZIP file.
Alternatively, if you are used to Git, you may clone this template's repository.
If you are going to host your website on GitHub Pages, see the tips that follow.
If you are going to use this template to start an user or organization site, you may just fork this template's repository and rename your fork to username.github.io
(or organization.github.io
). Then, clone your site's repository and start working on it:
$ git clone https://github.com/username/username.github.io
$ cd username.github.io
If you are going to use this template to start a project site, note that you need to host your project website in the same repository of your project, in a branch called gh-pages
. I recommend you to add this template's repository as a remote in your project's local repository. Then, create a gh-pages
branch in your project's repository and sync it with this template's repository master
branch:
$ cd my-project-local-repo
$ git remote add site-template https://github.com/vinyanalista/material-jekyll.git
$ git pull site-template
$ git checkout --orphan gh-pages
$ git merge site-template/master
$ git push -u origin gh-pages
Even if you already have Jekyll installed, I recommend you to use Bundler to install and manage all dependencies of this template on Ruby gems. That assures you will always use the supported versions of the gems needed to build a website based on this template.
Summing up Jekyll requirements and Bundler, before you can actually use this template, you must have installed on your computer:
- Linux, Unix or Mac OS X (Jekyll can be run on Windows, although that is not officially supported)
- Ruby (including development headers)
- RubyGems
- NodeJS
- Python 2.7
Note that Jekyll itself is not required to be previously installed, as it is going to be installed by Bundler.
Then, to make your computer ready to build a website based on this template, enter its folder and issue this command:
$ sh install.sh
The install.sh
script is really just a shortcut. If you are not using Linux nor Git Bash, you can run:
bundle install
If you are impatient and just want to see a boilerplate Jekyll site based on this template up and running, you can skip configuration right now (default values are fine for a boilerplate site) ang go to the next step, where you will achieve what you want.
Following Jekyll configuration, all of this template's configuration (including configuration of the integrated features mentioned above) is done in the _config.yml
file. That file is well commented and is self-explanatory.
Jekyll has a built-in development server that allows you to preview what the generated site will look like in your browser locally. As we are using Bundler, we need to start it through Bundler.
Running the script serve.sh
saves you typing:
$ sh serve.sh
Alternatively, if you are not using Linux nor Git Bash, you can run:
bundle exec jekyll serve --host=0.0.0.0
Now browse to http://localhost:4000 and you should see your website live (just like this).
As you typed the argument --host=0.0.0.0
, you can also access your website from locally connected devices, such as smartphones, just browsing to your computer's local IP (for example, http://192.168.25.2:4000).
Before actually publishing your website, please ensure that at least the url
and baseurl
variables in the _config.yml
file are correctly set, otherwise your website may not function properly online. As an example, you can see here how they were set for the live demo site.
If you followed the above tips about GitHub pages, publishing your website is just a matter of pushing it's repository.
After pushing, you will be able to access your site at http://username.github.io/.
After pushing, you will be able to access your project site at http://username.github.io/project.
You may update your code with eventual updates to the original template. Please note that after applying those updates to your code you may need to adjust it so it can work as expected.
If you followed the above tips about GitHub pages, here is how you can update your code.
As your site is a fork of this template, to sync your fork with this template, you first need, if you haven't done yet, to add this template's repository as a remote in your site's local repository:
$ cd username.github.io
$ git remote add site-template https://github.com/vinyanalista/material-jekyll.git
That needs to be done just once.
Then, sync your local clone of this template's repository:
$ git pull site-template
Finally, sync your site's repository master
branch with this template's repository master
branch:
$ git merge site-template/master
First, sync your local clone of this template's repository. Then, sync this template's repository master
branch with your project's repository gh-pages
branch:
$ cd my-project-local-repo
$ git pull site-template
$ git checkout gh-pages
$ git merge site-template/master