Advertisements
Advertisements
TechnologyWebsite BuildersWordPress Hosting

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

Creating a web site is a critical funding; you have got to pay for each step of constructing a web site.

Would you like to create a free web site for private or skilled progress? Right here’s a method to design your subsequent web site with a customized area title, lifetime free internet hosting, and SSL encryption completely free. Whew! What else may you ask for?

It’s a no-brainer that having a web site considerably boosts your progress figures, and as we speak it’s extra of an funding than a luxurious. This isn’t solely true for companies, however people can also profit extremely via a private web site.

Whether or not registering a area title, internet hosting your web site’s contents, constructing the web site, or enabling SSL encryption, you have to be prepared to empty your pockets. Including to the ache, a few of these bills are recurring and proceed eternally.

Advertisements

What if I advised you that you can create a free web site whereas doing all of the above-mentioned essential steps in web site constructing that too without cost? As unworldly as it might sound, you are able to do all of this without cost if you’re a scholar.

In case you are conscious of GitHub, you may learn about GitHub Pages. It’s free to use service that comes with each GitHub account. GitHub Pages lets each person create a free web site and host it, however there’s a big caveat. The domains of those free web sites primarily finish with github.io, which ruins the professionalism of your web site.

What’s the GitHub Scholar Developer Pack?

Fewer customers will take your web site significantly, and having an unnecessarily lengthy area title isn’t a good thought. However hey! We’re not right here to speak in regards to the perks or caveats of GitHub Pages. I promised a method to allow you to create a free web site with the customized area title, and right here’s how you are able to do it.

Advertisements

GitHub provides a probability to avail a incredible equipment stuffed with useful on-line instruments to each scholar enrolled in a diploma or diploma course, often called the GitHub Scholar Developer Pack. The pack contains professional subscriptions and jaw-dropping reductions on common instruments like Canva, Namecheap, Microsoft Azure, Discord, Identify.com, and StreamYard, amongst a gazillion others.

On this article, we’ll use Namecheap to register a free customized area and use GitHub pages to host our web site. We are going to then have a look at methods to design and add your HTML, CSS, and JavaScript information to GitHub pages. Finally, we may also allow SSL encryption for the web site, however first and foremost, we want to register for the Scholar Developer Pack.

How to Apply for the GitHub Scholar Developer Pack?

The method of registering for the Scholar Developer Pack comes down to having a university-granted scholar electronic mail tackle. A scholar electronic mail tackle often ends along with your college’s area title, as an illustration, [email protected] There are different methods of registering for the pack, however they require a lot bigger assessment instances than utilizing a scholar electronic mail. You probably have your scholar electronic mail tackle prepared, right here’s how one can register for the pack:

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

Advertisements

GE2

You’ll be able to log in utilizing your credentials if you have already got the pack. Else, you possibly can observe the steps down under.

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

Step 2: Subsequent, register utilizing your scholar electronic mail and create an account.
GE3

Step 3: When prompted with “Which finest describes your educational standing?”, ensure that to choose Scholar.
GE4

Step 4: Now fill the mandatory packing containers with particulars relating to your Faculty’s Identify and your goal of utilizing GitHub.

Step 5: Lastly, submit your software utilizing the “Submit your info” choice.
GE5

It is best to obtain a affirmation electronic mail relating to the developer pack in case your software will get authorized by GitHub. The method often takes a few days, however the time can considerably differ throughout peak instances.

How to Apply for the GitHub Scholar Developer Pack with out scholar electronic mail?

GitHub additionally provides you the choice to apply for the pack utilizing a legitimate scholar ID card or some other proof of your educational standing. The one caveats are the lengthy wait time and increased rejection ratio. In any case, right here’s how one can apply for the coed pack via this technique:

Step 1: Comply with the steps talked about above to create an account via your private electronic mail.

Step 2: Now add the proof of your educational standing utilizing the digital camera choice or add the images instantly to GitHub utilizing the Add button.
GE6

Step 3: Subsequent, fill in all vital particulars just like the Faculty’s Identify and goal of utilizing GitHub.
GE8

Step 4: Submit your software.

How to register your customized area utilizing Namecheap?

I assume you’ve got your GitHub Training account up and working. The next steps contain utilizing Namecheap to register your free customized area and host it via GitHub Pages. Comply with these steps to register your most popular area title:

Step 1: Log in to your GitHub Training account and go to the Advantages part.
B1 1

It is best to see a Net Dev Package and a Digital Occasion Package.
B2

