Octopress搭建博客之路1

最近,因之前的博客是通过hexo搭建的,而通过hexo搭建的样式,有点烂大街的赶脚。另外,想对它做一些改动,看着它的代码有点头大。然后,就接触了Octopress,稍微了解了一下,就决定把我的博客迁到这个上面了。原因有二:1.是基于Ruby开发的,正是我目前在学的语言;2.相对于hexo提供更多的功能。废话不多说,开始搭建第一篇Octopress博客吧。

配置Octopress

  • 准备工具
    我们需要git、ruby > 1.9.3、bundler

  • 项目clone

git clone git://github.com/imathis/octopress.git blog

在此把blog设置为我们的写博客的目录。

Tips:建议fork这个github的地址,建立一个个人的配置,这样就可以对网站的样式进行个人配置的保存工作。

  • 安装依赖
bundle install
  • 配置主题
rake install

这里会安装Octopress提供的默认主题。

  • 错误解决
    在执行主题配置,执行rake的时候,会报下面的错误。具体原因,是因为rake版本不匹配,笔者安装的rake版本过多的问题。
rake aborted!
Gem::LoadError: You have already activated rake 11.1.2, but your Gemfile requires rake 10.5.0. Prepending `bundle exec` to your command may solve this.

按照提示的解决方案,添加bundle exec就可以解决,那每次这样输入,不是太麻烦了么。还有另一个解决方案,移除10.5.0的rake版本,在命令行下,执行命令如下:

gem uninstall rake

系统会列出所有的rake版本,选择相应版本即可。

创建blog

  • 创建blog
    Octopress的命令,都是通过rake来执行的,接下来,咱们来看一下Octopress提供了哪些功能?执行rake -T,来查看所有的任务命令,可以看到有如下的输出:
rake clean                     # Clean out caches: .pygments-cache, .gist-cache, .sass-cache
rake copydot[source,dest]      # copy dot files for deployment
rake deploy                    # Default deploy task
rake gen_deploy                # Generate website and deploy
rake generate                  # Generate jekyll site
rake install[theme]            # Initial setup for Octopress: copies the default theme into the ...
rake integrate                 # Move all stashed posts back into the posts directory, ready for...
rake isolate[filename]         # Move all other posts than the one currently being worked on to ...
rake list                      # list tasks
rake new_page[filename]        # Create a new page in source/(filename)/index.markdown
rake new_post[title]           # Begin a new post in source/_posts
rake preview                   # preview the site in a web browser
rake push                      # deploy public directory to github pages
rake rsync                     # Deploy website via rsync
rake set_root_dir[dir]         # Update configurations to support publishing to root or sub dire...
rake setup_github_pages[repo]  # Set up _deploy folder and deploy branch for Github Pages deploy...
rake update_source[theme]      # Move source to source.old, install source theme updates, replac...
rake update_style[theme]       # Move sass to sass.old, install sass theme updates, replace sass...
rake watch                     # Watch the site and regenerate when it changes

从中,可以看到我们将会用到的几个常用命令deploy来执行网站的部署,new_page来创建页面,new_post来创建新的博客。

  • 新建第一篇博客
rake new_post['first blog']

执行完之后,就会得到如下的系统输出:

mkdir -p source/_posts
Creating new post: source/_posts/2016-04-23-first-blog.markdown
  • 预览页面
    这里使用preview命令
rake preview 

之后,会看到提供给的提示是端口4000,在浏览器中输入:localhost: 4000,则可以看到我们的first blog了。如图:

First blog.png
  • 错误解决
    在执行新建博客的时候,会遇到rake new_post不识别的问题。这个在官方文档中,提到是由我的命令行工具使用了zsh的缘故。解决方案,打开zsh的配置文件.zshrc。在其中,添加如下代码:
alias rake='noglob rake'

网站配置

这里Octopress主要的配置文件,是由根目录下面的_config.yml文件,来进行配置的。主要代码如下,可以看到看到其支持的功能非常丰富:

# ----------------------- #
#      Main Configs       #
# ----------------------- #

url: http://alighters.com
title: My Octopress Blog
subtitle: A blogging framework for hackers.
author: Your Name
simple_search: https://www.google.com/search
description:

# Default date format is "ordinal" (resulting in "July 22nd 2007")
# You can customize the format as defined in
# http://www.ruby-doc.org/core-1.9.2/Time.html#method-i-strftime
# Additionally, %o will give you the ordinal representation of the day
date_format: "ordinal"

# RSS / Email (optional) subscription links (change if using something like Feedburner)
subscribe_rss: /atom.xml
subscribe_email:
# RSS feeds can list your email address if you like
email:

# ----------------------- #
#    Jekyll & Plugins     #
# ----------------------- #

# If publishing to a subdirectory as in http://site.com/project set 'root: /project'
root: /
permalink: /blog/:year/:month/:day/:title/
source: source
destination: public
plugins: plugins
code_dir: downloads/code
category_dir: blog/categories
markdown: rdiscount
rdiscount:
  extensions:
    - autolink
    - footnotes
    - smart
highlighter: pygments # default python pygments have been replaced by pygments.rb

paginate: 10          # Posts per page on the blog index
paginate_path: "posts/:num"  # Directory base for pagination URLs eg. /posts/2/
recent_posts: 5       # Posts in the sidebar Recent Posts section
excerpt_link: "Read on →"  # "Continue reading" link text at the bottom of excerpted articles
excerpt_separator: "<!--more-->"

titlecase: true       # Converts page and post titles to titlecase

# 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: [asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

# Each layout uses the default asides, but they can have their own asides instead. Simply uncomment the lines below
# and add an array with the asides you want to use.
# blog_index_asides:
# post_asides:
# page_asides:

# ----------------------- #
#   3rd Party Settings    #
# ----------------------- #

# Github repositories
github_user:
github_repo_count: 0
github_show_profile_link: true
github_skip_forks: true

# Twitter
twitter_user:
twitter_tweet_button: true

# Google +1
google_plus_one: false
google_plus_one_size: medium

# Google Plus Profile
# Hidden: No visible button, just add author information to search results
googleplus_user:
googleplus_hidden: false

# Pinboard
pinboard_user:
pinboard_count: 3

# Delicious
delicious_user:
delicious_count: 3

# Disqus Comments
disqus_short_name:
disqus_show_comment_count: false

# Google Analytics
google_analytics_tracking_id:

# Facebook Like
facebook_like: false

这里,笔者稍微简单修改之后的界面,来看看效果如何:

效果.png

有木有感觉异常简单呢?

参考资料

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容