Create a personal website using github

1 git introduction

2 Why use GitHub Pages

3 Creating a GitHub Pages

3.1 Install the Git tool.

3.2 Two pages modes

3.3 Creating steps

3.4 Common Commands

4 using Jekyll to build a blog

4.1 What is Jekyll

4.2 Jekyll Local Environment construction

4.3 Jekyll directory structure

4.4 Jekyll-bootstrap Create a blog

4.5 Jekyll Write the BO process

4.6 Sex Blogs

5 using Markdown

5.1 Introduction

5.2 Basic Syntax

5.3 notepad++ Support markdown Syntax highlighting

1 git introduction

Git is an open source distributed version control system for efficient, high-speed processing of project versioning from very small to very large.

GitHub can host a variety of git library sites.

GitHub pages free static site, three features: free hosting, with themes, support for homemade pages and Jekyll.

2 Why use GitHub Pages

1. Easy to build and free;

2. Support static script;

3. You can bind your domain name;

4. DIY Free Play, hands-on practice some interesting things git,markdown,bootstrap,jekyll;

5. Ideal to write Bo environment, Git+github+markdown+jekyll;

3 Create GitHub Pages3.1 install Git tool

http://windows.github.com/

http://mac.github.com/

3.2 Two pages modes

1. user/organization Pages personal or company site

1) use their own user name, each user name can only be established under one;

2) resource naming must conform to such rules username/username.github.com;

3) content on the backbone is used to build and publish pages

2. Project Pages projects site

1) Gh-pages Branch is used to build and publish;

2) If user/org pages uses a separate domain name, all project pages hosted under the account will be redirected using the same domain name, unless project pages uses its own separate domain name;

3) If you do not use a separate domain name, project pages will provide the service username.github.com/projectname in the form of a sub-path;

4) Custom 404 pages can only be used under a separate domain name, otherwise user pages 404 will be used;

5) to create a project site step:

$ git clone https://github.com/USERNAME/PROJECT.git PROJECT

$ git checkout--orphan gh-pages

$ git rm-rf.

$ git Add.

$ git commit-a-M "first pages Commit"

$ GIT push origin gh-pages

3. You can build a master station from user/organization pages and mount a two-level app page through Project pages .

3.3 Creating steps

First step: Create a personal site

Step two: Set up a site theme

Access to Resource-setting

Update your site

Select a topic and publish

3.4 Common Commands

$ git clone [email protected]: username/username.github.com.git//local If there is no remote code, do this step first, or ignore

$ CD. ssh/username.github.com//Navigate to your blog's directory

$ Git pull origin master//Synchronize remote files First, followed by parameters will automatically connect your remote files

$ git status//See how many files you have modified locally

$ git Add. Add a git file that doesn't exist remotely

$ git commit *-M "What I want told to someone"

$ GIT push origin master//update to remote server

4 using Jekyll to build a blog 4.1 What is Jekyll

Jekyll is a simple, static web-generated engine for blogging. It uses a template directory as the basic framework of the site layout, support markdown, textile and other markup language parsing, provide templates, variables, plug-ins and other functions, and ultimately generate a complete static web site. To put it bluntly, you can build a Web site without having to write HTML, as long as you install the Jekyll specification and structure. [Jekyll Introduction] [Jekyll on GitHub] [Jekyllbootstrap].

Jekyll uses the liquid template language, {{Page.title}} represents the article title, and {content}} represents the article content. We can use two liquid markup languages: Output markup and label tag (tag markup). The output tag outputs the text (if the referenced variable exists), and the label tag does not. The output markers are separated by a double curly brace, and the label tag is delimited by the curly brace-percent sign. [Liquid Template Language] [Liquid template variable reference].

Jekyll's relationship to GitHub: GitHub pages A service provided by GitHub for hosting a project's home page or blog, Jekyll is the engine running in the background.

4.2 Jekyll Local Environment construction

1. Download the latest Rubyinstaller and install (i downloaded the Rubyinstaller-1.9.3-p194.exe), set the environment variable, configure the C:\Ruby193\bin directory in path, and then enter the GEM Update under command line terminal --system to upgrade gems;

2. Download the latest devkit,devkit is a tool for compiling and using the local C + + expansion pack under the Windows platform. It is used to simulate the Linux platform under the Make,gcc,sh to compile. But this method currently only supports Ruby installed via Rubyinstaller, and double-click Run decompression to C:\DevKit. Then open terminal cmd and enter the following command to install:

CD C:\DevKit

Ruby DK.RB Init

Ruby Dk.rb Install

3. Complete the above preparation to install Jekyll, because Jekyll is written in Ruby, the best way to install is through the RubyGems (GEM):

