material-jekyll

material-jekyll

Material site template for Jekyll, based on Material Design for Bootstrap

Download

Material site template for Jekyll

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:

This template comes out of the box with features desirable for any modern website, including:

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.

License

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!

Download

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 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

Project site

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

Installation

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:

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

Configuration

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

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).

Publishing your website

Before actually publishing your website, please ensure that at least the urland 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/.

Project site

After pushing, you will be able to access your project site at http://username.github.io/project.

Fetching updates

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

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

Project site

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
minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog