Tutorial: How to Create GitHub Pages for Academia

As academia, having a website to publish portfolios is really important. GitHub Pages will be a perfect solution because it doesn’t cost anything. There is no need to buy a domain and web hosting service. Everything is all in Github. This tutorial will guide you to build your GitHub Pages.

The main objective of this tutorial is to give step-by-step guides for academia that wants to publish his/her academic portfolios using GitHub Pages. Please enjoy it!

Step #1: Sign Up to GitHub

1. Go to GitHub website using your browser and klik the Sign Up button.

   

2. Fill the form to create new account.
   Note: Please wisely choosing your username account. It will become the address of your GitHub Pages. As academia, known by your real name is very important, so if it is still available, I suggest setting the username like this: firstnamelastname or firstname-lastname.

   

3. Sign In using your new account

   

Step #2 Fork the GitHub Pages Repository

1. Go to my GitHub Pages Repository using your browser.

   

2. Click the fork Icon.

   

3. Go to your new repository then click the Settings Icon

   

4. Rename your new repository to your-username.github.io.

   

5. Delete all of the images in /assets/images/ folder. You can find the image or illustrarion that suit for you in Stories by Freepik.

6. Delete files in the _posts folder but keep the 2020-04-23-hello-world.md file.

Step #3 Configure Your GitHub Pages

1. Click the _config.yml file in your repository then click the Pencil Icon.

   

   a. Configure Your Github Pages Description
   This part is to configure your site description, like title, description, etc. Please edit as your wish.

   

   b. Configure Your Github Pages Profile
   This part is to configure your profile, like name, avatar, bio, location, and link to some of your important things, like email and social media account. As academia, my suggestion is you should add links to your Google Scholar, ResearchGate, Orcid ID, and SINTA Profile (Indonesian Only).

   

   c. Configure Your Github Pages Footer
   This part is to configure your site footer, like link to your social media account. Please edit as your wish.

   

   d. Commit Your Configuration
   After finish the configuration, don’t forget to commit your change by fill the form and click te Commit changes button.

   

2. Click the _data folder in your repository then edit the navigation.yml file.
   This file contains the menu configuration for your GitHub Pages. Please edit it to fit your requirements. Don’t forget to commit the changes by clicking the Commit changes Button.

   

Step 4: Edit Your GitHub Pages Contents

GitHub Pages content mostly consists of pages (saved in _pages folder) and posts (saved in _posts folder). You can use pages type content to create content like about me, publication portfolio, and research portfolio. Whereas post type of content, you can use it to create content to publish your opinion, thought, or tutorial like this content. You can follow this step both to edit the pages or posts.

1. Click the _pages folder in your repository to see the list of the pages contents.
   

   

2. Edit all of the pages with information about you and your portfolios.
   Both of the pages and posts content using the Markdown format. You can learn about the Markdown format here.
   Note: If you want to add image in your content, don’t forget to upload the image in /assets/images/ folder.

   

   

3. Commit the Changes.
   After finish edit the content, don’t forget to commit your change by fill the form and click te Commit changes button.

   

Step #5: Check Your Github Pages

Open your browser and type your repository name in the URL address bar, for example, your-username.github.io and voila, your GitHub Pages have been published!

Final Note

If you want to learn about how to customize your GitHub Pages, you can go to the Jekyll Documentation here:

1. Pages
2. Posts
3. Front Matter
4. Collections
5. Layouts

Aside, there is also a complete documentation about Minimal Mistakes Template that used in this repository. You can access it here in Quick-Start Guide section.