How to Create a Free Website With Custom Domain Name, Hosting, and SSL Encryption?

Creating a web page is a severe funding; you have got to pay for each step of establishing a web page.

Do you wish to have to create a unfastened web page for private or skilled enlargement? Here’s a method to design your subsequent web page with a customized area title, lifetime unfastened web hosting, and SSL encryption completely unfastened. Whew! What else may just you ask for?

It is a no-brainer that having a web page considerably boosts your enlargement figures, and these days it’s extra of an funding than a luxurious. This isn’t just true for companies, however folks can also receive advantages extremely via a non-public web page.

Whether registering a area title, web hosting your web page’s contents, development the web page, or enabling SSL encryption, you will have to be able to empty your wallet. Adding to the ache, a few of these bills are routine and proceed endlessly.

What if I instructed you that that you must create a unfastened web page whilst doing the entire above-mentioned a very powerful steps in web page development that too totally free? As unworldly as it should sound, you’ll do all of this totally free in case you are a pupil.

If you might be conscious about GitHub, you could learn about GitHub Pages. It is unfastened to use provider that includes each GitHub account. GitHub Pages shall we each consumer create a unfastened web page and host it, however there’s a large caveat. The domains of those unfastened web pages necessarily finish with github.io, which ruins the professionalism of your web page.

What is the GitHub Student Developer Pack?

Fewer customers will take your web page significantly, and having an unnecessarily lengthy area title isn’t a excellent concept. But hiya! We don’t seem to be right here to communicate concerning the perks or caveats of GitHub Pages. I promised a method to can help you create a unfastened web page with the customized area title, and right here’s how you’ll do it.

GitHub provides a likelihood to avail a unbelievable equipment stuffed with at hand on-line equipment to each pupil enrolled in a level or degree direction, referred to as the GitHub Student Developer Pack. The pack contains professional subscriptions and jaw-dropping reductions on in style equipment like Canva, Namecheap, Microsoft Azure, Discord, Name.com, and StreamYard, among a gazillion others.

In this text, we can use Namecheap to check in a unfastened customized area and use GitHub pages to host our web page. We will then have a look at tactics to design and add your HTML, CSS, and JavaScript information to GitHub pages. Eventually, we can additionally allow SSL encryption for the web page, however first and predominant, we’d like to check in for the Student Developer Pack.

How to Apply for the GitHub Student Developer Pack?

The technique of registering for the Student Developer Pack comes down to having a university-granted pupil e mail cope with. A pupil e mail cope with in most cases ends along with your college’s area title, as an example, [email protected] There are different ways of registering for the pack, however they require a lot greater assessment instances than the usage of a pupil e mail. If you have got your pupil e mail cope with able, right here’s how you’ll check in for the pack:

Step 1: Go to GitHub education and click on at the Sign In choice.

You can log in the usage of your credentials if you have already got the pack. Else, you’ll practice the stairs down underneath.

Click on Create an Account choice within the Sign In window.

Step 2: Next, check in the usage of your pupil e mail and create an account.

Step 3: When triggered with “Which easiest describes your educational standing?”, ensure that to make a choice Student.

Step 4: Now fill the vital bins with main points referring to your School’s Name and your function of the usage of GitHub.

Step 5: Finally, post your software the usage of the “Submit your data” choice.

You will have to obtain a affirmation e mail in regards to the developer pack in case your software will get authorized by means of GitHub. The procedure in most cases takes a few days, however the time can considerably range all through height instances.

How to Apply for the GitHub Student Developer Pack with out pupil e mail?

GitHub additionally will provide you with the choice to practice for the pack the usage of a legitimate pupil ID card or some other evidence of your educational standing. The best caveats are the lengthy wait time and upper rejection ratio. Anyways, right here’s how you’ll practice for the coed pack via this technique:

Step 1: Follow the stairs said above to create an account via your individual e mail.

Step 2: Now add the evidence of your educational standing the usage of the digital camera choice or add the pictures without delay to GitHub the usage of the Upload button.

Step 3: Next, fill in all vital main points just like the School’s Name and function of the usage of GitHub.

Step 4: Submit your software.

How to check in your customized area the usage of Namecheap?

I suppose you’ve got your GitHub Education account up and operating. The following steps contain the usage of Namecheap to check in your unfastened customized area and host it via GitHub Pages. Follow those steps to check in your most well-liked area title:

Step 1: Log in to your GitHub Education account and move to the Benefits segment.

You will have to see a Web Dev Kit and a Virtual Event Kit.

