Material site template for 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:
- 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.
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.
User or organization site
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
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
$ 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)
- 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
install.sh script is really just a shortcut. If you are not using Linux nor Git Bash, you can run:
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.
Previewing your website locally
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
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).
Publishing your website
Before actually publishing your website, please ensure that at least the
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.
User or organization site
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.
User or organization site
$ 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
$ 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
$ cd my-project-local-repo $ git pull site-template $ git checkout gh-pages $ git merge site-template/master