tasuwo blog

GitHub + Octopress でブログ作成

| Comments

octopress + GitHubでのブログの立ち上げ方法をまとめました．

1. はじめに

1.1 今日の目的

  • octopress + github の基礎知識
  • 記事をdeployした際に自動的にツイート

1.2 あとまわし

  • emacsについて その2

2. GitHub + Octopressでブログを立ち上げる

調べれば簡単にできるけど，自分用にまとめる．
ページ見つつ思い出しつつ書くので，記述が足りない部分があるかもしれない．

自分の環境

  • PC：MacBook Air, Core i5 1.8GHz, Mem 4GB
  • OS：OS X Yosemite 10.10.1

必要なもの

  • Ruby
  • Octopress
  • Github

2.1 Octopressの導入と準備(2015/2/12追記：Rubyについて)

記事の投稿ができるまで．
以下，簡略手順2．

  1. Rubyとbundleのインストール(Mac + Ruby + Octopress + Github でブログの作成)
  2. GitHubに登録する(メールアドレスの認証も済ませておく3)．
  3. GitHubリポジトリを作成する(リポジトリ名は「username.github.io」)．
  4. 公式サイトを参考にセットアップを行う．
    1. octopressをGitHubからクローン
      git clone git://github.com/imathis/octopress.git octopress
    2. cd octopress
    3. gem install bundler
    4. bundle install
    5. デフォルトのテーマインストール
      rake install
  5. 動作確認．http://localhost:4000/にアクセスして，ブログのプレビューが表示されればOK．
    rake preview
  6. rake setup_github_pages(公式サイト)
  7. ブログのタイトルなどの初期設定(_config.yml)

2.1.1 手順4の補足

GitHubにデプロイするファイルを生成する．

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$ rake setup_github_pages

Enter the read/write url for your repository
(For example, 'git@github.com:your_username/your_username.github.io.git)
           or 'https://github.com/your_username/your_username.github.io')
Repository url: git@github.com:srym/srym.github.io.git
Added remote git@github.com:srym/srym.github.io.git as origin
Set origin as default remote
Master branch renamed to 'source' for committing your blog source files
rm -rf _deploy
mkdir _deploy
cd _deploy
Initialized empty Git repository in /Users/shiroyama/playGround/octopress/_deploy/.git/
[master (root-commit) dacfaa2] Octopress init
 1 file changed, 1 insertion(+)
 create mode 100644 index.html
cd -

GitHub Pagesのリポジトリが自動的にoriginに指定される．

1
2
3
4
5

$ git remote -v
octopress       git://github.com/imathis/octopress.git (fetch)
octopress       git://github.com/imathis/octopress.git (push)
origin          git@github.com:srym/srym.github.io.git (fetch)
origin          git@github.com:srym/srym.github.io.git (push)

2.1.2 手順5の補足

公式サイトを参考に．
config.ymlの記述は以下のようになっている．
好みに編集する．

1
2
3
4
5
6
7
8

# _config.yml

url: http://blog.shiroyama.us
title: 白山軟件有限公司
subtitle: 東洋太平洋ブログ三日坊主チャンピオンのブログ
author: Fumihiko Shiroyama
simple_search: http://google.com/search
description:

2.2 記事の作成/投稿

公式サイトを参考に手順をまとめる．

  1. 記事のテンプレートを作成(titleは任意のタイトルで)
    rake new_post\[title\]
  2. 生成されたsource/_posts/20XX-XX-XX-title.markdownを編集して保存．
  3. 静的ページの生成
    rake generate
  4. 記事の確認．localhost:4000にアクセスしてみる．
    rake preview
  5. 投稿する．デプロイ一発．楽．
    rake deploy
  6. ソースもpush
    git add .
    git commit -m 'comment'
    git push origin source

_config.ymlに記述されていたurlにアクセスすれば確認できる．
投稿の反映に10分ほどかかる場合があるので，あせらないで待つ．

2.3 その他

2.3.1 ブログテーマ

ここから選ぶと良い．

2.3.2 「つづきをよむ」ボタンを追加

1

<!-- more -->

2.3.3 タグ

1
2
3
4
5
6
7
8
9
10
11

# One category
categories: Sass

# Multiple categories example 1
categories: [CSS3, Sass, Media Queries]

# Multiple categories example 2
categories:
- CSS3
- Sass
- Media Queries

2.3.4 コメント欄の追加(2015/2/12追記)

Disqusに登録する必要がある．
登録時，サイトの登録を行うはず．
ここでshortnameを設定するので，これを設定ファイル(_config.yml)に追記する．

1
2
3

# Disqus Comments
disqus_short_name: your_short_name
disqus_show_comment_count: true

shortnameを後から確認したい場合．
サイトにログインし，右上の歯車をクリックし，Admin > Settingsの，Site Identityにある．

1
2

Your website's shortname is *******.
This is used to uniquely identify your website on Disqus. It cannot be changed.

Octopressにコメントを追加する
Mac + Ruby + Octopress + Github でブログの作成

2.4.5 プロフィールをサイドバーに表示(2015/2/12追記)

  1. source/_includes/custom/asides/about.htmlを編集する．
  2. _config.ymlにおいて，サイドバーにcustom/asides/about.htmlを追加する．
1
2
3
4

# list each of the sidebar modules you want to include, in the order you want them to appear.
# To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/custom_aside_name.html'
# ↓ここにパスを追加
default_asides: [custom/asides/about.html, asides/recent_posts.html, custom/asides/category_list.html, custom/asides/tag_cloud.html, asides/github.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

Octopress - プロフィール表示を追加！

3. 記事をdeployした際に自動的にツイート

ありました1．
octopressの設定で簡単に連携もできるらしいので調べておく．
夜が遅いので今日はここまで．

4. 次回への持ち越し

  • 各コマンドがやっていること
    • 少し理解が足りない部分がある
    • この記事に説明を追記するかもしれない
  • 自動ツイート
    • 調べてみる
  • emacsのパッケージ管理について
    • 上記が終わったら

参考文献

  1. 最新記事があるか判別する
  2. GitHub Pages + Octopress カスタマイズ
  3. github アカウント作成方法
  4. Octopressはじめました
  5. Octpress始めました
  6. エンジニアのブログは Octopress が最適

Comments