Barber is a minimal blog theme built for Jekyll. The blog theme features a masonry grid, endless scrolling, and page transitions.
Jekyll requires all dependencies to be saved in the
bundle install (Install Bundler if it is not already) on your command line after downloading or cloning the theme. You can then run
bundle exec jekyll serve or
npm start to see your development site. Run
bundle exec jekyll build or
npm run build to build a production ready site for deployment.
Almost everything to personalize your site is in the
You can change the URL the contact form is sent to, add Google Analytics, change the SEO settings, grow your website with additional authors, and much more.
All posts go upder the
_posts directory. You can also have a
_drafts directory with posts that will on your development page, but not in production.
--- layout: post title: "Brunch Swag" date: 2017-02-18 description: image: /assets/images/placeholder-15.jpg author: Thomas Vaeth tags: - XOXO - La Croix ---
The front matter has to have a layout of page. All the other fields are completely optional. If you have an
author variable, then it must match an author's name in
_config.yml (see Update Settings). The
tag variable will add a related section to the post and popular tags to the footer.
Creating a static page is the same as creating a post. The only difference is a page is in the root of the directory rather than the
--- layout: page title: Style Guide image: /assets/images/placeholder-18.jpg ---
You just have to make sure the front matter has a layout of page instead of post. If there is no title or image, then the page will default to the site configuration.
You can create a navigation in
_includes/navigation.html. Visitors can be linked directly to pages right on the top of your website.
The form uses Formcarry to send submitted messages straight to your inbox. The image on the popup is the the
contact_img variable and the URL the forms sends to is the
formcarry variable in
_config.yml (see Update Settings).
This file can be found in
_includes/formscarry.html. You can change the labels of the form here. After everything is set you will need to submit a message to yourself to confirm everything is correct.
Social Media Links
Font Awesome is used for the social media icons. The icons in the theme can be found in
_includes/social.html. The icons in
_includes/share.html do not need to be edited unless you want to remove a certain website; however, the ones in
_includes/social.html do have to be changed. You can follow the example that has been provided in
_config.yml for you to link to all of your social media accounts (see Update Settings). The naming convention has not changed from the instructions provided on Font Awesome.
Comments can be enabled on every blog post in a few steps steps. The first step is to register your website with Disqus. Disqus will provide you with a shortname that you need for the next step. Once you have that the second step is to replace the
disqus variable in
_config.yml (see Update Settings). The third step is to open
_includes/disqus.html and remove all the instructions. The final step is to visit a blog post and verify that your comments are there.
GitHub Pages does not support custom plugins. The tag list and tag pagination are built using custom plugins. There are several options to avoid any errors while deploying to production.
bundle exec jekyll buildor
npm run buildand manually add the contents of the
_sitefolder to the
- Link the repository to Netlify. Netlify will then rebuild the theme every time a commit is pushed to the repo.
- Finish setting up the s3-website package that is already included in the theme. This would deploy the theme to AWS S3 when
npm run deployis run.
The source code is broken down to make finding what you need as easy as possible. Almost everything runs through
gulpfile.js, so you will need to run
npm install on your command line before doing any additional development. You can then run
npm run gulp to compile everything.
. ├── _assets | ├── js | ├── components | ├── vendor | ├── _inits.js | └── app.js | └── scss | ├── base | ├── components | ├── fonts | ├── regions | ├── tools | ├── utils | ├── vendor | └── app.scss ├── _includes | ├── contact.html | ├── disqus.html | ├── footer.html | ├── formcarry.html | ├── head.html | ├── header.html | ├── navigation.html | ├── pagination.html | ├── post-card.html | ├── share.html | ├── social.html | └── subscribe_form.html ├── _layouts | ├── compress.html | ├── default.html | ├── page.html | ├── post.html | └── tag.html ├── _plugins ├── _posts ├── _site ├── assets | ├── css | ├── images | ├── js ├── .eslintrc ├── .gitignore ├── .stylelintrc ├── 404.html ├── _config.yml ├── Gemfile ├── Gemfile.lock ├── gulpfile.js ├── index.html ├── package.json ├── README.md ├── style-guidle.html └── subscribe.html