Rogue VHS

About

2026-03-03T11:51:06Z

Intro to Jumpstart

This jumpstart is intended to be just enough to be a functional site/blog using 11ty, and also to introduce essential 11ty features.

Review the "Quick Start" on the home page for how to get this starter up and running for your project.

Colophon

Hi, I'm Stephanie Eckles - @5t3ph on Twitter, Github, CodePen, and DEV. You may know me as the author of ModernCSS.dev or the creator of StyleStage.dev. I can also be found on egghead as an instructor.

Check out my extended collection of Eleventy resources available on 11ty.Rocks!

Global Site Data and .env

As noted in the Quick Start, there are global site data variables in src/_data/meta.json.

Those include:

url - should remain unchanged, reads from the single expected .env value of URL
siteName - your "brand" if you will, appended to the <title> tag, shown in the sitenav, displayed in the "hero" for the home layout, in the footer by the copyright, and as the identifier throughout the RSS feed
siteDescription - used in the "description" meta tag, and below the siteName on the home layout
authorName - Used in the RSS feed, intended to be your full name
twitterUsername - without the "@", this value is used for the Twitter meta tags, and for the URL of the icon link in the footer

.env

See .env-sample for the single expected value of URL which should be set to your localhost. The sample uses the default 11ty port, so you can simply rename the file to .env if you haven't changed the port.

The URL value is then available via the global data described previously, and can be used in templates with meta.url. You can see this used for the RSS feed and sitemap to create the absolute URLs.

Template Languages Used

Page templates are created as Nunjucks (.njk), and feature are added that expect Markdown for most page content.

The home page - src/index.njk - is set to process first as Markdown followed by Nunjucks. This allows mixing HTML with Markdown, with benefits being code syntax highlighting and ability to include classes on HTML elements. This functionality is provided by the templateEngineOverride: md, njk in the frontmatter.

Review the list of available templating languages in the 11ty docs.

Layout Hierarchy and Features

There are two layouts and one partial included.

New in v1.1.0 - layouts are customized to be located in src/_layouts.

_layouts/base.njk includes the standard HTML boilerplate including meta and "og" tags in <head>.
_layouts/page.njk includes the sitenav.njk partial and chains up to base

The src/index.njk template chains to the base layout and includes a loop that will create "cards" for everything in collections.pages.

Expected Frontmatter

There are only two fields expected:

title - essentially required, by default is used in the page <title>, and in the layout "hero".
description - optional, by default appears below the title for the page template and is used as for the "description" meta tag.

If you want typed front matter, consider my plugin for collection schemas

Permalink Style

The default setup expects content - using any template language - within pages/.

The pages.json in that directory includes a permalink setting so that the file name is used directly to prevent 'pages' being the base of the URL.

You can override permalinks per file.

Asset Handling

In the .eleventy.js config, there are included "pass-throughs" for an img/ directory as well as favicon.png.

You can replace the included favicon, and create an img directory or remove the addPassthroughCopy if you do not have need of images.

Creating an img directory and keeping the pass-through directive will make images available at /img/[image-file-path] relative to the site root.

Linting

A prettier config is included, with the only update being printWidth: 100.

As of v2.0.0, stylelint was removed.

Sass Framework

Review the styling documentation for the included minimal Sass framework, particularly the theme variables, to quickly customize the starter.

The only notable differences are:

sitenav - adjust the styles for the navigation header that appears on pages
rvhs-anchor - styles for the # anchor that appears next to page headings (or turn that feature off) can be adjusted in sass/_utilities
Additional article-scoped styling for typography as it appears on pages
A theme for the prism syntax highlighting for code blocks. You can adjust or replace the theme in sass/_prism.

Additionally, the Sass in this starter is processed using LightningCSS by way of my plugin: @11tyrocks/eleventy-plugin-sass-lightningcss. This affords you access to some super modern CSS features, if you choose to use them.

