How To

Learn to create website from GitHub page

View project on GitHub

Overview

You are beginners in creating website? Seeing some interesting static websites? Want to create similar ones? This tutorial has been made for you. It will be focus on researching correspond GitHub pages for the desired websites.

Prerequisites

Basic understanding on HTML, Git, Markdown, and Jekyll.

Set up

  1. Find the websites that interest you
  2. Look up the correspond GitHub page fof the website (the twos often have the same name)
  3. Clone this GitHub repository
  4. Follow the instructions (often located right on the GitHub main page) on using website.

Important directories and files

The GitHub repository often has a lot of folders and files, which often confuses people. For generating your own web page, you need to make changes in many files and folders and then follow instructions to regenerate the web page. Following are clear explanations for some common folders in GitHub page:
  • _data: contains basic information about the web page, including author, languages, web page navigation, etc. Usually, we change the author and the web page navigation only.
  • _include: contains the marginal format for the web page. Usually, we add new marginal formats such as header, footer, sidebar and web navigation for the web page here
  • _layout: contains layouts for the web page. Usually, we add new layout or update existing layout for the web page here.
  • _pages: contains main content for the website. Most of your work will involve in this part.
  • _asset: contains font, css, and images for the web page. You often change the font and add more image here.
There are also some important files to look at:
  • _config.yml: the most important file in repo that contains almost everything for the web page.
  • _Makefile: contains commands for running program
  • README.md: basic information about the web page
The other folders and files are vary depends on each web page. They are also often trivial; therefore, we do not have to necessarily research them.

Research in details

  1. trilinos.github.io Tutorial
  2. mantevo.github.io Tutorial
  3. tramonto.github.io Tutorial

Back to homepage