Step 2: Go to the Digital Occasion Package and scroll down to discover Namecheap.
Name1

GitHub provides a 1-year area title registration on .me TLD, which you’ll be able to entry by clicking on the Get Entry choice.

Step 3: The next window will ask you to authorize the connection request from Namecheap to your GitHub account. Authorize Namecheap and proceed to the subsequent step.

It is best to see a immediate saying, “Now we have efficiently verified your scholar pack with GitHub” after profitable authorization.
name3

Step 4: Discover your most popular area via the search bar and click on Discover.
Name2

It is best to see the area title availability on the subsequent display. In case your area title is offered, you possibly can proceed to purchase it without cost.
name4

Step 5: Checkout utilizing the GitHub Training electronic mail tackle and choose GitHub Pages as your internet hosting technique whereas continuing.

After efficiently registering your customized area title and selecting the GitHub Pages as your internet hosting, Namecheap ought to robotically create a repository in your GitHub account. This repository is totally empty and solely accommodates a README.md file.

You’ll be able to entry this repository by logging in to your GitHub account and clicking the “Your Repositories” part. GitHub Pages doesn’t supply visible instruments and pre-built themes to your web site; you want to code your entire web site manually and add associated information to your newly created GitHub repository.

How to create a free web site and host it on GitHub Pages?

As talked about above, you should have to create all of the HTML, CSS, and JavaScript information associated to your web site. In case you are into Net Dev and know the way to code your method via, you might be good to add your information in your GitHub repository and get your web site working. You’ll be able to scroll to the part of this text that offers with importing the web site code to GitHub Pages.

However if you’re somebody who has little to no details about Net Dev, now we have acquired you coated. You should use the steps given under and design your individual web site utilizing some primary HTML:

Step 1: Go to HTML5 UP and scroll to the web site design you want. You’ll be able to select some other prebuilt theme from any platform. Right here I’ve chosen “Massively” from HTML5 UP, however you might be free to obtain and customise any web site design of your alternative.
ht1

Step 2: Extract the downloaded zip file of your favourite web site design.

It is best to see information named index.html and generic.html and folders like belongings and photos within the extracted folder.
ht2

Step 3: Now open the extracted information utilizing Visible Studio Code and choose the index.html file.
ht3

Step 4: Obtain and set up the “Reside Server” extension within the Visible Studio Code in the event you don’t have it already.
ht4

Step 5:Choose the index.html file, click on the precise mouse button, and choose the “Open in Reside Server” choice. This selection enables you to visualize the modifications in your HTML file in your browser in real-time.
ht5

How to customise your web site design?

I received’t time period the method past this level as “Steps” for customizing your web site. Customizing the HTML information is fully up to your choice, however right here is how I custom-made the “Massively” design from HTML5 UP and transformed it into a portfolio. You’ll be able to select to take inspiration from this or customise your web site fully by your self. The selection is yours!

Modifying the Title and Paragraph tags

Starting my customization course of, I modified the title tag “Massively.” The title tag of your HTML file will determine its title whereas being opened in a browser tab. The default title for Massively needs to be “Massively by HTML5 UP,” and I like to recommend altering it to one thing your web site resembles.
design1

I modified the title tag to “Samyak Goswami | Tech Content material Author” because it ideally suited my Portfolio. Subsequent up, I modified the Intro part of the web site, which mentioned: “That is Massively” (contained within the H1 tag) and made it “Samyak’s Portfolio” for apparent causes. Subsequently, I modified the textual content under in paragraph tags to “A showcase of my tasks and my skills.”
design2

Going to the Navigation (Nav) part within the index file, I omitted two out of the three navigation buttons contained within the Record tag. I needed to create a single-page web site with all the main points on a single web page, however you might be free to modify the variety of navigation buttons in accordance to your alternative.

I later modified the “That is Massively” textual content on the navigation button to “My Articles.”
design6

Modifying the Social Media Hyperlinks and Icons

You should additionally see the varied social media icons on the dwell server like Twitter, Fb, Instagram, and GitHub. I made a decision to omit Twitter and Fb and maintain Instagram and LinkedIn for my use case.

You’ll be able to modify the social media icons and their hyperlinks by going to the Navigation (Nav) part and scrolling to Record tags with Twitter, Instagram, and extra written inside them.

Discover how there are not any hyperlinks hooked up to these social media icons because the href tag is left clean. You’ll be able to add hyperlinks to the href tag by changing “#” along with your most popular hyperlink.
design4

Modifying the Contents of the Homepage

