Skip to content

Commit

Permalink
1. Replaced Rdiscount in favor of Kramdown (better html5 support) for…
Browse files Browse the repository at this point in the history
… markdown processing.

2. Added updated instructions to the README
3. Removed unused media css directories
4. Improved use of color variables for page theming.
5. Improved Typography and blog styling.
6. Added support for simple pre and code styles
7. Misc styling and markup improvements.
  • Loading branch information
imathis committed Jun 18, 2011
1 parent b0405cc commit 2181305
Show file tree
Hide file tree
Showing 25 changed files with 227 additions and 344 deletions.
2 changes: 1 addition & 1 deletion Gemfile
Expand Up @@ -2,7 +2,7 @@ source "http://rubygems.org"

gem 'rake'
gem 'jekyll'
gem 'rdiscount'
gem 'kramdown'
gem 'RedCloth'
gem 'haml', '>= 3.1'
gem 'compass', '>= 0.11'
Expand Down
10 changes: 5 additions & 5 deletions Gemfile.lock
Expand Up @@ -5,8 +5,8 @@ GEM
chunky_png (1.2.0)
classifier (1.3.3)
fast-stemmer (>= 1.0.0)
compass (0.11.1)
chunky_png (~> 1.1)
compass (0.11.3)
chunky_png (~> 1.2)
fssm (>= 0.2.7)
sass (~> 3.1)
directory_watcher (1.4.0)
Expand All @@ -18,14 +18,14 @@ GEM
directory_watcher (>= 1.1.1)
liquid (>= 1.9.0)
maruku (>= 0.5.9)
kramdown (0.13.3)
liquid (2.2.2)
maruku (0.6.0)
syntax (>= 1.0.0)
rake (0.9.0)
rb-fsevent (0.4.0)
rdiscount (1.6.8)
rubypants (0.2.0)
sass (3.1.1)
sass (3.1.2)
syntax (1.0.0)

PLATFORMS
Expand All @@ -36,7 +36,7 @@ DEPENDENCIES
compass (>= 0.11)
haml (>= 3.1)
jekyll
kramdown
rake
rb-fsevent
rdiscount
rubypants
137 changes: 81 additions & 56 deletions README.markdown
@@ -1,59 +1,84 @@
# What is Octopress?
Octopress gives developers a well designed starting point for a Jekyll blog. It's easy to configure and easy to deploy. Sweet huh?

#### Octopress comes with
1. A nice, easy to configure theme that focuses on readability.
2. Built in support for Twitter, Delicious, Disqus Comments, Google Analytics, and Custom Search.
3. Rake tasks that make development fast, and deploying easy.

## Why?
1. Building a Jekyll blog from scratch is a lot of work.
2. Jekyll doesn't have default layouts or themes.
3. Most developers don't want to do design.