Fonts

The default font is Baloo 2 and is locally hosted with files in fonts/. If you swap to a different font, be sure to remove the font files as well as the @font-face rules at the top of sass/_fonts.scss, and update the $rvhs-font-family Sass variable.

Anchor Links

Anchor links next to headings throughout Markdown content are generated by an add-on plugin for markdownIt.

This feature can be adjusted or removed in the .eleventy.js config file.

Generated Features

Sitemap

A sitemap.xml is generated from all available content.

To exclude non-page or non-public content from the sitemap, include eleventyExcludeFromCollections: true in frontmatter, or create a custom filter.

RSS Feed

An RSS feed is included, and output at [siteurl]/feed/feed.xml.

If publishing from Netlify, the included netlify.toml file will create a redirect so that the feed becomes available at [siteurl]/feed.

Prism Syntax Highlighting

Syntax highlighting of inline or code blocks found within Markdown content is provided by Prism via @11ty/eleventy-plugin-syntaxhighlight.

You can change the theme used in sass/_prism.scss.

Or, remove the plugin if you are not in need of code highlighting.

.eleventy.js Config Features

Overrides

Input directory: src
Output directory: public
Layout directory: _layouts

Also, markdownLibrary is extended to add the markdownItAnchor plugin for anchor links.

Shortcode: `year`

Returns the current YYYY year, used by the footer copyright.

Filter: `slug`

Makes the default slug function more strict to ensure things like excluding emojis and enforcing lowercase.

VSCode Tips

Nunjucks

If you haven't previously worked with Nunjucks, you will want a syntax highlighting extension: Nunjucks

In addition, you may want to ensure Emmet works on .njk files by updating/adding the following in the settings.json:

"emmet.includeLanguages": {
	"nunjucks": "html",
},

Formatting

As noted previously, a prettier config is included, and you may want to get the Prettier extension and update your VSCode settings to "Format on Save".

However, to format template files Prettier doesn't recognize like .njk, you can update the "Language Mode" on the currently open file from "Nunjucks" (or other current templating language) to "HTML" to allow formatting to be applied. Then, flip it back to re-allow the syntax highlighting if needed.

This is located in the VSCode bottom toolbar near the right-hand side and will display the value of the current file's detected language. Click the name to open the selector.

Blog

2026-03-03T11:51:06Z

Coming soon.

First Post

View all posts

Let’s do this.

2026-03-03T11:51:06Z

Below you’ll find details and pricing. If you have any questions, let me know.

Music Production Coaching

Application only — enquire for pricing

This is not generic tuition. I work with intermediate synthwave producers who can finish tracks, but know their sound isn’t fully there yet.

If your music feels close but not competitive, if your tracks lack cohesion, or if you’ve invested in courses that gave you information but not transformation — this is where we fix that.

Our work is focused on defining your artistic standard, identifying the exact bottlenecks in your sound, and closing the final gap between “almost” and release-ready. The goal is to build a cohesive catalogue you’re proud to attach your name to.

I specialise in FL Studio, but the principles apply across any DAW. Book your introductory call here.

⭐ “Starting from zero, I released my first Spotify single within months of mentorship.” — Pratev
⭐ “From beginner to producing full tracks ready for Spotify in under a year.” — Harry
⭐ “Exceptional mentorship — I released my first track within months.” — Tom
⭐ “Jed identifies exactly what you need to improve and gets straight to the heart of it.” — Hugo
⭐ “Super informative mentorship. My tracks already sound better.” — ORBITA

Contact me to get started

Mix/Master

£400

On top of providing a professional mix and master for your next release, I'll also include a 30-minute video detailing my process, and submission to my 100k+ follower playlist network.

