Build Websites with GitHub Pages | CORPORATE ETHOS

Build Websites with GitHub Pages

By: | July 9, 2018
git

A repository is a data space where you store all the project files. When you are working on something – writing an essay, creating a design or writing a piece of code – you generate different versions of them over time and in this process, having a history of what you are doing at each of the steps is important. To manage the changes you make in a repository until the end of the project, we use a version control system. Rather than you (the creator) having to keep track of separate files in the history yourself (manually), the version control system does it for you.

muralicolAs mentioned in an earlier column, Git is a distributed version control system where every team member has a local copy. In a distributed version control system you have got a central repository and each of the team members can have her own local repositories as well. The team-members first make changes in their local repositories and then later push or transfer those changes into the cloud repository.

GitHub: A cloud repository

GitHub  is a Git-based repository hosting platform that lets you host your repository on a remote server. This cloud repository platform, which is recently acquired by Microsoft, allows you to host things like code, data files and other documents. In this regard, one can consider GitHub as a remote storage service like Dropbox. However, in addition to being a place where one can store content, GitHub provides version control and other collaboration features such as bug tracking, wikis, etc. Git is one of the tools that can be used to move files back and forth from your local repository to the GitHub cloud repository.

GitHub Pages

GitHub has a great feature called GitHub pages that lets you turn GitHub repositories into websites. You can have a project working through the version control feature of GitHub – you can track the entire history of the changes in your project – and with the flip of a switch, you can view that project as if it is hosted on a web server. You and collaborators can contribute and make changes to the site via the GitHub client or its version control interface. The advantage is that you don’t need to worry about setting up a web server or hunting for a web hosting service. GitHub serves all of your sites from a personal URL tied to your user_name, which follows the format: https://your_user_name.github.io. Now, let us see how one can build/publish a website using this feature.

To get started with the ‘GitHub’ service, first create an account and log-in to the site. Head over to the top-right part of the screen, pick on the icon with a down arrow and access ‘Your profile’. Now move over to the section called ‘Repositories’ and create a new repository by clicking the button ‘New’. Under repository, as you can see in the screenshot below, we have the ‘Owner’, which is our account and an input box where you will have to enter the name of your repository. If your intention is to generate a website out of this repository with the domain name: ‘your_user_name.github.io’, enter the repository name as your_user_name.github.io. When you enter the name in this format Github automatically recognises that this repository is going to become a website. You can add a description if you wish so, else pick up the option public; ignore all other options and create the repository.

repository1

Before moving ahead to the next step, let us point out how you can convert a repository labelled in the normal fashion (like ‘corp’, ‘project1’ etc) to a website. If you have named your repository as ‘corp’, for instance, select this repository, go to the settings page, scroll down to the section ‘GitHub Pages’, select the option ‘master branch’ and save it.

repository2

At this point, GitHub will display the URL of the site to be published, in the format: https://your_user_name.github.io/corp/ (screenshot below).

repository3

Now, let us see how we can add content to our site. Assume we have stored the site content in our local storage. We need to upload our content to our online repository. For this, as mentioned earlier, you can either use the version control tool ‘git’ or the desktop client offered by GitHub. Here we will demonstrate the process through GitHub’s own desktop client. Download the desktop client, install it on your machine and log-in to your GitHub account.  Move to the File menu and pick the option ‘Clone repository’.

repository4

The client will list all the currently available repositories in your account and from this you choose the one you just created. Now, you can choose the folder in which the repository is to be placed in your file system. Once done with this step, the application will start the cloning process. Essentially what it does is connect the local folder to the online repository you mentioned here. As we have not made any changes, the folder will be empty. Now, copy all your website resources into the local repository folder. Access the GitHub client and you will find that it has picked up all the new files copied to it.

repository5

Now, hit on the box ‘Summary’ and enter some information regarding the upload (like ‘First site commit’ or ‘Second commit: …’). This field is mandatory and you will have to update this field each time you make a commit; once done with this step, hit the ‘Publish’ button, which will upload all the files to your online repository. Once the upload process is complete, switch to your browser and enter the address: your_user_name.github.io (e.g.: http://jmurali.github.io/) and you will see your site coming up on the screen.

Topics: