[Original] use GitHub Pages to create a personal site (detailed steps)

1 Git Introduction

2. Why use Github Pages?

3. Create Github Pages

3.1 install the git tool.

3.2 two pages Modes

3.3 Creation steps

3.4 Common commands

4. Use 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 process

4.6 personalized blog

5. Use Markdown

5.1 Introduction

5.2 Basic syntax

5.3 Notepad ++ supports Markdown syntax highlighting

1 Git Introduction

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

GitHub can host sites of various git libraries.

GitHub Pages is a free static site with three features: free hosting, built-in themes, self-made Pages, and Jekyll.

2. Why use Github Pages?

1. Easy to build and free of charge;

2. Supports static scripts;

3. You can bind your domain name;

4. DIY is free to use and some interesting things are put into practice: git, markdown, bootstrap, jekyll;

5. Ideal for writing blogs, git + github + markdown + jekyll;

3. Create Github Pages3.1 and install the git Tool

Http://windows.github.com/

Http://mac.github.com/

3.2 two pages Modes

1.User/Organization PagesPersonal or company site

1) Use your own user name. Only one user name can be created under each user name;

2) The resource name must comply with such rules as username/username.github.com;

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

2.Project PagesProject Site

1) gh-pages branches are used for building and publishing;

2) if user/org pages uses an independent domain name, all project pages hosted under the Account will use the same domain name for redirection, unless project pages uses its own independent domain name;

3) if the independent domain name is not used, project pages will provide the service username.github.com/projectnamethrough sub-paths;

4) custom 404 Pages can only be used under an independent domain name; otherwise, User Pages 404 will be used;

5) Steps for creating a project site:

$ 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 useUser/Organization PagesBuild the main site, and passProject PagesMount the second-level application page.

3.3 Creation steps

Step 1: create a personal site

Step 2: Set the site topic

Go to resource-setting

Update your site

Select and publish a topic

3.4 Common commands

$ Git clone git@github.com: username/username.github.com. git // if there is no remote code locally, do this step first, otherwise ignore

$ Cd. ssh/username.github.com // locate your blog directory

$ Git pull origin master // synchronize remote files first, and subsequent parameters will automatically connect to your remote files

$ Git status // check the number of locally modified files

$ Git add. // add a git file that does not exist remotely.

$ Git commit *-m "what I want told to someone"

$ Git push origin master // update to remote server

4. Use Jekyll to build a blog 4.1. What is jekyll?

Jekyll is a simple, static website generation engine for blogs. It uses a template directory as the basic framework for website layout, supports parsing of Markdown, Textile, and other Markup languages, and provides functions such as templates, variables, and plug-ins, finally, a complete static Web site is generated. To put it bluntly, you only need to install the Jekyll specifications and structure and generate a website without writing html. [Jekyll Introduction] [jekyll on github] [jekyllbootstrap].

Jekyll uses the Liquid template language. {page. title} indicates the article title, and {content} indicates the article content. We can use two Liquid markup languages: output markup and tag markup ). The output tag outputs the text (if the referenced variable exists), but the tag does not. The output tag is separated by double curly brackets, while the tag is separated by curly brackets-percent pairs. [Liquid template language] [Liquid template variable reference].

Relationship between jekyll and github: GitHub Pages is a service provided by GitHub to host the project homepage or blog. jekyll is the engine running in the background.

4.2 jekyll Local Environment Construction

1. download the latest rubyinstallerand install it (I download rubyinstaller-1.9.3-p194.exe), set the environment variable, configure the C: \ Ruby193 \ bin directory in path, and then enter the gem update-system under the command line terminal to upgrade the gem;

2. download the latest DevKit. DevKit is a tool for compiling and using local C/C ++ extension packages on the windows platform. It is used to simulate make, gcc, and sh on the Linux platform for compilation. However, this method currently only supports Ruby installed with RubyInstaller, and double-click it to run and decompress it to C: \ DevKit. Open the terminal cmd and enter the following command for installation:

Cd C: \ DevKit

Ruby dk. rb init

Ruby dk. rb install

3. You can install Jekyll after completing the above preparations, because Jekyll is written in Ruby. The best installation method is through RubyGems (gem ):

Gem install Jekyll

Run the command to check whether the installation is successful.

Jekyll -- version

4. Install Rdiscount, which is used to parse the Markdown tag package. Run the following command:

