Death to the CMS Updateable Static Sites for NET Developers

all right we have Jay tower with us and
Jay is going to talk about death to the
CMS and that's gonna be interesting I
mean the CMS no ill will nothing
personal it's just business that's right
exactly
that's right whenever you're ready all
right let me go ahead and share my
screen here okay all right so yeah let's
talk about death to the CMS I hope
everyone's enjoying net comp 2019 so far
I know I am just enjoyed watching
Geoffrey Palermo about DevOps now we're
gonna talk a little bit about updatable
static sites for dotnet developers as
the guys mentioned my name is Jonathon
tower I go by Jay I'm a partner and a
principal consultant at trailhead
technology partners we're a Microsoft
Gold Partner we do a lot of custom
software application development and for
our clients so if anything we talk about
today or any of that stuff is something
interesting to you these are places you
can reach out to me online and I'd be
happy to connect about anything and down
at the bottom too I've got a github link
which I'll show again at the end of the
presentation where you can actually get
the slides for this presentation that
I'm showing right now all right so let's
jump into it what we're gonna talk about
we're gonna talk about what is a static
site generator why you might want to use
one of them I'm going to give you some
examples of a few different popular ones
both non dotnet technology ones and then
some of the more popular dotnet based
ones I've selected one of those which is
called ym that I'm going to do a few
demos in including some demos of the
command-line interface what it might
look like if you're developing a static
site on your local development
environment and then building off of
some of the things Jeffrey was just
talking about with Azure DevOps I've
created DevOps pipeline
which responds to some new code being
checked into a repository and runs a
static site generator builds that
content out to an azure to an azure blob
storage actually that's acting as a
website and then we'll wrap it up with
some further investigation topics if
you're interested in learning more about
this some some recommendations I can
make for where to do that and then
hopefully we'll have a little time for
for some Q&A at the end so we'll start
out with what is a static site generator
if you're not familiar with them already
it basically allows you to compromise
between a hand-coded static website and
a full-blown CMS if you're not familiar
with CMS's some popular ones out there
like WordPress it's a content management
system allows more non-technical users
to actually create content have that a
content go through potentially an
approval process and then have that
content eventually find its way out to a
live website static site generators
allow you to basically generate HTML and
CSS files from themes and template files
such as markdown for example they also
then allow you to transfer those files
to a web server and then have that
server basically doing what it's really
good at which is serving static files to
users that are requesting them so just
to kind of map that out a little bit
what that looks like a lot of us are
probably developers or web developers
and we're kind of used to what the
dynamic web application lifecycle looks
like so all of this happens at request
time a user is going to go make a
request to one of our sites or
applications if that's like CMS or if
it's a asp net core application that's
going to run some sort of an executable
on the server that executable is going
to go with some predefined templates
let's say maybe like razor pages in the
case of asp net core and maybe connect
to the database and get some additional
data basically merge that all together
and build it into a
response to go back to the user but all
at request time so all that processing
has to happen on the web server for each
request now when we're talking about a
static site that's been generated
there's kind of two different time
frames there's the compile time frame
and then the request time so let's look
at the compile time frame first you will
start with templates and content files
and you would run that at compile time
through a generator and that generator
would actually create your website as
static files in some sort of a folder
structure you can then take that set of
folders and files and upload them to
your web server and now when a user
requests at request time one of those
pages it's going to just be served from
the web server as a static file so why
would you want to use static sites
instead of the dynamic sites the dynamic
sites can kind of do all of that it
could be static it could be dynamic so
why would you want to limit yourself in
that way well main two reasons are
faster and cheaper so nothing for a web
server is faster than serving just a
static file as sort of a case study I
took a site recently that was running on
a CMS and I was getting about one and a
half to two and a half second response
times especially two and a half seconds
the first time someone would come to
that site I was able to just make that
same site static site and get those
response times down to like 250
milliseconds so definitely a order of
magnitude faster if you think about that
from your users experience perspective
that could be very significant
especially if they're moving from page
to page and seeing that that increase
repeatedly and then the second reason
nothing is cheaper so with that same
site I was paying about $40 a month to
host that and moved it over to an azure
blob storage which you can now set up as
web a public website and was able to get
actually a slight increase in the
traffic that that site was seeing and it
still went from that $40 a month price
to less than $1 a month just because
it's so much cheaper to host the static
files and serve those static files all
right so I want to review with you if
you haven't heard of static site
generators before I want to review some
of the more popular ones that are out
there first starting with the ones that
are not dotnet based you might have
heard of some of these if you're into
the space at all Jekyll is a very
popular one it's based in Ruby and it
uses a template language called liquid
there's another one called hex Oh which
is JavaScript or nodejs based and one of
its real strong points as you can see
here in this chart this table here is
that it uses all kinds of different
template formats so if you're interested
in flexibility that might be a good
option for you then moving on to Gatsby
if you're a react person if you like
react for your web UI framework for
JavaScript then you're gonna really love
Gatsby because it's using JavaScript as
its runtime and it's also using react
for its templating go is a popular
language right now that's really known
for being highly performant and Hugo is
cool because it uses go for both its
underlying technology and for the
templates that you build and then
finally Knox j/s is based on JavaScript
and node.js and if you're a vue.js
person if you like that for your
front-end your eyes and javascript you
would really love this because it uses a
view for its templates now switching
over to the dotnet world these are all
static site generators written in dotnet
first of all why am that one actually
uses razor syntax for its templates and
markdown as well so if you're familiar
with either of those that can be really
useful razor if you're not familiar with
it is the same technology asp.net MVC
uses for its pages as as well as razor
pages used for its UI views
then pretzel is also using liquid so if
you are interested in using the liquid
template but doing it on a dotnet
technology you can use pretzel graze
offers just razor and then there's
another one called iron beard as well
that's down that base which uses razor
and mark down like ym does now I'm gonna
focus from now on I'm gonna do some
demos I'm gonna show you guys why am i
picked that one to kind of delve down
into so let's jump into that we're gonna
start out with the demo of using ym as a
at the command line interface so I'll go
ahead and open my command line here and
to start out with I'll just make this a
little bigger for readability and I'm
just gonna do a directory listing you
can see there's actually nothing in this
directory right now now before the
session today I went ahead and installed
why I am just so that we didn't have to
wait for that but if you wanted to
install it yourself and you've got the
dotnet CLI installed already it's a
dotnet tool which means you can install
it using the.net command line so I could
do dotnet tool install - G which means
I'm installing it globally and do y MDOT
tool now if I do this right now you're
gonna see an error message that says
that that's already installed like I
mentioned so I don't need to do that
again but now with it installed I can
use the ym command and as a sub command
I'm going to start with the new sub
command and say I want to build a new
project in this directory and I'm going
to use the - our flag here to indicate
what recipe to use and specify blog as
the recipe type so recipe is kind of
like what type of website
am i building it's a blog website with
content pages the blog template is a
good one to use you could do an e-book
template or recipe there's also like an
online documentation recipe that you
could use and several others that you
can find online as well so if I go ahead
and run that we see the ym ASCII art
logo up here
then you can see it's detecting that
there's no input directory or a
configuration file that's creating both
of those downloading some new get
packages for ym to my global packages
folder and finally cleaning up a temp
folder that it used so if I do a
directory listing now we can see that
there are a couple things in this folder
there's a configuration file for ym and
there's also an input directory so if I
switch to that input directory you can
see a markdown file called about and
another directory called post so if we
switch into that and do a listing you
can see there's another markdown file
here called first post that markdown so
basically I've got a blog post a single
blog post in here and I've got a single
page called bout in this directory in
the input directory and that's basically
it
that's the input files that I would edit
or add to to create a ym based site now
if I want to actually build that site I
can use the ym command again the sub
command to build it is build or actually
the build sub command is the default so
if I'm just trying to do a build I don't
actually have to specify build I can
skip that now I'm going to specify again
that I want to use the recipe called
blog and this time I'm going to also
specify a theme which is the - T flag
now what a theme is is basically within
the blog style of site or blog type of
project I can have all kinds of
different themes and themes are like how
it visually looks what the layout of the
pages is what assets are included as far
as images and CSS or third-party
libraries so there's one that's built
into ym called clean blog and I'm going
to use that just as a starting point
here alright so I went ahead and ran
that build command you can see it's
actually locating my configuration file
looking for the new get packages and now
it's actually running through the build
steps through the build pipeline and if
I do a directory
listing again you see there's a bit more
in the folder now than there was before
including this output directory so if we
switch to the output directory and do a
listing I see what should look fairly
familiar to any of us web developers a
bunch of basic site root folder type of
files so I've got my about page
I've also got a post a posts folder and
if I change directory to that and look
you can see there's an index page in
there as well as a first post dot HTML
so I'm going to go back up to the ym
folder and I also want to open this up
in Visual Studio code a minute so you
can see a little bit of what's in these
files alright so if I look at the
configuration file it's basically it
looks like c-sharp code because it is
c-sharp code so I am able to set any
kind of global settings or configuration
here and then if we look at any of the
markdown files if you're familiar with
markdown these are gonna look pretty
familiar to you the only thing that's a
little different is above these three
dashes is sort of like the header for
this ym file I can specify some of the
metadata about this document or blog
post in this case like its title the
date that it's published and any tags I
want to include on that those are all
things that are defined by the recipe in
this case we're using the blog recipe so
title published and tags are all things
that the blog recipe knows how to handle
now if I go into the configuration I
want to change one setting in here so
I'm going to say settings and its keys
that link hide extensions and I want to
set that to false basically what this is
gonna do this is going to allow me to
view these to view this site on my local
development environment by making all of
the links from one page or one post to
another use the dot HTML extension at
the end
the names at the end of the paths so
that they'll work on my local
development environment alright so now
I'm going to tell why I am to build
again with blog recipe and the clean
blog theme and then when that finishes
running I can actually do a preview mode
where ym will open up a web browser for
me and I can do that I'm sorry web
server for me do that by doing
I am preview and you can see now the
output from this says I can go to
localhost 5080 I'm going to pull my web
browser over here and go to that and you
can see now that I get my page if I go
to the about page you can see that
that's working and if I go to the first
post that was defined you can see that
that has been created as well so this is
kind of nice handy to use for
development time to see how my site is
working when I generate it it would be
really nice if I could basically just
run that in the background to make
changes in visual studio code and have
it update automatically and I can do
that by just doing why am - preview I'm
sorry - watch - preview and now it's
going to actually watch that directory I
can make a change in the directory at
any time to any of the input files and
it's going to automatically update that
on this site so if I open that browser
back up again and go to the first post
for example now that it's running in
watch mode I can go edit this and change
the post to say hello world and save it
and now if I flip back over to the
browser without even refreshing you can
see it's already updated - hello world
alright so now I want to show you one
more thing which is how to integrate
static site building into a Azure devops
pipeline
some of the stuff that Jeffrey was just
showing us in Azure DevOps so if I pull
my a DevOps project over here I can show
you that I've got a repo set up and it's
got as you can see it's got a ym site in
it including the input so it's the same
basic template that we were just working
with and now if I go open that open that
in Visual Studio code so it's the same
code that we were just looking at
basically and I've also set up a build
pipeline to run ym and then a release
pipeline to copy the output folder of
that into an azure blob storage now
azure blob storage right now is up at
this static site here which if I just
refresh you can see if I click around
it's it's currently working so what I
want to do is I want to add a second
post to my site a second blog post so I
can easily do that here by just creating
a new folder in my new file in my posts
folder I'm going to call it second post
dot MD and then I've got some content
then I'm going to borrow here from
another file which is just some basic
some basic content that you might have
for markdown just basic markdown sample
file here basically okay now I'll save
that and if I go into my
choice you can see here that I've got a
change so I'm going to go ahead and
stage that change and then say I'm
adding a second post and push that into
my repo and while that's building while
that's pushing let me look at the actual
repo here which now if we look at the
build you can see that it's actually cue
to build to run with that add second
post and it's the trigger for it and if
I actually go in here I can actually see
as the agent spins up I can see what's
happening but I actually want to go to
the build definition a second so that I
can show you guys what that looks like
so it's really simple this is a sure
hosted agent which means that it's going
to be a potentially a new agent every
time if I hosted this on a server or
virtual machine that I owned I could
actually skip this first step which is
installing the ym tool this adds about a
minute to the build time so it would be
great if I could do this on my own
hosted agent that I am my own custom
agent that I hosted and I could skip
this step it would save me about a
minute the second step here is just
running ym so if you look at this
command this very similar command to
what we've just been running at the
command line interface and when it's
done I'm just publishing the output
directory into a drop folder an artifact
called drop so that I can grab that in
my release now if we look at the release
I'll show you the definition of that as
well so this is basically just going to
look for any changes that happen in my
static sites build anytime a build
completes and I've got it enabled for
the continuous deployment trigger
meaning any time that happens it's going
to constantly deploy automatically and
then if I look at the actual jobs that
are happening it's basically just one
step and that is to copy the contents of
that drop folder to an azure blob that
i've
to find which you can see is that same
name of the site that we we were looking
at a second ago and it's going to copy
it into the dollar sign web folder which
happens to be the one that you want to
use if you're hosting a static site on
an azure blob and let's go see how that
build is actually doing so the build is
still is running the ym step right now
so you can see it actually does take a
minute to run through all of that and
now it's publishing the artifacts to the
drop folder and so now if we switch over
to the release we should see the release
pick up that in just a second it looks
like maybe it finished already now here
it goes so that release is currently
queued in just a second here this
release all get an agent available from
Azure DevOps and it'll actually copy
those content here you go you can see
it's waking up now and it's going to
download the artifacts the drop
artifacts that I defined and now it's
actually running my Asscher blob file
copy command and in just a moment here
it'll have copied all of those files
over to the azure blob storage and we'll
be able to go refresh that site and see
that we've got that second post on there
while we're waiting for that to happen
though let me actually show you my
further investigation topics if you're
interested in learning more about this
static gen comm is a great resource it
talks about all these different static
site generators helps you compare and
contrast them the different features
that they have the different
technologies that they're built using if
you're interested in getting the
advantages of CMS without the speed the
slowdown of one a headless CMS might be
the right choice for you it basically
gives you the advantage of the back-end
part of the CMS while still having the
site be a statically generated site so
headless CMS dot org is a great place to
start with that
my demos have been with ym do you can go
to ym do to check that out and then if
you're interested in actually building
applications using static sites you want
to check out something called the jam
stack which is jam stack org basically
brings JavaScript and rest api's to play
on these static sites and creates helps
you turn them into actual custom
applications alright let's go check our
site here real quick and see if it's up
and running you can see it is now
generated the second post and if I click
on it I can see the content there that
was generated from that markdown file so
it worked perfectly and that brings us
to the question and answers so does
anyone have any questions I can help
address all right awesome awesome we got
a couple questions so right the question
was asked what's the impact on SEO when
you're creating static files is it
better what's the impact yeah that's a
great question there's a couple of
impacts off the top of my head one of
them is one of the things that SEO
search engines are concerned with such
as Google and Bing is how fast and
performant your site is so by making it
a static site versus a CMS you're very
likely to have a pretty significant
speed increase which means that you're
you're sort of points or your score with
the search engines is likely to go up
one thing to think about though when
you're if you're migrating from a CMS to
static sites is that you do want to try
and keep all of your URLs the same so if
you have sites that are currently at you
know your site com slash blog slash blog
title you'd want to try and configure
your static site generator to regenerate
all of those same URL paths so that if a
user visits a link to an old blog that
was on your CMS it's
all gonna work on your statically
generated site right and then what about
ym performance for compiling very large
sites like doc sites yeah
yeah that's a great question so
obviously the performance decreases has
the site in size increases one of the
ways that you could address that is to
actually break it up into pieces so that
if someone checks in a change and it's -
you know one of seventeen different
areas that you have major content areas
that you have on your site you could
actually make that one site that
generates and then have the other 16
sections of your site not regenerate
because of that that's a good approach
all right great
hey Jay thanks so much for doing this
this was awesome I put yeah absolutely
thanks so much for having me we're gonna
take a break and then we will be back
with Maddy talking about xamarin all
right thanks so much everybody to see
you guys in a bit