Ready and Set to Launch: Creating a Static Site With GitHub Pages

We've already mentioned that we're going to use Bootstrap 5.0, an open-source CSS framework that allows create web pages that are responsive more quickly. We will not need to create custom CSS for this particular site.

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Similar to this We'll also add our Devicon CDN to allow you to utilize SVG icons from popular programming languages and technologies without any difficulty

[email protected]/devicon.min.css">

To include JavaScript include the following code right at the top of the tag:

 
 [email protected]<\/a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">

It's time to start by making a header for our site. The header will be dark that includes the links to our index page as well as two other pages that are called "Projects" as well as "Reading log" -- which you are able to create in the future:

 
 
  User
 
 
 
 
 
 
 
 Projects
 
 
 Reading Log
 
 
 
 
 

The Bootstrap wrapper the navbar as well as navbar-expanding-lg to make a responsive container that is collapsed when the display width is smaller than 992px. This happens because of the grid option the lg. If you want to know more about grid options, take a look at the Bootstrap layout page.

  "row justify-content-center"
The image src="image.jpg" class="img-fluid" alt="" set src ="">
 
 
div class="col-lg mx-2 align-self-center""my-3">I'm a user.
As a enthusiastic software developer, I am deeply enthusiastic about creating and
 developing software applications. I'm constantly learning and experimenting with new
 technologies and approaches that I am able to apply. I also have an unwavering desire to design creative and efficientsolutions to complex problems. I am motivated by my passion and curiosity to solve problems, andI'm dedicated to producing high-quality, well-designed software that can meet the requirements of
 people who use it. 
 
 
 
 

It's clear that we're getting an image from an individual file. Therefore, it must be in the repo when we upload our changes into our GitHub repo.

In our Bootstrap container, we'll be using SVG icons by Devicon and some CSS internal to the container to make our skills be noticed:

  HTML6 WordPress
  Python 
 
   Django HTML11
 
  
 Python 

  HTML17 GitHub 

 

Since we use the i> HTML tag, we can treat it as an actual font. This is why we can set the dimensions of our logos to four em by declaring it within the style tag.

Here is the final outcome of this easy personal site:

It is possible to customize the site as much as you want. Here's the complete source code on the web, at your disposal.

It's time to push your files. To accomplish this, execute the following commands from your terminal at the top stage of the project.

Git add . Git commit with a -m "Added website source code and image"
git push

Now, we can utilize this web site to create your GitHub page.

4. Publishing an User GitHub Page

When you upload index.html index.html to the remote repository named for your username GitHub will automatically start a workflow process to set up your website online. It might take a couple of minutes, but you'll get your static web page functioning automatically.

The URL of your site will be something like the following: https://user.github.io/

In the event that after 10 minutes your website is still not up and running Try to add a false change to your code (e.g., the addition of a space) then push it again for a restart of your site's GitHub Pages' building process.

5. Making a Repository GitHub Page

So far, we've made a user site But what happens when we want to have several published GitHub sites? We'll need to create a project site.

The easiest method is to go to our settings tab of our repository. Then, click on choose the Pages option in the "Code and automation" section.

Select the source to deploy from a branch then click the branch that you wish to deploy the files from. It's highly recommended to publish using the principal branch, but create features and fix bugs through auxiliary branches, before combining the branches. So you don't bring errors to the published site in a hurry.

After you've chosen your branch, you can choose the directory you'd like to host the files in which is usually the root ( /) Click save.

Then, you should wait for a few minutes. Your site should be available at "yourusername".github.io/.

To unpublish a repository site, you can go in Settings in the Settings section, followed by Pages, and click on the three dots option. You'll see a box with the words Unpublish site.

6. Configuring a Domain that is Custom Domain

185.199.108.153
 185.199.109.153
 185.199.110.153
 185.199.111.153

You must also set up a CNAME record with yourusername.github.io as the target. In general, DNS changes are slow therefore, be patient, could take up to a whole day.

When you've done that after that, head to the custom domain section within the settings for your repo and type in the domain, click on the Save button and then sit back for GitHub to review your custom domain.

Congrats! If you've listened to this point of the guide, you now have your own static site hosted by GitHub Pages at no cost.

Best Methods to Use Pages on GitHub

Before we go on, here are some top practices to take into account when publishing a GitHub site:

1. Don't commit directly to the branch you're deploying from. Make changes to other branches, then create pull requests.
2. Avoid using GitHub Pages to sell products, such as setting up an e-commerce website.

Summary

Web development is getting more and more complicated every day. Websites that are static have been around since the dawn of the internet, and they're an excellent way to start creating web-based projects.

In this course, you learned the definition of static websites, and how to set them up online using GitHub Pages. You built a personal website using Bootstrap and then published it on your GitHub user page. You also learned how to get your project's site up and functioning and then how to de-publish it in the event of need.

• It is easy to set up and manage the My dashboard
• Support is available 24/7.
• The best Google Cloud Platform hardware and network that is powered by Kubernetes to ensure maximum capacity
• Enterprise-level Cloudflare integration for speed as well as security
• The reach of the global audience is as high as the possibility of 35 data centers as well as 275 PoPs worldwide