Giter Club home page Giter Club logo

HANUMAN Jekyll Theme

Build Status

Hanuman is a minimal yet powerful Jekyll theme for your blogs and websites.

It is built using the open source AMP Start framework and can be customized as per your requirements.

Buy Me A Coffee

Live Demo

Hanuman

Features

  • Minimal
  • Responsive
  • Syntax Highlighting for code
  • Cover Images for homepage and blog posts
  • Social Sharing
  • Simple Navigation Menu
  • Pagination
  • Google Analytics
  • Can be easily installed via "theme gem"
  • Github Pages support
  • Easily Customisable
  • Tags
  • Multiple Authors

What is AMP

AMP stands for Accelerated Mobile Pages, a Google-backed project designed as an open standard for any publisher to have pages load quickly on mobile devices.

Installation

There are different ways to install the theme -

1. Cloning the repository and updating settings

  1. Fork this repository and clone the forked repository.
  2. Update the _config.yml file as per your requirements.
  3. Add your posts to the _posts directory.
  4. Deploy to Github Pages or your own server.

Deploying to Github Pages

Method 1

Push the contents of the destination folder (mentioned in _config.yml. eg - destination: ../hanuman-pages/) to the gh-pages branch(if project page) or master branch(if user page) of your repository.

Method 2

  • Set up travis-ci for your fork.
  • Generate your secure token with the travis gem: Run gem install travis on your terminal.
  • Grab the GH_TOKEN from https://github.com/settings/tokens
  • Then run travis encrypt 'GIT_NAME="YOUR_USERNAME" GIT_EMAIL="YOUR_EMAIL" GH_TOKEN=YOUR_TOKEN'
  • Add the token to your .travis.yml file. Now you just need to push the files. Travis will generate the HTML files and automatically push them to your gh-pages branch. This is the setup I am using.

2. Ruby Gem Method

Add this line to your Jekyll site's Gemfile:

gem "hanuman"

And add this line to your Jekyll site's _config.yml:

theme: hanuman

And then execute:

$ bundle

Or install it yourself as:

$ gem install hanuman

You'll also need to copy or create the _config.yml file just like in this repository. Similarly, you'll need to have a navigation.yml and author.yml in your _data directory.

Deploying to Github Pages

Run bundle exec jekyll serve inside your cloned repository. Push the contents of the resulting _site to your Github Pages repository.

3. Jekyll Remote Theme

  1. Create or update your Gemfile with the following -
source "https://rubygems.org"
gem "github-pages", group: :jekyll_plugins
gem "jekyll-remote-theme"
  1. Update the bundled gems using bundle command.

  2. Add remote_theme: "hanuman" to your _config.yml.

  3. Add jekyll-remote-theme to the plugins array of your _config.yml -

plugins:
  - jekyll-remote-theme

Usage

_config.yml

Update _config.yml with your respective settings like updating your site's name, description etc...

Styling

AMP has a limitation that you can only use inline css. All the CSS for this theme is in the styles.scss file in the includes directory.

Changing the Default Color

In the styles.scss file in the includes directory, you can change the hex value of $theme-color to the color you would like your site to use.

Author Information

Author information is present in the author.yml file in the _data folder. You can update the fields of that file as per your requirements.

Sidenav

Sidenav can be updated from the navigation.yml file in the _data folder.

Writing Posts

You can write posts just as you would in Jekyll, the only difference being that AMP has some strict guidelines on including external content.

You cannot use Markdown format or normal HTML tags. AMP provides its own custom tags for images, videos etc...

Examples -

Images <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Videos <amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="480" height="270"></amp-youtube>

See Full AMP Documentation.

Using AMP Components

Some AMP components require you to specify external scripts before using them. You can specify these scripts in the head.html file in the includes directory after the already imported scripts and then use these components in any post.

Validating your page with AMP

AMP provides built-in validator to validate your pages so that they can rendered quickly.

You can access this validator by opening the Developer Console in your browser and adding #development=1 to any url of your site.

Example - http://localhost:4000/#development=1

If you have errors on your page, AMP will list those for you in the console. If you do not have any errors, you'll get a message "AMP Validation Successful" on your console.

Enabling Google Analytics

  1. Set up your Analytics Tracking ID in _config.yml.
  2. Remove {% comment %} and {% endcomment %} tags in the default.html file in layouts directory.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/samanyougarg/hanuman. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

To submit a pull request -

  1. Fork/clone the repository.
  2. Develop.
  3. Create a new branch from the master branch.
  4. Open a pull request on Github describing what was fixed or added.

Thanks

Hanuman is based on amplify jekyll theme. Thank You.

License

The theme is available as open source under the terms of the MIT License.

fws-86's Projects

91porn icon 91porn

91Porn Android 客户端,突破游客每天观看10次视频的限制,还可以下载视频

android-zxing icon android-zxing

android google zxing 可配置扫描框、线样式 ,生成二维码(文字、联系人)

androidlibs icon androidlibs

正在成为史上最全分类 Android 开源大全~~~~(长期更新 Star 一下吧)

androidlocalizationer icon androidlocalizationer

This is a Android Studio/ IntelliJ IDEA plugin to localize your Android app, translate your string resources automactically.

androidutilcode icon androidutilcode

:fire: Android developers should collect the following utils(updating).

animate.css icon animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

appmanager icon appmanager

:fire: An elegant exit application and restart mechanism management.

arcmenu icon arcmenu

An android custom view which looks like the menu in Path 2.0 (for iOS).

awesome-design-cn icon awesome-design-cn

设计师资源大全,包含:ICON图标、Logo设计、PhotoShop插件、交互设计工具、流程图、线框图/原型图、设计博客等

awesome-wanandroid icon awesome-wanandroid

:zap: 致力于打造一款极致体验的 http://www.wanandroid.com/ 客户端,知识和美是可以并存的哦QAQn(*≧▽≦*)n

babybluetooth icon babybluetooth

:baby: The easiest way to use Bluetooth (BLE )in ios/os ,even bady can use . 一个非常容易使用的蓝牙库,适用于ios和os

bluetoothlelibrary icon bluetoothlelibrary

一个简单易用的低功耗蓝牙库。操作简单、支持连发无需延时、自带队列管理、支持多通知等、可根据UUID、Name、物理地址过滤扫描。

cardslider-android icon cardslider-android

:octocat: 🃏 Cardslider is a material design UI controller that allows you to swipe through cards with pictures and accompanying descriptions.

clearprocesses icon clearprocesses

利用无障碍服务(AccessibilityService)批量清理后台进程

dslanimator icon dslanimator

这是一个可以让你使用DSL去写动画的库

flutter_basewidget icon flutter_basewidget

一个规范flutter生命周期的Widget基类,并且封装了基本属性,加快开发速度~

ijkplayer icon ijkplayer

Android/iOS video player based on FFmpeg n3.3, with MediaCodec, VideoToolbox support.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.