Do you want to create a free website for personal or professional growth? Here’s a way to design your next website with a custom domain name, lifetime free hosting, and SSL encryption absolutely free. Whew! What else could you ask for? It is a no-brainer that having a website significantly boosts your growth figures, and today it is more of an investment than a luxury. This is not only true for businesses, but individuals too can benefit highly through a personal website. Whether registering a domain name, hosting your website’s contents, building the website, or enabling SSL encryption, you should be ready to empty your pockets. Adding to the pain, some of these expenses are recurring and continue forever. What if I told you that you could create a free website while doing all the above-mentioned crucial steps in website building that too for free? As unworldly as it may sound, you can do all of this for free if you are a student. If you are aware of GitHub, you might know about GitHub Pages. It is free to use service that comes with every GitHub account. GitHub Pages lets every user create a free website and host it, but there’s a huge caveat. The domain names of these free websites essentially end with github.io, which ruins the professionalism of your website.
What is the GitHub Student Developer Pack?
Fewer users will take your website seriously, and having an unnecessarily long domain name is never a good idea. But hey! We are not here to talk about the perks or caveats of GitHub Pages. I promised a way to let you create a free website with the custom domain name, and here’s how you can do it.
GitHub offers a chance to avail a fantastic kit filled with handy online tools to every student enrolled in a degree or diploma course, known as the GitHub Student Developer Pack. The pack includes pro subscriptions and jaw-dropping discounts on popular tools like Canva, Namecheap, Microsoft Azure, Discord, Name.com, and StreamYard, amongst a gazillion others. In this article, we will use Namecheap to register a free custom domain and use GitHub pages to host our website. We will then look at ways to design and upload your HTML, CSS, and JavaScript files to GitHub pages. Eventually, we will also enable SSL encryption for the website, but first and foremost, we need to register for the Student Developer Pack.
How to Apply for the GitHub Student Developer Pack?
The process of registering for the Student Developer Pack comes down to having a university-granted student email address. A student email address usually ends with your university’s domain name, for instance, imastudent@mywvm.wvm.edu. There are other ways of registering for the pack, but they require much larger review times than using a student email. If you have your student email address ready, here’s how you can register for the pack: Step 1: Go to GitHub education and click on the Sign In option.
You can log in using your credentials if you already have the pack. Else, you can follow the steps down below. Click on Create an Account option in the Sign In window. Step 2: Next, register using your student email and create an account. Step 3: When prompted with “Which best describes your academic status?”, make sure to select Student. Step 4: Now fill the necessary boxes with details regarding your School’s Name and your purpose of using GitHub. Step 5: Finally, submit your application using the “Submit your information” option. You should receive a confirmation email regarding the developer pack if your application gets approved by GitHub. The process usually takes a few days, but the time can significantly vary during peak times.
How to Apply for the GitHub Student Developer Pack without student email?
GitHub also gives you the option to apply for the pack using a valid student ID card or any other proof of your academic status. The only caveats are the long wait time and higher rejection ratio. Anyways, here’s how you can apply for the student pack through this method: Step 1: Follow the steps mentioned above to create an account through your personal email. Step 2: Now upload the proof of your academic status using the camera option or upload the photos directly to GitHub using the Upload button. Step 3: Next, fill in all necessary details like the School’s Name and purpose of using GitHub. Step 4: Submit your application.
How to register your custom domain using Namecheap?
I assume you have got your GitHub Education account up and running. The following steps involve using Namecheap to register your free custom domain and host it through GitHub Pages. Follow these steps to register your preferred domain name: Step 1: Log in to your GitHub Education account and go to the Benefits section. You should see a Web Dev Kit and a Virtual Event Kit. Step 2: Go to the Virtual Event Kit and scroll down to find Namecheap. GitHub offers a 1-year domain name registration on .me TLD, which you can access by clicking on the Get Access option. Step 3: The following window will ask you to authorize the connection request from Namecheap to your GitHub account. Authorize Namecheap and proceed to the next step. You should see a prompt saying, “We have successfully verified your student pack with GitHub” after successful authorization. Step 4: Find your preferred domain through the search bar and click Find. You should see the domain name availability on the next screen. If your domain name is available, you can proceed to buy it for free. Step 5: Checkout using the GitHub Education email address and select GitHub Pages as your hosting method while proceeding. After successfully registering your custom domain name and choosing the GitHub Pages as your hosting, Namecheap should automatically create a repository in your GitHub account. This repository is completely empty and only contains a README.md file. You can access this repository by logging in to your GitHub account and clicking the “Your Repositories” section. GitHub Pages doesn’t offer visual tools and pre-built themes for your website; you need to code the entire website manually and upload related files to your newly created GitHub repository.
How to create a free website and host it on GitHub Pages?
As mentioned above, you will have to create all the HTML, CSS, and JavaScript files related to your website. If you are into Web Dev and know how to code your way through, you are good to upload your files in your GitHub repository and get your website running. You can scroll to the section of this article that deals with uploading the website code to GitHub Pages. But if you are someone who has little to no information about Web Dev, we have got you covered. You can use the steps given below and design your own website using some basic HTML: Step 1: Go to HTML5 UP and scroll to the website design you like. You can choose any other prebuilt theme from any platform. Here I have chosen “Massively” from HTML5 UP, but you are free to download and customize any website design of your choice. Step 2: Extract the downloaded zip file of your favorite website design. You should see files named index.html and generic.html and folders like assets and images in the extracted folder. Step 3: Now open the extracted files using Visual Studio Code and select the index.html file. Step 4: Download and install the “Live Server” extension in the Visual Studio Code if you don’t have it already. Step 5:Select the index.html file, click the right mouse button, and select the “Open in Live Server” option. This option lets you visualize the changes in your HTML file in your browser in real-time.
How to customize your website design?
I won’t term the process beyond this point as “Steps” for customizing your website. Customizing the HTML files is entirely up to your preference, but here is how I customized the “Massively” design from HTML5 UP and converted it into a portfolio. You can choose to take inspiration from this or customize your website entirely by yourself. The choice is yours!
Modifying the Title and Paragraph tags
Beginning my customization process, I changed the title tag “Massively.” The title tag of your HTML file will decide its name while being opened in a browser tab. The default title for Massively should be “Massively by HTML5 UP,” and I recommend changing it to something your website resembles. I changed the title tag to “Samyak Goswami | Tech Content Writer” as it ideally suited my Portfolio. Next up, I changed the Intro section of the website, which said: “This is Massively” (contained in the H1 tag) and made it “Samyak’s Portfolio” for obvious reasons. Subsequently, I changed the text below in paragraph tags to “A showcase of my projects and my abilities.” Going to the Navigation (Nav) section in the index file, I omitted two out of the three navigation buttons contained in the List tag. I wanted to create a single-page website with all the details on a single page, but you are free to modify the number of navigation buttons according to your choice. I later changed the “This is Massively” text on the navigation button to “My Articles.”
Modifying the Social Media Links and Icons
You must also see the various social media icons on the live server like Twitter, Facebook, Instagram, and GitHub. I decided to omit Twitter and Facebook and keep Instagram and LinkedIn for my use case. You can modify the social media icons and their links by going to the Navigation (Nav) section and scrolling to List tags with Twitter, Instagram, and more written within them. Notice how there are no links attached to these social media icons as the href tag is left blank. You can add links to the href tag by replacing “#” with your preferred link.
Modifying the Contents of the Homepage
First up, I changed the H2 tag and made it “My name is Samyak Goswami” and then subsequently changed the Paragraph tag to “I am a tech enthusiast….”. I would suggest you change the H2 tag with something that matches the contents of your homepage and the paragraph tag explaining it. We are now coming up with the most crucial part of this customization; modifying the contents of the article tiles. To do this, go to the Posts section in the index file, and you should see multiple code snippets contained in Article tags. You can add links to your stories by modifying the href section as we did while adding links to social media icons. Later you can change the name of the Articles by modifying the contents within the H2 tags. You can also add a description to your articles using the paragraph tag.
Repeat the process for each article by adding links, changing names, and adding a description to all your articles.
Adding Images to your Websites
You must have noticed that the preview looks very different from the images present on the HTML5 UP website. This is due to the plane and bland photos in the customizable file. Let’s spice up our website by adding custom images to it. To do so, navigate to the folder where you had previously extracted the “Massively” zip file. Open the extracted folder and go to the Images folder. You should see different images named bg, pic01, pic02, and so on. These are the images linked with our articles in the Article tag. You can either add custom images and modify the index file with the names of these images or add the images and name them similar to the default images. Giving the images identical names saves us from modifying the code and a lot of time subsequently. I suggest you proofread and modify other sections of your website that are not important. Here’s the portfolio I created using the steps I mentioned above: samyakgoswami.me.
How to upload your website code to GitHub Pages?
After finally coding and designing your website, it is time to upload it to GitHub Pages and make it go live on the Internet. Here’s how you can upload your website to GitHub Pages: Step 1: Log in to your GitHub account and go to the My Repositories section. Step 2: You should see a repository named your_username.github.io. Go into this repository. Step 3: You should see an option to create your own file or upload files to the GitHub repository. Step 4: Select all five files and folders; assets, images, elements, generic, index, and drag and drop them to the repository. After the files get uploaded, commit the code and wait until GitHub processes your files. Step 5: Navigate to Settings>GitHub Pages to see the status of your website. You should see the prompt “Your website is published at your_custom_domain.” You can now go to your web address and check for the website yourself. Remember, the website can take some time before going live initially.
How to enable SSL encryption in GitHub Pages?
HTTP is an unsafe way of managing user requests on your website. Anyone with malicious intent and sound technical knowledge can intercept the interactions between the user and your website. On the other hand, HTTPS gives all your visitors a much more secure browsing session. GitHub Pages offer free HTTPS encryption, and here’s how you can avail it: Scroll to the Pages section in the repository. You should see the “Enforce HTTPS” option at the end of the window. The SSL encryption should go live as soon as you tick the Enforce HTTPS checkbox. In case if you find the Enforce HTTPS option unavailable for your domain, you can enable SSL encryption using the steps below: Step 1: Log in to your Namecheap account and go to the “Domain List” section. Step 2: Now navigate to Manage Domain and subsequently to the “Advanced DNS” section. You should see some existing CNAME and A records. Add the following 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 trend until you have 4 A Records up to IP Address “185.199.111.153”. Remove all the previous A Records. Step 3: Next up, add a CNAME Record with Host as “www” and Value as your GitHub username (dot) github (dot) io. Remove the previous CNAME Records. In the end, your DNS settings should have 4 A Records and 1 CNAME Record. Step 4: Now go to the GitHub pages in the Settings section. The Enforce HTTPS option should now be available for your domain.
Summing Up 👈
GitHub gives a fantastic opportunity to every student to create a free website and manage it. Although you can’t use GitHub Pages for hosting massive traffic loads, it ticks every checkbox for a small-scale static website. The complimentary custom domain name, hosting, and SSL encryption make it even more wonderful to have. Now you may read “How to Choose a Web Host for your new website.” Here are some page-speed monitoring tools to notify you when your website goes down.
