►
Description
As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub
Slinkity is now available as an early alpha! No, it's not ready for production use. But if you want to have some fun and don't mind logging bugs, head to the quick start guide.
@bdougie interviews Ben Holmes to learn how Slinkity combines SSG with Vite.
https://slinkity.dev/docs/quick-start/
0:00 - Start
0:53 - Slinkity DEMO
3:40 - Live reload
8:30 - Insert React components
10:11 - Shortcodes
19:40 - Rebuilding the Jamstack Conf
Thanks!
Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github
About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com
B
Yeah,
absolutely
so,
I'm
ben
I'm
a
full
stack
developer
that
mostly
focuses
on
front
end
and
ui
stuff
working
at
peloton.
Right
now,
and
now,
I'm
mostly
focusing
on
this
user
interface
for
the
most
part,
and
also
working
on
my
first
open
source
foray
messing
around
with
crazy
new
bundlers
static
site
generation.
All
this
jam
stack
buzzwords.
I
guess
in
this
project
called
slinkety
which
is
sort
of,
I
guess
the
best
explanation
I
have
of
it.
B
If
you've
heard
of
astro,
it's
a
way
to
bring
all
the
capabilities
of
astro
to
your
existing
11d
site.
If
it's
switching
over
awesome
and
yes,
I
use
microsoft
edge
to
anyone
who's
going
to
ask
about
the
microsoft
logo
but
yeah.
So
I
have
a
basic
well.
I
have
basically
an
empty
directory
here
and
I
should
zoom
in
looking
at
that
feed.
B
So
all
I've
done
in
this
sort
of
empty
directory
is
I've
set
up
a
source
folder
which
is
going
to
contain
my
website
and
an
empty
includes
folder.
I
haven't
done
anything
in
there
yet
and
a
little
bit
of
config.
All
this
is
doing
is
saying
my
app
exists
inside
of
source.
Go
find
that
when
you
run
this
using
11d
because
by
default
11,
he
doesn't
even
care
what
your
input
folder
is.
You
can
choose
anything.
You
want
yeah,
it's
just
kind
of
nice
to
have
a
source,
so
it
doesn't
try
to
process
your
readme.
B
So
all
you
need
to
do
is
make
sure
you
have
11d
in
the
project
already
and
we
recommend
the
beta
and
then
just
install
slinky
alongside
it,
and
I
recently
put
out
a
feature
that
I'm
going
to
demo
here.
It's
not
merged
yet
because
we're
failing
some
tests,
but
I
trust
it
won't
break
on
us
for
this
demo
because
I
tried
it
once
before,
but
I
also
want
to
like
shout
out.
If
you
didn't
know
this,
you
can
install
a
github
branch
as
an
npm
package.
A
B
I
just
went
to
like
my
github
repo
pound
symbol,
the
name
of
the
branch,
and
now
I
can
do
it.
So
if
you
want
to
like
a
quick
test
of
reviewing
someone's
pr,
you
can
just
install
their
branch,
which
I
will
do
here,
but
if
you're
using
the
stable
version
of
slinky,
you
would
just
install
slinky,
of
course
got
it.
Oh
yeah,
which
is
an
alpha
by
the
way
I'll
add
that
disclaimer
but
yeah.
Now
we
have
slinky
and
11d
side
by
side
and
all
you
have
to
do
to
start
up.
B
A
dev
server
is
instead
of
running
11d.
You
can
run
slinkity
and
it
accepts
all
of
the
same
flags
that
11d
does.
So.
If
you
use
the
quiet
flag
incremental,
build
serve,
you
use
all
of
the
same
flags,
it's
just
to
find
and
replace
of
your
usages
of
11d.
It
even
starts
browser
sync
in
a
similar
way
to
what
11d
does.
So.
If
I
head
over
here,
it's
an
empty
directory.
There
is
nothing
happening
on
my
site
right
now,
but
all
I
have
to
do
in
order
to
make
things
appear
is
just
start
creating
files.
B
So
something
11d
is
great
at
is
just
processing
any
template
language.
You
could
want
like
here,
I've
just
added
a
markdown
file,
and
now
this
route
exists
it's
blank,
but
it
exists
with
live
reloading
as
well.
So
I
could
just
say
hello
world
over
here.
Save
it
and
we
see
hello
world,
no
additional
setup
or
additional
plugins
for
markdown.
It
just
knows
how
to
process
it,
and
then
from
here
I
can
just
add
more
text.
B
B
B
Okay,
so
we
have
a
hello
world.
We
haven't
done
much
to
it.
Yet
next
thing
that
I
can
sort
of
show
off
and
I'm
still
just
showing
11
new
features
by
the
way
I
haven't
done
anything,
but
I
can
just
add,
like
a
title
that
says
hello,
world
and
maybe
a
layout
as
well-
that
we
can
get
to
in
a
moment,
but
front
matter
is
what
this
is.
It's
basically
metadata
for
the
pages
on
your
site.
B
So
right
now
the
word
title
is
accessible
both
inside
of
the
template,
so
I
can
use
these
little
curlies
to
go,
grab
it
or
title
and
that'll
insert
it,
and
it's
also
accessible
to
a
bunch
of
other
pages
on
your
site.
It's
kind
of
this
globally
available
thing
that
people
can
grab
for,
and
one
thing
that
can
grab
for
those
is
a
layout.
B
So
if
I
want
to
add
a
wrapper
to
this,
I
can
use
the
bang
abbreviation
by
the
way,
if
you've
never
tried
that
in
vs
code,
it's
very
cool
but
layouts
can
access
front
matter
as
well.
So
this
layout,
that's
going
to
wrap
around
my
markdown
file,
can
access
title
and
put
it
into
like
my
browser
title
and
then
it
can
access
the
content
which
is
similar
to
like
react,
children
or
something
and
then
put
it
on
the
page
and
then
to
sort
of
snap
the
lego
bricks
together.
B
I
say:
please
use
this
layout
and
oh,
why
did
I
call
this
layout?
I
called
it
index.
Let
me
call
it
layout
there.
We
are
oh
and
you
also
need
to
safely
insert
the
content
like
dangerously
setting
in
your
html
with
that
now
we've
wrapped
it
in
a
layout.
We
set
our
browser
title
and
then
we
have
like
a
basic
page
and
all
of
that
with
live
reloading
as
well.
I
guess
I'll
pause
here
for
any
initial
questions
before
I
jump
into
yeah
yeah.
A
For
the
the
the
gist
of
it,
if
anybody
sees
jekyll
if
you're
not
familiar
to
levity,
you're
kind
of
seeing
a
lot
of
the
simple,
similar
features,
I
think
what's
really
interesting
is
how
fast
that
that
refresh
is
going
remind
me.
Are
you
running
a
a
node
server
to
and
there's
using
other
things
on,
the
hood.
B
A
A
A
B
Is
something
that
like
next
and
gatsby?
I
don't
think
they
support
it,
mostly
because
it
takes
a
while
to
reprocess
stuff,
but
because
v
only
reprocesses,
like
the
page
on
my
browser
right
now,
like
it's
not
going
to
reprocess
every
route
on
my
site,
it's
just
going
to
reprocess
this
one,
because
I
want
to
see
it.
It
can
just
like
server
render
all
of
your
components
and
any
other
javascript
resources.
You
have
and
immediately
show
you
the
output.
B
So
it's
like
it's
smart
because
it
only
refreshes
what
you're
looking
at,
which,
like
it's
crazy,
that
we
haven't
thought
of
that
until
now,
it's
like
that's
how
it
always
should
have
been.
We
can
just
listen
for
what
you
want
and
put
it
at
the
server
level
and
yeah.
I
guess
that's.
The
main
difference
of
v
is
veed.
Has
a
server
and
bundlers
like
webpack
and
rollup
do
not
control
the
server.
So
that's
why
it's
sort
of
been
like
that.
I
guess
but
yeah
we're
running
slinky
right
now.
B
B
I
guess,
and
then
you
have
to
install
react
and
react
dom
as
dependencies
in
order
for
v
to
actually
know
what
to
do
with
jsx
files,
and
then
you
can
just
insert
it
onto
the
page
using
this
short
code,
syntax,
which
I'll
explain
in
a
moment,
but
I'll
do
what
the
instructions
say
here.
First,
which
is
in
my
includes
folder,
which
by
the
way
includes,
is
kind
of
like
a
junk
drawer,
similar
to
like
the
components,
folder
and
next
or
gatsby
or
everyone.
B
I
guess
it's
like
a
just
a
grab
bag
that
everyone
can
import
from,
and
we
have
this
requirement
to
sort
of
nest,
components
within
it
and
we
will
be
dropping
this
requirement
soon,
but
for
now
you'll
need
to
make
a
nested
components
folder
and
put
any
component.
You
want
inside
of
here
like
this
counter
of
how
many
glasses
of
water
we've
had
today,
because
hydration
is
important,
indeed,
yeah
actually
yeah.
B
So
with
that,
we
can
install
react
and
react
dom
and
it
says
dev
dependencies
they
probably
shouldn't
be
because
they
are
used
in
the
client,
but
yeah
we've
installed
those
and
now
we're
free
to
restart
our
server
mpx
slinky.
Here
and
now
within
any
page
I
want,
I
could
add
my
component
to
my
layout
file.
I
could
add
to
my
markdown.
I
could
put
it
anywhere
I
want,
but
here
I'm
basically
going
to
like
rebuild
mdx,
no
need
to
install
mdx.
B
A
B
Yes,
this
is
one
of
the
short
codes
that
we
add
to
your
project
and
yeah
short
codes
are
already
a
concept
in
11d.
We
didn't
invent
them.
You
could
make
any
short
code.
You
want
it's
just
a
function
that
takes
in
arguments
like
the
path
to
a
component
and
then
returns
html
for
the
page,
which
I
can
actually
show
off
in
this
output
folder,
which
is
very
easy
to
read
inside
of
here.
B
It
generates,
if
I
word,
wrap
that
I
guess
it
generates
this
little
div
with
a
mount
point,
and
this
mount
point
is
where
our
component
is
going
to
mount
into
the
page
if
you've
ever
used,
create
react,
app,
a
div
with
an
id
of
main,
that's
what
you're
looking
at
here.
Basically,
but
now
we
have
an
id
because
you
could
have
multiple
roots
on
the
page.
I
could
insert
this
short
code
a
million
times
if
I
wanted
to
and
we
can
have
different
loaders
for
each
one.
B
So
it
just
kind
of
stubs
that
out
and
says
you're
going
to
need
to
server
render
that
before
sending
it
to
the
end
user,
because
they
don't
have
javascript,
they
should
see
something,
and
then
inside
of
here
it
inserts
a
script
as
well,
and
this
script
is
just
going
to
import
our
component
directly
and
vee
knows
what
to
do
with
jsx.
So
we're
going
to
tell
v
just
go
resolve
this
jsx
import
and
slot
it
into
one
of
our
loaders
that
loads.
This
component
resource
into
this
mount
point
on
the
page.
Create
react,
app
style.
B
B
A
A
That's
interesting,
but
also
really
cool
yeah,
and
now
I'm
racking
my
brain
on
all
these
use
cases
because,
like
what
I
built,
so
I
spent
a
lot
of
time
building
a
lot
of
marketing
sites.
I
say
marketing
sites
because
I
don't
know
if
the
distinction's
clear
for
folks
but
like
like,
if
you
go
from
netlify.com
to
app.netify.com,
like
the
netify.com,
is
the
marketing
site,
where
you
have.
A
A
A
Stream,
but
that
was
that's
a
website
we
build
every
year
we
rebuild
from
the
ground
up
so
like
if
we
did,
which
is
the
other
one
git
merge,
which
is
a
git
based
conference
that
involves
folks
who
work
on
get
it's
a
similar
site
like
we
should
be
able
to
rebuild
that
same
site
with
similar
components
and
just
sort
of
reskin.
It
right.
B
B
Yeah
exactly
keyword
naive
for
sure,
but
it's
got
all
sorts
of
features
that
actually
mirror
what
astro's
doing
a
lot.
I
was
curious
like
what
does
our
build
output
look
like
versus
an
astro
site
and
it's
very
similar
where
they
just
sort
of
insert
script
tags
that
load
into
mount
points?
Sort
of
like
creating
multiple,
create
react,
apps
on
the
same
page,
yeah.
B
We
still
see
everything
in
development-
it's
not
functional,
but
it
was
server
rendered
for
us
on
request.
So
we're
still
going
to
see
something,
even
if
we
don't
have
that
enabled
it
also
breaks,
live
reloading,
of
course,
to
disable
javascript,
but
that's
a
quick
way
to
sort
of
assert
that
server
side,
rendering
also
works
on
request.
That's.
A
Awesome
yeah,
so
I
mean
my
follow-up
questions
that
what
you
just
showed
is
how
can
folks
get
involved
in
slinkity?
You
mentioned
it's
only
you're
a
couple
months
in
four
months
into
this.
This
endeavor
it's
picking
up
a
bit
of
steam,
so
we
already
called
out
anthony
who's,
he's
helping
out
with
some
some
starter,
guys
and
templates
but
like
where
do
you
need
help
and
where
can
folks
jump
in.
B
If
you
really
want
to
get
involved
with
slinkity
core,
which
is
where
we're
looking
for
the
most
help
at
the
moment,
but
yeah
our
documentation
is
available
on
this
too.
So,
if
you're
more
of
a
css
person
and
want
to
get
involved
there,
just
get
involved
on
this
repo
with
that
so
yeah
check
it
out
and
the
contributing
guide
should
help
you
get
started
with
all
the
forums
and
all
of
the
sort
of
discourse
on
that
side,
cool.
A
A
A
Up
issues,
because,
if
you
don't
have
that
connection
to
while
the
project
is
small,
it's
a
great
opportunity
to
like
make
sure
you're
working
on
stuff
or
you're,
alerting
stuff.
That
has
value,
because
if
someone
I
joke
about
this
all
the
time
but
like
and
mainly
because
like
we're
in
hacktoberfest
last
year
in
hacktoberfest,
my
project
got
probably
four
or
five
prs
for
linters,
adding
a
linter
to
the
project,
which
is
a
it's
a
great
contribution.
But
I
got
five
contributions
for
everybody:
adding
a
linter
project
which
exactly.
A
B
A
B
We
have
two
servers
running
believe
it's
on
81,
yes,
so
this
is
something
that's
sort
of
presented
as
like
a
little
demo
of
how
you
could
set
things
up,
but
this
is
sort
of
more
involved
where
you
have
a
few
static
assets
like
a
logo
and
your
heading
and
a
bulleted
list
of
information.
You
don't
want
to
ship
javascript
for
this
stuff.
It
wouldn't
really
make
sense.
B
You
have
like
an
image
carousel
using
reach
ui,
and
you
want
to
reach
for
that
dependency,
throw
it
in
there
make
sure
it's
accessible
with
keyboard,
animations
or
keyboard
focus,
yeah,
sure
yeah.
So
all
of
that
and
it's
nice
to
reach
for
a
library
for
that,
instead
of
like
wild
westing,
some
plain
javascript
because,
like
if
you're
using
something
like
11d,
you
might
be
tempted
to
just
to
go
playing
with
it,
but
having
components
is
really
nice.
So
the
way
this
guy's
set
up
is
it's
literally
just
an
html
file
here.
B
B
It's
going
to
reach
for
all
of
the
talks
that
I
have
built
out
as
routes,
and
it's
going
to
insert
that
as
a
prop.
So
this
is
reaching
for
the
collections.talks.
If
you
haven't
heard
of
110
collections,
it's
like
a
way
to
aggregate
a
bunch
of
information
about
routes
on
your
site,
like
in
my
talks
folder.
I
have
a
little
metadata
for
every
talk
that
is
just
explaining
the
speakers,
the
picture
in
the
title
and
using
a
collection
which
I've
applied
here
using
this
tag
called
talks.
B
I'm
able
to
generate
an
array
out
of
all
of
these
pieces
of
metadata,
so
every
page
turns
into
an
entry
with
speakers
and
title
and
picture
as
keys
on
that
entry.
So,
instead
of
having
to
like
have
a
global
data
object
that
you
sort
of
aggregate
out,
you
can
do
it
at
the
route
level
and
then
all
of
these
exist
as
pages.
So
I
can
link
to
them
directly
and
I
didn't
have
to
build
anything
out
for
like
react,
router
and
all
of
that.
B
It
was
easier
to
set
up
than
I
thought,
and
you
can
also
see
here
like
you-
can
just
insert
images
like
this,
because
liquid
syntax
is
so
easy.
You
can
just
do
that
and
then
I
sort
of
like
icing
on
the
cake.
I
thought
well,
if
you
get
to
the
bottom
of
a
page
about
this,
maybe
you
want
to
learn
more
about
other
talks,
so
you
can
easily
like
make
another
layout
that
inserts
that
image,
carousel
and
then
lazily
loads
it.
A
B
It
gives
you
a
lot
of
flexibility
if
you
have
those
like
existing
libraries
of
components
sitting
around
and
you
just
want
to
throw
it
into
something
simple
yeah
with
the
option
to
like
use
view
and
spell
as
well
like.
If
you
wanted
to
try
out
a
svelt
component
for
one
page,
you
could
just
insert
a
sphelp
component
and
there
it
is,
may
not
be
the
most
efficient
thing,
but
you
can
totally
do
it.
Yeah.
B
A
A
B
A
B
Yeah
and
like
going
to
jam
sac
conf,
like
I
didn't,
expect
for
everyone
to
sort
of
be
talking
about
the
same
thing,
that's
kind
of
how
it
was
like
everyone
became
fascinated
with
partial
hydration
around
the
same
time,
and
it
was
like
rich
harris's
talk
on
transitional
apps,
where
it's
like.
I
don't
want
to
just
use
like
a
really
heavy
like
blitz
or
redwood,
to
build
a
conference
site,
but
I
also
don't
want
to
just
use
a
site
and
then
regret
it
later
when
I
need
some
interaction
like
it's.
A
spectrum
of
needs.
B
A
tool
that
can
sort
of
like
go
along
that
spectrum
and
tools
like
this
and
astro
like
they're
limited
in
that
they're,
not
single
page
apps.
You
can't
have
like
a
react
context
and
a
user
object
everywhere.
You
can
use
local
storage,
but
that
gets
like
hairy.
So
it's
like
there's
some
pieces
that
are
like.
Well,
I
guess
you
still
need
next
in
the
story
somewhere
just
for
that
heavy
stuff.
I
know
svelte
kids
being
very
interesting
about
what
they're
doing
but
yeah.
B
A
Yeah
awesome
well,
this
is
this
has
been
super
enlightening
in
the
conversation.
Well,
I
almost
lost
the
entire
stream.
I
think
we're
still
up.
Okay
yeah,
I
I
wouldn't
know
but
yeah
it
blacked
out
for
a
second,
but
I
just
wanted
really
just
thank
you
for
your
time
and
I
never
called
out.
I
know
we
had
people
in
the
chat
asking
about
the
whiteboard,
but
I
just
wanted
to
ask:
did
we.
B
We
cover
every
talking
point
I've
been
going
through
my
head.
We
talked
about
elevenian,
deet
lebanese,
getting
started
for
sure,
go
to
the
quick
start
guide
over
on
the
slinky
docs
core
features
of
partial
hydration.
We
talked
that
to
death
and
how
can
I
contribute
definitely
go
find
the
contributing
md
file
that
I
totally
didn't
whip
up.
B
30
minutes
before
this
call,
so
there
are
typos,
I'm
sorry
but
took
some
notes
from
like
how
redwood
does
docs
and
I
think,
redwood's
kind
of
like
the
gold
standard
from
what
I
was
looking
at
like
they.
They
really
help
you
out.
They
even
have
something
for
like
trying
out
the
framework
on
a
local
project
and
having
it
live.
Reload
changes
as
you
edit,
the
core.
It's
like
wow.
B
A
Excellent
well,
I'm
since
we
basically
cleared
the
board
at
this
point,
ben
thanks,
so
much
for
your
time.
Folks
like
and
subscribe
to
this
content,
if
you're
interested
in
hearing
more
about
open
source
projects
and
maintainers
and
their
stories
and
where
you
can
contribute,
we
do
this
every
friday,
as
opposed
to
actually
not
next
friday,
but
the
friday
after
this
is
a
weird
month,
because
we've
got
github
universe,
which
I
did
want
to
also
shout.