Create a personal site with GitHub

This article completely refer to this blog, should be written very clearly, so I want to back up a bit. Thank the Great God.

Many open source project hosting platforms support the creation of a home page for managed projects, but the home page is not maintained in any way that GitHub is so cool. Most hosting platforms are nothing more than opening up an FTP or similar service that users upload to create a good web page or script, while a GitHub user maintains a home page by creating a special-name git repository or creating a special branch in a git library.

1. Create a personal homepage

GitHub assigns a two-level domain name <user-id>.github.ioto each user, and it's easy for users to create a home page for their two-level domain name, as long as they create a name of <user-id> under managed space . Github.io Repository, submit the site static page to its master branch, where the homepage of the website is index.html. Here's an example of how to create a personal home page with gotgithub users.

• user gotgithub Create a named gotgithub.github.io .

  To create a repository on GitHub, see section 3.1   Create new Project .

•  $ git clone [email protected]:gotgithub/gotgithub.github.io.git$ cd gotgithub.github.io/

• index.html as the home page.

   $ printf " 

• Create commits.

   $ git add index.html$ git commit-m "homepage test version." 

• push to GitHub to complete the remote repository creation.

   $ Git push origin master 

• Access URL: http://gotgithub.github.io/ .

  Wait up to 10 minutes for GitHub to complete the deployment of the new site. The owner of the repository will receive an email notification when the site finishes deployment. The

  also has to be aware that the home page that accesses the user level two domain name uses the HTTP protocol non-HTTPS protocol.

2. Create a Project home page

As mentioned earlier, GitHub assigns each account a level two domain name <user-id>.github.io as the user's home address. You can actually set up a home page for each project, and the project home page is also accessed through this level two domain name.

For example, gotgithub user-created HelloWorld Project if the Project home page is enabled, you can use the URL http://gotgithub.github.io/helloworld/ Access.

Enabling the Project home page for your project is simple, just create a branch named gh-pages in the project repository and add a static Web page to it. That is, if the project's Git repository contains a gh-pages branch, it means that the project provides a home page composed of static pages that can be http://<user-id>.github.io/ <project-name> access to.

The following is an example of a user Gotgithub project HelloWorld , which describes how to maintain the project home page.

If the HelloWorld repository has not been cloned locally from GitHub, execute the following command.

$ git clone [email protected]:gotgithub/helloworld.git$ cd HelloWorld

The current repository has only one branch named Master , and it is simple to create a gh-pages branch from the master branch, but as a gh-pages to save the page The content in the branch and the master branch may be completely different. If you do not want the gh-pages branch to inherit the history and files of the Master branch, you will need a little bit of skill to create a clean gh-pages branch.

If you use the command line to create a clean gh-pages Branch, you can choose one of the three methods below.

The first method uses two git underlying commands: git write-tree and git commit-tree . The steps are as follows:

• master Branch established branch gh-pages .

   $ git checkout-b gh-pages 

•  $ rm. Git/index 

• Create project home Index.html .

   $ printf "Hello world.\n" > index.html 

• add file index.html To staging area.

   $ git add index.html 

• < Span class= "Pre" >gh-pages reset.

   $ git reset--hard $ (echo "branch gh-pages init." | git commit-tree $ (git write-tree)) 

• Execute push command, create branch gh-pages in GitHub remote repository.

   $ Git push-u origin gh-pages 

The second method uses Git's underlying command:git symbolic-ref. The steps are as follows:

• Use the git symbolic-ref command to switch the current work branch from Master to a branch gh-pagesthat does not yet exist.

  $ git symbolic-ref HEAD refs/heads/gh-pages

• Delete the staging area file, which is equivalent to emptying the staging area.

  $ rm. Git/index

• Create a Project home page index.html.

  $ printf "Hello world.\n" > index.html

• Add Files index.html to staging area.

  $ git add index.html

• Execute the submission. Commit completed branch gh-pages complete creation.

  $ git commit-m "branch gh-pages init."

• Execute the push command to create a branch gh-pagesin the GitHub remote repository.

  $ Git push-u origin gh-pages

The third method does not use any git underlying commands, it is the branch that gets the commit from the other repository. The operation is as follows:

• Create another repository, such as Helloworld-web, outside the HelloWorld repository.

  $ git init: /helloworld-web$ CD. /helloworld-web

• Create the home page file index.htmlin the helloworld-web repository.

  $ printf "Hello world.\n" > index.html

• Add Files index.html to staging area.

  $ git add index.html

• Execute the submission.

  Actually commits to the master branch, although gh-pages is present in the submission instructions.

  $ git commit-m "branch gh-pages init."

• Switch to the HelloWorld repository directory.

  $ CD. /helloworld

