rcmdnk's blog
  1. Top
  2. › Blog
  3. › Octopress

Japanese ver.: GitHub pages + Octopressの導入
20141112_blog_200_200

This is my new blog with Octopress and a theme of Octogray.

The site is published in GitHub Pages.

In this first post, I would introduce how to make the site with Octopress + Octogray + GitHub Pages.

Sponsored Links

Install Ruby

Mac user

For the recent OS X users, Ruby 2.0 or later is already installed and normally you should not install ruby.

In case of necessity, you can install by RVM, like:

$ \curl -sSL https://get.rvm.io | bash -s stable --ruby=2.0.0

It setup your environmental variable, too.

But for the next session, you need to add the following lines in your .bashrc (or your login script) to setup the ruby environment:

1
2
3

if [ -s $HOME/.rvm/scripts/rvm ];then
  source $HOME/.rvm/scripts/rvm
fi

Windows user

For Windows user, the easiest way is to use Cygwin. At setup, you need at least:

  • Devel: git
  • Ruby: All

There are also several alternatives to use Ruby on Windows:

  • RubyInstaller: Command prompt with Ruby.
  • scottmuc/yari: Yet Another Ruby Installe, inspired by RVM1.
  • MinGW: A contraction of “Minimalist GNU for Windows.
  • Gow: Gnu On Windows: the lightweight alternative to Cygwin.

Prepare Repository

First, you need a repository in GitHub for GitHub Pages.

You can use either User site or Project site.

User site is based on master branch of user.github.io repository in your GitHub repositories (user must be your user account).

On the other hand, Project site is based on gh-pages branch of any of your repositories in GitHub.

I have another Japanese blog at User site, therefore this is Project site in en repository.

You can make repository from GitHub website, or from command line:

$ repo=<"user.github.io" or "what you want">
$ user=<username>
$ read -s # Enter your password
$ twofac=XXXXXX # if necessary, otherwise remove following '-H "...twofac"' section.
$ curl -u ${user}:${pass} -H "X-GitHub-OTP: $twofac" https://api.github.com/user/repos -d "{\"name\":\"$repo\"}"

Install Octopress and apply the theme

In the below, I make octopress_en directory as a root directory of Octopress, and use en repository as a project repository for GitHub Pages.

First, clone octopress to where what you want to install.

$ cd /path/to/install/dir
$ git clone git://github.com/imathis/octopress.git octopress_en
$ cd octopress_en

For User site, Octopress makes source branch automatically, while it doesn’t for Project site.

I would like to keep master branch to following up Octopress updates, then made source branch as a working branch. It is not necessary for User site case.

$ git checkout -b source

Next, a theme: Octogray, is installed.

And setup with it.

$ git submodule add [email protected]:rcmdnk/octogray.git .themes/octogray
$ .themes/octogray/setup.sh -y
$ rake setup_github_pages["[email protected]:rcmdnk/en"]
Do you want to use 'md' extension instead of 'markdown'? [y/n]: y
Do you want to push_ex (renew remote repository evry time)? [y/n]: y
Enter where you want to put _deploy (current: /path/to/install/dir/): ~/tmp/octopress/en
rm -rf ~/tmp/octopress/en/public/en
## Site's root directory is now '/en' ##

Octogray’s setup.sh executes such bundle install, rake install['octogray'], which are nominal setup commands for Octopress, so that everything is ready after setup.

After setup, the repository is set.

In addition, Octogray can set the suffix of the post made by new_post command as md instead of markdown.

It also has a function of push_ex, in which deploy_dir is always temporary, and it pushes clean history to the repository, i.e., makes empty repository and commits only the last update, and forces pushing. This is useful or even necessary when you did any critical mistake (gave password or critical word in the post, and pushed), or did ashamed mistake which you want to hide permanentlysweat_smile

Setup _config.yml

Although some variables are automatically updated by setup_github_pages, you may want to set something more in _config.yml, so do as you like.

Here are some notes for Project site case, w/o custom domain 2.

If you don’t set custom domain, the site root URL becomes like: https://rcmdnk.github.io/en.

Then, if you use absolute path w/o a domain, it becomes https://rcmdnk.github.io/ instead of https://rcmdnk.github.io/en.

But Octopress(Jekyll) does more complex things: it complements root in _config.yml before such absolute pathes in some places.

This expansion is done by plugins/octopress_filters.rb: expand_urls, in source/_layouts/default.html.

As you can see in default.html, it is not applied to such haad.html, header.html or footer.html.

When you edit paths, be careful about above, and set correct path.

For example, in Octogray’s theme, if you want to use images in source/images/ of en repository:

  • favicon: in head.html: need to be /en/images/…
  • titlelogo: in custom/header.html: need to be /en/images/…
  • aboutme_logo: in custom/asides/about.html: need to be /images/…

Another problem is custom 404 page. You can make your own 404 page by making 404.md (or 404.html) in /source/ 3

But it redirects to the top directory, therefore 404 page in Project site isn’t effectual.

GitHub pages doesn’t support such .htaccess configuration 4, therefore there is no way to assign special 404 page for Project site w/o custom domain.

Even if you go the wrong URL under https://rcmdnk.github.io/en/, it redirects to 404 page under https://rcmdnk.github.io/.

So, you need to prepare proper 404 page in User site.

Make post and generate the site, deploy

Now it becomes ready, then make a test page:

$ rake new_post['test']

then edit source/_posts/20XX-XX-XX-test.md, or

$ post=$(rake new_post["test"]|grep "Creating new post"|cut -d: -f2)
$ sedi 's/published: *false/published: true/' $post
$ sedi 's/categories:/categories: cat/' $post
$ sedi 's/tags:/tags: tag/' $post
$ sedi "s/<\!-- *more *-->/This is test post."\\$'\n'"<\!-- more -->/" $post
$ sedi "s/{%include after_excerpt.html%}/{%include after_excerpt.html%}"\\$'\n'"# Test Sectiontest"\\$'\n'"test test./" $post

If it is ready, generate the site:

$ rake gen

gen is a shortened command of generate, introduced by Octogray. (Try rake -T to see all commands.)

Now you have a public directory in ~/tmp/octopress/en. The directories in it is like: ~/tmp/octopress/en/public/en/.

To check it, execute rake preview and open http://localhost:4000/ from the browser.

On Mac, you can use Pow. To see above page from pow, link like:

$ cd ~/.pow && ln -s ~/tmp/octopress/en ./octopress_en

and open http://octopress_en.dev/en/.

If it is ok and you want to publish, deploy the site:

$ rake deploy

Now you should see the page like: https://rcmdnk.com/en/ (It could take ~10min after deploying).

Manage source in Bitbucket

The site is published then they should be in the public repository, but you may want to hide sources before generating site, which could include drafts.

While GitHub provide only public repository for the free usage, Bitbucket provides it in free.

So, I put the sources to Bitbucket.

To make it, make Bitbucket account and make a repository in which sources will be stored (here, account is rcmdnk, and repository is octopress_en). Then, set remote site:

$ git remote add bitbucket [email protected]:rcmdnk/octopress_en
$ git push -u bitbucket source

Now source branch is connected to bitbucket/source.

You can store your sources whenever you want like:

$ git add -A
$ git commit -m "comment"
$ git push

Ref in Japanese: GitHub pages + Octopressの導入

Sponsored Links

  1. Setting up Octopress on Windows Again - ZeroSharp ↩

  2. Setting up a custom domain with GitHub Pages - User Documentation ↩

  3. Custom 404 Pages - User Documentation. ↩

  4. Redirects on GitHub Pages ↩

Sponsored Links

Brew-file: Manager for packages of Homebrew »

}