Simple website on GitHub Pages

A not-so-complete step-by-step guidance

It is assumed that you have already GitHub account. When not, just create it.

Create repository

Use + and find New Repository.

Fill Repository name, Description, Choose visilibity to Public, Turn on Add README.

Click Create Repository to proceed.

In this case the repository is on https://github.com/dudung/simple-website.

Create docs/index.html

Use + on the left of green button <> Code and choose Create new file.

Type docs/index.html in the available field as filename.

The fill content of the file with following lines.

<html>
  <h1>simple-website<h1>
  <p>Hello, World!</p>
</html>

Click the green button on the top right Commit changes…

Click Commit changes.

Now you have the new file docs/index.html .

Actions

Choose Actions tab on the top, but below your username/simple-website text.

Type Static HTML and press enter, or simply scroll down to find it.

Click Configure on the card of Static HTML.

For now just click Commit changes…, the green button on the top right.

Confirm it by clicking Commit changes.

Get Sparisoma Viridi’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Now you have the static.yaml for deployment of you static HTML files.

Settings

Go to Settings tab.

Click it to change settings of your repository.

Scroll down and find Pages on the left menu.

Choose Branch main/docs.

Then click Save.

Go to main page of the repository by clicking username/simple-website link, where it is https://github.com/dudung/simple-website in this example.

Add website link

Find option button on the right of About and click it.

Check Use your GitHub Pages website and click Save changes.

Now you have the link username.github.io/simple-website/ or https://dudung.github.io/simple-website/ for this example.

Open the website

Click the link to open your website hosted on GitHub Pages.

Now you have the website live on GitHub Pages.

Summaries

After reading this story you are able to

• Create a new repository.
• Create a docs/index.html as landing page of your website.
• Create GitHub Actions Static HTML.
• Activate GitHub Pages for main/docs folder.
• Add website link to repository page.
• Open the website hosted on GitHub Pages.