How to use Jekyll like a pro : building contact forms -- Words (1603)

Jekyll
How to use Jekyll like a pro : building contact forms

Jekyll is a static site generator that takes a bunch of html and markdown files and generates a static site ready for hosting for free with GitHub pages,GitLab or using your own server(Cheap cost).Jekyll is by far the most popular static site generator out there.

Jekyll is blog aware which means that things such as posts , categories , permalinks are first class citizens so you don’t need to worry if you are intending to build your blog with Jekyll,it should be easy and straightforward.

Jekyll is all about static files which means there is no database and no need for security patches ,your website is more secure and very fast(no time spent accessing database).

Unlike other blogging platforms Jekyll gives you a total control over your SEO.   If you are building a static website or a blog with Jekyll and you care about SEO ( You should ! ) in this post i’ll try to show you how to deal with some important SEO tricks when using Jekyll.

URL redirection

URL redirection means redirecting an old url to a new url so you can tell browsers and search engines that some resource has moved to a new location,this is just one of the reasons ,you can read this wikipedia article for other reasons why need URL redirection.

You can do url redirection using 301 redirect which means moved permanently to search engines but that’s only possible if you are in control of the web server ,in case of a Jekyll website hosted with GitHub or GitLab you need to implement client side redirection 

To implement client side redirection you can use the Meta refresh tag which redirects the visitor to a new location after some controlled amount of time has passed.

 

You can put the amount of time and the url to the new location in the content attribute separated by a semi-colon.

So how to do URL redirection the Jekyll way,you have two options either use a plugin or a layout.

Jekyll Redirect From Plugin