• Get the commit from the helloworld-web repository and create the gh-pages branch accordingly.

  $ git fetch: /helloworld-web$ git checkout-b gh-pages fetch_head

• Execute the push command to create a branch gh-pagesin the GitHub remote repository.

  $ Git push-u origin gh-pages

Either way, once the branch Gh-pagesis created in the GitHub remote Repository, the project's home page is already established. Later (no more than 10 minutes), visit the address below with your browser to see the project you just submitted. Home: http://gotgithub.github.io/helloworld/.

In addition to the above-created gh-pages branch from the command line to set the home page for the project, GitHub also provides a graphical operator interface. As shown in 3-19.

Figure 3-19: GitHub pages option in the Project management page

When you tick the "GitHub pages" option on the project management page and follow the prompts, the gh-pages branch is automatically created in the project repository. Then execute the following command to check out the gh-pages branch from the repository and customize the project home page accordingly.

$ git fetch$ git checkout gh-pages

3. Using a proprietary domain name

In addition to using level two domain name access under github.com , you can use a proprietary domain name, whether it's a user's home page or a project home page. Implementation is also very simple, as long as the master branch (the user home page in the repository) or the gh-pages Branch (Project repository) root directory check in a file named CNAME , the content is the corresponding private domain name. And, of course, change the domain name resolution of the domain name so that the IP address of the private domain point points to the corresponding GitHub two-level domain name IP address.

For example, worldhello.net[1] is my personal site, if you plan to change the website to be hosted by GitHub, and the account Gotgit through the personal page to provide services, you can do the following.

First, follow the steps in the previous section to set up your account home page for your account gotgit .

1. Create a repository Gotgit.github.io under Account Gotgit to maintain the account home page.

   Address: https://github.com/gotgit/gotgit.github.io/

2. Submit and push the site content to the repository Master branch.

   That is, the root directory of the Gotgit.github.io repository contains at least one home page file, such as index.html. You can also use the Jekyll technology that will be introduced in the next section, so that the Web page has a unified display style, the home page file may not be a complete HTML document, but instead of the template template.

3. At this point, when you visit the URL Http://gotgit.github.io, the content in the repository Gotgit.github.io of the account Gotgit is displayed as the content of the website.

The following actions are followed to enable the site to provide services using a proprietary domain name, www.worldhello.net .

2. gotgit version library gotgit.github.io root directory Add file cname , file content: www.worldhello.net .

   See:  https://github.com/gotgit/gotgit.github.io/blob/master/cname

4. www.worldhello.net IP address, Point to the domain name gotgit.github.io corresponding IP address (note not github.com IP address).

   After the DNS point of the domain name is completed, try using ping or dig command confirm the domain name www.worldhello.net and gotgit.github.io points to the same IP address.

    $ dig @8.8.8.8-t a www.worldhello.net ...;     ANSWER SECTION:www.worldhello.net. 81078 in a 204.232.175.78$ dig @8.8.8.8-t A gotgit.github.io ...;      ANSWER SECTION:gotgit.github.io. 43200 in A 204.232.175.78 

You can see the page maintained by the repository Gotgit.github.io the account gotgit When you access http://www.worldhello.net/with your browser after Setup is complete. If the domain name worldhello.net(without the WWW prefix) also points to the IP address 204.232.175.78, then access the URL http://worldhello.net/ You'll find GitHub thoughtfully redirecting the URL to the correct address, http://www.worldhello.net/.

Other repositories under Account Gotgit , if included gh-pages Branch, can also be accessed by the domain name www.worldhello.net .

• The URL Http://www.worldhello.net/doc actually corresponds to the repository Gotgit/doc.
• The URL http://www.worldhello.net/gotgit actually corresponds to the repository gotgit/gotgit.
• The URL Http://www.worldhello.net/gotgithub actually corresponds to the repository Gotgit/gotgithub.

4. Using Jekyll to maintain the website

