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.
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:
Conversion table from pixels to rem units for 16px root <html> font size: html { font-size: 16px; } {: .uk-table .uk-table-divider} px rem 10px 0.625rem 11px 0.6875rem 12px 0.75rem 13px 0.8125rem 14px 0.875rem 15px 0.9375rem 16px 1rem 17px 1.0625rem 18px 1.125rem 19px 1.1875rem 20px 1.25rem 21px 1.3125rem 22px 1.375rem 23px 1.4375rem 24px 1.5rem 25px 1.5625rem 26px 1.625rem 27px 1.6875rem 28px 1.75rem 29px 1.8125rem 30px 1.875rem 31px 1.9375rem 32px 2rem 33px 2.
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>
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 → <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 %}
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.
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.
This cheat sheet saves me from learning by heart commands for all the different tools and task runners used in web development. Npm Install Node.js curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - sudo apt-get install -y nodejs Node comes with npm installed so you should have a version of npm. However, npm gets updated more frequently than Node does, so you’ll want to make sure it’s the latest version.