Allows you to do redirects and is white listed by GitHub so you can use it ith your GitHub pages ,This is a GEM package so all you have to do is installing it from your terminal and start using it by adding either redirectfrom or redirectto in YAML FrontMatter of a post or page that you want to redirect from or to.For more information on how to use this plugin head over to its GitHub repo(https://github.com/jekyll/jekyll-redirect-from).

If you are not fan of plugins you can use a layout that redirects you using the Mete refresh tag

  <!DOCTYPE html>
  <html>
  <head>
  <link rel="canonical" href=""/>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="refresh" content="0;url=" />
  </head>
  <body>
      <h1>Redirecting...</h1>
        <a href="">Click here if you are not redirected.<a>
        <script>location=''</script>
  </body>
  </html>

Then you can add redirection from any post or page by extending the layout and specify the redirect_to parameter

  ---
  layout: redirected
  sitemap: false
  permalink: /oldlocation/
  redirect_to:  /newlocation/
  ---

You should put sitemap: false in the front matter so your redirected page won’t get included in your sitemap.

Link building ,use rel= nofollow with external links

If you include external links in your website then a good seo measure you should be aware of is to specify rel=”nofollow” which tells search engines not to follow these links which preserves your page rank from being transmitted to these urls websites it’s also used to preserve you website authority if the external links you are pointing to are more than the backlinks you have(urls pointing to you)

So how to add rel=”nofollow” automatically to your externa links 

You should install first Nokogiri a Ruby XML and HTML library gem install nokogiri

require 'nokogiri'

module Jekyll
  module ExtLinks
    # Access plugin config in _config.yml
    def config
      @context.registers[:site].config['extlinks']
    end

    # Checks if str contains any fragment of the fragments array
    def contains_any(str, fragments)
      return false unless Regexp.union(fragments) =~ str
      true
    end

    def extlinks(content)
      # Process configured link attributes and whitelisted hosts
      if config
        if config['attributes']
          attributes = Array(config['attributes'])
        end
        if config['rel_exclude']
          rel_exclude = Array(config['rel_exclude'])
        end
      end
      # Stop if no attributes were specified
      return content unless attributes

      doc = Nokogiri::HTML.parse(content)
      # Stop if we could't parse with HTML
      return content unless doc

      doc.css('a').each do |a|
        # If this is a local link don't change it
        next unless a.get_attribute('href') =~ /\Ahttp/i

        attributes.each do |attr, value|
          if attr.downcase == 'rel'
            # If there's a rel already don't change it
            next unless !a.get_attribute('rel') || a.get_attribute('rel').empty?
            # Skip whitelisted hosts for the 'rel' attribute
            next if rel_exclude && contains_any(a.get_attribute('href'), rel_exclude)
          end
          a.set_attribute(attr, value)
        end
      end

      doc.to_s
    end

  end
end

Liquid::Template.register_filter(Jekyll::ExtLinks)

Developed by Dmitry Ogarkov - #http://ogarkov.com/jekyll/plugins/extlinks/

To configure the plugin add this to your _config.yml

  # extlinks:
  #   attributes: {rel: nofollow, target: _blank}
  #   rel_exclude: ['host1.com', 'host2.net']
  Now you can use it in the layout 
  <div id="main" role="main" style="font-size: 19px; line-height: 30px;">
<article class="wrap" itemscope itemtype="http://schema.org/Article">

    <div class="page-feature">
        <div class="page-image">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- TechieDiariesBottomRight -->
                <ins class="adsbygoogle"
                    style="display:block"
                    data-ad-client="ca-pub-9293763250492023"
                    data-ad-slot="2757012795"
                    data-ad-format="auto"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>

        </div><!-- /.page-image -->
    </div><!-- /.page-feature -->


    <div class="page-title" style="color: ">

        <h1>Error:Buildtools 24.0.2 requires Java 1.8 or above. Current JDK version is 1.7 Under Ubuntu <span style="display: none;">-- Words (254)</span>

        </h1>

        <span class="tag"> Java</span> 

    </div>

    <div class="inner-wrap">

        <div id="content" class="page-content" itemprop="articleBody">

            <p>Rencently i&#39;ve started working with Android Studio instead of Eclipse for developing Android applications.As usual,when starting with a new development tool ,the installation process takes time and causes a lot of frustration to most developers .Anyway to work with the latest Android Studio you need to have Java 1.8 installed in your computer as recommended by Google on its Android studio website,if you just go with any version of Java,you have already, and ignore that recommendation, all is going to be fine until you create your first project you&#39;ll be welcomed with this error:</p>
<b>Error:Buildtools 24.0.2 requires Java 1.8 or above. Current JDK version is 1.7</b>

So if you are encoutering the same problem and you are using Ubuntu feel free to follow my post on how to solve the probem.

First of all i've installed the latest version of Java(1.8) using this PPA ppa:webupd8team/java.If you have a problem installing Java you can follow this detailed post on How to install Java 1.8 under Ubuntu 15

After installing Java 8 I started my Android Studio again and when i've executed my newely created project i encoutered the same problem again .So what the hell is going on ? don't worry I have the solution here .

Change your project settings to use Oracle Java 1.8 instead of Java 1.7

This is very simple just hit F4 or Right Click on your project and choose module settings from the menu

Now all you have to do is changing

https://www.youtube.com/watch?v=MR49-iseQP0

            <hr />

            <div class="col-xs-6">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- TechieDiariesBottomLeft -->
                <ins class="adsbygoogle"
                    style="display:block"
                    data-ad-client="ca-pub-9293763250492023"
                    data-ad-slot="7187212391"
                    data-ad-format="auto"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>

            </hr/>
            <div class="col-xs-12">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <ins class="adsbygoogle"
                    style="display:block"
                    data-ad-format="autorelaxed"
                    data-ad-client="ca-pub-9293763250492023"
                    data-ad-slot="9249041598"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>                   
            </div>
                <div class="rect">




























































































































































































































































































































































































































































































































































































































































































































                        <a href="/java-vs-kotlin-why-use-kotlin/">
                            <div class="rel">
                                <h5>Android - Java vs. Kotlin : Why you should use Kotlin ? </h5>
                                <img width="100%" src="/images/content/java-vs-kotlin-why-use-kotlin.png">
                            </div>
                        </a>







































































































































































































































































































































































































































































                        <a href="/java-tutorial/">
                            <div class="rel">
                                <h5>Java tutorial</h5>
                                <img width="100%" src="/images/content/java-tutorial.png">
                            </div>
                        </a>














                        <a href="/java-tutorial/install-java8-on-ubuntu16/">
                            <div class="rel">
                                <h5>Java tutorial : Install Java 8/9 on Ubuntu 16</h5>
                                <img width="100%" src="/images/content/java-tutorial.png">
                            </div>
                        </a>














                        <a href="/java-tutorial/install-development-tools/">
                            <div class="rel">
                                <h5>Java tutorial : Install development tools</h5>
                                <img width="100%" src="/images/content/java-tutorial.png">
                            </div>
                        </a>







































































































































































                        <a href="/mobiledev/build-tools24-0-2aapt-syntax-error-unterminated-quoted-string/">
                            <div class="rel">
                                <h5>/build-tools/24.0.2/aapt : Syntax error : Unterminated quoted string” </h5>
                                <img width="100%" src="/images/content/aapt-unterminated-quoted-string.png">
                            </div>
                        </a>


























































































































































































































































































































































































































































































































































































































































































































                        <a href="/howtoinstall/how-to-install-java-8-jdk-8u101-on-ubuntu-via-ppa/">
                            <div class="rel">
                                <h5>How to Install JAVA 8 (JDK 8u101) on Ubuntu via PPA</h5>
                                <img width="100%" src="/images/content/how-to-install-java-8-jdk-8u101-on-ubuntu-via-ppa/titleimage.png">
                            </div>
                        </a>






















































































                        <a href="/already-created-an-sdk-loader-with-different-sdk-path/">
                            <div class="rel">
                                <h5>Solving Already created an SDK Loader with different SDK Path Problem with Android Studio</h5>
                                <img width="100%" src="/images/content/already-created-an-sdk-loader-with-different-sdk-path/titleimage.png">
                            </div>
                        </a>




                </div>

            <hr/>
            <footer class="page-footer">
                <div class="author-image">

                    <p>mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes  about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.
                    </p>
                    <img style="width: 100px;" src="https://www.techiediaries.com/images/me1.jpg" alt="">

                </div><!-- ./author-image -->
                <div class="author-content">


                </div><!-- ./author-content -->
                <div class="inline-btn">
<a class="btn-social twitter" href="http://twitter.com/intent/tweet?text=Error:Buildtools%2024.0.2%20requires%20Java%201.8%20or%20above.%20Current%20JDK%20version%20is%201.7%20Under%20Ubuntu&amp;url=https://www.techiediaries.com/error-buildtools-24-0-2-requires-java-18-or-above-current-jdk-version-is-17/&amp;via=" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> Share on Twitter</a>
<a class="btn-social facebook" href="http://www.facebook.com/sharer/sharer.php?u=https://www.techiediaries.com/error-buildtools-24-0-2-requires-java-18-or-above-current-jdk-version-is-17/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i> Share on Facebook</a>
<a class="btn-social google-plus"  href="http://plus.google.com/share?url=https://www.techiediaries.com/error-buildtools-24-0-2-requires-java-18-or-above-current-jdk-version-is-17/" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i> Share on Google+</a>

<!-- /.share-this -->

            </footer><!-- /.footer -->
            <aside>

            <hr />
            <div id="disqus_thread"></div>

            <!--<div class="fb-comments" data-href="" data-numposts="20"></div>-->

            </aside>
        </div><!-- /.content -->
    </div><!-- /.inner-wrap -->
    <div class="ads"><style>

.responsive-ads { width: 300px; height: 200px; } @media(min-width: 520px) { .responsive-ads { width: 468px; height: 60px; } } @media(min-width: 768px) { .responsive-ads { width: 160px; height: 600px; } }

</article><!-- ./wrap -->