Notes for making a gitpage

 Published On

It is the first time to learn how to make a website. HTML has its own syntax. But it is better to understand these boring issues directly from a jekyll template shared on github by someone that learning the syntax from basic to high level. Here is what I did for making my personal website.

The start is from the offical website of github page https://pages.github.com/. You will know you can use github page to make a personal website or an organization site. And you will know github page can be automatically built by Jekyll after pushing your commits on github. One github account only can build one free github page with 3 GB storage ability.

After reading the offical website, I moved to this very useful tutorial Creating and Hosting a Personal Site on GitHub. It is really helpful and easy to be understood. After step by step according to this tutorial, I know the index.html and _config.yml are the most important and basic files for a github page. The layout of a site is defined in the folder _layouts. You can invoke the layout.html in index.html as

---
layout: master

For my repository, I make a father layout file called as master.html that is only used for home page and is only invoked in index.html. You can create other layout files that will invoke the master.html as follows

---
layout: master

These layout files are created for your blog and other items like post or “about me”. They are invoked in the md files for these items. For example, I create a md file called as index.md within in a resume folder. The index.md for my cv contains the contents of my profile. You need to learn the syntax of md file. You need to use the syntax to define headline, font features etc. I found two concise tutorials https://www.jianshu.com/p/1e402922ee32/ and https://segmentfault.com/markdownin Chinese. But the font type and theme color are defined in css file. The css file is invoked in master.html. I make a head.html file in _include folder to cite css and invoke the head.html in master.html as follows

include

These are some basic concepts for creating a github page. I know the md file has it own syntax. That explains the README of a repository can be so informative and so beautiful. That is what I don’t know previously.


Tags: Html

Comments:

comments powered by Disqus