Gem install rdiscount

5. Run the local project:

Cd to the project directory and start the service:

Jekyll -- server

4.3 jekyll directory structure

•  _ Posts: _ Posts: The data document is in the _ sites directory by injecting a template defined by _ layouts and a static page generated by jekyll -- server. A directory is used to store your articles. It generally writes titles in the form of dates.
•  _ Layouts: Templates in _ layouts generally point to templates in _ regiondes/themes. Directory is used to store templates. Here you can define different headers and backgrounds on the page.
•  _ Regiondes:

1) _ shortdes/JB has some common tools for list display and comment;

2) for details about the topics, see the html document of the topic.

3) The topics in _ shortdes/themesgenerally contain three documents: default.html?post.html and page.html. Default.htmldefines the top-layer framework of the website (template layout, post.html and page.html are their subframeworks (templates ).

4) The generated HTML page is called using the {content} variable of default.html to generate the entire page.

•  AssetsThe CSS and JS documents for rendering pages are in assets/themes.
•  _ Config. yml_ Config. in the yml configuration file, the global variables of the site are in _ config. defined in yml, using site. access; the page variables are defined in the YAML Front Matter, and the page is used. for more template variables, see template data.
•  Index.htmlIs your homepage.

4.4 Jekyll-Bootstrap create a blog

1. Create a personal site, that is, create a new resource in the format of 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 git@github.com: USERNAME/USERNAME.github.com. git

$ Git push origin master

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

4. Test locally to view the effect:

Cd USERNAME.github.com

Jekyll -- server

4.5 Jekyll write process

1,Configuration_ Config. yml:

1)Modify Title: Title: My Blog =)

2)Modify personal information:

Author:

Name: Name Lastname

Email: blah@email.test

Github: username

Twitter: username

Feedburner: feedname

3)Reference: The key values in _ config. yml are referenced on other pages {site. title }};

2,Write an article

Follow _ config. the yml format is permalink:/: categories/: year/: month/: day/: title. You can modify the format and create a markdown file to publish the blog.

3,Release

Local preview and modify: Run jekyll-server to preview http: 127.0.0.1: 4000.

Release to github: Submit through command or client.

4.6 personalized blog

Github Page has completed the main functions of the blog, such as writing, publishing, and modification. These are relatively static things that you can control on your own. There are also some dynamic things that Github Pages cannot support, for example, there are some personalized things such as the number of articles browsing and comments, such as the personalized page header and footer, and code highlighting, which can make the blog more beautiful, in fact, this writing can be achieved through third-party applications to personalize your own blog.

Add Disqus cloud comments:

Register http://disqus.com/

Modify _ config. yml:

Comments:

Provider: disqus

Disqus:

Short_name: tiansj

5 Introduction to using Markdown5.1

Markdown aims to achieve "easy to read and write 」. Readability is the most important in any case.

The Markdown syntax is composed of all the symbols. These symbols are carefully selected, and their functions are clear at a glance. Files written in the format can be directly published in plain text, and do not look like they are composed of many labels or format commands.

Document: [set up the environment]

5.2 Basic syntax

• Use one or more blank lines to separate content segments to generate paragraphs <p>.
• Title (h1 ~ H6) format is to use the corresponding number of "#" as the prefix, for example, the following code indicates h3:

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

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

> Referenced content

> The Mail standard used for reference by this mark

• "*" "+" "-" Is used to represent the unordered list, and "." is added to the number to represent the ordered list. For example:

1. I am ordered list item 1...

2. So I shocould be item 2 !?

• Use more than four spaces or more than one tab to mark code paragraphs. They will be wrapped in <pre> and <code>, which means the fonts in the code segment will be in the monospace family, and the special symbols are not escaped.
• Use [test] (http://example.net "optional title") to mark normal links.
• Use! [Img] (http://example.net/img.png "optional title") to mark the image.

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

• Use * or _ to wrap the text to produce the strong effect:

_ Text with heavy tone _ and ** text with heavier tone **

5.3 Notepad ++ supports Markdown syntax highlighting

1. Download userDefineLang. xml

2. Place userDefineLang. xml in this directory: C: \ Users \ Administrator \ AppData \ Roaming \ Notepad ++

3. Restart Notepad ++ to view the custom Markdown highlight rules under the language menu.