Repository files navigation

pixyll.com

Pixyll is a simple, beautiful theme for Jekyll that emphasizes content rather than aesthetic fluff. It's mobilefirst, fluidly responsive, and delightfully lightweight.

It's pretty minimal, but leverages large type and drastic contrast to make a statement, on all devices.

This Jekyll theme was crafted with <3 byJohn Otander(@4lpine).

中文版https://github.com/ee0703/pixyll-zh-cn.

If you're completely new to Jekyll, I recommend checking out the documentation athttp://jekyllrb.com or there's a tutorial bySmashing Magazine.

$ git clone git@github.com:johnotander/pixyll.git$ cd pixyll$ gem install bundler # If you don't have bundler installed$ bundle install

It's important to also check your version of Jekyll since this project uses Native Sass whichisonly supported by 2.0+.

Fork the repo, and then clone it so you've got the code locally.

The_config.yml located in the root of the Pixyll directory contains all of the configuration detailsfor the Jekyll site. The defaults are:

# Site settingstitle:Pixyllemail:your_email@example.comauthor:John Otanderdescription:"A simple, beautiful theme for Jekyll that emphasizes content rather than aesthetic fluff."baseurl:""url:"http://pixyll.com"# Build settingsmarkdown:kramdownpermalink:prettypaginate:3

Then, start the Jekyll Server. I always like to give the--watch option so it updates the generated HTML when I make changes.

$ jekyll serve --watch

Now you can navigate tolocalhost:4000 in your browser to see the site.

You can host your Jekyll site for free with Github Pages.Click here for more information.

In addition to your github-username.github.io repo that maps to the root url, you can serve up sites by using a gh-pages branch for other repos so they're available at github-username.github.io/repo-name.

This will require you to modify the_config.yml like so:

# Site settingstitle:Repo Nameemail:your_email@example.comauthor:John Otanderdescription:"Repo description"baseurl:"/repo-name"url:"http://github-username.github.io"# Build settingsmarkdown:kramdownpermalink:prettypaginate:3

This will ensure that the the correct relative path is constructed for your assets and posts. Also, in order to run the project locally, you will need to specify the blank string for the baseurl:$ jekyll serve --baseurl ''.

You will also need to tweak the header include/{{ site.baseurl }}:

<headerclass="site-header px2 px-responsive"><divclass="mt2 wrap"><divclass="measure"><ahref="{{ site.url }}/{{ site.baseurl }}">{{ site.title }}</a><navclass="site-nav right">        {% include navigation.html %}</nav></div></div></header>

A relevant Jekyll Github Issue:jekyll/jekyll#332

The contact form useshttp://formspree.io. It will require you to fill the form out and submit it once, before going live, to confirm your email.

More setup instructions and advanced options can be found athttp://formspree.io

To configure Disqus, set up aDisqus site with the same name as your site. Then, in_config.yml, edit thedisqus_shortname value to enable Disqus.

All variables can be found in the_sass/_variables.scss file, toggle these as you'd like to change the look and feel of Pixyll.

If you would like to add afade-in-down effect, you can addanimated: true to your_config.yml.

AnchorJS:A JavaScript utility for adding deep anchor links to existing page content. AnchorJS is lightweight, accessible, and has no dependencies. You can turn it on by togglingenable_anchorjs. Because it offers many ways for customization, tweaks should be done in_includes/footer.html. Default settings after turning AnchorJS on are:

<script>anchors.options.visible='always';anchors.add('article h2, article h3, article h4, article h5, article h6');</script>

Seedocumentation for more options.

If you want to give credit to the Pixyll theme with a link tohttp://pixyll.com or my personal websitehttp://johnotander.com somewhere, that'd be awesome. No worries if you don't.

You can measure visits to your website either by usingGoogle Analytics tracking embed or the more advancedGoogle Tag Manager container.

• For Google Analytics set up the value forgoogle_analytics, it should be something likegoogle_analytics: UA-XXXXXXXX-X.
• For Google Tag Manager set up the value forgoogle_tag_manager, it should be something like:google_tag_manager: GTM-XXXXX.
• Do not set both of above methods because this will cause conflicts and skew your reporting data.
• Remember that you need to properly configure the GTM container in its admin panel if you want it to work. More info is available inGTM's docs.

Your website is, by default, set to be allowed for crawling and indexing by search engines. (Unless you made yourself a custom robots.txt file). You can use front matter settings on each page to control how search engines will it. Sometimes you may want to exclude a particular page from indexing or forbid Google to store a copy of your page in its cache. It is up to you. Use themeta_robots frontmatter key and assign values based onthis table. Some examples:

# exclude page from indexmeta_robots:noindex# allow indexing, disallow cachingmeta_robots:noarchive# allow indexing, disallow crawling linksmeta_robots:nofollow# disallow indexing, follow linksmeta_robots:noindex,follow

In order to get more information about your website's status in search engines, you can register it inGoogle Search Console and/orBing Webmaster Tools. Both these tools will ask you to authorize your website with them and there are couple of ways to do that. Pixyll supports verification via meta tags - just fill in values forgoogle_verification and/orbing_verification in_config.yml, the verification strings and meta tags will then be added automatically.

If search engine optimization is your thing, you can also set upmeta_description values for each page/post. By default Pixyll usessummary to populate the<meta name="description" content="..."> tag and falls back todescription from_config.yml ifsummary is not present in page/post's front matter. Thesummary is also used for generating Open Graph tags. Why would you want to use a dedicated variable for meta description? Because character limit to properly display this description in search results (as a snippet) is way smaller than in Open Graph. It is recommended to keep it at 155-160 characters, for more in-depth info readthis article.

And lastly - if you happen to write in language other than English be sure to changeog_locale in_config.yml to reflect it.

I hope you enjoy using Pixyll. If you encounter any issues, please feel free to let me know by creating anissue. I'd love to help.

Pixyll is always being improved by its users, so sometimes one may need to upgrade.

Ifgit remote -v doesn't have an upstream listed, you can do the following to add it:

git remote add upstream https://github.com/johnotander/pixyll.git

git pull upstream master

There may be merge conflicts, so be sure to fix the files that git lists if they occur. That's it!

• BASSCSS
• Jekyll
• Refills
• Solarized
• Animate.css

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request