Jekyll

Jekyll

Add PayPal Donations to Jekyll Site

donations: paypal: text: Donate # Button text id: 7334HG9754 # PayPal button ID {% if site.donations.paypal %} <form class="paypalform" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="{{ site.donations.paypal.id | default: 'UNCONFIGURED' }}"> <button class="donations uk-button uk-button-primary" name="submit"> <span>{{ site.donations.paypal.text | default: 'Donations' }}</span> </button> <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> {% endif %}

Jekyll

Jekyll NPM Build Script

Jekyll build process example using npm scripts to build assets/js/main.min.js. The scripts copies vendor sass partials to _sass/vendor/ directory and vendor javascripts to assets/js/vendor/ directory, concatenates and minifies js files and watches for changes. Install Node.js Install all of the dependencies by running npm install in theme root directory, this will install all SCSS and JS dependencies, compress and concatenate JS scripts into main.min.js. Availabele commands: npm install npm run watch { "name": "jekyll-theme-plus", "version": "1.

Jekyll

System Font

Boost website performance by using the system font of a user operating system because the browser doesn’t have to download any font files. Set of @font-face rules created by Jonathan Neal let us use the native system font of the OS running the browser. Install This package can be installed with npm: npm install --save system-font-css. Jekyll In Jekyll, importing the SASS partial directly from node_modules directory won’t work so we have to copy the package to _sass directory manually or using npm copy ncp package:

Jekyll

Concatenate JS Files

Minimise HTTP requests by including all JS files inside a single assets/js/main.js file. --- --- {% include_relative uikit.min.js %} {% include_relative uikit-icons.min.js %} Define and point to our main.js client-side script file in _includes/head.html <script src="{{ "/assets/js/main.js" | relative_url }}"></script>

Jekyll

Twitter Share Button

Add Twitter share button to your Jekyll template. Set Twitter username in Jekyll config file _config.yml: author.twitter: ivanchromjak Create _includes/share.html file: <div class="share"> Share this on &rarr; <a class="twitter" href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ page.url }}&via={{ site.author.twitter }}&related={{ site.author.twitter }}" rel="nofollow" target="_blank" title="Share on Twitter"><span class="icon icon--twitter">{% include icon-twitter.svg %}</span> Twitter</a> </div> Include the share.html in post layout file _layouts/post.html: {% include share.html %}

Jekyll

Navigation With Current Page Highlighting

Add navigation links to a data file in _data/navigation.yml: # Menu navigation links - title: Home url: / - title: Blog url: /blog/ Create _includes/navigation.html file: {% for link in site.data.navigation %} {% if link.url contains 'http' %} {% assign domain = '' %} {% else %} {% assign domain = relative_url %} {% endif %} {% if link.url == page.url %} {% assign current = ' class="uk-active"' %} {% else %} {% assign current = null %} {% endif %} {% if link.

Jekyll

How To Setup Naked Domain SSL With Github Pages

Add a free Cloudflare SSL certificate to your GitHub pages custom domain. Create a free Cloudflare account and login. Add new site and scan the server, Cloudflare will return two name server addresses. Go to your domain registrar admin panel and add Cloudflare nameservers. Next, on Cloudflare under DNS tab add your CNAME an A records in DNS menu in CloudFlare then click on status. Next, under Crypto tab add set Flexible SSL mode.

get started today

Get a blazing-fast Hugo site

I will increase your site’s speed and maximize search engine visibility.
Book a call now