How To Build A Static Website On Github

Setting up a static website in GitHub includes the following stages:

1. Setup basic website configuration
2. Configure site-wide appearance using _Config.yml yaml file
3. Setup the index.md file
4. Create the first blog post using Markdown

Explained below are the stages in detail:

Setup basic website configuration

1. Log in to GitHub.

2. Click + and select New repository.

3. In the New repository page, enter the name of the new repository.

4. If you want to make the new static website visible to all, select the Public radio button.

5. Scroll down the page and select the Add a README file check box.

6. Click Create repository. The new website appears.

7. To setup GitHub Pages, select Settings.

8. In the left navigation pane of the Settings page, navigate to Pages.

9. In the Pages page, click the Branch drop-down menu and select the branch main.

10. In the next option, select the root folder.

11. Click Save. In this page, the setup shows README.

12. In Pages, you can find the website link.

13. In the tab bar, select <> Code.

14. Click the settings icon in the right pane.

15. Enter the description and website details.

The details appear.

Create and configure the _Config.yml file

1. To go to the new repository you created, select the new repository in the home page.

2. In the new repository page, select + and select Create new file.

3. In the create new file page, enter _config.yml in the box and then click outside the box.

4. Enter the configuration details. A sample is below:

   Site settings

   title: A one stop shop for technical documentation author: name: NAME email: EMAIL ADDRESS description: Where action and documentation meet

   Build settings

   remote_theme: jekyll/minima

5. Click Commit changes.
6. In the Commit changes window that appears, enter the following details: a. Commit message b. Extended description c. Commit directly to the main branch
7. Click Commit changes. The details appear as below.

Setup the index file

1. In the new repository home settings page, click +.
2. Select Create new file.
3. In the new file page, enter the following details. a. In the file name field, enter index.md. b. In the content box, enter the following details:

   [—]
   [layout: home]
   [—]
   [Welcome to the new blog!]
   [Note: The welcome note is optional. You can choose whatever you want if > you want to have one.]
   

4. Click Commit changes on the right.
5. In the Commit changes window, enter: a. Commit message b. Description
6. Click Commit changes.

The details appear.

Create the first blog post using Markdown

1. In the new repository, click Add file.

2. Click Create new file.

3. In the file name field, enter _posts/. A new folder with the name _posts is created.
   

4. Enter the blog file name in the format: yyyy-mm-dd-filename.md

5. Enter the blog details and content as shown below for instance.
   [—]
   [layout: post]
   [title: “My first blog”]
   [categories: misc]
   [—]
   Welcome to the world of technical documentation.
6. Click Commit changes…

7. Enter relevant details and click Commit changes.

8. The blog is listed as shown below for instance.

9. In the new repository home settings page, click the website link.