blog

關於・について・Introduction

Welcome to Almace Scaffolding

amsf, a.k.a. Almace Scaffolding, a super-fast Jekyll framework, Supports live reloading (BrowserSync), LESS, HTML minification, inlined stylesheets and more. Available for Jekyll right now (will be available for more platforms in the future).

Getting Started

Go to the GitHub page for downloads, bug reports, and feature requests.

Features

  • A basic, fully configured Jekyll setup with well-defined Atom feed, sitemap, and Twitter Cards support
  • Almace Scaffolding ships a sleek responsive theme, a variant of sparanoid.com, looking great on any mordern browsers
  • Every minified page generates only one HTTP request 1
  • Minimalism design, No jQuery, no everybody-shake-ur-body.js
  • Ideal for personal blog, portfolio, product blog and Tumblr-like link blog
  • (Maybe) the first template that uses viewport relative units
  • Tons of configurable settings for your posts and site customization
  • Handcrafted stylesheets. No Bootstrap or other bloated frameworks are used, unminified CSS < 12 KB
  • Predefined LESS variables make it easier to change color schemes for different posts
  • Default stylesheets for Pygments code highlighting
  • Redcarpet as Markdown renderer, tables, footnotes, GFM, smart quotes are supported
  • Built with Grunt.js for easy development
  • No Internet Explorer support

  1. Only when your posts don’t have fancy sliders or other external media files. 

Getting Started

Quick Start

  1. Fork or clone the repo: git clone git@github.com:sparanoid/almace-scaffolding.git.
  2. Install dependencies with Ruby gem bundler and Node.js package manager npm: bundle install && npm install.
  3. Copy _config.init.yml to _config.yml as your default configuration file.
  4. Run grunt serve.

So in short for geeks:

$ git clone git@github.com:sparanoid/almace-scaffolding.git
$ bundle install && npm install
$ cp _config.init.yml _config.yml
$ grunt serve

Download

Go to the GitHub repository for downloads, bug reports, and feature requests.

Upgrading

Upgrading templates is hard, it will be easy if you are’re a casual blogger and keep every template file untouched. Just copy and paste all template files in _assets, _includes, and _layouts. If you change the templates directly, you have to compare them side to side.

Customizing

  • All custom settings can be configured at _config.yml (a copy of _config.init.yml you just duplicated since your first setup), it’s well commented so you should really check it out.
  • Additional variables are stored in ./_app/_data/ directory. They can be accessed by Jekyll. (More info)
  • Customize your site’s look and fell by changing ./_app/assets/_less/custom.less.
  • Use your custom JavaScript snippets (Google Analytics, Typekit, etc.) in ./_app/_includes/js.html.
  • You should also change favicon.ico and apple-touch-icon.png to yours.
  • You can add Travis support for this project, simplly rename .travis.init.yml to .travis.yml.
  • Some tasks in Gruntfile.coffee are not used in this project, they’re copied from my own website, I’ll keep them untouched in case you need these.

Managing Media

Media files are located in /_app/assets/ and grouped by different formats:

  • _js/: JavaScript files, put all needed sctipts in this directoy will just work fine. All files in this directory will be automatically uglified and copied into js/. I don’t expect to have many scripts so no complex “vender”, “lib”, or other fancy structures used for this project.
  • _less/: LESS stylesheets, the leading underscore makes sure this directory is excluded from Jekyll generated site.
  • css/: CSS and its sourcemap files generated from LESS, it’s gitignored.
  • font/: Web fonts
  • img/: Image assets, images used by template, personally I don’t recommend put post images here, use a CDN instead.
  • svg/: The same as img/.

Advanced Usages

Tips

Other Notes

  • _config.yml is git ignored from .git/info/exclude file

Markup Example

Lorem lean startup ipsum product market fit customer development acquihire technical cofounder. User engagement A/B testing shrink a market venture capital pitch deck. Social bookmarking group buying crowded market pivot onboarding freemium prototype ping pong. Early stage disruptive ecosystem community outreach dynamic location based strategic investor.

Two days ago the Chinese website Taobao held a discount promotion to celebrate what’s known as “double sticks day” in China. In a single 24hr period, they conducted 19bn RMB (US$3.06bn) of business.

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

