►
Description
In this video, Tina Lise Ng and Tyler Williams set up Middleman and NetlifyCMS to try and edit an entry in https://about.gitlab.com
0:00 Start Middleman and NetlifyCMS
16:40 Technical difficulties with NetlifyCMS
23:22 Manually editing the YML file
From 00:00-16:39, you'll find information on starting Middleman and NetlifyCMS in tandem using the OSX terminal, built in. It assumes you've already installed the dependencies listed in the project README: https://gitlab.com/gitlab-com/www-gitlab-com
At 16:40, some technical difficulties happened and the task doesn't get completed.
At 23:22 Tina and Tyler walk through some of the underlying data files. If you're curious about what's happening under the hood with NetlifyCMS and the data, this portion of the video will be instructive, even though the task does not get completed.
Part 2 (coming soon, as of 2021-01-13) will be a shorter video with the final result of an edited page. We will add a link to this video when it's ready.
A
B
A
A
B
And
you
would
do
local
development
is
going
to
be
the
most
useful,
so
it's
that
first
heading
there
or
second
heading,
and
so
this
has
sort
of
the
setup
which
I
do.
We
won't
go
through
this
today,
because
you're
already
set
up
and
it
would
be
a
bit
of
shuffling,
but
this
is
you
know
if,
if
someone's
watching
this
and
they
haven't
yet
set
this
up,
these
are
some
prerequisites
to
get
where
we
are
today.
But
I
think
a
lot
of
folks
do
have
this
already
set
up.
B
So
hopefully
this
will
be
useful
for
most
people
and
we
can
do
additional
troubleshooting
in
a
different
video
or
one-on-one
and
there's
some
documentation
about
how
to
get
here.
So
I
just
wanted
to
point
that
out
first
and
then,
if
you
scroll
down
in
this
document,
this
has
those
commands
and
tina.
I
know
you've
got
like
a
like
useful
yeah.
B
A
B
Utilities
folder
console
terminal
there
you
go
excellent
cool,
and
so
this
is
a
command
line,
terminal
console
people,
use
interchangeable
things
and
then
from
here.
This
is
where
so,
where
it
says
like
in
these
documentations,
where
it's
like
run
this
command.
This
is
where
this
is,
where
you
run
commands,
and
another
important
thing
too
is
like
so
this
terminal
is
like
your
finder
window,
so
much
like
how
there's
multiple
folders
and
you
had
to
move
from
the
applications
folder
to
the
utilities
folder
to
get
to
this
program.
B
B
B
Cool
yeah
and
so
we're
changing
directory.
That's
what
cd
stands
for
at
the
beginning
there,
and
then
now
we
are
in
the
repository
on
tina's
macbook.
So
from
here
we
can
start
like
really
doing
the
commands
in
the
readme
most
of
the
documentation
in
the
project
like
assumes
that
you've
got
a
terminal
and
that
the
terminal
is
like
in
the
project
cool.
So
first
thing
in
this
terminal
window.
A
B
A
B
B
B
Sweet
awesome
and
yeah
we're
behind
so
now
you
can
type
get
pulled
to
get
the
local
it'll
take
a
minute
and
for
folks
who
are
unfamiliar
with
like
what
we're
doing
and
what
we
just
did
so
like
the
git
version,
control
uses
branches
to
basically
track
like
different
subs
different
sets
of
changes
to
the
code
base
with
netlify
cms.
We
haven't
changed
how
the
website
is
built.
B
Everything
is
still
done
in
the
repository,
and
so
it's
all
still
like
in
code
and
version
controlled,
and
so
when
we
make
these
content
changes,
we're
still
going
to
make
them
the
way
that
you
may
have
manually
done
in
terms
of
like
git
branching.
So
we're
gonna
check
out
a
new
branch
for
these
changes.
B
B
B
B
Cool
okay,
so
now
we're
on
a
local
branch
called
body
updates,
ci
cd.
This
is
on
tina's
computer,
it's
not
up
in
the
cloud
yet
and
because
we
just
checked
it
out
from
the
master
branch
right
now.
It
just
looks
exactly
the
same
as
the
version
of
the
master
branch
that
we
pulled.
Nothing
is
different,
so
we're
starting
from
that
point,
and
so
now,
with
everything,
pulled
we're
on
a
new
branch.
We
can
get
started
getting
things
fired
up.
B
A
B
B
B
A
A
B
Awesome
middleman
takes
a
little
bit
to
start
up,
so
that's
just
gonna
take
do
its
thing
and
take
time
and
then
the
next
thing
we
can
do
while
we
wait.
So
the
cool
thing
in
terminal
here
is:
you
can
actually
do
like
multiple
tabs
just
like
in
a
browser.
So
you
can
do.
I
think
you
can
even
do
command
t
if
you
want
to
do
new
tab.
B
That
might
be
my
thing.
Yep
there
you
go
yeah.
So
just
like
your
browser,
you
can
do
new
windows
too,
if
you
prefer
to
like
spread
them
out
and
stuff
and
then
the
thing
here
and
you'll
notice.
If
you
look
on
the
second
line
of
this
terminal
where
it
says,
or
it's
got
like
your
username
and
then
it
has
that
little
tilde
right,
it's
like
the
second
last
character.
B
B
B
B
B
A
B
Cms.Md
click
that
so
this
has
the
instructions,
and
we
will
make
this.
I
think
we're
gonna
have
a
handbook
entry.
Eventually,
it
will
be
part
of
this
documentation
right
now,
this
lives
here
and
then
this
has
the
instructions
that
you're
going
to
need
to
do
so.
This
is
the
second
step,
so
the
first
thing
we
did
was
in
one
terminal
window
and
once
in
one
terminal
in
the
marketing
sites
we
set
up
middleman.
B
B
Sweet
this
one
is
much
faster
than
the
middleman.
It
is
doing
far
fewer
things
and
now
and
they've
got
the
link.
We've
got
the
link
there,
the
localhost
four
five,
six,
seven,
slash
admin
and
that's
where
you
can
go
and
that
will
get
us
to
the
netlify
cms
admin
panel
on
your
local.
So
if
you
new
tab
in
your
browser.
A
B
B
The
middleman
server
is
like
serving
up
your
local
instance
of
the
website,
the
netlify
cms
proxy
server.
Basically,
what
it
does
is,
like
all
the
nullify,
cms
stuff
gets
run
through
this
thing,
and
so,
when
you
go
to
this
web
web
address,
the
localhost
4567
slash
admin.
It
has
to
like
fire
off
a
bunch
of
netlify
code.
The
netlify
code
is
just
getting
served
up
by
this
proxy
server
and
as
long
as
both
of
those
things
are
running,
it'll
work.
B
A
A
B
B
This
will
take
you
where
you're
going
people
might
get
tripped
up
on
that
I'll,
make
sure
to
make
a
note
of
it,
and
I
think
it
won't
be
a
problem
in
some
instances,
but
it's
just
something
to
know
that
that
does
matter
sometimes
especially
locally,
but
this
is
the
same
place.
So
here
we
are
so
that's
the
setup
that
gets
you
there.
We
should
maybe
even
bookmark
this
moment
in
the
like
this
segment
of
like
getting
started
right
in
the
video
yeah.
B
B
Will
you
in
the
search
bar
in
like
the
collections
there?
Oh
yeah,
okay,
try
try
all
collections
if
you,
okay,
that's
not
doing
what
I
thought
it
would
do.
This
may
be
part
of
this
configuration
thing.
Let
I'm
gonna
I've
got
a
local
copy
of
master
I'm.
Actually.
This
is
really
good.
So,
like
I
know
some
wires
were
crossed
in
some
of
the
setup
on
netflix
cms.
B
That's
the
video
that
lauren
and
I
did
yesterday,
but
I
want
to
show
folks
like
why
and
where,
and
that
might
give
people
a
sense
of
what's
going
on
so
in
your
finder
window.
Let's
do
this
a
little
visually
cool.
So
if
you
wouldn't
mind
going
to
this
going
to
this
directory
that
we're
in
to
the
get
lab
repo.
B
A
B
B
B
B
B
You
know
we
haven't
swapped
out
anything
in
the
website
like
we
don't
have
a
we're
not
doing
like
database
driven
content
stuff
here,
like
you,
might
expect
in
like
wordpress,
where
the
cms
like
talks
to
a
database
like
updates
fields
on
a
server
somewhere.
It's
still
just
the
file
based
config,
and
I
know
where
our
ci
cd
gamo
file
is.
So
if
you
go
further
to
the
left,
another
column
over
one
more
one,
more
one
more
sorry,
I
always
forget
how
nested
we
are.
It
is
in
the
root
here.
B
So
in
data,
this
data
folder
there
is
a
topics-
folder
yup
topic.
I
think
it's
just
topic.
This
folder
there
yep
and
there
is
your
ci
cd
dot,
yaml
file,
and
so,
if
you
open
this
up,
if
you
open
this
up
in
your
text,
editor
yeah.
So
you
can
see
these.
This
is
the
content
and
then,
if
you
wouldn't
mind
going
on
your
local
host
installation,
I
still
want
to
just
like
demo,
where
this
stuff
is
happening.
B
B
There
we
go
so
this
is
where
this
is.
This
is
like
what
it
is
right
now
and
if
you
open
up
your
text,
editor
like
side
by
side.
I
just
want
to
show
folks
that,
like
this
is
where
the
stuff
is,
and
so
where
are
we
yeah,
so
you
can
see
title
that
the
title
matches
up
so
everything
in
this
ammo
file
is
here-
and
I
know
this
is
familiar
to
a
lot
of
folks
who
are
already
like
editing
content.
B
B
A
A
And
there's
not
a
lot
of
updates
and
I
think
one
of
them
we
can't
do
anyways
sure.
So
the
first
thing
is
just
to
update
this
subtitle.
So
currently
it's
the
site
title
here,
learn
how
get
labs
continuous
integration
and
continuous
delivery
business
not
which
is
displayed
here
just
needs
to
be
updated
to
this
new
piece
of
text.
Do
I
just
copy
it
in
here.
A
B
A
B
A
B
A
A
B
B
B
A
B
B
And
that's
not
the
worst
thing
about
me:
I'm
a
follible
human
and
then
hit
enter.
Let's
give
it
a
space
there,
okay,
excellent
and
then
cool.
Let's
look
at
yeah,
so
this
image,
so
the
other
change
here
is
moving
the
image
down
my
best
understanding.
So
if
you
look
at,
you
can
go
into
your
text
file
here.
This
yml
file
scroll
up
to
the
oh
you're
at
the
top.
Can
you
scroll
down.
B
B
If
you
look
in
the
browser
where
that
image
is
unlike
it,
so
the
thing
that
is
happening
here
is
we,
like
we
haven't
the
page
as
it
is
right
now
doesn't
have
like
an
image
tag
at
the
top,
and
you
can
see
that
if
you
scroll
up
in
the
ammo
block
in
that
body
field
that
we
just
edited,
there's
no
image
here
right,
there's
nothing
that
says
like
image
and
then
has
like
a
link
to
it.
This
is
part
of
the
template,
like
the
location
of
the
image,
is
part
of
the
template.
B
So
if
we
wanted
to
move
that
down,
we
would
have
to
do
one
of
a
couple
things
either
we'd
have
to
modify
the
template
so
that
it
was
extensible
and
we
could
change
the
position
of
it
or
there's.
I
don't
know
if
this
is
wired
up
and
it
would
be
something
to
double
check.
We
could
always
remove
this
as
the
like
featured
image
and
then
insert
it
in
like
the
markdown
editor
at
the
bottom.
B
Netlify
cms,
one
of
the
things
that's
happening
is
we
have
these
templates
and
they
are
like
designed
to
like
render
out
a
certain
set
of
content
and
the
way
that
netlify
cms
works
with
our
templates.
Is
we
build
out
the
templates
and
we
basically
like
connect
netlify
cms
with
our
templates
and
we
say:
hey
netlify
cms,
we
have
a
featured
image
and
the
featured
image
looks
like
this.
B
It
goes
above
the
body
and
then
we
tell
netlive
cms,
I'm
going
to
give
you
like
a
path
to
that
image,
and
then
I
want
you
to
render
it
out
in
the
template.
We
have
not
configured
netify
cms
to
say,
hey,
this
featured
image
might
go
above
or
below
the
body
copy
right
now.
I
think
we've
just
hard
coded
it
to
be
above
and
that's
part
of
the
trade-off
of
like
you
know
we
can
do.
We
can
get
more
content
changes
out
faster.
B
A
B
B
B
And
like
this
was
the
thing
like
we
did
a
bunch
of
templating
and
like
our
workflow
was
like
we'll
make
a
template,
try
to
use
it
to
the
best
of
like
what
your
use
case
is
and
then,
if
it
doesn't
meet
your
use
case
like
let
us
know
and
like
we
can
either
extend
it
or
we
can
talk
about
like.
Should
we
extend
it?
Can
we
extend
it,
etc?
B
So
I
think
it's
like
work
with
the
constraints
we
have
to
begin
and
then
file
the
issues
and
do
the
like
gitlab
values,
small
iteration,
stuff,
so
well
cool.
So
if
you
save
this
file,
so
just
command
s
okay
saved
and
then,
if
you
I
just
if
you
wouldn't
mind
clicking
into
the
terminal
and
the
other
tab
with
middleman
running,
so
you
can
see
it's
running
again.
B
It's
like
doing
the
rebuild,
so
it's
going
to
rebuild,
we'll
wait
for
it
to
rebuild,
and
then
we
can
check
to
see
the
changes
here
which
we
should
be
able
to
see
and
yeah.
So
this
was
this
was
the
manual
editing?
It
is
not
the
netlify
cms,
but
it
it
is.
You
know
like,
I
think
this
is
really
good
at
illustrating,
like
netlify
cms,
doesn't
change
how
the
stuff
works
under
like
we
haven't
like
changed,
where
the
content
is
or
how
it
is.
A
B
Yeah,
absolutely,
and
also,
if
you
find
yourself
stuck
in
netlify
cms
and
like
there's,
always
a
possibility
that,
like
if
the
underlying
file
data
is
like
weird
and
wonky,
netify
cms
might
not
be
able
to
read
it
and
understand
it
correctly.
So
if
you
have
a
bug,
that's
like
doesn't
that's
like
nellify
cms
is
not
being
helpful
to
you
can't
hurt
to
go
look
at
the
file
and
like
go,
find
the
thing
and
see
like
oh,
like
something
got.
B
Weirdly
formatted
right
like
because
it's
possible
that
because
people
can
still
like
go
change
this
stuff
and
like
push
it
up
through
a
merge
request
and
if
something
slips
through
a
crack
like
it
might
make,
it
might
render
netlify
cms
power
powerless
to
understand
the
file.
So
that
might
be
a
troubleshooting
place
to
start.
If
you're
feeling
comfortable
with
it.
B
B
B
B
B
B
B
This
commit
will
end
up
in
the
mr
and
the
mr
can
be
more
descriptive.
These
commit
messages
are
meant,
are
really
meant
to
be
short
and
sweet.
Yep
end
it
with
a
double
quote:
hit
enter
cool
okay.
So
now
we've
taken
these
changes:
we've
added
them
to
staging
or
we've
added
them
to
the
git
staging
environment,
not
a
staging
website.
B
We've
committed
them
to
our
branch,
which
is
this
body,
update
cicd
branch,
we're
now
going
to
push
the
branch
up
to
the
origin,
which
is
like
the
gitlab
repository
up
in
the
cloud
and
from
there
we
can
do
all
the
mr
stuff
and
things
will
start
to
like
sort
of
gel
and
come
together
in
the
tools.
So
here's
what
we're
gonna
do
we're
gonna
do
git
push
so
git
space
push
the.
So
we
are
on
a
branch
that
only
your
computer
knows
about.
B
B
B
A
B
This
will
give
you
an
error,
so
this
will
give
you
so
the
nice
thing
is
it's
really
hard
to
make
a
mistake
here
without
get
giving
you
some
helpful
information.
So
if
you
do,
if
you
like,
don't
remember
that
commander,
like
you
forget
to
do
that,
you
can
just
do
what
they
tell
you
to
do
the
dash.
U
that
I
said,
is
a
shorthand
for
this
dash
dash
set
upstream,
so
you
can
do
either
one
but
yeah
the
perfect
origin
body
updates.