Migrate from WordPress to Hugo with ease using this ultimate guide, covering content conversion, theme customization, SEO, deployment, and post-migration tips.
Explore Hugo vs. Jekyll in this comprehensive comparison for web developers, covering installation, performance, customization, extensibility, and use cases.
The Importance of Choosing the Right Static Site Generator for Startups As a startup, building a solid online presence is crucial for success. Your website serves as the foundation of your brand, showcasing your products or services, sharing valuable information, and engaging with customers. In today’s fast-paced digital landscape, ensuring your website is both visually appealing and performs well is essential. One way to achieve this is by using a static site generator (SSG) to build your website.
Discover why Hugo is the top choice for your website, covering speed, performance, ease of use, customization, multilingual support, and a thriving community.
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 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.
