From c10140b52de2132d3bdf6972bac80d59f481aa2b Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Mon, 1 Aug 2011 17:57:17 -0400 Subject: [PATCH 1/7] added header to customizable includes --- .themes/classic/source/_includes/custom/header.html | 6 ++++++ .themes/classic/source/_includes/header.html | 7 +------ 2 files changed, 7 insertions(+), 6 deletions(-) create mode 100644 .themes/classic/source/_includes/custom/header.html diff --git a/.themes/classic/source/_includes/custom/header.html b/.themes/classic/source/_includes/custom/header.html new file mode 100644 index 0000000..35f9c05 --- /dev/null +++ b/.themes/classic/source/_includes/custom/header.html @@ -0,0 +1,6 @@ +
+

{{ site.title }}

+ {% if site.subtitle %} +

{{ site.subtitle }}

+ {% endif %} +
diff --git a/.themes/classic/source/_includes/header.html b/.themes/classic/source/_includes/header.html index 35f9c05..524de65 100644 --- a/.themes/classic/source/_includes/header.html +++ b/.themes/classic/source/_includes/header.html @@ -1,6 +1 @@ -
-

{{ site.title }}

- {% if site.subtitle %} -

{{ site.subtitle }}

- {% endif %} -
+{% include custom/header.html %} From 15a78991dad3240559c49d2ef87c080a65db69a6 Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Mon, 1 Aug 2011 17:58:12 -0400 Subject: [PATCH 2/7] updated to latest /source --- source/_includes/custom/header.html | 6 ++++++ source/_includes/header.html | 7 +------ 2 files changed, 7 insertions(+), 6 deletions(-) create mode 100644 source/_includes/custom/header.html diff --git a/source/_includes/custom/header.html b/source/_includes/custom/header.html new file mode 100644 index 0000000..35f9c05 --- /dev/null +++ b/source/_includes/custom/header.html @@ -0,0 +1,6 @@ +
+

{{ site.title }}

+ {% if site.subtitle %} +

{{ site.subtitle }}

+ {% endif %} +
diff --git a/source/_includes/header.html b/source/_includes/header.html index 35f9c05..524de65 100644 --- a/source/_includes/header.html +++ b/source/_includes/header.html @@ -1,6 +1 @@ -
-

{{ site.title }}

- {% if site.subtitle %} -

{{ site.subtitle }}