Step 2: Go to the Virtual Event Kit and scroll down to to find Namecheap.

GitHub provides a 1-year area title registration on .me TLD, which you’ll get right of entry to by means of clicking at the Get Access choice.

Step 3: The following window will ask you to authorize the relationship request from Namecheap to your GitHub account. Authorize Namecheap and continue to the next move.

You will have to see a recommended pronouncing, “We have effectively verified your pupil pack with GitHub” after a hit authorization.

Step 4: Find your most well-liked area in the course of the seek bar and click on Find.

You will have to see the area title availability at the subsequent display. If your area title is to be had, you’ll continue to purchase it totally free.

Step 5: Checkout the usage of the GitHub Education e mail cope with and make a choice GitHub Pages as your web hosting manner whilst continuing.

After effectively registering your customized area title and opting for the GitHub Pages as your web hosting, Namecheap will have to mechanically create a repository on your GitHub account. This repository is totally empty and best incorporates a README.md record.

You can get right of entry to this repository by means of logging in to your GitHub account and clicking the “Your Repositories” segment. GitHub Pages doesn’t be offering visible equipment and pre-built subject matters to your web page; you wish to have to code all the web page manually and add similar information to your newly created GitHub repository.

How to create a unfastened web page and host it on GitHub Pages?

As said above, you’ll have to create the entire HTML, CSS, and JavaScript information similar to your web page. If you might be into Web Dev and understand how to code your method via, you might be excellent to add your information on your GitHub repository and get your web page operating. You can scroll to the segment of this text that offers with importing the web page code to GitHub Pages.

But in case you are any individual who has little to no details about Web Dev, we now have were given you lined. You can use the stairs given underneath and design your personal web page the usage of some fundamental HTML:

Step 1: Go to HTML5 UP and scroll to the web page design you prefer. You can make a selection some other prebuilt theme from any platform. Here I’ve selected “Massively” from HTML5 UP, however you might be unfastened to obtain and customise any web page design of your selection.

Step 2: Extract the downloaded zip record of your favourite web page design.

You will have to see information named index.html and generic.html and folders like property and photographs within the extracted folder.

Step 3: Now open the extracted information the usage of Visual Studio Code and make a choice the index.html record.

Step 4: Download and set up the “Live Server” extension within the Visual Studio Code in the event you don’t have it already.

Step 5:Select the index.html record, click on the fitting mouse button, and make a choice the “Open in Live Server” choice. This choice permits you to visualize the adjustments on your HTML record on your browser in real-time.

How to customise your web page design?

I received’t term the method past this level as “Steps” for customizing your web page. Customizing the HTML information is completely up to your choice, however this is how I custom designed the “Massively” design from HTML5 UP and transformed it into a portfolio. You can make a selection to take inspiration from this or customise your web page completely on your own. The selection is yours!

Modifying the Title and Paragraph tags

Beginning my customization procedure, I modified the identify tag “Massively.” The identify tag of your HTML record will make a decision its title whilst being opened in a browser tab. The default identify for Massively will have to be “Massively by means of HTML5 UP,” and I like to recommend converting it to one thing your web page resembles.

I modified the identify tag to “Samyak Goswami | Tech Content Writer” because it perfectly suited my Portfolio. Next up, I modified the Intro segment of the web page, which stated: “This is Massively” (contained within the H1 tag) and made it “Samyak’s Portfolio” for obtrusive causes. Subsequently, I modified the textual content underneath in paragraph tags to “A exhibit of my tasks and my talents.”

Going to the Navigation (Nav) segment within the index record, I overlooked two out of the 3 navigation buttons contained within the List tag. I sought after to create a single-page web page with the entire main points on a unmarried web page, however you might be unfastened to regulate the choice of navigation buttons in accordance to your selection.

I later modified the “This is Massively” textual content at the navigation button to “My Articles.”

Modifying the Social Media Links and Icons

You should additionally see the quite a lot of social media icons at the are living server like Twitter, Facebook, Instagram, and GitHub. I made up our minds to fail to remember Twitter and Facebook and stay Instagram and RelatedIn for my use case.

You can regulate the social media icons and their hyperlinks by means of going to the Navigation (Nav) segment and scrolling to List tags with Twitter, Instagram, and extra written inside them.

Notice how there are not any hyperlinks hooked up to those social media icons because the href tag is left clean. You can upload hyperlinks to the href tag by means of changing “#” along with your most well-liked hyperlink.

Modifying the Contents of the Homepage

