• Jekyll Tutorial Learning Notes
  • In Categories Of
  • Jekyll
  • Tagged With
  • Jekyll
  • I decided to move my posts from Wordpress to Github. The host fee is too expensive to afford, and the control panel for WP is so bad. I want a more geek blog. Jekyll is my final choice. This tutorial is based on the Youtube video tutorial by Thomas Bradley. It is highly recommended to have a look at his tutorial, clear and easy to understand. I write posts only for memo and learning. This is part I for what I have learnt today(video 1 to 15).

    Installation

    Jekyll is a command line tool used in terminal. We consider you have installed command line tool in your mac, if not, you need to go apple’s developer site or use your Xcode to download and install before you start.

    Since Jekyll is based on Ruby, you need install gem. Open your terminal, check and update the latest version of gem:

    $ sudo gem update --system
    

    Then use this command line to install Jekyll:

    $ sudo gem install jekyll
    

    Set up your Github pages

    Here Github Pages server is great place to host your Jekyll. Easy to control, and free to go. Here you need have a Github account and a Github application on mac is necessary (otherwise you need to do following things by using the command line).

    • Create a new public repository with a name and description, check the README initialisation option
    • Clone this repository to your local directory
    • Create and publish a new branch
    • Set this new branch to default and delete the master branch
    • Go to your directory and create the index.html with simple content
     <!DOCTYPE html>
    <html lang="en-ca">
    <head>
    	<meta charset="utf-8">
    	<title>first Github site</title>
    </head>	
    <body>
        <h1>First Jekyll site</h1>
        <p>Hello every one, this is my first Jekyll site!</p>
    </body>
    </html>	
    
    • Give a commit to this change and then sync Your site
    • Go to your site and say hello world (e.g. username.github.com/your-respository-name)

    ##Set up a Jekyll project We start to create a configuration file: _config.yml. Add these content to this file.

        Markdown: redcarpet
        baseurl: /your-respository-name
        exclude: ['README.md']
    

    Notice the space between words. Commit and sync this change on your github application.

    ##Run Jekyll locally Open your terminal, use this command:

    $ jekyll serve --watch --baseurl ""
    

    You will see server running in terminal. Open your browser, and enter localhost:4000 to access your website locally. Keep your server running when you develop locally. If the change is not shown on browser, stop the server (Control + C) and restart it.

    ##_Site Folder This folder will generated automatically as a final version of no matter HTML or markdown files in your local site directory. But it is kind of temporary one. What we need to do is go to Github application, and in setting panel, add _site into ignore files(.gitignore), then commit it.

    ##Layout This is very as similar as Wordpress. It just like a frame that can contain different modules.

    To achieve this, create a directory in your site, which is called _layout. Create a new HTML file in this folder. We name it default.html.

    For example, the index.html mentioned previously now can be simplified to body content:

        <h1>First Jekyll site</h1>
        <p>Hello every one, this is my first Jekyll site!</p>
    

    Other codes are moved into the layout page default.html, For example, the index.html mentioned previously now can be simplified to body content:

    <!DOCTYPE html>
    <html lang="en-ca">
    <head>
    	<meta charset="utf-8">
    	<title>first github site</title>
    </head>	
    <body>
        <div id = "sidenav">
      <ul> 
        <li><a href="/" title="Home|首页">PINEAL.ME</a></li>
        <li><a href="/blog" title="Tech|技术">IN A GIANT GUTTER OF</a></li>    
        <li><a href="/article" title="Prose|随笔">OUTTER SPACE </a></li>
    	<li><a href="/gallery" title="Gallery|展览">GHETTOS </a></li>
        <li><a href="/about" title="About|关于我">ABOUT </a></li>         
      </ul>     
      
    <li><a href="" title="Using SSH to access Raspberry Pi">Using SSH to access Raspberry Pi </a></li>       
    
    
    
    
    <span class="categories">
      In Categories Of
      
      <li><a href="/catagory/#Raspberry Pi" title="Raspberry Pi">Raspberry Pi</a></li>
      
    </span>
    
    
    
    <span class="tags">
      Tagged With 
      
      <li><a href="/tags/#Raspberry Pi" title="Raspberry Pi">Raspberry Pi</a></li>
      
      <li><a href="/tags/#SSH" title="SSH">SSH</a></li>
      
    </span>
    <span class="time">
      <time datetime="2013-10-21">2013-10-21</time>
    </span>
    
    
    
    
    </div>
    
    <div id="main">
    <section class="post">
    
    
    <p>We will using SSH to control pI remotely without a monitor or keyboard connected to Pi. Enable SSH function from the pi’s config.Then read the inet IP address from ifconfig. Using the command to SSH your pi.</p>
    
    <div class="highlighter-rouge"><pre class="highlight"><code>$ ssh username@IP address
    </code></pre>
    </div>
    
    <p>“Host key verification failed” means that the host key of the remote host was changed.</p>
    
    <div class="highlighter-rouge"><pre class="highlight"><code>ssh-keygen -R hostname
    </code></pre>
    </div>
    
    <p>Xserver Windows remote connection:</p>
    
    <div class="highlighter-rouge"><pre class="highlight"><code>ssh -X &lt;ip address of Rpi&gt; -l &lt;username on Rpi&gt;
    </code></pre>
    </div>
    
    <p>If you want to open image on the terminal, please install the software “eog” on your raspberry pi:</p>
    
    <div class="highlighter-rouge"><pre class="highlight"><code>sudo apt-get install eog
    eog hello.jpg
    </code></pre>
    </div>
    
    <p>Using SCP to copy a folder from host to remote:</p>
    <div class="highlighter-rouge"><pre class="highlight"><code>scp -r username@remoteIP:remotedirection/ /localdirection/
    </code></pre>
    </div>
    
    </section>
    <section class="meta">
    
    
    <!--
    <span class="license">
      Published under <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">(CC) BY-NC-SA</a>
    </span>
    -->
    
    <div id="footer">Copyright©Hesen Zhang</div>
    
    
    <section class="comment">
    <div class="addthis_sharing_toolbox"></div>
    
    
    <!-- Disqus Comment BEGIN -->
     <div id="disqus_thread"></div>
        <script type="text/javascript">
            /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
            var disqus_shortname = 'pinealgithubcom'; // required: replace example with your forum shortname
    
            /* * * DON'T EDIT BELOW THIS LINE * * */
            (function() {
                var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
            })();
        </script>
        <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
        <!--a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a-->
        
    <!-- Disqus Comment END -->
    </section>
    
    
    </div>
    
    
    
    <script type="text/javascript">
    //resize the big pic
    $(window).load(function() {
      (
        function(maxht, maxwt, minht, minwt) {
          var imgs = document.getElementsByTagName('img');
          // Image resizing function
          var resize_image = function(img, newht, newwt) {
            img.height = newht;
            img.width  = newwt;
            $(img).wrap('<table><tr><td class="tborder"><div class="resized_image"><a href="' + img.src + '" target="_blank"></a></div></td></tr></table>');
            $(img).parent().before('<p>NOTE: This image was resized. To view it full-size, click on the image.</p>');
            //$(img).parent().after('<p style="text-align:right;background:none;margin:0;padding-right:3px">Image resizing script by <a href="http://aetus.net/217/programming/automatically-resize-large-images-with-javascript/">Aetus Designs</a>.</p>');
          };
          
          for (var i = 0; i < imgs.length; i++) {
            // Set a variable for the current image to make the code make more sense.
            var img = imgs[i];
            if (img.height > maxht || img.width > maxwt) {
              // Use Ratios to constraint proportions.
              var old_ratio = img.height / img.width;
              var min_ratio = minht / minwt;
              // If it can scale perfectly.
              if (old_ratio === min_ratio) {
                resize_image(img, minht, minwt);
              } 
              // We need to do some magic now.
              else {
                var newdim = [img.height, img.width];
                // Sort out the height first.
                newdim[0] = minht;
                // The logic behind this is that if ratio = ht / wt, then wt = ht / ratio.
                newdim[1] = newdim[0] / old_ratio;
                // Do we still have to sort out the width?
                if (newdim[1] > maxwt) {
                  // Just do what we did with the height
                  newdim[1] = minwt;
                  newdim[0] = newdim[1] * old_ratio;
                }
                // So yeah, resize the image
                resize_image(img, newdim[0], newdim[1]);
              }
            }
          }
        }
      )(780, 780, 780, 780);
    });
    </script>
    
    </body>
    </html>	
    

    The main body is replaced by the line labeled by **<div id = "sidenav">

  • Using SSH to access Raspberry Pi
  • In Categories Of

  • Raspberry Pi
  • </span>

    Tagged With

  • Raspberry Pi
  • SSH
  • </span>

    </span>

    </div>

    We will using SSH to control pI remotely without a monitor or keyboard connected to Pi. Enable SSH function from the pi’s config.Then read the inet IP address from ifconfig. Using the command to SSH your pi.

    $ ssh username@IP address
    

    “Host key verification failed” means that the host key of the remote host was changed.

    ssh-keygen -R hostname
    

    Xserver Windows remote connection:

    ssh -X <ip address of Rpi> -l <username on Rpi>
    

    If you want to open image on the terminal, please install the software “eog” on your raspberry pi:

    sudo apt-get install eog
    eog hello.jpg
    

    Using SCP to copy a folder from host to remote:

    scp -r username@remoteIP:remotedirection/ /localdirection/
    
    </div> **. But the computer can not logically combine the layout and content together, Jekyll provides a label put the content to the layout. For instance, the **index.html** needs to declare which layout will be used like: ``` --- layout:default ---

    First Jekyll site

    Hello every one, this is my first Jekyll site!

    ``` ##Create a navigation module Most blog are unlikely single page. We need hyperlinks to connected all pages. A navigation bar is helpful and important. We create a new page called **news.html**. Then in the default layout, we put a navigation in header. ```

    First Jekyll site

    ``` ##Site baseurl The hyperlink shown above may cause problem when it publishes globally. To fixed it we need to add baseurl as **config.yml** set: ```
  • Home
  • News
  • ``` Commit this change on Github, refresh your site and check the source code. ##Include In real developing process, some modules will be shared in many pages, commonly like header and footer. **Include** is just like C/C++ programming, which to add some modules in. In Jekyll, we have a folder called **_include** to contain these modules. For example, we can extract the navigation as a single page **nav.html** in **_include** folder: ``` ``` Then in the **default** layout, we replace this part by the include label like: ```

    First Jekyll site

    ``` You can also put the navigation in the footer. ##Add CSS CSS is used for decorating the HTML pages. In Jekyll, we need create a folder **CSS**. We add some basic CSS style for example: ``` html { margin: 0; padding: 0; color: blue; font: normal 100%/1.4 Georgia, serif; } ``` Apply CSS style in your layout: add line 5 to your head part of HTML file. Remember to add the baseurl in sure it works well no matter locally or globally. ``` ... first github site ... ``` ##Highlight navigation Here we are going to study some application of CSS. A new CSS class is created: ``` .current { background-color: #000531; color: #fff; } ``` Then apply it to the navigation like: ```
  • <a href="/index.html" class=“current”>Home</a>
  • ``` However we just need to apply this effect in the homepage, now the module is shared by every page. A if statement is the solution: ```
  • <a href="/index.html" class=“”>Home</a>
  • ``` ##Include parameters If we want to apply a secondary CSS class to different modules, an include parameter is useful. For example, the navigation module used in header and footer will apply the different CSS style nav-top and nav-buttom. Then in the nav.html, we need to add: ``` ``` In the CSS sheet, we can style both of these like: ``` .nav { margin : 0; padding : 0; list-style-type :none; } .nav > li { display: inline-block; } .nav-top { color: red; } .nav-bottom { color: green; } ``` ##Lopping over posts A folder **_posts** could contain all posts. The name convention for each post is very strict, e.g. 2013-06-23-A-beautiful-love-with-claire.md The posts are common markdown format. ``` --- layout: news-article title: Curiosity rover makes big water discovery in Mars dirt meta: Future Mars explorers may be able to get all the water they need out of the red dirt beneath their boots. source: http://www.space.com category: news --- Future Mars explorers may be able to get all the water they need out of the red dirt beneath their boots, a new study suggests. ``` You can also add a limit number of posts you want to show on the page. All title will be looped by using **news.title** The expert is extracted by **news.meta** label. The posts can be displayed by categories by modifying the for loop like: ``` ``` The categories are declared very top in every markdown post, and generated in **_site** folder. ##Summary Here we have done almost half of this tutorial, and this is the first time I use markdown to write post. I feel so good. By markdown and Latex, I can say goodbye to word forever! The Jekyll is as cool as I thought. Since I have some basic knowledge of Github/HTML/CSS/Wordpress, it seems not difficult for me to learn. I will continue Part II tomorrow. ##To be Continued