Jekyll Starter

The Jekyll Starter is as a file-based CMS, in order to create beautiful websites and documentations for any device. It takes all the complexity and let you focus on what matters - your content. The Jekyll Starter is based on Jekyll and provides many useful third party modules, ready to use straight out of the box.

Features

• Simple file-based CMS, without all the complexity.
• Many useful Third Party Modules ready to use out of box.
• Create beautiful responsive websites that look amazing on any device.
• Advanced assets workflow using Gulp, Laravel Elixir and Laravel Vuefy.
• An optimized version of the Google Universal Analytics snippet.
• Search for blog posts or content on websites.
• SEO friendly HTML5 markup, optimized for many browsers and robots.
• Automatic retina image support, optimized for various screens.
• "Delete-key friendly." Easy to strip out parts you don't need.
• Designed with progressive enhancement in mind.

Getting Started

As mentioned in the introduction, the Jekyll Starter is based on Jekyll, a simple, blog-aware, static site generator. So you may need to install Jekyll on your machine, before you will continue. Yes there a lot of dependencies you have to install before you can continue, but trust me it is worth.

1. Install Gulp

Gulp is a tool that helps us, to manage several tasks related to the Starter Jekyll Template assets workflow. In combination with Laravel Elixir and Laravel Vueify, we have everything we will need in order to manage our assets in advanced way. So lets begin to pull in Gulp as a global NPM Package, using the command line tool:

$ npm install --g gulp-cli

This command will download Gulp-CLI as a global NPM dependency, so you usually have to do this once per life and you are done. If you run into any errors or have problems in order to install packages global, than please refer to the documentation: https://docs.npmjs.com/getting-started/installing-npm-packages-globally

2. Install NPM Packages

Next we will need to install the NPM packages used within the Jekyll Starter. Usually we are going to install the frontend and javascript frameworks with NPM, but there are some helpful tools on the other hand which we are going to require as well. The installation can be executed within the command line tool:

$ npm install

The npm install command will install all dependencies defined in the package.json file into the node_modules/ directory. These packages will usually be used in order to build the design and javascript used for the Jekyll Starter Template and need to installed only once per project.

3. Install Plugins

The Jekyll Starter comes in with some Jekyll plugins, which will help to generate the website. These plugins has been tested on GitHub and can be used without any worries. But we have to install these plugins using the command line tool, Gem and Bundler:

$ gem install bundler
$ bundle install

The gem install bundler command will install Bundler on your machine. Bundler allows to easily install Gem dependencies defined in a Gemfile, similar to NPM, Composer or other dependency managers and has to be installed only once.

Than we finally can install the Gem dependencies defined in our (Gemfile), with the bundle install command. These commands usually only have to be executed once per life since the dependency will be solved on your machine.

4. Run Gulp

Elixir is built on top of Gulp, so to run your Elixir tasks you only need to run the gulp command in your terminal. Adding the --production flag to the command will instruct Elixir to minify your CSS and JavaScript files:

$ gulp

or with --production flag, in order to run all tasks and minify the assets:

$ gulp --production

Since it is inconvenient to run the gulp command on your terminal after every change to your assets, you may use the gulp watch command. This command will continue running in your terminal and watch your assets for any changes. When changes occur, new files will automatically be compiled:

$ gulp watch --production

5. Serve Website

Jekyll also comes with a built-in development server that will allow you to preview what the generated site will look like in your browser locally. Simply run the jekyll serve command in your terminal, in order to serve the website:

$ jekyll serve

Jekyll will render your website into the _site/ directory and start an internal development server which will serve a preview of the generated website.

Usually you will find the website at: http://127.0.0.1:4000/jekyll-starter/, but this depends on your configuration made in _config.yml. But the final url will be displayed in your terminal anyway, so you can copy it from there and open it in your browser.

Need Further Help

Please take a look at the official documentation, in order to receive further information about Jekyll Starter. It will guide you through all the basics and is the defacto educational resource specifically for any Jekyll Starter beginner.

If you have a question, want to report any bug or have any other issue, than please do not hesitate to use the issue tracker. Here you will find any tickets, questions and many more, related to Jekyll Starter.

Browser Support

| IE / Edge | Firefox | Chrome | Safari | Opera | | --------- | --------- | --------- | --------- | --------- | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions

"That's all Folks - Happy coding!"

© 2016, Alexander Bösch ([email protected]) - The code is available under the MIT license.