- {% endif %} -
+{% include custom/header.html %} From 53e9d28be59358602533f0314dc15bdac034633c Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Tue, 2 Aug 2011 00:40:15 -0400 Subject: [PATCH 3/7] updated docs to include new plugins and better explain theming and customization --- source/atom.xml | 2 +- source/docs/blogging/index.markdown | 45 ++++++++--- source/docs/blogging/plugins/index.markdown | 12 ++- source/docs/configuring/index.markdown | 79 ++++++++++--------- source/docs/deploying/index.markdown | 50 ++++++++---- source/docs/index.markdown | 9 ++- .../docs/plugins/include-array/index.markdown | 35 ++++++++ source/docs/plugins/index.markdown | 21 ++--- source/docs/setup/index.markdown | 28 +++++-- source/docs/theme/index.markdown | 17 ++++ .../styles}/_colors.markdown | 0 .../styles}/_layout.markdown | 0 .../styles}/_styles.markdown | 0 source/docs/theme/styles/index.markdown | 16 ++++ .../template/index.markdown} | 39 ++++++--- source/docs/theming/index.markdown | 31 -------- source/docs/updating/index.markdown | 2 +- 17 files changed, 253 insertions(+), 133 deletions(-) create mode 100644 source/docs/plugins/include-array/index.markdown create mode 100644 source/docs/theme/index.markdown rename source/docs/{theming => theme/styles}/_colors.markdown (100%) rename source/docs/{theming => theme/styles}/_layout.markdown (100%) rename source/docs/{theming => theme/styles}/_styles.markdown (100%) create mode 100644 source/docs/theme/styles/index.markdown rename source/docs/{theming/_template.markdown => theme/template/index.markdown} (76%) delete mode 100644 source/docs/theming/index.markdown diff --git a/source/atom.xml b/source/atom.xml index 3b4e661..23de64e 100644 --- a/source/atom.xml +++ b/source/atom.xml @@ -16,7 +16,7 @@ layout: nil {% endif %} - {% for post in site.posts %} + {% for post in site.posts limit: 20 %} {{ post.title }} diff --git a/source/docs/blogging/index.markdown b/source/docs/blogging/index.markdown index 1008ae8..f44d375 100644 --- a/source/docs/blogging/index.markdown +++ b/source/docs/blogging/index.markdown @@ -17,17 +17,19 @@ Octopress provides a rake task to create new blog posts with the right naming co #### Syntax - rake new_post["title"] +``` sh + rake new_post["title"] +``` `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`. #### Example +``` sh rake new_post["Zombie Ninjas Attack: A survivor's retrospective"] - - # Creates the file - source/_posts/2011-07-03-zombie-ninjas-attack-a-survivors-retrospective.markdown + # Creates 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 `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) which tells Jekyll how to processes posts and pages. +``` yaml --- layout: post title: "Zombie Ninjas Attack: A survivor's retrospective" @@ -42,25 +45,43 @@ which tells Jekyll how to processes posts and pages. comments: true 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 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 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. +``` sh rake new_page[super-awesome] - # creates - /source/super-awesome/index.markdown + # creates /source/super-awesome/index.markdown rake new_page[super-awesome/page.html] - # creates - /source/super-awesome/page.html + # creates /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 title: "Super Awesome" @@ -69,20 +90,24 @@ Like with the new post task, the default file extension is `markdown` but you ca sharing: 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. ## Generate & Preview - +``` sh rake generate # Generates posts and pages into the public directory rake watch # Watches source/ and sass/ for changes and regenerates 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. +``` sh cd ~/.pow ln -s /path/to/octopress cd - +``` Now that you're setup with POW, you'll just run `rake watch` and load up `http://octopress.dev` instead. diff --git a/source/docs/blogging/plugins/index.markdown b/source/docs/blogging/plugins/index.markdown index 1d4ed66..73bcca6 100644 --- a/source/docs/blogging/plugins/index.markdown +++ b/source/docs/blogging/plugins/index.markdown @@ -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. 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 `` 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 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. @@ -69,10 +73,4 @@ Import files on your file system into any blog post or page. For example, to emb [Examples & documentation »](/docs/plugins/render-partial/) -## Excerpt Filter -When writing a post, you can add an HTML comment `` 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. +Also see the [Octopress Plugin index](/docs/plugins) for the full list of Octopress plugins. diff --git a/source/docs/configuring/index.markdown b/source/docs/configuring/index.markdown index 2202a86..b7fcfc1 100644 --- a/source/docs/configuring/index.markdown +++ b/source/docs/configuring/index.markdown @@ -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`. Here's a list of files for configuring Octopress. -{% codeblock %} -_config.yml # Main config (Jekyll's settings) -Rakefile # Configs for deployment -config.rb # Compass config -config.ru # Rack config -{% endcodeblock %} +``` sh + _config.yml # Main config (Jekyll's settings) + Rakefile # Configs for deployment + config.rb # Compass config + config.ru # Rack config +``` 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 -{% codeblock %} -url: # For rewriting urls for RSS, etc -title: # Used in the header and title tags - -subtitle: # A description used in the header -author: # Your name, for RSS, Copyright, Metadata -simple_search: # Search engine for simple site search -subscribe_rss: # Url for your blog's feed, defauts to /atom.xml -subscribe_email: # Url to subscribe by email (service required) -email: # Email address for the RSS feed if you want it. -{% endcodeblock %} +``` yaml + url: # For rewriting urls for RSS, etc + title: # Used in the header and title tags + subtitle: # A description used in the header + author: # Your name, for RSS, Copyright, Metadata + simple_search: # Search engine for simple site search + subscribe_rss: # Url for your blog's feed, defauts to /atom.xml + subscribe_email: # Url to subscribe by email (service required) + email: # Email address for the RSS feed if you want it. +``` **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. @@ -45,19 +44,25 @@ company or project, and add author metadata to posts and pages to give proper at ### 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. -{% codeblock %} -root: # Mapping for relative urls (default: /) -port: # Port to mount Jekyll's WEBrick server -permalink: # Permalink structure for blog posts -source: # Directory for site source files -destination: # Directory for generated site files -plugins: # Directory for Jekyll plugins -code_dir: # Directory for code snippets (for include_code plugin) -category_dir: # Directory for generated blog category pages -pygments: # Toggle pygments syntax highlighting -paginate: # Posts per page on the blog index -recent_posts: # Number of recent posts to appear in the sidebar -{% endcodeblock %} +``` yaml + root: # Mapping for relative urls (default: /) + port: # Port to mount Jekyll's WEBrick server + permalink: # Permalink structure for blog posts + source: # Directory for site source files + destination: # Directory for generated site files + plugins: # Directory for Jekyll plugins + code_dir: # Directory for code snippets (for include_code plugin) + category_dir: # Directory for generated blog category pages + + pygments: # Toggle python pygments syntax highlighting + paginate: # Posts per page on the blog index + recent_posts: # Number of recent posts to appear in the sidebar + + 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). @@ -68,13 +73,13 @@ to use the WEBrick server, but for any other web service you have to add support