⭐ “Jed combines high-level engineering skill with strong artistic intuition" - Darkest
⭐ “You completely transformed the soundscape — this is outstanding work.” — Dr. Chrispy
⭐ “A game-changing experience. The final mix sounded tight, professional, and balanced.” — Voidforce
⭐ “His mixes elevated my music to its full potential. My go-to for professional results.” — Francois Smith
⭐ “My tracks now hit harder and stand up to modern release standards; thank you!” — ORBITA

Contact me to get started

Artist Mentorship

Contact for pricing

We'll delve into the art of crafting a unique brand identity and navigating the ever-evolving landscape of online growth. Whether you're an emerging talent seeking to establish your presence or an experienced artist aiming to elevate your online impact, my mentorship is designed to provide strategic insights and hands-on guidance. Book a call here.

Contact me to get started

Rogue VHS Official Remix

£700

Each track is a meticulously crafted masterpiece. Head to my Spotify to check out the wealth of remixes I have completed over the years. Contact me to get started

Rogue VHS Official Collab

£850

When you invest in an official collaboration, it's not just about adding a track to your repertoire; you'll be considered for my carefully curated playlists and gain visibility across all my online platforms, including Spotify and Instagram. Elevate your musical presence and embrace the opportunity to collaborate – join me in crafting an exceptional sonic experience that resonate with audiences worldwide. (This package includes one 90-minute live call).

Contact me to get started

Merch

2026-03-03T11:51:06Z

Coming soon!

My Music

2026-03-03T11:51:06Z

Rogue VHS is an independent electronic music composer/producer who brings a unique blend of old-school analog sound and modern production to the scene. Inspired by the sounds of the 80s and 90s, Rogue VHS combines elements of synthwave, chillsynth and cyberpunk to create a truly distinctive and nostalgia-driven sound.

Originally from Hastings UK, Rogue VHS grew up immersed in video-game music. He began experimenting with electronic music production at the age of 14, and now uses his wide musical vocabulary to create layered compositions that capture the spirit of the analog era.

Whether you're a fan of synth-heavy instrumentals, soaring melodies, or are more of a raver, Rogue VHS has something for you. This is the soundtrack to your dreams.

Follow me on Spotify

Services.

2026-03-03T11:51:06Z

Personalised music production mentorship designed to develop your skills, sound, and creative confidence. Lessons are tailored to your experience level, covering songwriting, composition, production, sound selection, mixing, and release strategy. Whether you're starting out or refining an established workflow, each session is built around your goals.

Alongside coaching, I offer professional mixing, mastering, remixing, and collaborative production services. Every project receives detailed attention to sonic clarity, emotional impact, and artistic identity. Develop your craft, finish stronger records, and build a sound that stands out.

Rogue VHS

About

Intro to Jumpstart#

Colophon#

Jump to:#

Global Site Data and .env#

.env#

Template Languages Used#

Layout Hierarchy and Features#

Expected Frontmatter#

Permalink Style#

Asset Handling#

Linting#

Sass Framework#

Fonts#

Anchor Links#

Generated Features#

Sitemap#

RSS Feed#

Prism Syntax Highlighting#

.eleventy.js Config Features#

Overrides#

Shortcode: year#

Filter: slug#

VSCode Tips#

Nunjucks#

Formatting#

Blog

Let’s do this.

Music Production Coaching

Mix/Master

Artist Mentorship

Rogue VHS Official Remix

Rogue VHS Official Collab

Merch

My Music

Services.

Music production coaching

Mix / Master

Artist mentorship

Rogue VHS official remix

Rogue VHS official collab

Intro to Jumpstart

Colophon

Jump to:

Global Site Data and .env

.env

Template Languages Used

Layout Hierarchy and Features

Expected Frontmatter

Permalink Style

Asset Handling

Linting

Sass Framework

Fonts

Anchor Links

Generated Features

Sitemap

RSS Feed

Prism Syntax Highlighting

.eleventy.js Config Features

Overrides

Shortcode: `year`

Filter: `slug`

VSCode Tips

Nunjucks

Formatting

Mix /
Master