Introduction to Octopress

Octopress is a technology which allows the user to easily generate static content in HTML format. First, I write a post, edit a template, and fix the code, but the changes are applied to the website only after I launch the generation command. One of the cons is that if the website is too large, the generation process will take a long time. My blog is rather small, so its generation only takes a couple of seconds.

What is so special about Octopress? You don’t have to update anything basically, but the engine elements (unlike WordPress). There aren’t many configuration files, and it’s easy to sort them out. There is no MySQL, PHP or Apache. Dynamic content is added using JavaScript plugins. In my case, it’s a Twitter feed in the sidebar and Disqus comment system. The theme is minimalistic, reading articles is a pleasure. Octopress knows how to adjust the scale automatically depending on the width of the browser. Try narrowing the window or accessing the website via iPhone. The sidebar will move down at once, and the font will change its sizes to more convenient ones. You don’t need to optimize the website for all mobile devices. You can now write your articles in any text editor, it’s especially convenient to use the markdown technology to do it.

To install Octopress, please follow the steps below:

Step 1: Installing Git, RVM, and Ruby

You’ll find a very nice description here.

Step 2: Creating a GitHub repository

Register at GitHub and create a repository called octopress (or you can choose any other name). What you now have is http://github.com/YourName/octopress

Step 3: Installing Octopress

Enter the following commands in the terminal:

mkdir octopress

cd octopress

git  init

git  remote add octopress git://github.com/imathis/octopress.git

git pull octopress master

git checkout -b source

git remote add origin git@github.com:YourName/octopress.git

git push origin source

rvm rvmrc trust

rvm reload

rake setup_github_pages

git@github.com:YourName/octopress.git

rake install

add the following code to the file  _config.yml root: /octopress

rake generate

rake deploy

Step 4: Setting up Octopress

Edit the file _config.yml to make URLs short and pretty:

permalink: /:title/
category_dir: categories
pagination_dir:  #empty

In order to add categories to the sidebar, create a file source/_includes/custom/asides/links.html in which there will be something like:

<section> 

<h1>Links</h1>

<ul>

<li><a href="http://google.com">Google</a></li>

<li><a href="http://pikabu.ru">Пікабу</a></li>

</ul>

</section>

 

And in the end of the _config.yml file add the link to the page:

default_asides: [asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html, custom/asides/links.html]

 

In order to change http://yoursite.com/blog/archives to http://yoursite.com/archives , you need to move source/blog/archives to source, and in the search to change each /blog/archives to /archives

Step 5: Designing Octopress

Here you’ll find a couple of lovely themes, but you can also change everything yourself.

In order to change the tabs of the navigation menu: source/_includes/custom/navigation.html

In order to change the background image: line 75 in sass/base/_theme.css. You’ll find popular images here

To change any colors: sass/custom/_colors.scss

Step 6: Writing articles

In order to create an article:  rake new_post[“title”]. It appears in source/_posts with the .markdown format, which can be edited in Mou, which is very convenient!

In order to save the changes:

rake generate

rake deploy

For more detailed information please read the documentation.

By Volodymyr Kosmirak, iOS developer at Letzgro
Tags: MySQL PHP

Insights from our Consulting Department

January 22, 2019
How To Convert Traffic into Sales with Lead Conversion Strategy
October 15, 2016
How to Create the Smartest Chatbot Ever With IBM Watson Services

Leave a Reply

Your email address will not be published.