All Set to Launch: Creating an online static site using GitHub Pages

As we've mentioned before, we'll be using the Bootstrap 5.0, an open-source CSS framework which allows you to create web pages that are responsive more quickly. There is no need to develop custom CSS for this particular site.

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

Like this, we'll incorporate to our Devicon CDN, which will enable you to use SVG icons from the most popular programming languages and technology without any difficulty

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

To add JavaScript Include the following code right at the top of the tag:

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

The time has come to begin making a header for our website. It will have a dark header and will include hyperlinks for our main page as well as two other pages, dubbed "Projects" along with "Reading log" (which you are able to create at any time:

 User Projects Reading Log 

It uses the Bootstrap wrapping the navigation bar along with expanding-lg-navbar to create a dynamic container which is collapsed whenever the width of the display is less than 992px. This is because of the grid option the lg. If you want to know more about grid options visit 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. Being a committed software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and playing using new techniques and technologies that I am able to use. Additionally, I have a constant desire to design creative and effective solutions to complicated issues. I'm motivated by my curiosity and passion for solving problems. I'm dedicated to producing high-quality, efficient software that is designed to meet the needs of those who utilize it.

It's evident that we're receiving an image from one image file. This means that it should be included in the repo whenever we add our updates to the repo. GitHub repo.

In our Bootstrap container, we'll be using SVG icons created by Devicon as well as some CSS within the container in order to let our talents stand out:

HTML6 WordPress Python Django HTML11 Python HTML17 GitHub

Since we use the "i>" HTML tag that we are able to treat it as a real font. This is the reason we can set the dimensions of our logos to four pixels by declaring it inside the style tag.

Here is the final outcome of this easy personal site:

It is possible to customize the website as you like. This is the complete source code on the web that you can access.

It's time to push your files. For this to happen, you must execute these commands in your terminal at the top section of your project.

Git add . Git commit using an"-m "Added website source code and image" git push

We can now use this website to build your GitHub page.

4. Publishing an User GitHub Page

If you upload index.html index.html to the remote repository that is named after the username you use, GitHub will start an automatic workflow to put your site online. It may be a matter of a few hours, but once you've finished, you'll be able to get your static web page functioning automatically.

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

If within 10 minutes, your site isn't up and running Try to add an untrue change to your website's code (e.g., the inclusion of spaces) and then push it back to restart your site's GitHub Pages' building process.

5. Making a Repository GitHub Page

We've created the user-facing site. What will happen if we have several published GitHub sites? Then we'll have to make the project's site.

The most straightforward way to do this is to visit the settings tab in our repository. Click on the pages option within the "Code and automation" section.

Choose the source to publish using the branch then click the branch that you wish to deploy the files from. It is highly recommended that you publish using the principal branch, but create enhancements and correct bugs using auxiliary branches, before combining the branches. So you don't bring errors to the published site quickly.

When you've picked the branch you want to use, choose the directory that you'd like to host your files , which usually is the root ( /) Click save.

Then, you should take a couple of minutes. Your site should be available at "yourusername".github.io/.

For unpublishing a repository site to unpublish a repository site, go to Settings under the section Settings which is followed by Pages, and click on the option with three dots. 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. It is generally accepted that DNS changes are slow therefore take your time, it may be a full day.

Once you've finished that, head to your customized domain section of the settings of your repo and enter the domain name, then click the Save button and sit back for GitHub to look over your customized domain.

Congrats! If you've been following this point of the guide You now have your own website run with GitHub Pages at no cost.

Best Methods to Use Pages on GitHub

Before we get started we will review some of the best practices to take into account when publishing a GitHub website:

1. Do not commit directly to the branch that you're making changes to from. Make changes to different branches and then make pull requests.
2. Beware of using GitHub Pages for sell products, such as creating an online store.

Summary

The development of websites is becoming ever more complex each day. Static websites are around since the beginning of the web, and are an ideal way to start creating web-based applications.

In this course you were taught the meaning of static websites, and how to set them up online using GitHub Pages. Your personal site was created with Bootstrap and then published it to the GitHub pages for users. Additionally, you learned to set up your website up and running and how to remove it in the event of need.

• It's simple to create and maintain the My dashboard
• Support is available 24 hours a day.
• The most efficient Google Cloud Platform hardware and network that is powered by Kubernetes for the highest capacity
• Enterprise-level Cloudflare integration for speed as well as security
• The reach of the global public is as wide as the potential of 35 data centers, as in addition to 275 PoPs across the globe.

Article was posted on here