First up, I modified the H2 tag and made it “My title is Samyak Goswami” and then subsequently modified the Paragraph tag to “I’m a tech fanatic….”. I might recommend you alter the H2 tag with one thing that matches the contents of your homepage and the paragraph tag explaining it.
design7

We are actually developing with essentially the most essential a part of this customization; modifying the contents of the article tiles.

To do that, go to the Posts part within the index file, and it is best to see a number of code snippets contained in Article tags. You’ll be able to add hyperlinks to your tales by modifying the href part as we did whereas including hyperlinks to social media icons.

Later you possibly can change the title of the Articles by modifying the contents inside the H2 tags. You can even add a description to your articles utilizing the paragraph tag.

design5

Repeat the method for every article by including hyperlinks, altering names, and including a description to all of your articles.

Including Pictures to your Web sites

You should have seen that the preview seems to be very totally different from the photographs current on the HTML5 UP web site. That is due to the aircraft and bland images within the customizable file. Let’s boost our web site by including customized photos to it.

im1Authentic Pictures

To take action, navigate to the folder the place you had beforehand extracted the “Massively” zip file. Open the extracted folder and go to the Pictures folder. It is best to see totally different photos named bg, pic01, pic02, and so on. These are the photographs linked with our articles within the Article tag.

You’ll be able to both add customized photos and modify the index file with the names of those photos or add the photographs and title them related to the default photos. Giving the photographs equivalent names saves us from modifying the code and a lot of time subsequently.

im2Modified Pictures

I recommend you proofread and modify different sections of your web site that aren’t essential. Right here’s the portfolio I created utilizing the steps I discussed above: samyakgoswami.me.

How to add your web site code to GitHub Pages?

After lastly coding and designing your web site, it’s time to add it to GitHub Pages and make it go dwell on the Web.

Right here’s how one can add your web site to GitHub Pages:

Step 1: Log in to your GitHub account and go to the My Repositories part.
upload1

Step 2: It is best to see a repository named your_username.github.io. Go into this repository.
upload5

Step 3: It is best to see an choice to create your individual file or add information to the GitHub repository.
upload6

Step 4: Choose all 5 information and folders; belongings, photos, components, generic, index, and drag and drop them to the repository.
upload2

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

Step 5: Navigate to Settings>GitHub Pages to see the standing of your web site. It is best to see the immediate “Your web site is printed at your_custom_domain.”
upload3

Now you can go to your internet tackle and verify for the web site your self. Keep in mind, the web site can take a while earlier than going dwell initially.

How to allow SSL encryption in GitHub Pages?

HTTP is an unsafe method of managing person requests in your web site. Anybody with malicious intent and sound technical information can intercept the interactions between the person and your web site. Alternatively, HTTPS provides all of your guests a rather more safe searching session. GitHub Pages supply free HTTPS encryption, and right here’s how one can avail it:

Scroll to the Pages part within the repository.

It is best to see the “Implement HTTPS” choice on the finish of the window. The SSL encryption ought to go dwell as quickly as you tick the Implement HTTPS checkbox.
upload4

In case in the event you discover the Implement HTTPS choice unavailable to your area, you possibly can allow SSL encryption utilizing the steps under:

Step 1: Log in to your Namecheap account and go to the “Domain Record” part.
ssl2

Step 2: Now navigate to Handle Domain and subsequently to the “Superior DNS” part.

It is best to see some current CNAME and A data.

Add the next A Information with host as “@” and IP Handle as “185.199.108.153”. Subsequent one with the hostname “@” and IP Handle as “185.199.109.153”.

Comply with the pattern till you have got 4 A Information up to IP Handle “185.199.111.153”.

Take away all of the earlier A Information.

Step 3: Subsequent up, add a CNAME Report with Host as “www” and Worth as your GitHub username (dot) github (dot) io.

Take away the earlier CNAME Information. In the long run, your DNS settings ought to have 4 A Information and 1 CNAME Report.
SSL1 1

Step 4: Now go to the GitHub pages within the Settings part. The Implement HTTPS choice ought to now be accessible to your area.

Summing Up 👈

GitHub provides a incredible alternative to each scholar to create a free web site and handle it. Though you possibly can’t use GitHub Pages for internet hosting large site visitors masses, it ticks each checkbox for a small-scale static web site. The complimentary customized area title, internet hosting, and SSL encryption make it much more fantastic to have.

Now chances are you’ll learn “How to Select a Net Host to your new web site.”

Show More
Advertisements

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *