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:

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

Step 4: Setting up Octopress

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

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

 

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

 

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:

For more detailed information please read the documentation.

By Volodymyr Kosmirak, iOS developer at Letzgro

Related Posts

Leave a reply