## Octopress is made of
- [Jekyll](http://github.com/henrik/jekyll) a blog aware static site generator (Henrik's fork adds [HAML](http://haml-lang.com) support)
- [Compass](http://compass-style.org) an awesome [SASS](http://sass-lang.com) framework
- [FSSM](http://github.com/ttilley/fssm/tree/master) + a rake task, automatically regenerates the blog as you work
- [Serve](http://github.com/jlong/serve) for live previews of the site while in development
- [Rsync](http://samba.anu.edu.au/rsync/) for easy deployment

## Setup
Setup is really simple.

1. Download Octopress: <code>git clone git://github.com/imathis/octopress.git</code>
2. Install dependencies (requires the bundler gem): <code>bundle install</code>
3. Run <code>rake preview</code> to build the site and preview it in a local webserver.

You'll want to change some settings, so check out the wiki for [Setup & Configurations](http://wiki.github.com/imathis/octopress/configuration).

#### Optional:
- Install Pygments (Python syntax highlighter), if you wish to enable _Syntax Highlighting_. Download from [pygments.org](http://pygments.org), or <code>sudo aptitude install python-pigments</code> for Debian/Ubuntu users.

## Usage
Octopress is almost like a front-end for Jekyll. It provides some really handy rake tasks and automation to make blogging as simple as possible. With Octopress you can:

- Preview the site locally with the power of Serve.
- Automatically regenerate your blog while you work.
- Generate and deploy with a single command.

See the wiki to learn more about [Usage](http://wiki.github.com/imathis/octopress/usage).

## Third Party Integration
With search, comments, and analytics, you have no need for a database. This is what makes a statically generated blog possible.

- Twitter
- Disqus Comments
- Google Custom Search
- Google Analytics
- Delicious Bookmarks

If you already have an account with these services, you can get set up within seconds. Check out the wiki for [Third Party Configuration](http://wiki.github.com/imathis/octopress/third-party-integration) details, and to learn how to setup or remove these services.

## Octopress Style
- Stylesheets use [SASS](http://sass-lang.com) and [Compass](http://compass-style.org)
- They're broken up into Layout, Typography, Theme (colors), and Partials
- Checkout [the wiki](http://wiki.github.com/imathis/octopress/style-customization) for help with customization.
1. **It sports a clean responsive theme** written in semantic HTML5, focused on readability and friendliness toward mobile devices.
2. **Octopress loves programmers.** Embed code (with [Solarized](http://ethanschoonover.com/solarized) styling) in your posts from gists or from your filesystem.
3. **Third party integration is simple** with built-in support for Twitter, Pinboard, Delicious, Disqus Comments, and Google Analytics.
4. **It's easy to use.** A collection of rake tasks simplifies development and makes deploying a cinch.
5. **Get curated plugins.** Plugins are hand selected from the Jekyll community then tested and improved.

## Get Setup

[Fork Octopress](https://github.com/imathis/octopress), then open the console and follow along.

git clone (your repo url)

# Optionally add a branch for pulling in Octopress updates
git remote add octopress git://github.com/imathis/octopress.git

Setup an [RVM](http://beginrescueend.com/) and install dependencies.

source .rvmrc
bundle install

# Install pygments (for syntax highlighing)
sudo easy_install pip
sudo pip install pygments

# Install the default Octopress theme
rake install

### Write A Post

rake post['hello world']

This will create a new post named something like `2011-06-17-hello-world.markdown` in the `source/_posts` directory.
Open that file in your favorite text editor and you'll see a block of [yaml front matter](https://github.com/mojombo/jekyll/wiki/yaml-front-matter)
which tells Jekyll how to processes posts and pages.

---
title: Hello World
date: 2011-06-17 14:34
layout: post
---

Octopress adds some custom paramaters to give you more publishing flexibility and you can [read about those here](#include_link),
but for now. Go ahead and type up a sample post or use some [inspired filler](http://baconipsum.com/).

### Generate Your Blog

rake preview

This will generate your blog, watch your `sass` and `source` directories for changes regenerating automatically, and mount Jekyll's built in webbrick server. Open your browser to `http://localhost:4000` and check it out.

If you'd rather use [POW](http://pow.cx) to serve up your site, you can do this instead.

cd ~/.pow
ln -s /path/to/octopress

#Then generate your site
rake watch

`rake watch` does the same thing as `rake preview` except it doesn't mount Jekyll's webbrick server.

### Configure Octopress

http://gmarik.info/blog/2010/05/10/blogging-with-jekyll-and-heroku-for-free
http://jstorimer.com/2009/12/29/jekyll-on-heroku.html

Octopress keeps configurations in two places, the `Rakefile` and the `_config.yml`.

In the `rakefile` you'll want to set up your deployment configurations.

## -- Rsync Deploy config -- ##
# Be sure your public key is listed in your server's ~/.ssh/authorized_keys file
ssh_user = "mathisweb@imathis.com"
document_root = "~/dev.octopress.org/"

## -- Git deploy config -- ##
source_branch = "source" # this compiles to your deploy branch
deploy_branch = "master" # For user/organization pages, use "master" for project pages use "gh-pages"

If you want to deploy with github pages, read [http://pages.github.com](http://pages.github.com) for guidance.

TODO : Write _configt.yml instructions…

## License
(The MIT License)
Expand Down
15 changes: 10 additions & 5 deletions Rakefile
@@ -1,7 +1,6 @@
require "rubygems"
require "bundler/setup"

port = "4000" # preview project port eg. http://localhost:4000
site = "public" # compiled site directory
source = "source" # source file directory
stash = "_stash" # directory to stash posts for speedy generation
Expand All @@ -10,8 +9,8 @@ post_format = "markdown" # file format for new posts when using the post rake t

## -- Rsync Deploy config -- ##
# Be sure your public key is listed in your server's ~/.ssh/authorized_keys file
ssh_user = "user@host.com" # for rsync deployment
document_root = "~/document_root/" # for rsync deployment
ssh_user = "mathisweb@imathis.com"
document_root = "~/dev.octopress.org/"

## -- Github Pages deploy config -- ##
# Read http://pages.github.com for guidance
Expand All @@ -28,7 +27,7 @@ task :install, :theme do |t, args|
system "mkdir -p #{source}; cp -R themes/"+theme+"/source/ #{source}/"
system "mkdir -p sass; cp -R themes/"+theme+"/sass/ sass/"
system "mkdir -p _plugins; cp -R themes/"+theme+"/_plugins/ _plugins/"
system "mkdir -p #{source}/_posts";
system "mkdir -p #{source}/#{posts}";
puts "## Layouts, images, and javascritps from the #{theme} theme have been installed into ./#{source}"
puts "## Sass stylesheet sources from the #{theme} theme have been installed into ./sass"
puts "## Plugins from the #{theme} theme have been installed into ./_plugins"
Expand All @@ -54,8 +53,9 @@ task :post, :filename do |t, args|
require './_plugins/titlecase.rb'
args.with_defaults(:filename => 'new-post')
open("#{source}/_posts/#{Time.now.strftime('%Y-%m-%d')}-#{args.filename.downcase.gsub(/[ _]/, '-')}.#{post_format}", 'w') do |post|
system "mkdir -p #{source}/#{posts}";
post.puts "---"
post.puts "title: \"#{args.filename.gsub(/[-_]/, ' ').titlecase}\""
post.puts "title: #{args.filename.gsub(/[-_]/, ' ').titlecase}"
post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
post.puts "layout: post"
post.puts "---"
Expand All @@ -77,6 +77,11 @@ task :integrate do
FileUtils.mv Dir.glob("#{source}/#{stash}/*.*"), "#{source}/#{posts}/"
end

desc "Clean out caches: _code_cache, _gist_cache, .sass-cache"
task :clean do
system "rm -rf _code_cache/** _gist_cache/** .sass-cache/**"
end

##############
# Deploying #
##############
Expand Down
8 changes: 4 additions & 4 deletions _config.yml
Expand Up @@ -4,14 +4,14 @@ destination: public
code_dir: downloads/code
port: 4000

url: http://octopress.dev
title: My Octopress Blog
url: http://dev.octopress.org
title: Octopress
subtitle: A blogging framework for hackers.
author: Your Name
subscribe_rss: /atom.xml
subscribe_email: http://feedburner.com/asdfasdf
subscribe_email:

#markdown: rdiscount
markdown: kramdown
pygments: true
recent_posts: 1
simple_search: http://google.com/search
Expand Down
8 changes: 3 additions & 5 deletions themes/classic/sass/default/core/_layout.scss
@@ -1,9 +1,9 @@
$default-border-radius: 4px;

$pad-min: 18px;
$pad-narrow: 18px;
$pad-medium: 24px;
$pad-wide: 30px;
$pad-narrow: 20px;
$pad-medium: 35px;
$pad-wide: 55px;
$sidebar-width-medium: 240px;
$sidebar-pad-medium: 15px;
$sidebar-pad-wide: 20px;
Expand Down Expand Up @@ -117,8 +117,6 @@ body {
}
body > nav + div > div { margin-right: $sidebar-width-wide; }
#articles {
padding-top: $pad-wide/2;
padding-bottom: $pad-wide/2;
+ aside {
width: $sidebar-width-wide - $sidebar-pad-wide*2;
padding: 0 $sidebar-pad-wide $sidebar-pad-wide;
Expand Down
44 changes: 30 additions & 14 deletions themes/classic/sass/default/core/_theme.scss
@@ -1,37 +1,53 @@
// Link Colors
// Main Link Colors
$link-color: lighten(#165b94, 3);
$link-color-hover: darken(#165b94, 5);
$link-color-hover: adjust-hue($link-color, -200);
$link-color-visited: darken(adjust_hue($link_color, 70), 10);
$link-color-active: darken($link-color-hover, 15);

// Main Section Colors
$body-color: #333333;
$light-text: #999999;
$page-bg: #252525;
$article-border: #eeeeee;
$main-bg: #f5f5f5;

$header-bg: #333; //#0c2e46; //darken(#238bd2, 32); //#263448; //#323232;
$header-bg: #333;
$header-border: lighten($header-bg, 15);
$title-color: #f2f2f2;
$subtitle-color: #aaa;

$nav-bg: #ccc;//#3a6ea5;
$type-border: #ddd;
$type-color-light: #555;
$type-color: #222;

$nav-bg: #ccc;
$nav-color: darken($nav-bg, 38);
$nav-color-hover: darken($nav-color, 25);
$nav-border: darken($nav-bg, 10);
$nav-border-top: lighten($nav-bg, 15);
$nav-border-bottom: darken($nav-bg, 25);//darken($nav-bg, 5);
$nav-border-bottom: darken($nav-bg, 25);
$nav-border-left: darken($nav-bg, 11);
$nav-border-right: lighten($nav-bg, 7);

$sidebar-bg: #eee; //#f8f8f8; //desaturate(change-color(#e8f4f4, $hue: 207), 100); //mix(#f5f5f5, aqua, 93%);
$sidebar-bg: #eee;
$sidebar-color: change-color(mix($type-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2);
$sidebar-border: desaturate(darken($sidebar-bg, 7), 10);
$sidebar-border: darken($sidebar-bg, 7);

// Blog
$article-border: #eeeeee;
$main-bg: #f9f8f6;
$sidebar-link-color: $link-color;
$sidebar-link-color-hover: $link-color-hover;
$sidebar-link-color-subdued: lighten($sidebar-color, 20);
$sidebar-link-color-subdued-hover: $link-color-hover;//darken($sidebar-link-color-subdued, 20);
$twitter-status-link: lighten($sidebar-link-color-subdued, 15);

$footer-color: #999999;
//$footer-bg: #444444;
$footer-bg: $nav-bg;//$page-bg;
$footer-border: $nav-border-top;//$page-bg;
$footer-bg: #ccc;
$footer-color: darken($footer-bg, 38);
$footer-color-hover: darken($footer-color, 10);
$footer-placeholder: desaturate(darken($footer-bg, 10), 15);
$footer-border-top: lighten($footer-bg, 15);
$footer-link-color: darken($footer-bg, 38);
$footer-link-color-hover: darken($footer-color, 25);
$page-border-bottom: darken($footer-bg, 5);

// Form Colors
$fieldset-bg: #ececec;
Expand All @@ -48,6 +64,6 @@ $textinput-border-right: #c3c3c3;
$textinput-border-focus: #989898;

#articles a, #articles + aside a {
@include link-colors($link-color, $hover: saturate(darken($link_color, 15), 20), $focus: saturate(darken($link_color, 15), 20), $visited: darken(adjust_hue($link_color, 70), 10));
@include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
}
a { @include transition(color, .5s); }
14 changes: 4 additions & 10 deletions themes/classic/sass/default/core/_typography.scss
@@ -1,11 +1,7 @@
$type-border: #ddd;
$type-color-light: #555;
$type-color: #000;
$blockquote: $type-border !default; //darken($type-border, 20) !default;
$blockquote: $type-border !default;
$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;

// Fonts
//@include font-face("Adelle", font-files("adellebasic_bold-webfont.woff", woff, "adellebasic_bold-webfont.ttf", truetype, "adellebasic_bold-webfont.svg#webfontKykxqSyz", svg), $eot: "adellebasic_bold-webfont.eot" );
.heading {
font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif;
}
Expand All @@ -14,7 +10,7 @@ $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
.mono { font-family: $mono; }

body > header h1 {
font-size: 2em;
font-size: 3em;
@extend .heading;
font-weight: normal;
line-height: 1.2em;
Expand All @@ -31,10 +27,10 @@ body {
@extend .heading;
text-rendering: optimizelegibility;
margin-bottom: 1em;
font-weight: normal;
font-weight: bold;
}
h1 {
font-size: 2.4em;
font-size: 3.2em;
line-height: 1.2em
}
h2, section h1 {
Expand All @@ -59,8 +55,6 @@ ul{ list-style-type: disc; }
ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } }
ul ul, ol ol { margin-left: 1.75em; }

li { margin-bottom: .5em; }

strong { font-weight: bold; }

em { font-style: italic; }
Expand Down

0 comments on commit 2181305

Please sign in to comment.