Gem Install Jekyll

and use the command to verify that the installation is successful

Jekyll--version

4. Install Rdiscount, the package used to parse the markdown tag, using the following command:

Gem Install Rdiscount

5. Run the Local project:

CD to the project directory, start the service:

Jekyll--server

4.3 Jekyll directory structure

• _posts: _posts in the data document, by injecting _layouts defined templates through Jekyll--server the resulting static page in the _sites directory. A table of contents is used to store your articles, usually written in the form of a date.
• _layouts: Templates in _layouts generally point to templates in _includes/themes. Catalogs are used to store templates, where you can define different headers and bottoms in the page.
• _includes:

1) There are some common tools used in _INCLUDES/JB, such as list display, comment, etc.

2) refer to the relevant HTML document of the topic in _includes/themes.

3) The topics in _includes/themes generally include default.html, post.html, and page.html three documents. Default.html defines the topmost frame (template) of a Web site, and post.html and page.html are their child frames (templates).

4) generate a good HTML sub-page by default.html {{content}} variable call, generate the entire page.

• assets CSS and JS documents for rendered pages in Assets/themes
• _config.yml site generation needs to use the _CONFIG.YML configuration file, the global variables of the site are defined in _config.yml, accessed with site. The page's variables are defined in Yaml Front matter, With page. Access, more template variables can refer to the template data.
• index.html is the homepage of your page.

4.4 Jekyll-bootstrap Create a blog

1. Create a personal site, that is, create a new resource, in the format username.github.com;

2. Install Jekyll-bootstrap:

$ git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com

$ CD USERNAME.github.com

$ git Remote set-url origin [email protected]:username/username.github.com.git

$ GIT push origin master

3. Visit the created personal site: username.github.com

4. Test the results locally:

CD USERNAME.github.com

Jekyll--server

4.5 Jekyll Write the BO process

1, configuration _config.yml:

1) modified title : Title:my Blog =)

2) Modification of personal information :

Author:

Name:name Lastname

Email: [Email protected]

Github:username

Twitter:username

Feedburner:feedname

3) Reference : The key values in _CONFIG.YML are referenced to other pages {{site.title}};

2. Write an article

According to _CONFIG.YML format permalink:/:categories/:year/:month/:d ay/:title, you can modify the format, create markdown format files, you can blog published.

3. Publish

Local preview Modify: Run Jekyll–server, preview http:127.0.0.1:4000.

Publish to GitHub: either by command submission or by client.

4.6 Sex Blogs

GitHub page has completed the main functions of the blog, writing, publishing, modification, these are relatively static things, is you can control things, there are some dynamic things github pages can't support, such as article views, article comments, and some personalized things, Like personalized page footer, code highlighting can make the blog a little more beautiful, in fact, this can be achieved through third-party applications to personalize their own blog.

Add Disqus Cloud Comment:

Register http://disqus.com/

Modify _CONFIG.YML:

Comments:

Provider:disqus

Disqus:

Short_name:tiansj

5 Introduction to Using Markdown5.1

Markdown's aim is to achieve "easy to read and write". Readability, in any case, is the most important.

The grammar of Markdown is made up of a number of symbols, which are carefully selected for a glance. Formatted files can be published directly in plain text and do not appear to be composed of many labels or format directives.

Information: [Build Environment]

5.2 Basic Syntax

• Use one or more empty lines to separate content segments to generate paragraph <p>.
• The title (H1~H6) format is prefixed with the corresponding number of "#", for example, the following code indicates H3:

# # # This is a level-3 header # # #

• Use ">" as the paragraph prefix to identify the reference text paragraph. This is actually the standard way to mark quoted text in email:

> What to quote

> The standard for direct reference to this mark

• Use "*" "+"-"to represent unordered lists, use numbers plus". " Represents an ordered list. Such as:

1. I am ordered list item 1 ...

2. So I should is Item 2!?

• Use more than 4 spaces or more than 1 tabs to mark the code paragraphs, which will be wrapped by <pre> and <code>, which means that the fonts within the snippet will be monospace family, and the special symbols will not be escaped.
• Use [test] (http://example.net "optional title") to mark normal links.
• Use! [img] (http://example.net/img.png "optional title") to mark the picture.

The title text within the quotation marks is optional, and the link can also use a relative path.

• Use * or _ wrap text to produce strong effects:

_ A very heavy text _ and * * Tone heavier text * *

5.3 notepad++ Support markdown Syntax highlighting

1. Download Userdefinelang.xml

2. Place the Userdefinelang.xml in this directory: c:\users\administrator\appdata\roaming\notepad++

3. Restart notepad++, you can see the custom Markdown highlighting rule under the language menu

Create a personal website using github