First up, I modified the H2 tag and made it “My title is Samyak Goswami” and then due to this fact modified the Paragraph tag to “I’m a tech fanatic….”. I might counsel you exchange the H2 tag with one thing that fits the contents of your homepage and the paragraph tag explaining it.

We at the moment are bobbing up with essentially the most a very powerful a part of this customization; enhancing the contents of the thing tiles.

To do that, move to the Posts segment within the index record, and you will have to see more than one code snippets contained in Article tags. You can upload hyperlinks to your tales by means of enhancing the href segment as we did whilst including hyperlinks to social media icons.

Later you’ll alternate the title of the Articles by means of enhancing the contents inside the H2 tags. You too can upload a description to your articles the usage of the paragraph tag.

Repeat the method for every article by means of including hyperlinks, converting names, and including a description to your entire articles.

Adding Images to your Websites

You should have spotted that the preview seems very other from the photographs provide at the HTML5 UP web page. This is due to the aircraft and bland pictures within the customizable record. Let’s boost our web page by means of including customized photographs to it.

To achieve this, navigate to the folder the place you had in the past extracted the “Massively” zip record. Open the extracted folder and move to the Images folder. You will have to see other photographs named bg, pic01, pic02, and so on. These are the photographs related with our articles within the Article tag.

You can both upload customized photographs and regulate the index record with the names of those photographs or upload the photographs and title them equivalent to the default photographs. Giving the photographs an identical names saves us from enhancing the code and a lot of time due to this fact.

I counsel you proofread and regulate different sections of your web page that don’t seem to be vital. Here’s the portfolio I created the usage of the stairs I discussed above: samyakgoswami.me.

How to add your web page code to GitHub Pages?

After in any case coding and designing your web page, it’s time to add it to GitHub Pages and make it move live to tell the tale the Internet.

Here’s how you’ll add your web page to GitHub Pages:

Step 1: Log in to your GitHub account and move to the My Repositories segment.

Step 2: You will have to see a repository named your_username.github.io. Go into this repository.

Step 3: You will have to see an choice to create your personal record or add information to the GitHub repository.

Step 4: Select all 5 information and folders; property, photographs, components, generic, index, and drag and drop them to the repository.

After the information get uploaded, dedicate the code and wait till GitHub processes your information.

Step 5: Navigate to Settings>GitHub Pages to see the standing of your web page. You will have to see the recommended “Your web page is printed at your_custom_domain.”

You can now move to your internet cope with and test for the web page your self. Remember, the web page can take a while prior to going are living to begin with.

How to allow SSL encryption in GitHub Pages?

HTTP is an unsafe method of managing consumer requests for your web page. Anyone with malicious intent and sound technical wisdom can intercept the interactions between the consumer and your web page. On the opposite hand, HTTPS provides your entire guests a a lot more protected surfing consultation. GitHub Pages be offering unfastened HTTPS encryption, and right here’s how you’ll avail it:

Scroll to the Pages segment within the repository.

You will have to see the “Enforce HTTPS” choice on the finish of the window. The SSL encryption will have to move are living once you tick the Enforce HTTPS checkbox.

In case in the event you to find the Enforce HTTPS choice unavailable to your area, you’ll allow SSL encryption the usage of the stairs underneath:

Step 1: Log in to your Namecheap account and move to the “Domain List” segment.

Step 2: Now navigate to Manage Domain and due to this fact to the “Advanced DNS” segment.

You will have to see some current CNAME and A information.

Add the next A Records with host as “@” and IP Address as “185.199.108.153”. Next one with the hostname “@” and IP Address as “185.199.109.153”.

Follow the rage till you have got 4 A Records up to IP Address “185.199.111.153”.

Remove the entire earlier A Records.

Step 3: Next up, upload a CNAME Record with Host as “www” and Value as your GitHub username (dot) github (dot) io.

Remove the former CNAME Records. In the top, your DNS settings will have to have 4 A Records and 1 CNAME Record.

Step 4: Now move to the GitHub pages within the Settings segment. The Enforce HTTPS choice will have to now be to be had to your area.

Summing Up 👈

GitHub provides a unbelievable alternative to each pupil to create a unfastened web page and arrange it. Although you’ll’t use GitHub Pages for web hosting large site visitors lots, it ticks each checkbox for a small-scale static web page. The complimentary customized area title, web hosting, and SSL encryption make it much more superb to have.

Now it’s possible you’ll learn “How to Choose a Web Host to your new web page.”