23 Aug 2016, 22:43

Migrate Octopress to Hugo

My blog was based on Octopress blogging system, based on jekyll, but I was never a ruby person, it also seems like Octopress is not so active lately,

In the other hand, Hugo feels super slim and simple, thanks to Go and Hugo, it takes only few lines to start a blog,

You can download a binary package of Hugo, but I have Go installed so it’s simply 1 command:

go get -u -v github.com/spf13/hugo

Creating a new blog is simply one command:

hugo new site myblog

This command creates the myblog folder with some initial data that serves as a baseline for our blog.

Adding a new post is simple as:

hugo new post/welcome.md

This generates the content/post/welcome.md file, a post is just a simple file, no magic!

A theme defines how the blog look like visually, there are many themes, choose the one you like, in this post, I use the purehugo theme because it’s clean and simple.

cd themes
git clone https://github.com/dplesca/purehugo.git

Lets star a local server to see our shining new blog:

hugo server --theme=hugo_theme_robust --buildDrafts

Hit in browser: http://localhost:1313

You should see the welcome blog entry we just added.

Migrate from Octopress

Hugo has a built in support to migrate from jekyll

cd my_octopress_blog
ls
config.yaml ... source/ ...
hugo import jekyll source/ hugo-import/
Congratulations! 26 post(s) imported!
...

Make sure to have config.yaml and the source folder in current directory, running the import command should import all files

Simply move the posts folder into your new blog content folder by:

mv hugo-import/content/post/* <location_of_new_hugo_blog>/content/post`

Happy blogging!

08 Jul 2013, 00:00

Blogging with Octopress: Add About Page

Adding About Me page, probably one of the first thing to do, right?

Note: If you just want to say few words about yourself on the aside panel, skip to About Me on the aside panel

Adding About Page

Create the page:

rake new_page["about"]

rake creates a new page located in source/about/index.markdown

I edited mine to look like:

---
layout: page
title: "About Me"
comments: true
sharing: true
footer: true
---

Note that I removed the date line because it doesn’t make sense in this page.

Add About page in the top menu

You probably want to add the About page in the top menu, right?

vi source/_includes/custom/navigation.html

#add the line to the bottom of the page:
<li><a href="{{ root_url }}/about">About</a></li>

About on the aside panel

If u want to put some words about yourself on the side panel panel, do this:

vi source/_includes/custom/asides/about.html

<h1>your name<h1/>
<p>some words about you, not longer than a line.</p>

Then enable the about html in the aside bar by:

vi _config.yml

default_asides: [custom/asides/about.html, OTHER STUFF] # leave all other pages as is

Now the world knows about who you are :-)

08 Jul 2013, 00:00

Blogging with Octopress: Add Comments

If you want your blog to support comments, follow this:

Octopress has a native 3rd party plugin for Disqus that will host all your blog’s comments.

Visit http://www.disqus.com web site and sign in, Then https://disqus.com/admin/signup/.

Here’s example how I file the signup form my blog which is hosted in GitHub pages.

Site Url: asaf.github.io
Site Name: Asaf Shakarchi's Blog
Site Shortname: asafshakarchisblog

Remember the site short name, you need it soon!

Then configure Octopress to be aware of your new Disqus application:

cd octopress #or wherever your octopress folder is located
vi _config.yml

#then change discqus_short_name line:
disqus_short_name: asafshakarchisblog #replace with the short name you've put in the app signup form

Done!

08 Jul 2013, 00:00

Blogging with Octopress: Quick Installation

I really wanted to revive my blog (which was hosted in Blogger), but I wanted to have more control over it, It just feels very natural for guys like me who uses vi more than GUI =)

Since Octopress docs are too long and frustrating (oh common, i just wanted a blog), I decided to dedicate few posts for it, I hope I’ll have the time to record (blog, post, whatever) all the cool things i’m gonna add to my blog in the future.

15 minutes and you have a pro blog, so there we go:

Installing Ruby

####Ubuntu

sudo apt-get update
sudo apt-get install ruby 1.9.3

MacOS

brew update
brew install rbenv
brew install ruby-build
rbenv install 1.9.3-p0
rbenv rehash

(If you don’t have brew, visit: http://mxcl.github.io/homebrew)

Installing Octopress

Now Ocotopress !

cd ~ #or wherever u want the octopress folder to be located
git clone git://github.com/imathis/octopress.git octopress
cd octipress
gem install bundler
rbenv rehash #only if using rbenv
bundle install

Thats it!

Deploying your blog in GitHub pages.

There are other alternatives, but I personally love GitHub, to deploy your blog in GitHub pages:

  • Create a GitHub repo and name it _youruser.github.io, where _youruser is your github username, mine is asaf, so it’ll be: asaf.github.io

  • Lets tell Octopress about your github created repo (that’ll hold your blog):

    rake setup_github_pages
    

    When it asks for your git repo, paste: _git@github.com:your_user/youruser.github.io, for example mine is: git@github.com:asaf/asaf.github.io

  • Now lets deploy and see our new shiny blog!

rake generate
rake deploy

This generates the blog site from the (default) sources, commit it via git and deploy it in the created github repo.

Thats all!

now visit: http://your_user.github.io to see your blog!

Minimal Configuration

And if we’r already here, lets quickly configure the minimal details:

vi _config.yml
title: Blog title, I put my full name.
subtitle: What are you going to blog about?
author: Your full name

rake generate rake deploy

But it looks gray and dark and missing some cool stuff, isn’t it? follow the next blog about how to customize OctoPress =)