Good afterble constanoon, this sweet hongi is as bung as a stuffed morepork. Mean while, in the marae, Dr Ropata and Hairy Maclary from Donaldson’s Dairy were up to no good with a bunch of bloody troties.

Inline HTML elements

HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.

  • To bold text, use <strong>.
  • To italicize text, use <em>.
  • Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase.
  • Citations, like — Tunghsiao Liu & Mark otto, should use <cite>.
  • Deleted text should use <del> and inserted text should use <ins>.
  • Superscript text uses <sup> and subscript text uses <sub>.

Most of these elements are styled by browsers with few modifications on our part.

Maui and his rough as guts piece of pounamu, what a stink buzz. Bro, quater-acre patches are really naff good with bung mates, aye. You have no idea how beached as our random kais were aye. Every time I see those beautiful lengths of number 8 wire it’s like Castle Hill all over again aye, do you happen to have a bucket or a hose bro?

Code Highlighting

Code highlighting demo, powered by Pygments. More info about code highlighting can be found at Jekyll’s documentation.

def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
/* Background color function */
.code-bg (@v) when (lightness(@v) >= 50%) {
  @return-bg: mix(#000, lighten(@v, 30%), 10%);
}
.code-bg (@v) when (lightness(@v) < 50%) {
  @return-bg: mix(#fff, darken(@v, 10%), 70%);
}

H2 Headings

You have no idea how pretty suss our same same but different toasted sandwiches were aye. Every time I see those carked it keas it’s like the dairy all over again aye, you don’t know his story, bro. Anyway, Hairy Maclary from Donaldson’s Dairy is just Mrs Falani in disguise, to find the true meaning of life, one must start frying up with the hangi, mate. After the rugby ball is jumped the ditch, you add all the stink girl guide biscuits to the trotie you’ve got yourself a meal.

H3 Headings

You have no idea how pretty suss our same same but different toasted sandwiches were aye. Every time I see those carked it keas it’s like the dairy all over again aye, you don’t know his story, bro. Anyway, Hairy Maclary from Donaldson’s Dairy is just Mrs Falani in disguise, to find the true meaning of life, one must start frying up with the hangi, mate. After the rugby ball is jumped the ditch, you add all the stink girl guide biscuits to the trotie you’ve got yourself a meal.

H4 Headings

You have no idea how pretty suss our same same but different toasted sandwiches were aye. Every time I see those carked it keas it’s like the dairy all over again aye, you don’t know his story, bro. Anyway, Hairy Maclary from Donaldson’s Dairy is just Mrs Falani in disguise, to find the true meaning of life, one must start frying up with the hangi, mate. After the rugby ball is jumped the ditch, you add all the stink girl guide biscuits to the trotie you’ve got yourself a meal.

H5 Headings

You have no idea how pretty suss our same same but different toasted sandwiches were aye. Every time I see those carked it keas it’s like the dairy all over again aye, you don’t know his story, bro. Anyway, Hairy Maclary from Donaldson’s Dairy is just Mrs Falani in disguise, to find the true meaning of life, one must start frying up with the hangi, mate. After the rugby ball is jumped the ditch, you add all the stink girl guide biscuits to the trotie you’ve got yourself a meal.

H6 Headings

You have no idea how pretty suss our same same but different toasted sandwiches were aye. Every time I see those carked it keas it’s like the dairy all over again aye, you don’t know his story, bro. Anyway, Hairy Maclary from Donaldson’s Dairy is just Mrs Falani in disguise, to find the true meaning of life, one must start frying up with the hangi, mate. After the rugby ball is jumped the ditch, you add all the stink girl guide biscuits to the trotie you’ve got yourself a meal.

## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 Heading

Tables

Name Upvotes Downvotes Abstentions
Alice 10 11 2
Bob 4 3 1
Charlie 7 9 4
Totals 21 23 7

Gists via GitHub Pages

Use the gist tag to easily embed a GitHub Gist onto your site. This works with public or secret gists:

Custom HTML Markups

.note, .store, and .download

A paragraph block with a thin border line.

Usage

<p class=download>
  <a href="https://github.com/sparanoid/sparanoid.com/">Download</a> it from GitHub
</p>

<p class=store>
  Love this plugin? please consider <a href="{{ site.profile.donate }}">buying me a cup of coffee.</a>
</p>

Please note that you can’t apply CSS classes in Markdown, so you have to use HTML markup.

Example

Download it from GitHub

Love this plugin? please consider buying me a cup of coffee.

.largetype

Make normal paragraph text large enough.

Usage

<p class=largetype>
  <a href="{{ site.profile.donate }}">PayPal</a>
</p>

Please note that you can’t apply CSS classes in Markdown, so you have to use HTML markup.

Example

PayPal

.browser

A simple browser frame using pure CSS.

Usage

<p class=browser>
  <img src="http://sparanoid.com/photo.jpg" alt="Image">
</p>

Please note that you can’t apply CSS classes in Markdown, so you have to use HTML markup.

Example

Delicious Preview

intense.js

A simple library by Tim Holman to view large images up close using simple mouse interaction, and the full screen.

Usage

Add the folloing setting to your post front-matter field:

plugin: intense

Markdown markup:

![Image](http://sparanoid.com/photo.jpg)

Or simply use HTML:

<p>
  <img src="http://sparanoid.com/photo.jpg" alt="Image">
</p>

intense.js is activated globally by default, if you want to disable this effect for specific image, you can simply apply .nointense CSS class to your <img>:

<p>
  <img src="http://sparanoid.com/photo.jpg" class="nointense" alt="Image">
</p>

Please note that if you’re using HTML markup, you should wrap your images into a <p> container.

Example

Moonstruck Princess Extended - Red

Custom Color Scheme

This is an example how to change your post color scheme for specific posts. You can simply add the folloing variables to your post front-matter field:

scheme-text: "#0029ff"
scheme-link: "#ff00b4"
scheme-hover: "#ff00b4"
scheme-code: "#ad00ff"
scheme-bg: "#00ebff"

You can also ignore other variables if you only want to change the background:

scheme-bg: "#00ebff"

Unique Post Styling via Custom CSS

This is an example how to change your post styling via CSS. You can simply add the css option to your post front-matter field:

scheme-text: "rgba(100, 16, 0, .5)"
scheme-code: "#fff"
css: |
  body {
    font-size: 3vw; /* This scales up the whole page */
    background-image: linear-gradient(to bottom, #fff500, #ff8f00);
  }

SVG Post Ttile

This is an example of custom post title using SVG image. You can simply add the folloing setting to your post front-matter field:

svg-headline: svg/kai.svg
svg-headline-width: 400
svg-headline-height: 86

Image defined for svg-headline should be stored at _app/_includes/svg/, you can simply keep these title images under Git control, they will be smooshed into the HTML pages using Grunt.js in production environment. The svg-headline-width and svg-headline-height can be omitted if you have correct dimensions for your images.

There’s also an option for common raster images, but please note that these files should be stored at where you define site.file.

img-headline: imouto-logo-large.png
img-headline-width: 500

Pro Tips: Keep a <title> tag for your SVG can help Safari generate correct post title for its Reader mode:

<svg xmlns="http://www.w3.org/2000/svg" width="2175" height="465" viewBox="0 0 2175 465">
<title>Kai Series</title>
…

External Link Post

This is an example of Tumblr-like external link post. You can simply add the folloing setting to your post front-matter field:

link: http://sparanoid.com/

GitHub Pages Setup Guide

The Problem

Unfortunately this project doesn’t work with GitHub Pages or GitHub Pages for projects. There’re some factors that prevent it from generating pages:

  • Many features Almace Scaffolding provides like live reloading, LESS support, inline SVG, and HTML minification are implemented using Grunt.js, it’s not supported by GitHub Pages.
  • Almace Scaffolding uses the latest pre-release Jekyll, so not all features are supported by GitHub Pages renderers.
  • GItHub Pages build server overwrites the source settings. This prevent it generating pages from current file structure.

The Solution

I know this can be tricky and more verbose than uploading your Jekyll site directly to your repository. However GitHub Pages support static HTML pages, a workaround solution for using Almace Scaffolding on GitHub Pages is treating your Jekyll site as static pages:

  • Build your site locally (grunt build).
  • Upload Jekyll generateed static files to your username.github.io repository.

If you’d like to keep all things under Git control, you can try the following file structure:

├── _amsf/ (Almace Scaffolding source code)
├── *.html (Jekyll-generated static pages)
└── README.md (your own readme)

You can see this live demo how to make them friends.