How to fix horizontal scroll in Twitter Bootstrap

Standard

Twitter Bootstrap is a CSS library that lets you build website rapidly and let you focus on web development instead of writing lots of CSS and reinventing the wheel. If your content focuses more on code has large strings of code that need to have horizontal scroll instead of blotting in a specific area. You can fix it with these simple lines that can be added to the <code class="highlighter-rouge">LESS, <code class="highlighter-rouge">SASS and CSS library of Twitter Bootstrap.

<code class="language- css">pre {  
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

If that does not fix this issue include <code class="highlighter-rouge">code tag too.

<code class="language- css">pre, code {  
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

PHP 5.6 on Ubuntu

PHP 5.6 on Ubuntu Image 2
Standard

PHP 5.6 is the latest stable version of PHP available. The latest stable version of PHP available for Ubuntu is PHP 5.5.x, If you wan to PHP 5.6 or upgrade your existing PHP 5.x install to 5.6 follow this guide. PHP 5.6 can be installed using a PPA which makes it even more easier to install or upgrade to PHP 5.6.

Installing

  • We need to add the PHP 5.6 PPA to our local repository database.
<code class="language- bash">sudo add-apt-repository ppa:ondrej/php5-5.6  
  • Updating our local repository database.
<code class="language- bash">sudo apt-get update  
  • Installing PHP 5.6
<code class="language- bash">sudo apt-get install php5  

All the extension that were available for PHP 5.x is available for PHP 5.6 and can be installed in the same old way as all other PHP extensions are installed using <code class="highlighter-rouge">php5-extension name extension name

If you already have PHP 5.x and want to upgrade to PHP 5.6 you can run a <code class="highlighter-rouge">dist-upgrade.

<code class="language- bash">sudo apt-get dist-upgrade  

Ghost on Arch Linux

Standard

Ghost is an open source blogging platform written in Node.js, Ghost offers a simple and user friendly User Interface that lets you manage posts, pages and users It also uses Handlebars for Theme templating. Ghost is one of the most user friendly and easy to use blogging platform and has a dead simple install instruction. Ghost let you write your blog posts and pages in markdown with a markdown preview, that parses markdown in real time. Ghost also lets you add media and other post/page assets with a simple drag and drop. Ghost also has a very responsive design that lets you use it in comfort in every form factor and size.

Ghost is available as a AUR Package that can be installed with a few simple steps.

Installing

We need to install Yaourt.

To install Yaourt you need to the following in /etc/pacman.conf

[archlinuxfr]
SigLevel = Never  
Server = http://repo.archlinux.fr/$arch  

Now we need to update our local package database and install yaourt

sudo pacman -Sy yaourt  

Now we need to download and install ghost from yaourt, the Ghost AUR package will install all the required dependencies and run <code class="highlighter-rouge">npm install --production too

yaourt -S ghost  

Once you have Ghost installed we can start it using SystemD.

sudo systemctl start ghost.service  

We can also let Ghost start as a startup service.

sudo systemctl enable ghost.service  

You Ghost config file is config.js, You can make changes to it to suit your needs.

We can also install NGINX and reverse proxy Ghost at port 80

Installing NGINX

sudo pacman -S nginx  

You can replace the /etc/nginx.conf to this simple reverse proxy config optimized for Ghost.

http {  
        server {
        listen 80;
        location / {
        proxy_pass       http://127.0.0.1:2368;
        proxy_set_header Host      $host;
        proxy_set_header X-Real-IP $remote_addr;
        }
    }
}
events {  
        worker_connections  5000;
}

Now you can start NGINX

sudo systemctl start nginx.service  

To enable NGINX at startup.

sudo systemctl enable nginx.service  

We now have Ghost installed. Happy Blogging!

How to list pages with custom layouts in Jekyll

Standard

Jekyll is a blog aware static website generator that is written in Ruby and uses Liquid for templating and Markdown to write posts and pages, Jekyll also offers build in support for SASS, SCSS, LESS and CoffeeScript.

Jekyll follows a naming conversion to differ a post or page. Jekyll knows a specific markdown file is a post when the file is formatted in YYYY-MM-DD-post-name.md, if a markdown file is formatted as name-of-page.md Jekyll knows it’s a page. You can always use a layout: string in the front-matter to select choose a specific layout or template file to be used while parsing and building a Jekyll based Website.

{% for page in site.pages %} 
{% if page.layout == "custom-page" %} <a href="{{page.url}}">{{page.title}}</a> 
{% endif %} 
{% endfor %}

That is one way to list posts in Liquid. If you want to list a specific layout based page that follows the page naming convention but does not use the layout: as page, we can fix this issue by tweaking the code a bit by adding a if statement to it. We will be using the layout custom-page to separate the stock or default page layout. This small change in the code will list only those pages that use custom-page as layout.