JT's Blog

Do the right things and do the things right.

Using Octopress and Github to Write Blog

| Comments

新增GitHub Repository

點選new 建立新的Repository,命名為 username.github.io

取得Octopress

1
2
3
$ git clone git@github.com:imathis/octopress.git username.github.io
$ cd username.github.io
$ bundle install

設定GitHub Repository Pages

1
2
3
4
$ bundle exec rake setup_github_pages

# (For example, 'git@github.com:your_username/your_username.github.io.git)
#            or 'https://github.com/your_username/your_username.github.io')

安裝預設主題

1
$ rake install

Octopress 已經安裝好了!可以執行$rake preview,輸入http://localhost:4000/ 在本機看一下效果!

新增BitBucket Repository

  1. 不想讓使用者看到編輯中的文章或是編輯紀錄
  2. 節省成本暫不考慮GitHub Private 方案 BitBucket 點選Create 建立新的Repository,命名為username.github.com,在本機加入remote repository
1
2
3
4
5
6
$ git remote add bitbucket git@bitbucket.org:username/username.github.io.git

# push to bitbucket
$ git add .
$ git commit -m "Initial Commit"
$ git push -u bitbucket --all

新增文章

1
2
3
4
5
$ rake new_post
# Enter a title for your post:

# 上下相同
$ rake new_post['article-title']

預覽文章

1
$ rake preview

產生網頁與發佈文章

1
2
$ rake generate
$ rake deploy

其他

安裝其他主題

可到Wiki 選擇喜歡的主題

1
2
$ rake install['主題名稱']
$ rake generate

Octopress 設定檔

可參考官網設定說明調整設定檔

1
2
3
4
5
6
7
8
9
10
11
12
# _config.yml
url:                # For rewriting urls for RSS, etc
title:              # Used in the header and title tags
subtitle:           # A description used in the header
author:             # Your name, for RSS, Copyright, Metadata
simple_search:      # Search engine for simple site search
description:        # A default meta description for your site
date_format:        # Format dates using Ruby's date strftime syntax
subscribe_rss:      # Url for your blog's feed, defauts to /atom.xml
subscribe_email:    # Url to subscribe by email (service required)
category_feeds:     # Enable per category RSS feeds (defaults to false in 2.1)
email:              # Email address for the RSS feed if you want it.

放入圖片

存放到 /source/images,再指定圖片路徑

1
![alt description](/images/upload.jpg)

增加About Me

先產生about page

1
2
$ rake new_page["about"]
# source/about/index.markdown

Navbar 加入about link

1
2
3
4
5
6
# /source/_includes/custom/navigation.html
<ul class="main-navigation">
  <li><a href="/">Blog</a></li>
  <li><a href="/blog/archives">Archives</a></li>
  <li><a href="/about">About</a></li>
</ul>

Reference

Comments