3rd Party Settings

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). -- **Google Plus One** - Setup sharing for posts and pages on Google's plus one network. -- **Pinboard** - Share your recent Pinboard 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. -- **Google Analytics** - Add your tracking id to enable Google Analytics tracking for your site. +- **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.* +- **Pinboard** - *Share your recent Pinboard 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.* +- **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. -[Next, Deploying Octopress »](/docs/deploying) +[Next, Blogging with Octopress »](/docs/blogging/) diff --git a/source/docs/deploying/index.markdown b/source/docs/deploying/index.markdown index d4ac9c5..668f75b 100644 --- a/source/docs/deploying/index.markdown +++ b/source/docs/deploying/index.markdown @@ -6,60 +6,81 @@ sidebar: false footer: false --- -[« Previous, Configuring Octopress](/docs/configuring) - -### Deploying with Rsync via SSH +

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. +``` ruby ssh_user = "user@domain.com" document_root = "~/website.com/" 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. + +

Deploying to Github Pages

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`. - # For Github project pages: - git clone git@github.com:username/project.git _deploy - rake config_deploy[gh-pages] +### With Github User/Organization pages - # For Github user/organization pages: +``` sh git clone git@github.com:username/username.github.com _deploy rake config_deploy[master] +``` - # Now to deploy, you'll run - rake deploy +### With Github Project pages (gh-pages) + +``` 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. 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). +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 +``` + +

