alighters

程序、写作、人生

Octopress搭建博客之路1

| Comments

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

配置Octopress

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

  • 项目clone

1

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

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

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

  • 安装依赖
1

bundle install
  • 配置主题
1

rake install

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

  • 错误解决 在执行主题配置，执行rake的时候，会报下面的错误。具体原因，是因为rake版本不匹配，笔者安装的rake版本过多的问题。
1
2

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版本，在命令行下，执行命令如下：

1

gem uninstall rake

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

创建blog

  • 创建blog Octopress的命令，都是通过rake来执行的，接下来，咱们来看一下Octopress提供了哪些功能？执行rake -T，来查看所有的任务命令，可以看到有如下的输出：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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来创建新的博客。 + 新建第一篇博客

1

rake new_post['first blog']

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

1
2

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

rake preview

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

First blog.png

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

alias rake='noglob rake'

网站配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

# ----------------------- #
#      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 有木有感觉异常简单呢？

参考资料

版权归作者所有，转载请注明原文链接：/blog/2016/04/23/octopressda-jian-bo-ke-zhi-lu-1/

给 Ta 个打赏吧...

Comments