Today's Deep-Dive: Surfer

Welcome to the Deep Dive. We're here to help you get up to speed on interesting

topics quickly without getting lost in the weeds.

Exactly.

And today we're tackling something really practical, how you can easily get your

own static website up and running.

Yeah, maybe you've got like a portfolio site or a simple landing page you need to

host.

Or just some info you want out there and you're probably looking for the simplest

way to do that.

Well, you're in the right place.

Our source material for this is the documentation for an application called Surfer.

It's designed to be pretty straightforward.

It is.

And before we properly dive in, we want to give a big shout out to Safe Server for

supporting this deep dive.

Safe Server actually provides the hosting for Surfer itself.

And they're all about supporting your digital transformation journey.

You can find out more about them at www.safeserver.de.

Definitely check them out.

So Surfer, what is it?

Well, essentially, it's a really simple server just for static files, the basic

building blocks of many websites.

Right.

And our mission today, really, is to give you, especially if this is kind of new to

you, a clear, easy-to-grasp idea of what Surfer does and how you could use it.

OK, let's get started.

First things first, what exactly is a static file server?

Good question.

So think about websites you visit.

Some are always changing, right?

New seeds, social media.

They update constantly.

Yeah, dynamic content.

Exactly.

They often need complex code running on the server

to generate those pages just for you,

right when you ask for them.

That's dynamic.

OK.

Now, a static website is different.

Think more like a digital flyer or an online brochure.

The content, the text, the images, it's all pre-made.

It doesn't change unless someone manually uploads new files.

So it's just sitting there, ready to go.

Pretty much.

It's built from files like HTML, CSS for styling,

maybe some images.

A static file server, like Surfer,

its only job is to take those ready-made files

and send them straight to the visitor's browser

when they visit your web address.

Ah, so it doesn't have to think too much.

Just deliver the files.

Exactly.

It's much simpler, much lighter work for the server

compared to those dynamic sites.

Makes sense.

So if you have your simple website files ready,

your HTML, your images, how do you actually

get them onto Surfer?

Well, this is where Surfer is quite flexible.

It gives you a few different methods,

depending on what you're comfortable with.

What's the easiest way for someone just starting out?

Probably the web interface.

You just use your normal web browser,

go to a special admin address for your Surfer site.

It looks like HTTPS.yoursiteaddressadmin.

And once you're logged in there, it's

often just a drag and drop thing.

You take your website files and folders from your computer

and just drag them into the browser window.

Oh, OK.

Like uploading photos to social media or something?

Yeah, very similar experience.

Very visual, very intuitive.

Nice.

OK, what if you're maybe a bit more technical,

or you like using the command line?

Yep, Surfer has you covered there, too,

with a CLI, a command line interface.

Right, the text-based way of telling

the computer what to do.

Exactly.

First, you'd need to install a little helper tool.

The command is usually npm g install cloud and surfer.

npm is just a package manager, a way

to install these kinds of tools.

OK, don't need to worry too much about the details of npm

itself for now.

Not really.

And once it's installed, you use a command like surferconfig.

That tells the tool where your surfer site is

and gives it a special key and access token,

basically proving it's you.

For security.

Gotcha.

Then the main command is surferput.

You type surferput, then the name of the file or folder

you want to upload, and where on the server it should go.

So surferput my website files lip, something like that.

Yeah, something like that structure.

And there's also surferdel.

If you need to delete files, it might

seem a bit intimidating at first if you haven't used

it much, but once you get the hang of it,

it can be super fast, especially for uploading lots of files

or automating things.

OK, so web interface for easy drag and drop,

command line for the more technically inclined.

Are there other ways?

There are.

Surfer also supports WebDV.

WebDA sounds technical again.

It does, but the concept is actually really cool.

WebDAV lets you connect to your surfer file storage

as if it were just another drive or folder right

on your own computer.

Oh, like connecting to a network drive at work.

Exactly like that.

So you could see your website files in your Windows File

Explorer or Mac Finder and just drag files in and out

like you normally would.

That sounds pretty convenient too.

How does that work?

You use a specific web address that Surfer provides.

For Windows and Mac, it's usually

HTTPS.your site address WebDAV.

Linux uses slightly different prefixes like DAVs or WebDAVs,

depending on the desktop environment.

And you need that access token again for logging in.

Yeah, you create an access token in the Surfer admin area.

And when your computer asks for the username and password

for the WebDAV connection, you often

use token as a username and the token itself as the password.

OK.

And you mentioned Linux might need something extra.

Yeah, sometimes on Linux you might

need to install a package called DAVs too to get it working

smoothly with the file manager.

Right, good to know.

So that's three ways already.

Is there more?

One more common one, SFTP, Secure File Transfer Protocol.

Ah, SFTP, I've heard of that.

Often used for web hosting.

Exactly.

It's another very reliable and secure way to move files.

You typically use a dedicated SFTP client program.

FileZilla is a really popular free one.

Right, those often have two panels.

One for your computer, one for the server.

That's the typical layout, yeah.

Makes easy to see what you're doing dragging files back

and forth.

Surfer's documentation mentions getting your SFTP login details,

which usually means the server address, your username,

and a password or key.

OK.

An important point here is that Surfer

lets you control who can access files via SFTP using its access

controls.

So it's not just for the main administrator.

You could potentially give access to other users, too.

That's quite a few options, then.

Web UI, CLI, Web Day V, SFTP covers a lot of bases.

It really does.

It caters to different preferences

and technical comfort levels.

OK, so let's say you've used one of those methods.

You've uploaded your website files.

How does Surfer know which page to show first

when someone visits your site?

Good question.

By default, it looks for a file named index.html

in the main directory you uploaded.

The standard home page file.

Exactly.

Or it might also look for index.htm,

the slightly older version.

If it finds one of those, that's what it serves up

as the default page.

And can you change that if your main file is called,

I don't know, home.html?

You can.

There's usually a setting in the Surfer admin page, the admin

area, where you can specify a different default index file

name.

Flexible.

What about if you just upload a bunch of files into a folder,

but there's no index file in there?

Ah, well, Surfer has an option called public folder listing.

If you turn that on in the settings,

and there's no index file in a directory

someone tries to access.

It just shows a list of the files.

Exactly, it'll display a clickable list

of all the files and subfolders within that directory.

This can be useful sometimes, maybe for sharing resources.

But maybe not always what you want

for a polished website look.

Right, you might want to be careful with that setting,

depending on whether you want people

browsing your file structure.

Makes sense.

And what happens if someone types in an address

for a page that doesn't actually exist?

The classic 404 not found error.

Surfer handles that quite nicely too.

If you create a file named 404.html,

and put it in the root folder of your website.

So right at the top level.

Yep.

Then whenever someone hits a URL that

doesn't match an existing file, Surfer

will automatically display the contents of your 404.html file

instead of a generic server error.

Oh, that's great.

So you can make your own custom, oops,

page not found page that matches your site's design,

and maybe helps users find what they were looking for.

Exactly.

Much more professional and user friendly.

OK, let's talk about privacy and access.

Can you control who sees your Surfer site?

Absolutely.

In the settings page, again in the admin area,

you've got access control options.

What are they?

The simplest is public.

As you'd expect, that means anyone on the internet

can see your website.

No restrictions.

Standard for most websites.

You have password restricted.

You set a single password, and anyone visiting the site

will be prompted to enter it before they can see anything.

Ah, OK.

Good for sharing something semi-privately,

like with clients or a small group.

Precisely.

And the third main option is often called user restricted.

This usually ties into a larger system,

like if you're running Surfer on Cloud Run.

Cloud Run.

Like a platform for hosting apps.

Yeah.

So in that case, user restricted means

only people who are logged into their cloud account

on that system can access the Surfer site.

I see.

So more for internal company sites or community portals,

that kind of thing.

Exactly.

Where you have a defined group of users who need access.

OK.

Public, password, or specific users.

Good range of control there.

Definitely.

Covers most common scenarios for static sites.

Now, the documentation also mentioned something about CI-CD

integration.

That sounds advanced.

It is a bit more advanced, yeah.

It stands for continuous integration

and continuous delivery or deployment.

OK.

What does that mean in practice for Surfer?

It's basically a way for developers

to automate updating their website.

Imagine you make a change to your website's

code on your computer.

With a CI-CD pipeline set up, you

could push that code change to a service like GitHub,

and an automated process would kick off.

And that process would update the website automatically.

Yes.

The documentation mentions creating an access token

in Surfer, like we discussed for the CLI in WebDavy.

Right.

You configure your CI-CD tool, Jenkins, GitLab CI, GitHub

Actions, whatever, to install the Cloudran Surfer CLI tool.

The command line tool, again?

Yep.

And then, as part of the automated pipeline,

it would run the Surferput command

to upload the newly built website files, maybe

from a folder often called dist or build.

So Surferput dist or something similar

would run automatically after every code change.

Pretty much.

It means your live website is always up to date

with your latest code changes without you manually uploading

files every single time.

Very handy for active development.

Very cool for developers, but maybe not

something a beginner needs to worry about immediately.

Definitely an optional, more advanced feature.

But good to know it's there if you need it down the line.

And just to circle back, that central control

panel for all the settings, file uploads

via the web, access control, that's all at HTTPS.

Your site address admin.

That's the one.

Your main hub for managing the Surfer instance.

Great.

And if people want to learn even more or run into trouble.

The documentation points towards the Cloud Run Forum, which

has a specific section for Surfer.

That's likely a good place for community help and discussion.

OK.

It also mentions the Surfer Code Repository and Issue Tracker,

usually on platforms like GitLab or GitHub.

That's where you'd find the source code, report bugs,

or even suggest new features if you're technically inclined.

Good resources to have.

So wrapping things up a bit, Surfer

really does sound like a solid user-friendly option

for static sites.

I think so.

The key things are its simplicity at the core,

just serving files, but also the flexibility

in how you manage those files.

Yeah, from simple drag and drop to command line

and even automated deployments.

And the access control options give you

that necessary layer of privacy when you need it.

It feels like it lowers the barrier quite a bit,

especially for beginners who just

want to get something online without a massive learning

curve.

That seems to be the goal.

This deep dive was really aimed at giving you, the listener,

that initial understanding, showing it

doesn't have to be complicated.

Absolutely.

It's a straightforward tool for a straightforward job.

Well put.

So maybe the question to leave you with

is, now that you know about these flexible options,

what kind of static content, a portfolio, a project page,

maybe just some shared resources could you easily

share with the world using something like Surfer?

It opens up possibilities.

It really does.

And one final time, a huge thank you to SafeServer

for supporting us today.

Yes.

Thanks, SafeServer.

Remember, they handle software hosting, including Surfer,

Find out more at www.safeserver.de.

Find out more at www.safeserver.de.