Deploying to a Subdirectory (Github Project Pages does this)

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: +``` sh rake set_root_dir[your/path] # To go back to publishing to the document root rake set_root_dir[/] +``` Then update your `_config.yml` and `Rakefile` as follows: +``` sh # _config.yml url: http://yoursite.com/your/path # Rakefile (if deploying with rsync) document_root = "~/yoursite.com/your/path" +``` 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: +``` sh # _config.yml destination: public/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" # If deploying with rsync, update your Rakefile 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 »](/docs/blogging) +``` diff --git a/source/docs/index.markdown b/source/docs/index.markdown index f4d7f75..0d3314f 100644 --- a/source/docs/index.markdown +++ b/source/docs/index.markdown @@ -1,7 +1,7 @@ --- layout: page title: Octopress Documentation -date: July 18 2011 +date: August 01 2011 sidebar: false comments: 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 [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 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* - [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 Your blog should be awesome. This should help. - [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* -- [Syntax Highlighting Test](/docs/blogging/code/test) - *language highlighting tests* - [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* ## Octopress Plugins - Usage & Examples diff --git a/source/docs/plugins/include-array/index.markdown b/source/docs/plugins/include-array/index.markdown new file mode 100644 index 0000000..5e19461 --- /dev/null +++ b/source/docs/plugins/include-array/index.markdown @@ -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. diff --git a/source/docs/plugins/index.markdown b/source/docs/plugins/index.markdown index cb98f68..8b8fdd4 100644 --- a/source/docs/plugins/index.markdown +++ b/source/docs/plugins/index.markdown @@ -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. -- [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* -- [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* -- [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* -- [Render Partial](/docs/plugins/render-partial) - *insert any file into another post or page* -- [Blockquote](/docs/plugins/blockquote) - *generate beautiful, semantic block quotes* -- [Pullquote](/docs/plugins/pullquote) - *generate CSS only pull quotes — no duplicate data, no javascript* -- [Category Generator](/docs/plugins/category-generator) - *generates archive pages for each blog category* +- [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* +- [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* +- [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* +- [Render Partial](/docs/plugins/render-partial/) - *insert any file into another post or page* +- [Blockquote](/docs/plugins/blockquote/) - *generate beautiful, semantic block quotes* +- [Pullquote](/docs/plugins/pullquote/) - *generate CSS only pull quotes — no duplicate data, no javascript* +- [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. diff --git a/source/docs/setup/index.markdown b/source/docs/setup/index.markdown index 7fcd51e..25a72e1 100644 --- a/source/docs/setup/index.markdown +++ b/source/docs/setup/index.markdown @@ -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 repository is named `your_username.github.com` or `your_organization.github.com`. +``` sh mkdir my_octopress_site cd my_octopress_site git init git remote add octopress git://github.com/imathis/octopress.git git pull octopress master - git remote add origin (your repository url) + git remote add origin your/repository/url git push origin master +``` - # Next, if you're using Github user or organization pages, - # Create a source branch and push to origin source. +Next, if you're using Github pages for users or organizations, create a source branch and push to origin source. + +``` sh git checkout -b source git push origin source - +``` Next, setup an [RVM](http://beginrescueend.com/) and install dependencies. +``` sh rvm rvmrc trust rvm reload bundle install +``` Install the default Octopress theme, +``` sh 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 »](/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/) diff --git a/source/docs/theme/index.markdown b/source/docs/theme/index.markdown new file mode 100644 index 0000000..451c10b --- /dev/null +++ b/source/docs/theme/index.markdown @@ -0,0 +1,17 @@ +--- +layout: page +title: "Theming & 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 »](/docs/updating) diff --git a/source/docs/theming/_colors.markdown b/source/docs/theme/styles/_colors.markdown similarity index 100% rename from source/docs/theming/_colors.markdown rename to source/docs/theme/styles/_colors.markdown diff --git a/source/docs/theming/_layout.markdown b/source/docs/theme/styles/_layout.markdown similarity index 100% rename from source/docs/theming/_layout.markdown rename to source/docs/theme/styles/_layout.markdown diff --git a/source/docs/theming/_styles.markdown b/source/docs/theme/styles/_styles.markdown similarity index 100% rename from source/docs/theming/_styles.markdown rename to source/docs/theme/styles/_styles.markdown diff --git a/source/docs/theme/styles/index.markdown b/source/docs/theme/styles/index.markdown new file mode 100644 index 0000000..cd24fff --- /dev/null +++ b/source/docs/theme/styles/index.markdown @@ -0,0 +1,16 @@ +--- +layout: page +title: "Styles" +date: 2011-08-01 19:11 +footer: false +sidebar: false +--- + +

Changing the Color Scheme

+{% render_partial docs/theming/styles/_colors.markdown %} + +

Changing the Layout

+{% render_partial docs/theming/styles/_layout.markdown %} + +

Overriding Styles

+{% render_partial docs/theming/styles/_styles.markdown %} diff --git a/source/docs/theming/_template.markdown b/source/docs/theme/template/index.markdown similarity index 76% rename from source/docs/theming/_template.markdown rename to source/docs/theme/template/index.markdown index 74ee2c9..1c64830 100644 --- a/source/docs/theming/_template.markdown +++ b/source/docs/theme/template/index.markdown @@ -1,12 +1,31 @@ +--- +layout: page +title: "Theming & 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. source/ _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 post/ # post metadata, sharing & comment partials _layouts/ # layouts for pages, posts & category archives +## Changing the <HEAD> + +If you want to add to the ``take a look at `/source/_includes/custom/head.html`. + +{% codeblock <HEAD> (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 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. @@ -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. -### Changing the <HEAD> +## Changing the Header, Navigation & Footer -If you want to add to the ``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 <HEAD> (source/_includes/custom/head.html) %} -{% render_partial ../.themes/classic/source/_includes/custom/head.html raw %} +### Changing the Header + +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 %} -Here you can easily change or remove the [Google Webfonts](http://google.com/webfonts), insert javascripts, etc. - ### 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) %} {% 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 %} {% 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. diff --git a/source/docs/theming/index.markdown b/source/docs/theming/index.markdown deleted file mode 100644 index e0ec667..0000000 --- a/source/docs/theming/index.markdown +++ /dev/null @@ -1,31 +0,0 @@ ---- -layout: page -title: "Theming & 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) - -

Customizing the Template

-{% render_partial docs/theming/_template.markdown %} - -

Changing the Color Scheme

-{% render_partial docs/theming/_colors.markdown %} - -

Changing the Layout

-{% render_partial docs/theming/_layout.markdown %} - -

Overriding Styles

-{% render_partial docs/theming/_styles.markdown %} - -Also see [Updating Your Blog »](/docs/updating) diff --git a/source/docs/updating/index.markdown b/source/docs/updating/index.markdown index 18f703c..df203bf 100644 --- a/source/docs/updating/index.markdown +++ b/source/docs/updating/index.markdown @@ -6,7 +6,7 @@ sidebar: false footer: false --- -[« Previous, Theming & Customization](/docs/theming) +[« 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, merging in updates isn't always what you want. As a result I've come up with the following pattern for Octopress: From 2f7ab55f9a06b21030b0d655f59a3f627bc3c3b1 Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Tue, 2 Aug 2011 00:40:38 -0400 Subject: [PATCH 4/7] added explaination to _config.yml for why pygments are turned off --- _config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index 056e2e3..0ff58c9 100644 --- a/_config.yml +++ b/_config.yml @@ -29,7 +29,7 @@ code_dir: downloads/code category_dir: blog/categories category_title_prefix: "Category: " markdown: rdiscount -pygments: false +pygments: false # default python pygments have been replaced by pygments.rb paginate: 10 # Posts per page on the blog index recent_posts: 5 # Posts in the sidebar Recent Posts section From d39ec5fffe92d7b9368918b281ec28d5a42231ba Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Tue, 2 Aug 2011 00:55:28 -0400 Subject: [PATCH 5/7] changed mdash to unicode character to help some users with encoding errors --- .themes/classic/sass/base/_typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.themes/classic/sass/base/_typography.scss b/.themes/classic/sass/base/_typography.scss index 69b9220..0540257 100644 --- a/.themes/classic/sass/base/_typography.scss +++ b/.themes/classic/sass/base/_typography.scss @@ -107,7 +107,7 @@ blockquote { cite { font-style: italic; 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) { padding-left: 1.5em; From d8d2649b7bfbbe9d828f995beeda0efcb1a1ff72 Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Tue, 2 Aug 2011 00:56:21 -0400 Subject: [PATCH 6/7] updated sass to latest Octopress --- sass/base/_typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss index 69b9220..0540257 100644 --- a/sass/base/_typography.scss +++ b/sass/base/_typography.scss @@ -107,7 +107,7 @@ blockquote { cite { font-style: italic; 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) { padding-left: 1.5em; From b536fcacf83a35b566c585add9f1ee0b6dde2d33 Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Tue, 2 Aug 2011 12:07:17 -0400 Subject: [PATCH 7/7] updated include paths for styles in theming docs --- source/docs/theme/styles/index.markdown | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/source/docs/theme/styles/index.markdown b/source/docs/theme/styles/index.markdown index cd24fff..c307d43 100644 --- a/source/docs/theme/styles/index.markdown +++ b/source/docs/theme/styles/index.markdown @@ -6,11 +6,11 @@ footer: false sidebar: false --- +

Overriding Styles

+{% render_partial docs/theme/styles/_styles.markdown %} +

Changing the Color Scheme

-{% render_partial docs/theming/styles/_colors.markdown %} +{% render_partial docs/theme/styles/_colors.markdown %}

Changing the Layout

-{% render_partial docs/theming/styles/_layout.markdown %} - -

Overriding Styles

-{% render_partial docs/theming/styles/_styles.markdown %} +{% render_partial docs/theme/styles/_layout.markdown %}