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

Creating a web site is a severe funding; you’ve gotten to pay for each step of constructing a web site.

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

It’s a no-brainer that having a web site considerably boosts your development figures, and at present it’s extra of an funding than a luxurious. This isn’t solely true for companies, however people can also profit extremely by means of a private web site.

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

What’s the GitHub Scholar Developer Pack?

Fewer customers will take your web site severely, and having an unnecessarily lengthy area identify is rarely 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 approach to allow you to create a free web site with the customized area identify, and right here’s how you are able to do it.

GitHub affords a probability to avail a implausible package crammed with useful on-line instruments to each pupil enrolled in a diploma or diploma course, referred to as the GitHub Scholar Developer Pack. The pack consists of professional subscriptions and jaw-dropping reductions on widespread instruments like Canva, Namecheap, Microsoft Azure, Discord, Identify.com, and StreamYard, amongst a gazillion others.

On this article, we are going to 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 recordsdata to GitHub pages. Ultimately, we will even allow SSL encryption for the web site, however first and foremost, we’d like 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 pupil electronic mail tackle. A pupil electronic mail tackle normally ends together with your college’s area identify, as an illustration, [email protected] There are different methods of registering for the pack, however they require a lot bigger evaluation instances than utilizing a pupil electronic mail. When you have your pupil 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 possibility.

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

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

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

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

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

Step 5: Lastly, submit your software utilizing the “Submit your data” possibility.

You must obtain a affirmation electronic mail concerning the developer pack in case your software will get accepted by GitHub. The method normally takes a few days, however the time can considerably fluctuate throughout peak instances.

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

GitHub additionally provides you the choice to apply for the pack utilizing a legitimate pupil ID card or another proof of your educational standing. The one caveats are the lengthy wait time and greater rejection ratio. Anyhow, right here’s how one can apply for the scholar pack by means of this methodology:

How to register your customized area utilizing Namecheap?

I assume you’ve got your GitHub Training account up and operating. The next steps contain utilizing Namecheap to register your free customized area and host it by means of GitHub Pages. Comply with these steps to register your most well-liked area identify:

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

You must see a Net Dev Package and a Digital Occasion Package.

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

GitHub affords a 1-year area identify registration on .me TLD, which you’ll entry by clicking on the Get Entry possibility.

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.

You must see a immediate saying, “We now have efficiently verified your pupil pack with GitHub” after profitable authorization.

Step 4: Discover your most well-liked area by means of the search bar and click on Discover.

You must see the area identify availability on the subsequent display. In case your area identify is accessible, you’ll be able to proceed to purchase it without cost.

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

After efficiently registering your customized area identify and selecting the GitHub Pages as your internet hosting, Namecheap ought to mechanically create a repository in your GitHub account. This repository is totally empty and solely comprises 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 in your web site; you want to code the complete web site manually and add associated recordsdata 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 recordsdata associated to your web site. If you’re into Net Dev and know the way to code your approach by means of, you’re good to add your recordsdata in your GitHub repository and get your web site operating. 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 bought you lined. You should use the steps given beneath and design your individual web site utilizing some fundamental HTML:

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

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

You must see recordsdata named index.html and generic.html and folders like belongings and photographs within the extracted folder.

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

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

Step 5:Choose the index.html file, click on the appropriate mouse button, and choose the “Open in Reside Server” possibility. This feature permits you to visualize the modifications in your HTML file in your browser in real-time.

How to customise your web site design?

I gained’t time period the method past this level as “Steps” for customizing your web site. Customizing the HTML recordsdata is solely up to your choice, however right here is how I personalized 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 solely 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 resolve its identify whereas being opened in a browser tab. The default title for Massively must be “Massively by HTML5 UP,” and I like to recommend altering it to one thing your web site resembles.

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 beneath in paragraph tags to “A showcase of my initiatives and my skills.”

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’re 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.”

Modifying the Social Media Hyperlinks and Icons

You need to additionally see the assorted 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 aren’t any hyperlinks connected 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 “#” together with your most well-liked hyperlink.

Modifying the Contents of the Homepage

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

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’ll be able to change the identify of the Articles by modifying the contents throughout the H2 tags. You can too add a description to your articles utilizing the paragraph tag.

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 need to have seen that the preview seems very totally different from the pictures 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 photographs to it.

Authentic 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. You must see totally different photographs named bg, pic01, pic02, and so on. These are the pictures linked with our articles within the Article tag.

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

Modified Pictures

I counsel 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.

Step 2: You must see a repository named your_username.github.io. Go into this repository.

Step 3: You must see an possibility to create your individual file or add recordsdata to the GitHub repository.

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

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

Step 5: Navigate to Settings>GitHub Pages to see the standing of your web site. You must see the immediate “Your web site is revealed at your_custom_domain.”

Now you can go to your internet tackle and examine 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 approach 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. Then again, HTTPS provides all of your guests a way more safe looking session. GitHub Pages supply free HTTPS encryption, and right here’s how one can avail it:

Scroll to the Pages part within the repository.

You must see the “Implement HTTPS” possibility on the finish of the window. The SSL encryption ought to go dwell as quickly as you tick the Implement HTTPS checkbox.

In case if you happen to discover the Implement HTTPS possibility unavailable in your area, you’ll be able to allow SSL encryption utilizing the steps beneath:

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

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

You must see some current CNAME and A information.

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

Comply with the pattern till you’ve gotten 4 A Information up to IP Tackle “185.199.111.153”.

Take away all of the earlier A Information.

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

Take away the earlier CNAME Information. Ultimately, your DNS settings ought to have 4 A Information and 1 CNAME Document.

Step 4: Now go to the GitHub pages within the Settings part. The Implement HTTPS possibility ought to now be out there in your area.

Summing Up 👈

GitHub provides a implausible alternative to each pupil to create a free web site and handle it. Though you’ll be able to’t use GitHub Pages for internet hosting large site visitors hundreds, it ticks each checkbox for a small-scale static web site. The complimentary customized area identify, internet hosting, and SSL encryption make it much more fantastic to have.

Now it’s possible you’ll learn “How to Select a Net Host in your new web site.”

Nimi Patel