Merge branch 'site' of github.com:imathis/octopress into site

This commit is contained in:
Brandon Mathis 2011-08-04 15:40:30 -04:00
commit 1857e62865
17 changed files with 253 additions and 133 deletions

View File

@ -107,7 +107,7 @@ blockquote {
cite { cite {
font-style: italic; font-style: italic;
a { color: $text-color-light !important; word-wrap: break-word; } a { color: $text-color-light !important; word-wrap: break-word; }
&:before { content: ''; padding:{right: .3em; left: .3em;} color: $text-color-light; } &:before { content: '\2014'; padding:{right: .3em; left: .3em;} color: $text-color-light; }
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
padding-left: 1.5em; padding-left: 1.5em;

View File

@ -17,17 +17,19 @@ Octopress provides a rake task to create new blog posts with the right naming co
#### Syntax #### Syntax
``` sh
rake new_post["title"] rake new_post["title"]
```
`new_post` expects a naturally written title and strips out undesirable url characters when creating the filename. `new_post` expects a naturally written title and strips out undesirable url characters when creating the filename.
The default file extension for new posts is `markdown` but you can configure that in the `Rakefile`. The default file extension for new posts is `markdown` but you can configure that in the `Rakefile`.
#### Example #### Example
``` sh
rake new_post["Zombie Ninjas Attack: A survivor's retrospective"] rake new_post["Zombie Ninjas Attack: A survivor's retrospective"]
# Creates source/_posts/2011-07-03-zombie-ninjas-attack-a-survivors-retrospective.markdown
# Creates the file ```
source/_posts/2011-07-03-zombie-ninjas-attack-a-survivors-retrospective.markdown
The filename will determine your url. With the default [permalink settings](https://github.com/mojombo/jekyll/wiki/Permalinks) the url would be something like The filename will determine your url. With the default [permalink settings](https://github.com/mojombo/jekyll/wiki/Permalinks) the url would be something like
`http://site.com/blog/20011/07/03/zombie-ninjas-attack-a-survivors-retrospective/index.html`. `http://site.com/blog/20011/07/03/zombie-ninjas-attack-a-survivors-retrospective/index.html`.
@ -35,6 +37,7 @@ The filename will determine your url. With the default [permalink settings](http
Open a post in a text editor and you'll see a block of [yaml front matter](https://github.com/mojombo/jekyll/wiki/yaml-front-matter) Open a post in a 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. which tells Jekyll how to processes posts and pages.
``` yaml
--- ---
layout: post layout: post
title: "Zombie Ninjas Attack: A survivor's retrospective" title: "Zombie Ninjas Attack: A survivor's retrospective"
@ -42,25 +45,43 @@ which tells Jekyll how to processes posts and pages.
comments: true comments: true
categories: categories:
--- ---
```
Here you can turn comments off and or categories to your post. If you are working on a multi-author blog, you can add `author: Your Name` to the Here you can turn comments off and or categories to your post. If you are working on a multi-author blog, you can add `author: Your Name` to the
metadata for proper attribution on a post. If you are working on a draft, you can add `published: false` to prevent it from being posted when you generate your blog. metadata for proper attribution on a post. If you are working on a draft, you can add `published: false` to prevent it from being posted when you generate your blog.
You can add a single category or multiple categories like this.
``` yaml
# One category
categories: Sass
# Multiple categories example 1
categories: [CSS3, Sass, Media Queries]
# Multiple categories example 2
categories:
- CSS3
- Sass
- Media Queries
```
## New Pages ## New Pages
You can add pages anywhere in your blog source directory and they'll be parsed by Jekyll. The URL will correspond directly to the filepath, so `about.markdown` will become `site.com/about.html`. If you prefer the URL `site.com/about/` you'll want to create the page as `about/index.markdown`. You can add pages anywhere in your blog source directory and they'll be parsed by Jekyll. The URL will correspond directly to the filepath, so `about.markdown` will become `site.com/about.html`. If you prefer the URL `site.com/about/` you'll want to create the page as `about/index.markdown`.
Octopress has a rake task for creating new pages easily. Octopress has a rake task for creating new pages easily.
``` sh
rake new_page[super-awesome] rake new_page[super-awesome]
# creates # creates /source/super-awesome/index.markdown
/source/super-awesome/index.markdown
rake new_page[super-awesome/page.html] rake new_page[super-awesome/page.html]
# creates # creates /source/super-awesome/page.html
/source/super-awesome/page.html ```
Like with the new post task, the default file extension is `markdown` but you can configure that in the `Rakefile`. A freshly generated page might look like this: Like with the new post task, the default file extension is `markdown` but you can configure that in the `Rakefile`. A freshly generated page might look like this.
``` yaml
--- ---
layout: page layout: page
title: "Super Awesome" title: "Super Awesome"
@ -69,20 +90,24 @@ Like with the new post task, the default file extension is `markdown` but you ca
sharing: true sharing: true
footer: true footer: true
--- ---
```
The title is derived from the filename so you'll likely want to change that. This is very similar to the post yaml except it doesn't include categories, and you can toggle sharing and comments or remove the footer altogehter. If you don't want to show a date on your page, just remove it from the yaml. The title is derived from the filename so you'll likely want to change that. This is very similar to the post yaml except it doesn't include categories, and you can toggle sharing and comments or remove the footer altogehter. If you don't want to show a date on your page, just remove it from the yaml.
## Generate & Preview ## Generate & Preview
``` sh
rake generate # Generates posts and pages into the public directory rake generate # Generates posts and pages into the public directory
rake watch # Watches source/ and sass/ for changes and regenerates rake watch # Watches source/ and sass/ for changes and regenerates
rake preview # Watches, and mounts a webserver at http://localhost:4000 rake preview # Watches, and mounts a webserver at http://localhost:4000
```
Jekyll's built in WEBrick server is handy, but if you're a [POW](http://pow.cx) user, you can set it up to work with Octopress like this. Jekyll's built in WEBrick server is handy, but if you're a [POW](http://pow.cx) user, you can set it up to work with Octopress like this.
``` sh
cd ~/.pow cd ~/.pow
ln -s /path/to/octopress ln -s /path/to/octopress
cd - cd -
```
Now that you're setup with POW, you'll just run `rake watch` and load up `http://octopress.dev` instead. Now that you're setup with POW, you'll just run `rake watch` and load up `http://octopress.dev` instead.

View File

@ -9,6 +9,10 @@ footer: false
There are [other plugins](/docs/plugins) for octopress, but here's an overview of the ones you'll be likely to use while blogging. There are [other plugins](/docs/plugins) for octopress, but here's an overview of the ones you'll be likely to use while blogging.
This is mainly a description and demo, so be sure to follow the links beneath each section for examples and documentation. This is mainly a description and demo, so be sure to follow the links beneath each section for examples and documentation.
## Excerpts
When writing a post, you can add an HTML comment `<!--more-->` to split the post for an excerpt. Only the first section of the post, before the comment,
will show up on the blog index.
## HTML5 Video Tag ## HTML5 Video Tag
This plugin makes it easy to insert mp4 encoded HTML5 videos in a post. Octopress ships with javascripts which This plugin makes it easy to insert mp4 encoded HTML5 videos in a post. Octopress ships with javascripts which
detect mp4 video support ([using Modernizr](http://modernizr.com)) and automatically offer a flash player fallback. detect mp4 video support ([using Modernizr](http://modernizr.com)) and automatically offer a flash player fallback.
@ -69,10 +73,4 @@ Import files on your file system into any blog post or page. For example, to emb
[Examples & documentation &raquo;](/docs/plugins/render-partial/) [Examples & documentation &raquo;](/docs/plugins/render-partial/)
## Excerpt Filter Also see the [Octopress Plugin index](/docs/plugins) for the full list of Octopress plugins.
When writing a post, you can add an HTML comment `<!--more-->` to split the post for an excerpt. Only the first section of the post, before the comment,
will show up on the blog index.
This filter is used in `source/_includes/article.html`
Also see the [Octopress Plugin page](/docs/plugins) for more plugins.

View File

@ -11,12 +11,12 @@ footer: false
I've tried to keep configuring Octopress fairly simple and you'll probably only ever change the `Rakefile` and the `_config.yml`. I've tried to keep configuring Octopress fairly simple and you'll probably only ever change the `Rakefile` and the `_config.yml`.
Here's a list of files for configuring Octopress. Here's a list of files for configuring Octopress.
{% codeblock %} ``` sh
_config.yml # Main config (Jekyll's settings) _config.yml # Main config (Jekyll's settings)
Rakefile # Configs for deployment Rakefile # Configs for deployment
config.rb # Compass config config.rb # Compass config
config.ru # Rack config config.ru # Rack config
{% endcodeblock %} ```
Configurations in the `Rakefile` are mostly related to deployment and you probably won't have to touch them unless you're using rsync. Configurations in the `Rakefile` are mostly related to deployment and you probably won't have to touch them unless you're using rsync.
@ -27,17 +27,16 @@ In the `_config.yml` there are three sections for configuring your Octopress Blo
### Main Configs ### Main Configs
{% codeblock %} ``` yaml
url: # For rewriting urls for RSS, etc url: # For rewriting urls for RSS, etc
title: # Used in the header and title tags title: # Used in the header and title tags
subtitle: # A description used in the header subtitle: # A description used in the header
author: # Your name, for RSS, Copyright, Metadata author: # Your name, for RSS, Copyright, Metadata
simple_search: # Search engine for simple site search simple_search: # Search engine for simple site search
subscribe_rss: # Url for your blog's feed, defauts to /atom.xml subscribe_rss: # Url for your blog's feed, defauts to /atom.xml
subscribe_email: # Url to subscribe by email (service required) subscribe_email: # Url to subscribe by email (service required)
email: # Email address for the RSS feed if you want it. email: # Email address for the RSS feed if you want it.
{% endcodeblock %} ```
**Note:** If your site is a multi-author blog, you may want to set this config's `author` to the name of your **Note:** If your site is a multi-author blog, you may want to set this config's `author` to the name of your
company or project, and add author metadata to posts and pages to give proper attribution for those works. company or project, and add author metadata to posts and pages to give proper attribution for those works.
@ -45,7 +44,7 @@ company or project, and add author metadata to posts and pages to give proper at
### Jekyll & Plugins ### Jekyll & Plugins
These configurations are used by Jekyll and Plugins. If you're not familiar with Jekyll, you should probably have a look at the [configuration docs](https://github.com/mojombo/jekyll/wiki/Configuration) which lists more options that aren't covered here. These configurations are used by Jekyll and Plugins. If you're not familiar with Jekyll, you should probably have a look at the [configuration docs](https://github.com/mojombo/jekyll/wiki/Configuration) which lists more options that aren't covered here.
{% codeblock %} ``` yaml
root: # Mapping for relative urls (default: /) root: # Mapping for relative urls (default: /)
port: # Port to mount Jekyll's WEBrick server port: # Port to mount Jekyll's WEBrick server
permalink: # Permalink structure for blog posts permalink: # Permalink structure for blog posts
@ -54,10 +53,16 @@ destination: # Directory for generated site files
plugins: # Directory for Jekyll plugins plugins: # Directory for Jekyll plugins
code_dir: # Directory for code snippets (for include_code plugin) code_dir: # Directory for code snippets (for include_code plugin)
category_dir: # Directory for generated blog category pages category_dir: # Directory for generated blog category pages
pygments: # Toggle pygments syntax highlighting
pygments: # Toggle python pygments syntax highlighting
paginate: # Posts per page on the blog index paginate: # Posts per page on the blog index
recent_posts: # Number of recent posts to appear in the sidebar recent_posts: # Number of recent posts to appear in the sidebar
{% endcodeblock %}
default_asides: # Configure what shows up in the sidebar and in what order
blog_index_asides: # Optional sidebar config for blog index page
post_asides: # Optional sidebar config for post layout
page_asides: # Optional sidebar config for page layout
```
If you want to change the way permalinks are written for your blog posts, see [Jekyll's permalink docs](https://github.com/mojombo/jekyll/wiki/Permalinks). If you want to change the way permalinks are written for your blog posts, see [Jekyll's permalink docs](https://github.com/mojombo/jekyll/wiki/Permalinks).
@ -68,13 +73,13 @@ to use the WEBrick server, but for any other web service you have to add support
<h3 id="third_party">3rd Party Settings</h3> <h3 id="third_party">3rd Party Settings</h3>
These third party integrations are already set up for you. Simply fill in the configurations and they'll be added to your site. These third party integrations are already set up for you. Simply fill in the configurations and they'll be added to your site.
- **Twitter** - Setup a sidebar twitter feed, follow button, and tweet button (for sharing posts and pages). - **Twitter** - *Setup a sidebar twitter feed, follow button, and tweet button (for sharing posts and pages).*
- **Google Plus One** - Setup sharing for posts and pages on Google's plus one network. - **Google Plus One** - *Setup sharing for posts and pages on Google's plus one network.*
- **Pinboard** - Share your recent Pinboard bookmarks in the sidebar. - **Pinboard** - *Share your recent Pinboard bookmarks in the sidebar.*
- **Delicious** - Share your recent Delicious bookmarks in the sidebar. - **Delicious** - *Share your recent Delicious bookmarks in the sidebar.*
- **Disqus Comments** - Add your disqus short name to enable disqus comments on your site. - **Disqus Comments** - *Add your disqus short name to enable disqus comments on your site.*
- **Google Analytics** - Add your tracking id to enable Google Analytics tracking for your site. - **Google Analytics** - *Add your tracking id to enable Google Analytics tracking for your site.*
The Octopress layouts read these configurations and only include the javascript and html necessary for the enabled services. The Octopress layouts read these configurations and only include the javascript and html necessary for the enabled services.
[Next, Deploying Octopress &raquo;](/docs/deploying) [Next, Blogging with Octopress &raquo;](/docs/blogging/)

View File

@ -6,60 +6,81 @@ sidebar: false
footer: false footer: false
--- ---
[&laquo; Previous, Configuring Octopress](/docs/configuring) <h2 id="rsync">Deploying with Rsync via SSH</h2>
### Deploying with Rsync via SSH
Add your server configurations to the `Rakefile` under Rsync deploy config. To deploy with Rsync, be sure your public key is listed in your server's `~/.ssh/authorized_keys` file. Add your server configurations to the `Rakefile` under Rsync deploy config. To deploy with Rsync, be sure your public key is listed in your server's `~/.ssh/authorized_keys` file.
``` ruby
ssh_user = "user@domain.com" ssh_user = "user@domain.com"
document_root = "~/website.com/" document_root = "~/website.com/"
deploy_default = "rsync" deploy_default = "rsync"
```
Now if you run `rake deploy` in your terminal, your `public` directory will be synced to your server's document root. Now if you run
### Deploying to Github Pages ``` sh
rake generate # If you haven't generated your blog yet
rake deploy # Syncs your blog via ssh
```
in your terminal, your `public` directory will be synced to your server's document root.
<h2 id="github_pages">Deploying to Github Pages</h2>
To setup deployment, you'll want to clone your target repository into the `_deploy` directory in your Octopress project. To setup deployment, you'll want to clone your target repository into the `_deploy` directory in your Octopress project.
If you're using Github user or organization pages, clone the repository `git@github.com:username/username.github.com.git`. If you're using Github user or organization pages, clone the repository `git@github.com:username/username.github.com.git`.
# For Github project pages: ### With Github User/Organization pages
git clone git@github.com:username/project.git _deploy
rake config_deploy[gh-pages]
# For Github user/organization pages: ``` sh
git clone git@github.com:username/username.github.com _deploy git clone git@github.com:username/username.github.com _deploy
rake config_deploy[master] rake config_deploy[master]
```
# Now to deploy, you'll run ### With Github Project pages (gh-pages)
rake deploy
``` sh
git clone git@github.com:username/project.git _deploy
rake config_deploy[gh-pages]
```
The `config_deploy` rake task takes a branch name as an argument and creates a [new empty branch](http://book.git-scm.com/5_creating_new_empty_branches.html), and adds an initial commit. The `config_deploy` rake task takes a branch name as an argument and creates a [new empty branch](http://book.git-scm.com/5_creating_new_empty_branches.html), and adds an initial commit.
This also sets `deploy_default = "push"` in your `_config.yml` and prepares your branch for easy deployment. The `rake deploy` task copies the generated blog from the `public` directory to the `_deploy` directory, adds new files, removes old files, sets a commit message, and pushes to Github. This also sets `deploy_default = "push"` in your `_config.yml` and prepares your branch for easy deployment. The `rake deploy` task copies the generated blog from the `public` directory to the `_deploy` directory, adds new files, removes old files, sets a commit message, and pushes to Github.
Github will queue your site for publishing (which usually occurs instantly or within minutes if it's your first commit). Github will queue your site for publishing (which usually occurs instantly or within minutes if it's your first commit).
Now you should be set up to deploy, just run
### Deploying to a Subdirectory (Github Project Pages does this) ``` sh
rake generate # If you haven't generated your blog yet
rake deploy # Pushes your generated blog to Github
```
<h2 id="deploy_subdir">Deploying to a Subdirectory (Github Project Pages does this)</h2>
If you're deploying to a subdirectory on your site, or if you're using Github's project pages, make sure you set up your urls correctly in your configs. If you're deploying to a subdirectory on your site, or if you're using Github's project pages, make sure you set up your urls correctly in your configs.
You can do this *almost* automatically: You can do this *almost* automatically:
``` sh
rake set_root_dir[your/path] rake set_root_dir[your/path]
# To go back to publishing to the document root # To go back to publishing to the document root
rake set_root_dir[/] rake set_root_dir[/]
```
Then update your `_config.yml` and `Rakefile` as follows: Then update your `_config.yml` and `Rakefile` as follows:
``` sh
# _config.yml # _config.yml
url: http://yoursite.com/your/path url: http://yoursite.com/your/path
# Rakefile (if deploying with rsync) # Rakefile (if deploying with rsync)
document_root = "~/yoursite.com/your/path" document_root = "~/yoursite.com/your/path"
```
To manually configure deployment to a subdirectory, you'll change `_config.yml`, `config.rb` and `Rakefile`. To manually configure deployment to a subdirectory, you'll change `_config.yml`, `config.rb` and `Rakefile`.
Here's an example for deploying the Octopress website to Github Project Pages: Here's an example for deploying the Octopress website to Github Project Pages:
``` sh
# _config.yml # _config.yml
destination: public/octopress destination: public/octopress
url: http://imathis.github.com/octopress url: http://imathis.github.com/octopress
@ -76,7 +97,4 @@ Here's an example for deploying the Octopress website to Github Project Pages:
public_dir = "public/octopress" public_dir = "public/octopress"
# If deploying with rsync, update your Rakefile path # If deploying with rsync, update your Rakefile path
document_root = "~/yoursite.com/your/path" document_root = "~/yoursite.com/your/path"
```
For more info on deploying a Jekyll Blog, checkout [Jekyll's deployment wiki page](https://github.com/mojombo/jekyll/wiki/Deployment).
[Next, Blogging Basics &raquo;](/docs/blogging)

View File

@ -1,7 +1,7 @@
--- ---
layout: page layout: page
title: Octopress Documentation title: Octopress Documentation
date: July 18 2011 date: August 01 2011
sidebar: false sidebar: false
comments: false comments: false
footer: false footer: false
@ -11,21 +11,22 @@ Octopress is a framework designed for Jekyll, the static blogging engine powerin
the documentation and if you have trouble, [I'll be happy to help](http://convore.com/octopress/support). If you find errors the documentation and if you have trouble, [I'll be happy to help](http://convore.com/octopress/support). If you find errors
[post an issue](https://github.com/imathis/octopress/issues) or fork and send a pull request on the [site branch](https://github.com/imathis/octopress/tree/site). [post an issue](https://github.com/imathis/octopress/issues) or fork and send a pull request on the [site branch](https://github.com/imathis/octopress/tree/site).
**Note:** If you already have a blog, check out [Jekyll's Migration page](https://github.com/mojombo/jekyll/wiki/blog-migrations) to help you get your current blog set up for Octopress blogging.
## Getting Started ## Getting Started
This section will help you get set up, and explain how to configure Octopress for your site. This section will help you get set up, and explain how to configure Octopress for your site.
- [Initial setup](/docs/setup) - *get source and install dependencies* - [Initial setup](/docs/setup) - *get source and install dependencies*
- [Basic Configuration](/docs/configuring) - *enable third party services and personalize your blog* - [Basic Configuration](/docs/configuring) - *enable third party services and personalize your blog*
- [Deploying Octopress](/docs/deploying) - *simple deploy instructions for Rsync and Github pages*
## Using Octopress ## Using Octopress
Your blog should be awesome. This should help. Your blog should be awesome. This should help.
- [Blogging Basics](/docs/blogging) - *how to create blog posts and pages* - [Blogging Basics](/docs/blogging) - *how to create blog posts and pages*
- [Deploying Octopress](/docs/deploying) - *simple deploy instructions for Rsync and Github pages*
- [Sharing Code Snippets](/docs/blogging/code) - *share code snippets with ease* - [Sharing Code Snippets](/docs/blogging/code) - *share code snippets with ease*
- [Syntax Highlighting Test](/docs/blogging/code/test) - *language highlighting tests*
- [Blogging With Plugins](/docs/blogging/plugins) - *overview of plugins for blogging* - [Blogging With Plugins](/docs/blogging/plugins) - *overview of plugins for blogging*
- [Theming & Customization](/docs/theming) - *guide to making changes to your Octopress theme* - [Theming & Customization](/docs/theme) - *guide to making changes to your Octopress theme*
- [Updating Octopress](/docs/updating) - *a guide to help you stay current with Octopress* - [Updating Octopress](/docs/updating) - *a guide to help you stay current with Octopress*
## Octopress Plugins - Usage & Examples ## Octopress Plugins - Usage & Examples

View File

@ -0,0 +1,35 @@
---
layout: page
title: "Include Array Plugin"
date: 2011-08-02 00:10
footer: false
sidebar: false
---
This plugin was created for Octopress by [Jason Woodward](http://www.woodwardjd.com) to make it possible to manage order of the sidebar partials from the `_confgi.yml`.
This is mostly useful for those working on an Octopress theme.
### First, How Partials Work
Jekyll allows you to include partials from the `/source/_includes` directory as follows:
``` html
{% raw %}{% include partial.html %}{% endraw %}
```
This will embed the contents of `/source/_includes/partial.html` in place of the snippet above.
### Now, How Include Array Works
First add an array pointing to a list of partials underneath `/source/_includes`
``` yaml
asides: [asides/about.html, asides/social.html]
```
Now from within a template you can render the partials from the yaml array like this.
``` html
{% raw %}{% include_array asides %}{% endraw %}
```
Octopress uses `include_array` to allow configuration of different sidebars for each layout.

View File

@ -9,16 +9,17 @@ footer: false
Octopress ships with the following plugins. Many have been written specially for Octopress, but some have been selected from the Jekyll community with various changes and improvements. Octopress ships with the following plugins. Many have been written specially for Octopress, but some have been selected from the Jekyll community with various changes and improvements.
- [HTML5 Video Tag](/docs/plugins/video-tag) - *easily post images with class names and titles* - [HTML5 Video Tag](/docs/plugins/video-tag/) - *easily post images with class names and titles*
- [Github Style codeblock](/docs/plugins/github-style-codeblock) - *for simple lightweight code sharing* - [Github Style codeblock](/docs/plugins/github-style-codeblock/) - *for simple lightweight code sharing*
- [Code Block](/docs/plugins/codeblock) - *for sharing code with titles and links* - [Code Block](/docs/plugins/codeblock/) - *for sharing code with titles and links*
- [Include Code](/docs/plugins/include-code) - *embed code from your filesystem with a download link* - [Include Code](/docs/plugins/include-code/) - *embed code from your filesystem with a download link*
- [Gist Tag](/docs/plugins/gist-tag) - *automatically downloads and embeds Github gists* - [Gist Tag](/docs/plugins/gist-tag/) - *automatically downloads and embeds Github gists*
- [Image Tag](/docs/plugins/image-tag) - *easily post images with class names and titles* - [Image Tag](/docs/plugins/image-tag/) - *easily post images with class names and titles*
- [Render Partial](/docs/plugins/render-partial) - *insert any file into another post or page* - [Render Partial](/docs/plugins/render-partial/) - *insert any file into another post or page*
- [Blockquote](/docs/plugins/blockquote) - *generate beautiful, semantic block quotes* - [Blockquote](/docs/plugins/blockquote/) - *generate beautiful, semantic block quotes*
- [Pullquote](/docs/plugins/pullquote) - *generate CSS only pull quotes &mdash; no duplicate data, no javascript* - [Pullquote](/docs/plugins/pullquote/) - *generate CSS only pull quotes &mdash; no duplicate data, no javascript*
- [Category Generator](/docs/plugins/category-generator) - *generates archive pages for each blog category* - [Category Generator](/docs/plugins/category-generator/) - *generates archive pages for each blog category*
- [Include Array](/docs/plugins/include-array/) - *includes an array of partials specified in the _config.yml*
The following filters are used by Octopress, and are documented as necessary in their source. The following filters are used by Octopress, and are documented as necessary in their source.

View File

@ -10,33 +10,47 @@ footer: false
open up a terminal and follow along. If you plan to host your site on [Github Pages](http://pages.github.com) for a user or organization, make sure the open up a terminal and follow along. If you plan to host your site on [Github Pages](http://pages.github.com) for a user or organization, make sure the
repository is named `your_username.github.com` or `your_organization.github.com`. repository is named `your_username.github.com` or `your_organization.github.com`.
``` sh
mkdir my_octopress_site mkdir my_octopress_site
cd my_octopress_site cd my_octopress_site
git init git init
git remote add octopress git://github.com/imathis/octopress.git git remote add octopress git://github.com/imathis/octopress.git
git pull octopress master git pull octopress master
git remote add origin (your repository url) git remote add origin your/repository/url
git push origin master git push origin master
```
# Next, if you're using Github user or organization pages, Next, if you're using Github pages for users or organizations, create a source branch and push to origin source.
# Create a source branch and push to origin source.
``` sh
git checkout -b source git checkout -b source
git push origin source git push origin source
```
Next, setup an [RVM](http://beginrescueend.com/) and install dependencies. Next, setup an [RVM](http://beginrescueend.com/) and install dependencies.
``` sh
rvm rvmrc trust rvm rvmrc trust
rvm reload rvm reload
bundle install bundle install
```
Install the default Octopress theme, Install the default Octopress theme,
``` sh
rake install rake install
```
and you should be all set up to begin blogging with Octopress. ### What to Commit?
**Note:** If you already have a blog, check out [Jekyll's Migration page](https://github.com/mojombo/jekyll/wiki/blog-migrations) to help you get your content formatted for Jekyll blogging. Now that you've installed the `source` and `sass` directories add them to your git repository, commit and push.
``` sh
git add .
git commit -m 'Installed Octopress theme'
git push
```
[Next, Configuring Octopress &raquo;](/docs/configuring) Whenever you write a new post, or make changes to your blog, be sure to commit and push those changes.
See also [Configuring Octopress](/docs/configuring), [Blogging with Octopress](/docs/blogging/) and [Deploying Octopress](/docs/deploying/)

17
source/docs/theme/index.markdown vendored Normal file
View File

@ -0,0 +1,17 @@
---
layout: page
title: "Theming &amp; Customization"
date: 2011-08-01 21:16
sidebar: false
footer: false
---
For now Octopress ships with a single theme in the `.themes` directory. When you install the Octopress theme, HTML and Javascripts are copied into `/source` and Sass stylesheets are copied into `/sass`.
You are free to make any changes you like, but I've set up a few patterns to make it easy to customize and keep your site up to date with the latest Octopress releases.
I've broken this up into two sections.
1. [Customizing the Template](/docs/theme/template/) - *Learn how to change the HEAD, sidebar, header, navigation & footer*
2. [Changing Styles](/docs/theme/styles) - *Learn how to change the color scheme, layout, and override styles*
Also see [Updating Your Blog &raquo;](/docs/updating)

16
source/docs/theme/styles/index.markdown vendored Normal file
View File

@ -0,0 +1,16 @@
---
layout: page
title: "Styles"
date: 2011-08-01 19:11
footer: false
sidebar: false
---
<h2 id="overriding_styles">Overriding Styles</h2>
{% render_partial docs/theme/styles/_styles.markdown %}
<h2 id="customizing_styles">Changing the Color Scheme</h2>
{% render_partial docs/theme/styles/_colors.markdown %}
<h2 id="changing_layout">Changing the Layout</h2>
{% render_partial docs/theme/styles/_layout.markdown %}

View File

@ -1,12 +1,31 @@
---
layout: page
title: "Theming &amp; Customization"
date: 2011-08-01 21:16
sidebar: false
footer: false
---
Shortly after the 2.0 release Octopress added the `source/_includes/custom` directory. If you don't have this, you'll want to [update](/docs/updating) because it's really nice. Shortly after the 2.0 release Octopress added the `source/_includes/custom` directory. If you don't have this, you'll want to [update](/docs/updating) because it's really nice.
source/ source/
_includes/ # Main layout partials _includes/ # Main layout partials
custom/ # <- Customize head, navigation, footer, and sidebar here custom/ # <- Customize head, header, navigation, footer, and sidebar here
asides/ # Theme sidebar partials asides/ # Theme sidebar partials
post/ # post metadata, sharing & comment partials post/ # post metadata, sharing & comment partials
_layouts/ # layouts for pages, posts & category archives _layouts/ # layouts for pages, posts & category archives
## Changing the &lt;HEAD&gt;
If you want to add to the `<HEAD>`take a look at `/source/_includes/custom/head.html`.
{% codeblock &lt;HEAD&gt; (source/_includes/custom/head.html) %}
{% render_partial ../.themes/classic/source/_includes/custom/head.html raw %}
{% endcodeblock %}
Here you can easily change or remove the [Google Webfonts](http://google.com/webfonts), insert javascripts, etc.
### Changing the sidebar ### Changing the sidebar
Octopress integrates with some [3rd party services](/docs/configuring/#third_party) like Twitter, Pinboard and Delicious which appear in the sidebar. Octopress integrates with some [3rd party services](/docs/configuring/#third_party) like Twitter, Pinboard and Delicious which appear in the sidebar.
In the `_config.yml` you can rearrange these, create custom sidebars for each layout, and add your own sidebar sections. In the `_config.yml` you can rearrange these, create custom sidebars for each layout, and add your own sidebar sections.
@ -36,19 +55,21 @@ post_asides: [custom/asides/about.html, asides/recent_posts.html, asides/
In the configuration above I've added the about page to the blog index and post pages. Since `page_asides` isn't being set, it will inherit from the default list. In the configuration above I've added the about page to the blog index and post pages. Since `page_asides` isn't being set, it will inherit from the default list.
### Changing the &lt;HEAD&gt; ## Changing the Header, Navigation & Footer
If you want to add to the `<HEAD>`take a look at `/source/_includes/custom/head.html`. These are sections of the site that are most likely to be customized. You can edit each in `/source/_includes/custom/` and your changes will be preserved across updates.
{% codeblock &lt;HEAD&gt; (source/_includes/custom/head.html) %} ### Changing the Header
{% render_partial ../.themes/classic/source/_includes/custom/head.html raw %}
The header title and subtitle should be configured in the `_config.yml` If you want to make other changes to the header, edit `/source/_includes/custom/header.html` which looks like this:
{% codeblock Header (source/_includes/custom/header.html) %}
{% render_partial ../.themes/classic/source/_includes/custom/header.html raw %}
{% endcodeblock %} {% endcodeblock %}
Here you can easily change or remove the [Google Webfonts](http://google.com/webfonts), insert javascripts, etc.
### Changing the Navigation ### Changing the Navigation
As soon as you add pages to your site, you'll want to put them in the main navigation. The links come from `/source/_includes/custom/navigation.html` which looks like this: To change or add links to the main navigation, edit `/source/_includes/custom/navigation.html` which looks like this:
{% codeblock Navigation (source/_includes/custom/navigation.html) %} {% codeblock Navigation (source/_includes/custom/navigation.html) %}
{% render_partial ../.themes/classic/source/_includes/custom/navigation.html raw %} {% render_partial ../.themes/classic/source/_includes/custom/navigation.html raw %}
@ -65,4 +86,4 @@ You can customize the footer in `source/_includes/custom/footer.html` which look
{% render_partial ../.themes/classic/source/_includes/custom/footer.html raw %} {% render_partial ../.themes/classic/source/_includes/custom/footer.html raw %}
{% endcodeblock %} {% endcodeblock %}
Change this however you like, but if you're cool, you'll leave the Octopress link in there. Change this however you like, but be cool and keep the Octopress link in there.

View File

@ -1,31 +0,0 @@
---
layout: page
title: "Theming &amp; Customization"
date: 2011-07-19 18:16
sidebar: false
footer: false
---
For now Octopress ships with a single theme in the `.themes` directory. When you install the Octopress theme, HTML and Javascripts are copied into `/source` and Sass stylesheets are copied into `/sass`.
You are free to make any changes you like, but I've set up a few patterns to make it easy to customize and keep your site up to date with the latest Octopress releases (see [Updating Octopress](/docs/updating)).
I've broken this up into the following sections.
1. [Customizing the Template](#customizing_template)
2. [Changing the Color Scheme](#customizing_colors)
3. [Changing the Layout](#customizing_layout)
4. [Overriding styles](#overriding_styles)
<h2 id="customizing_template">Customizing the Template</h2>
{% render_partial docs/theming/_template.markdown %}
<h2 id="customizing_styles">Changing the Color Scheme</h2>
{% render_partial docs/theming/_colors.markdown %}
<h2 id="changing_layout">Changing the Layout</h2>
{% render_partial docs/theming/_layout.markdown %}
<h2 id="overriding_styles">Overriding Styles</h2>
{% render_partial docs/theming/_styles.markdown %}
Also see [Updating Your Blog &raquo;](/docs/updating)

View File

@ -6,7 +6,7 @@ sidebar: false
footer: false footer: false
--- ---
[&laquo; Previous, Theming & Customization](/docs/theming) [&laquo; Previous, Theming & Customization](/docs/theme/)
In the open source world, version control generally takes care of staying current with the latest releases, but once you've begun to customize your code, In the open source world, version control generally takes care of staying current with the latest releases, but once you've begun to customize your code,
merging in updates isn't always what you want. As a result I've come up with the following pattern for Octopress: merging in updates isn't always what you want. As a result I've come up with the following pattern for Octopress: