Today's Deep-Dive: GitHub Pages

If you ever just like made something cool, you know, and, uh, you kind of want

to share it with like everybody, but you know, building a website and all that

is just kind of like a total hassle.

Yeah, I hear you.

Well, if that's you, I think you're going to like what we have in store for you

today.

We're going to explore how to share your work online pretty easily.

Actually with GitHub pages, it's a simple way to get your stuff out there, hosted

right from your GitHub account without messing around with all that

complicated web hosting stuff.

Exactly.

And, uh, you know us, we've done all the digging for you.

We sure have.

We went right to the source.

The GitHub docs.

We checked out how to create a GitHub pages site, their overview page, all of it.

Yeah.

So you don't have to, and we're going to make this process so simple.

That's the goal.

Like even your grandma could probably do it.

Maybe.

No, but seriously, it's going to be easy peasy, beginner friendly.

That's what we're aiming for.

Okay.

So first got to give a huge shout out to safe server.

Oh, absolutely.

They are the ones who make this whole software thing run smoothly.

They do indeed.

And they're also amazing at digital transformation consulting.

If you need help with that.

Yeah.

So check them out.

It's www.safeserver.de.

Go take a look.

Okay.

So GitHub pages, you hear that you might be thinking, Ooh, techie, but

it's honestly so simple.

Can you just break it down?

The easiest way to think of it is like you have this digital binder, right?

That's your GitHub repository and GitHub pages.

It's like this maginal service that turns everything in that binder, all your files

and stuff into an actual website.

Poof.

Pretty much.

You change something in your binder, save it, upload it, which is like a

push and GitHub lingo.

Push it real good.

Juggles and bam, your website updates just like that.

Like that.

It's like, you know, when you save a document online and then boom, it's a web page.

Exactly.

Now, if I have a GitHub account, which by the way, you can get one for free.

What kind of websites can I actually host?

Okay.

So this is where it gets really cool.

With GitHub pages, you can create one website.

Your main one connected to your GitHub username or your organization's account.

If you're doing that kind of thing, but here's the kicker.

You can also create a ton of websites for all your different projects.

How many is a ton?

Like unlimited.

Really?

No limit.

No limits.

So if you're juggling a million projects, no worries.

They can all have their own space online.

That's pretty awesome.

Okay.

So let's say I want to set up my main personal website first.

What's the very first thing I got to nail?

Naming your repository.

That digital binder we were talking about.

Yeah.

Name it right.

This is where a lot of people trip up.

So pay attention for your personal website.

The name has to be exactly this.

Your GitHub username, lowercase.github.io all lowercase.

Okay.

Lowercase got it.

So it's like shouting my username on the internet, but quietly with a

.github.io at the end.

You got it.

And same deal if it's for an organization, organization name,

lowercase.github.io, mess that up.

And your website's not going to work right.

So how do I make this magical repository?

Where do I click?

Easy peasy.

You're logged into GitHub, right?

Up in the corner, you see that plus sign.

Click that a little menu drops down.

You're going to pick new repository.

True.

Then you got to make sure you pick the right owner from that drop down menu.

So it's attached to your account or your organization.

Next up in the repository name box, you're typing in that very

specific name we talked about.

Lowercase remember.

And if you're using the free version of GitHub, you want to

make sure it's set to public.

Okay.

So far, so good.

There's an option to add a read in file.

It's basically a little intro note for your project.

Good practice, but you don't absolutely need it to start.

And finally, you just click that big green create repository button.

Bam.

Digital binder created.

What if I want to make a website for like a portfolio or a tool I built?

That's where those unlimited project websites come in here.

You can name the repository, whatever makes sense.

Like my awesome portfolio or super cool weather app, whatever floats your boat.

And GitHub pages will put that site at an address that looks like this,

your username.github.io slash, and then the name of your repository.

So each project gets its own little space under your main GitHub pages address.

So it's like the main website is the building and each

project gets its own apartment.

I like that.

Exactly.

Okay.

So I have my repository.

And now how do I put stuff in it, like words, pictures, all that jazz?

Here's where your creativity comes in.

GitHub pages looks for a specific file.

Think of it as your website's welcome net.

It could be an index dot HTML file, which is a standard webpage file, or you could

even use simpler text files like an index dot MD, which is a markdown file, or your

main read me file.

We're going to keep things super simple and just focus on that index dot HTML file.

Okay.

Index dot HTML.

That sounds a little code yet.

Do I need to be a tech whiz to make one?

Not at all.

Here's a super basic example.

Okay.

HTML.

HTML.

Doc type HTML.

Doc type.

Okay.

HTML.

HTML body.

Hello world.

Hello world.

H one slash H one.

P this simple page is hosted using GitHub pages.

Okay.

P slash P body slash HTML.

Got it.

This is basic HTML, the language of webpages that H one tag we wrote that creates a

big

heading and P I that's a paragraph of text.

You can literally copy and paste this whole thing to make your first word page.

So I just take all that and I put it where?

Right into your GitHub repository.

The easiest way to do that, especially if you're new to this, is right through the

GitHub website.

You'll see a button that says add file, click that and choose create new file.

Then where it says name your file, type in index dot HTML, exactly like that.

