Blogging with Jekyll and Octopress in T-Minus 10 Minutes on Divshot
Are you a developer?
Are you ready to start that blog you’ve always told yourself you’d do?
It’s time to check off that New Year’s Resolution and get started with Jekyll, a static website generator from the folks at GitHub. Jekyll is perfect for developers who prefer using text editors to get their work done. Write your blog posts in Markdown or HTML and then compile from the command line. Keep it all in version control to track your changes. It’s that easy. No PHP scripts, no backend, and no clunky interfaces.
When it comes to static web hosting you have plenty of options. So why host it on Divshot? Here’s some awesome reasons:
- Divshot has a powerful Command Line Interface so you can deploy your blog with a single command. It’s like a swiss army knife in the terminal.
- You don’t have to set up and configure CDN hosting yourself.
- You get Dev / Staging / Production environments out of the box with rollback support in case you screw something up.
- You can use clean URLs (no .html) without having to create folders in Jekyll.
- Your drafts and unfinished pages can remain in a private repository.
- You can take advantage of custom Jekyll plugins by building locally.
And if that didn’t convince you enough, we offer a completely free plan (no strings attached) so you can give it a shot to see if you like it.
Now I’m going to show you how to set up a Jekyll blog in less than ten minutes.
Open your terminal. You’ll need Git, Node.js, Ruby and RubyGems to get up and going. We're going to use Octopress, a framework on top of Jekyll that comes with a nice collection of themes and plugins. If you'd prefer to use vanilla Jekyll without any plugins, refer to our documentation.
git clone git://github.com/imathis/octopress.git blog cd blog
Now install the dependencies Octopress needs to work:
gem install bundler bundle install
Install the default Octopress theme:
Lastly, we need to set up the Divshot CLI and initialize a new Divshot app:
npm install -g divshot-cli divshot init
When asked, supply
public as the project's app directory.
At a minimum, you’ll want to set
author. I’d also set up Disqus and Google Analytics to get it out of the way.
While we’re in
_config.yml, let’s add divshot.json to our exclude list so it doesn’t get compiled. This can go underneath the
Jekyll & Plugins section:
exclude: - divshot.json
Still following along? Here's what your
_config.yml might look like:
# ----------------------- # # Main Configs # # ----------------------- # url: http://your-app-name.divshot.io title: My Octopress Blog subtitle: A blogging framework for hackers. author: Your Name simple_search: https://www.google.com/search description: This blog was built with Octopress/Jekyll and hosted on Divshot! # Default date format is "ordinal" (resulting in "July 22nd 2007") # You can customize the format as defined in # http://www.ruby-doc.org/core-1.9.2/Time.html#method-i-strftime # Additionally, %o will give you the ordinal representation of the day date_format: "ordinal" # RSS / Email (optional) subscription links (change if using something like Feedburner) subscribe_rss: /atom.xml subscribe_email: # RSS feeds can list your email address if you like email: # ----------------------- # # Jekyll & Plugins # # ----------------------- # # If publishing to a subdirectory as in http://site.com/project set 'root: /project' root: / permalink: /blog/:year/:month/:day/:title/ source: source destination: public plugins: plugins code_dir: downloads/code category_dir: blog/categories markdown: rdiscount rdiscount: extensions: - autolink - footnotes - smart pygments: false # default python pygments have been replaced by pygments.rb exclude: - divshot.json paginate: 10 # Posts per page on the blog index pagination_dir: blog # Directory base for pagination URLs eg. /blog/page/2/ recent_posts: 5 # Posts in the sidebar Recent Posts section excerpt_link: "Read on →" # "Continue reading" link text at the bottom of excerpted articles titlecase: true # Converts page and post titles to titlecase # list each of the sidebar modules you want to include, in the order you want them to appear. # To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/custom_aside_name.html' default_asides: [asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html] # Each layout uses the default asides, but they can have their own asides instead. Simply uncomment the lines below # and add an array with the asides you want to use. # blog_index_asides: # post_asides: # page_asides: # ----------------------- # # 3rd Party Settings # # ----------------------- # # Github repositories github_user: github_repo_count: 0 github_show_profile_link: true github_skip_forks: true # Twitter twitter_user: twitter_tweet_button: true # Google +1 google_plus_one: false google_plus_one_size: medium # Google Plus Profile # Hidden: No visible button, just add author information to search results googleplus_user: googleplus_hidden: false # Pinboard pinboard_user: pinboard_count: 3 # Delicious delicious_user: delicious_count: 3 # Disqus Comments disqus_short_name: disqus_show_comment_count: false # Google Analytics google_analytics_tracking_id: # Facebook Like facebook_like: false
Write Your First Post
Octopress comes with some convenient Rake tasks we can use to quickly write a new blog post. If you'd like, you can also create a Markdown file in the
source/_posts directory. Just make sure you follow a format similar to
To create a new post, use the following task:
rake new_post["My Very First Blog Post"]
This will generate a Markdown file in
source/_posts. Open the file in a text editor and get to work! You'll notice a YAML front matter block at the very top. This allows you to fine-tune settings specifically for the blog post:
--- layout: post title: "My Very First Blog Post" date: 2014-04-18 13:19:07 -0700 comments: true categories: - Jekyll - Octopress - Divshot --- My blog post in Markdown. [Click here](http://daringfireball.net/projects/markdown/syntax) to learn more about Markdown syntax.
To simply compile your post into the
/public directory, run the
rake generate task. When you're writing and testing simultaneously, you'll want to run
rake watch with a local Divshot server. Since you already have the Divshot CLI installed, you're good to go:
rake watch & divshot server
This command will watch the
/sass directories for changes, recompile, and then serve up your static blog at
Deploy to Divshot
Let's get your blog up and running on Divshot. Since you already initialized a new app and presumably your
divshot.json file is configured correctly, you'll only need one line to deploy:
rake generate && divshot push
This will compile your project and deploy it to the
Development environment on Divshot.io. You can access your blog at
http://development.your-app-name.divshot.io. Once you're ready to go live on production, do this:
rake generate && divshot push production
Go check out your blog in action at
http://your-app-name.divshot.io. Click here to learn how to set up a custom domain.
This was a basic introduction to getting started with Jekyll and Octopress. If you'd like to learn about advanced Jekyll plugins and features, check out another one of my posts.