diff options
Diffstat (limited to 'theme-setup/index.md')
| -rw-r--r-- | theme-setup/index.md | 73 |
1 files changed, 22 insertions, 51 deletions
diff --git a/theme-setup/index.md b/theme-setup/index.md index c546119..43cb696 100644 --- a/theme-setup/index.md +++ b/theme-setup/index.md @@ -7,6 +7,7 @@ image: credit: dargadgetz creditlink: http://www.dargadgetz.com/ios-7-abstract-wallpaper-pack-for-iphone-5-and-ipod-touch-retina/ share: true +modified: 2016-06-01T15:14:43-04:00 --- General notes and suggestions for customizing **HPSTR**. @@ -45,17 +46,17 @@ The preferred method for running Jekyll is with `bundle exec`, but if you're wil > >However, this is unreliable and is the source of considerable pain. Even if it looks like it works, it may not work in the future or on another machine. -{% highlight text %} +```bash bundle exec jekyll build bundle exec jekyll serve -{% endhighlight %} +``` --- ## Folder Structure -{% highlight bash %} +```bash hpstr-jekyll-theme/ ├── _includes | ├── browser-upgrade.html # prompt to upgrade browser on < IE8 @@ -82,7 +83,7 @@ hpstr-jekyll-theme/ ├── posts/ # all posts ├── tags/ # all posts grouped by tag └── index.html # home page with pagination -{% endhighlight %} +``` --- @@ -94,17 +95,17 @@ Most of the variables found here are used in the .html files found in `_includes Create a [Disqus](http://disqus.com) account and change `disqus_shortname` in `_config.yml` to the Disqus *shortname* you just setup. By default comments appear on all post and pages if you assigned a shortname. To disable commenting on a post or page, add the following to its YAML Front Matter: -{% highlight yaml %} +```yaml comments: false -{% endhighlight %} +``` ### Social Share Links To disable Facebook, Twitter, and Google+ share links on a post or page, add the following to its front matter: -{% highlight yaml %} +```yaml share: false -{% endhighlight %} +``` ### Owner/Author Information @@ -118,45 +119,21 @@ Your Google Analytics ID goes here along with meta tags for [Google Webmaster To To add additional links in the drop down menu edit `_data/navigation.yml`. Use the following format to set the URL and title for as many links as you'd like. *External links will open in a new window.* -{% highlight yaml %} +```yaml - title: Portfolio url: /portfolio/ - title: Made Mistakes url: http://mademistakes.com -{% endhighlight %} +``` --- -## Adding New Content with Octopress +## Adding New Content -While completely optional, I've included Octopress and some starter templates to automate the creation of new posts and pages. To take advantage of it start by installing the [Octopress](https://github.com/octopress/octopress) gem if it isn't already. +Posts are stored in the `_posts` directory and named according to the `YEAR-MONTH-DAY-title.MARKUP` format as per [the usual](https://jekyllrb.com/docs/posts/). -{% highlight bash %} -$ gem install octopress -{% endhighlight %} - -### New Post - -Default command - -{% highlight bash %} -$ octopress new post "Post Title" -{% endhighlight %} - -Default works great if you want all your posts in one directory, but if you're like me and want to group them into subfolders like `/posts`, `/portfolio`, etc. Then this is the command for you. By specifying the DIR it will create a new post in that folder and populate the `categories:` YAML with the same value. - -{% highlight bash %} -$ octopress new post "New Portfolio Post Title" --dir portfolio -{% endhighlight %} - -### New Page - -To create a new page use the following command. - -{% highlight bash %} -$ octopress new page new-page/ -{% endhighlight %} +To streamline the creation of posts and pages, [Jekyll::Compose](https://github.com/jekyll/jekyll-compose) and [Octopress](https://github.com/octopress/octopress) are great plugins you can install to automate this process. --- @@ -174,27 +151,27 @@ A good rule of thumb is to keep feature images nice and wide so you don't push t The two layouts make the assumption that the feature images live in the *images* folder. To add a feature image to a post or page just include the filename in the front matter like so. -{% highlight yaml %} +```yaml image: feature: feature-image-filename.jpg thumb: thumbnail-image.jpg #keep it square 200x200 px is good -{% endhighlight %} +``` If you want to apply attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source. -{% highlight yaml %} +```yaml image: feature: feature-image-filename.jpg credit: Michael Rose #name of the person or site you want to credit creditlink: http://mademistakes.com #url to their site or licensing -{% endhighlight %} +``` By default the `<div>` containing feature images is set to have a minimum height of 400px with CSS. Anything taller is hidden with an `overflow: hidden` declaration. You can customize the height of the homepage feature image and those appearing on posts/pages by modifying the following variables in `/_sass/_variables.scss`. -{% highlight sass %} +```scss $feature-image-height: 400px; // min 150px recommended $front-page-feature-image-height: 400px; // min 150px recommended -{% endhighlight %} +``` #### Post/Page Thumbnails for OG and Twitter Cards @@ -208,12 +185,6 @@ Here's an example of what a tweet to your site could look like if you activate T Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/). -Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below: - -{% highlight html %} -<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe> -{% endhighlight %} - ### Twitter Cards Twitter cards make it possible to attach images and post summaries to Tweets that link to your content. Summary Card meta tags have been added to `head.html` to support this, you just need to [validate and apply your domain](https://dev.twitter.com/docs/cards) to turn it on. @@ -232,9 +203,9 @@ For example if you wanted a red background instead of white you'd change `$bodyc To modify the site's JavaScript files I setup a Grunt build script to lint/concatenate/minify all scripts into `scripts.min.js`. [Install Node.js](http://nodejs.org/), then [install Grunt](http://gruntjs.com/getting-started), and then finally install the dependencies for the theme contained in `package.json`: -{% highlight bash %} +```bash npm install -{% endhighlight %} +``` From the theme's root, use `grunt` to concatenate JavaScript files and optimize `.jpg`, `.png` and `.svg` files in the `images/` folder. |