×

Octopress搭建博客之路1

96
alighters
2016.04.23 18:18* 字数 779

最近,因之前的博客是通过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

有木有感觉异常简单呢?

参考资料

工具
Web note ad 1