Then in that big blank space below, just paste in that code.

We just went over.

Okay, easy.

Scroll down a bit.

You'll see a section for commit new file.

This is like hitting save.

You can write a little note about what you did, like created my awesome index dot

HTML file.

Then click that green commit new file button.

Okay.

I committed.

How do I make this live?

Here comes the magic.

Once you've committed that file, go to the settings tab for your repository.

It's usually over on the right under the repository name.

Then look for pages in the sidebar on the left side.

Click that.

This is where you tell GitHub pages, Hey, turn this into a website.

Okay.

You'll see a heading that says source under that.

There's a dropdown menu.

Make sure it's set to the branch where you saved your index dot HTML file.

Most of the time.

That's the main branch.

Double check.

It says main, then hit save.

That's it.

That's the whole internet magic.

Yep.

GitHub takes over, builds your website behind the scenes and puts it on the

internet under GitHub pages.

You should see a visit site link pop up soon.

Click that and your hello world page is live.

No goat sacrifices needed.

Chuckles.

None at all.

How long until my site actually goes live?

Good question.

Usually takes a few minutes.

GitHub says it could be up to 10 minutes for everything to update.

So be patient, grab a snack, refresh your browser a bit later.

If it takes longer than an hour though, then something might be off.

Okay.

Noted.

Now my website's up.

What else should I know as I start adding more stuff to it?

A few key things.

Number one, remember that once your website is up on GitHub pages, anyone can see

it.

Even if your repository is set to private, depending on your plan, the website

itself is public.

So don't put anything up there that you wouldn't want the whole world to see.

Also adding more pages is easy.

Just make more HTML files or mark down files if you prefer that.

How you organize those files in your repository, like in folders, is how it'll

be organized on your website.

So it's like organizing files on my computer.

Pretty much.

Okay.

Got it.

Now, what if I want my website to look, you know, a little fancier than plain text?

GitHub pages has themes for that.

It's really handy.

Head back to that settings tab for your repository.

Then go back to pages.

There's a section called theme chooser.

Click choose a theme and you'll see a bunch of different templates.

You can preview how they look with your content, then pick one you like.

It'll automatically make your website look nice and professional without you

having to do any Cody stuff yourself.

Themes sound great.

I also saw something about Jekyll.

What's that all about?

Jekyll is a more advanced tool.

Think of it as a static site generator.

GitHub pages works really well with it.

People use it for blogs, portfolios, anything that gets updated a lot.

It's a tool that takes simple text files like those markdown ones and turns them

into a complete website.

It might seem complicated, but GitHub pages handles all the hard stuff in the

background, so if you want more control and features as you get more comfortable,

Jekyll is a great option.

So themes are easy mode and Jekyll is like level up mode.

That's a good way to put it.

Okay.

I also read about different publishing sources.

We've talked about publishing from the main branch, but are there other ways to

do it?

Yeah.

For more complex setups, there are, you could have a separate branch in your

repository just for your website's code, usually called G pages, or you could

even have a specific folder like docs.

That's the root of your website.

And if you want the most control, you can use GitHub actions workflows to automate

the whole building and deploying process.

But for beginners, sticking with the main branch is the simplest way to go.

Got it.

What about that dot not no Jekyll file?

When would I need that?

That's a bit of a special case.

GitHub pages loves Jekyll.

So it automatically tries to process your website as if it's built with Jekyll.

If you're not using Jekyll and your repository has files that Jekyll might

misinterpret, you can create an empty file called dot no Jekyll in your repository.

It's like a signal to GitHub pages saying, Hey, skip the Jekyll stuff.

But most basic websites won't ever need to use this.

Good to know.

Last thing.

I read that GitHub pages uses GitHub actions to build the websites behind the

scenes.

Does that change anything for me if I'm just uploading a simple index dot HTML file?

Nope.

If you're just starting out with a simple index dot HTML file, you won't even

notice

GitHub actions.

It's more of a behind the scenes thing that GitHub uses to make your website work.

Especially when you start using fancier features like Jekyll, it's free for public

repositories and it all happens automatically.

So you don't need to be an expert in GitHub actions to get your website up and

running.

That is so good to know.

I feel like we've really broken down the whole process.

It seems like anyone can get a website up on GitHub pages.

Absolutely.

It's a really low barrier to entry and it makes it super easy to share your work.

Start simple with that hello world page and build from there.

So what would you say to someone who's thinking about creating their own website

but

they're feeling a little intimidated?

Just go for it.

Head over to GitHub, create that repository with your username.github.io, add that

basic

index.html file and tell GitHub pages to use your main branch in the settings.

You'll be amazed how quickly you can see your own stuff live on the web.

It's a great feeling and it opens up so many possibilities for sharing your work

and

your passions.

That's great advice.

And if you want to make your website even cooler, try out those themes or even dive

into Jekyll later on.

There's so much you can do.

So now that you know how easy it is to make a website, what are you going to share

with

the world?

Something to think about.

It is.

And before we wrap up, another huge thanks to Safe Server.

They're the ones making sure the software runs smoothly and they're awesome at

helping

If you need any of that, you can find them at www.safeserver.de.

If you need any of that, you can find them at www.safeserver.de.