Jekyll is a static website generation software that supports markup languages such as textile, markdown, and blogs and web templates, developed by Tom Preston-werner (one of GitHub's founders). Jekyll is implemented in the Ruby language, and the project is hosted on GitHub: http://github.com/mojombo/jekyll/, the exclusive URL address is: http://jekyllrb.com/.

GitHub provides page services for user accounts or projects, checks out the Web page file from the Master branch or gh-pages branch of the corresponding repository, and then executes the Jekyll corresponding command to compile the page. So when designing GitHub's user homepage and Project homepage, you can use Jekyll to compose web pages and blogs in markup languages such as markdown, and to unify Web pages with page templates.

The simplest way to install Jekyll is to install it through RubyGems, which automatically installs the Jekyll-dependent directory_watcher, liquid, OPEN4, Maruku, and classifier gems packages.

$ gem Install Jekyll

If the installation process encounters an error due to the compilation extension module, it is possible that the required header files have not been installed and need to do the following:

• For Debian Linux, Ubuntu, and so on, you can install the required packages in the following ways:

  $ sudo apt-get install Ruby1.8-dev

• If you are a system such as Red Hat, CentOS, or fedora, install it using the following command:

  $ sudo yum install Ruby-devel

• For Mac OSX, you may need to update RubyGems as follows:

  $ sudo gem update--system

Jekyll the installation is complete, execute the following command to display the software version:

$ Jekyll-vjekyll 0.11.0

To learn how to design a website with Jekyll, you can first look at how the author Tom Preston-werner's personal website on GitHub was made with Jekyll.

To clone a repository:

$ git clone git://github.com/mojombo/mojombo.github.com.git

The repository contains the following files:

$ cd mojombo.github.com$ ls-fcname           _config.yml     _posts/         css/            index.htmlREADME.textile  _layouts /       atom.xml        images/         random/

The index.html file in the version Coogan directory is not a normal HTML file, but rather a page defined using the Liquid template language [2].

1---2 layout:default 3 title:tom Preston-werner 4---5 6 <div id= "Home" > 7   
Add a line number to the content for convenience description as follows:

 
 

  
  

  
The 第1-4 line is a YAML-formatted file header that sets the template file used in the file and the variables to be used in the template.
Any file that has a Yaml file header (except directory _layouts ) will be converted at Jekyll compile time, regardless of the file name extension. If the source file is written by a markup language such as Markdown ( . MD,. Textile , etc.), Jekyll will also save the compiled file with the extension . html .
  
  

  
The 2nd line means using the default template.
The corresponding template file is _layouts/default.html.
  
  

  
The 3rd line sets the title of this page.
Embed the set caption in the template file _layouts/default.html with the {{ page.title }}   syntax. Here are some of the template files:

  
  

  
The vast majority of the beginning of line 6th is the standard HTML syntax, which contains a small number of liquid template-specific syntax.
  
  

  
Lines 9th and 11th, for users with liquid or other template programming experience, it is not difficult to understand that the instructions that appear in the "{%" and "%}" directives are a circular instruction (for loop), which is used to perform the relevant operations on the blog.
  
  

  
The expression identified by "{{" and "}}" in line 10th is used to display the date, link, and title of the post.
 
 
Files that begin with a non-underscore (_), including files in subdirectories, are compiled with Jekyll and the compiled file is copied to the destination folder (the default is the _site directory) if the Yaml file header is included. For files that contain Yaml file headers and are written in markup language markdown, the compiled file is also saved with an . html extension. Files and directories that begin with an underscore are ignored directly (such as _layouts,_site directories, and so on), while others require special processing (such as the _post directory).
Directory _post is used to save blog entries, and each blog entry is named after the file name in the <YYYY>-<MM>-<DD>-<blog-tiltle> format. The . MD extension is in the markdown format, with the extension . Textile for the textile format. These files all contain similar file headers:
---layout:posttitle:How I turned $300,000 from Microsoft to go full-time on GitHub---
That is, the blog uses the file _layouts/post.html as the page template, rather than index.html and other files used by the _layouts/default.html template. These template files are used in liquid template syntax. The blog file saved in the _post directory is compiled with the <yyyy>/<mm>/<dd>/<blog-title>.html file name in the output directory.
There is also a profile _config.yml in the root directory that overrides the default settings for Jekyll, such as those in this version of the repository.
Markdown:rdiscountpygments:true
Line 1th Sets the Rdiscount package to use as the parsing engine for markdown, rather than the default Maruku. Line 2nd opens pygments support. For Chinese users It is strongly recommended to reset the Markdown parsing engine through profile _config.yml , the default maruku is not good for Chinese support, and Rdiscount or Kramdown. More parameters about this profile are described in Jekyll Project wiki [3].
Compile the Jekyll edit site simply execute the Jekyll command at the root, and the following command is the default instruction used by GitHub to update the site.
$ Jekyll--pygments--safe
By executing this command now, the entire Web site is created under directory _site .
If you do not have a Web server such as Apache installed, you can also use Jekyll's built-in Web server.
$ Jekyll--server
The Web server is turned on by default on port 4000.
URL http://gitready.com/is a Web site that provides git tips for using, as shown in 3-20.
Figure 3-20:git Ready website
Do you believe this is a website made with Jekyll? Looking at the IP of the site, you will find that it points to GitHub. Studying the Gitready user-hosted repository on GitHub, the gh-pages branch of the en repository is responsible for generating gitready.com sites, thede repository's  Gh-pages Branch is responsible for generating the German website de.gitready.com, and so on. The Gitready Repository is a collection of websites of all languages.
Create a personal site with GitHub