Get up and running with a minimal Jekyll site scaffold

Jekyll is one of the most straightforward and joyful tools I use for building websites. Quoted from the project itself, “Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites.” Though it first launched in late 2008, I find that it's still a viable and elegant solution for most marketing sites and blogs. Content takes a center stage with a gentle but indispensable abstraction on top of writing HTML—file organization and Liquid templating. This lowers the bar to entry for new web developers, finding relief from the looming pressure of large JS frameworks creating technical debt and build tools that obfuscate the best part of the web: View Page Source. Jekyll Up is not a framework, but a personalized template I use as a starting point for client projects. It takes the power of Jekyll and elevates it with just enough boilerplate—tooling and ecosystem recommendations—to launch an amazing product. To sum up my love and reasoning for using Jekyll:

• Minimal enhancements to web standards
• Lower bar to entry
• Predictable output
• Faster, more secure, and self host-able
• Sufficient for most marketing sites and blogs
• Adaptable to any CMS
• Built on Ruby <3

Happy hacking, friends!

1. Ruby, version 2.7.0 or higher
2. Jekyll Ruby gem
3. Node.js for npm, version 10.24.1 or higher

1. Clone or use this template.

gh repo clone joshuawenning/jekyll-up

2. Install Jekyll.

gem install jekyll bundler

4. Install gems inside the jekyll-up directory.

bundle install

5. Install npm packages.

npm install

We use npm scripts for managing the Jekyll build, linting JavaScript, and deploying to GitHub Pages. Jekyll itself takes care of compiling our Sass and minifing both the HTML and CSS files.

npm start

npm run build

npm test

npm run deploy

For developing consistent code styles, Jekyll Up follows Code Guide created by @mdo, with two exceptions: HTML attributes and CSS property declarations are ordered alphabetically. The project has a sharable EditorConfig file for applying some of these preferences.

For JavaScript we use JavaScript Standard Style, which is installed by default with a simple npm script to lint main.js.

• Incorporate @layer CSS for base, component, and utility classes
• Add CSS grid layout utilities
• Potential: merge _spacing into _utilities
• Add npm script for removing unused CSS (useful for utility classes)
• Potential: add npm scripts for linting HTML and CSS
• Design a project logo
• Build header/footer components (proper doc setup)
• Create a favicon include
• Mention handling forms with Netlify
• Add deployment solution using GitHub Pages and Netlify
• Create docs for CMS adoption on Siteleaf
• Mention e-commerce integration with Snipcart