Each program requires a personal blog ape, is widely present in the field of vision and there are all CSDN, garden blog, Jane books, but they did not give the user a unique site, a catchy domain name. You need a
https://xxx.xxx.xxx/URL format, a free writing site code, a truly personal blog.
1. GitHub offers free website
1.1 GitHub-- for open source and proprietary software project hosting platform
As open source code base and version control system, Github has more than 9 million developers users. As more and more applications into the cloud, Github has become the preferred method for managing software development and find existing code.
- Source: Baidu Encyclopedia
GitHub is the largest code repository, GitHub account if you have not, then they quickly go to the official website to register a bar.
1.2 GitHub Pages-- offers free most basic static website
Each GitHub account can open a free own static website (domain name username.github.io), the site is provided by GitHub Pages, eliminating the need for a series of domain names, servers, filing and other establishment to be considered, only a copies of static website code.
First you need to create a GitHub Pages repository. GitHub Pages repository with a common repository is the same, the only difference is that his name must be called username.gihub.io. The official tutorial GitHub Pages written in very easy to understand, after this press done and you have a website you username.github.io!
For instance, your GitHub user name abc, your name and URL is the repositoryabc.gihub.io
Now only one step away from a good website, it is to copy all the files in a good site to your repository.
I suggest you use the official GitHub blog generation tool Jekyll. GitHub repository set which also provides Jekyll theme selection.
This article describes a Hexogeneration tool.
2. Hexo build static blog site
2.1 Hexo-- fast, simple and efficient framework for blog
Ultra-fast
Node.js brought ultra-fast production rate, allowing hundreds of pages instantaneously rendered in seconds.
Support Markdown
HEXO GitHub Flavored Markdown support all the features, you can even integrate most of the plug-Octopress.
One-click deployment
A single instruction can be deployed to GitHub Pages, Heroku or other sites.
Rich plug
Hexo has a powerful plug-in system, installed plug-in allows Hexo support Jade, CoffeeScript.
2.1.1 Installation prerequisites
Installation Hexois quite simple. However, prior to installation, you must check whether the computer has installed the following applications:
- Node.js (Should be at least nodejs 6.9)
- Git
If your computer already said mandatory installation program, then congratulations! Then only you need to use npmto complete the Hexoinstallation.
$ npm install -g hexo-cli
If your computer has not been required for the program is installed, the following installation instructions to complete the installation.
Mac users
You may experience problems at compile time, please go to the App Store to install Xcode, Xcode after completion, start and enter the Preferences -> Download -> Command Line Tools -> Install installation command-line tool.
2.1.2 Installing Git
Windows: Download and install git .
Mac: use Homebrew , MacPorts : ; brew install gitor download the installer to install.
Linux (Ubuntu, sudo apt-get install git-coreDebian): .
Linux (Fedora, Red Hat, CentOS): sudo yum install git-core.
Windows users
due to reasons known, git for windows to download from the link above the best hang a proxy, otherwise the download speed is very slow. See also this page , download a collection of addresses stored in the Baidu cloud.
2.1.3 install Node.js
The best way is to use Node.js installation NVM .
cURL:
$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
Wget:
$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh
After installation is complete, and the terminal restart the following command to install Node.js.
$ nvm install stable
Or you can download the installer to install.
Windows users
For windows users, it is recommended to use the installer to install. When installed, check the Add to PATH option.
Alternatively, you can also use Git Bash, which is git for windows comes with a set of programs, provides a Linux-style shell, in this environment, you can simply use the command mentioned above to install Node.js. The method is very simple to open it, right-click anywhere and choose "Git Bash Here" can be. Because Hexo many of the operations are related to the command line, you can always consider using Git Bash to operate.
2.1.4 Installation Hexo
After all the necessary application is installed, you can use npm install Hexo.
$ npm install -g hexo-cli
2.1.5 station
Hexo after installation is complete, execute the following command, Hexo will file a new need in the specified folder.
$ hexo init <folder>
$ cd <folder>
$ npm install
After the completion of the new, specify the directory folder is as follows:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
2.2 Hexo custom configuration and blog theme
2.2.1 _config.yml
Website configuration information, you can configure most of the parameters here. Individual configuration parameters in the file are detailed notes, according to the rules needed to fill.
2.2.2 package.json
Application information, EJS, Stylus and Markdown renderer is installed by default, you are free to remove.
package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^3.8.0",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-stylus": "^0.3.3",
"hexo-renderer-marked": "^0.3.2",
"hexo-server": "^0.3.3"
}
}
2.2.3 scaffolds
Templates folder, when you create a new article, Hexo file will be established according to scaffold.
Hexo default template is content filled in the new markdown file. For example, if you modify the Front-matter content scaffold / post.md in, then each time a new article will contain this modification.
2.2.4 source
Resource folder is a place to store user resources, in addition to _posts folder, beginning named _ (underscore) files / folders and hidden files will be ignored. Markdown and HTML files are parsed and placed in public folders, and other files will be copied in the past.
2.2.5 themes
Theme folder, Hexo will generate static pages by topic. There are many third-party themes on GitHub, according to the document describes the theme of the introduction of Hexo project will generate a corresponding folder in the themes folder, and then modify theme attributes to _config.xml folder.
This article will introduce the Indigotheme.
3. Indigo theme --Material Design style theme Hexo
Only support IE10 + and other modern browsers.
To jQuery, lighter. Believe native compatibility with modern browsers.
Less css used as a pre-processor, it is necessary to install hexo-renderer-less.
Added English font support Roboto.
Add some ripple effects.
No Front-dependent SHARE.
Based on the station static data search, no third parties.
Support article a reward.
Existing two branches theme, my blog using the cardbranch card style theme, masterthe branch is the legacy tiled style theme.
3.1 Installation
Installation need to confirm your Hexo version 3.0 or higher, and Node version 6.x or more, in Hexo root directory, execute the following command.
git clone [email protected]:yscoder/hexo-theme-indigo.git themes/indigo
3.1.1 Switch themes
Implementation of git branchall local branches, if there is only one branch, you can execute the following command to get the subject of a separate branch.
# 获取远程 card 分支，并切换
$ git checkout -b card origin/card
# 获取远程 master 分支，并切换
$ git checkout -b master origin/master
This command is executed only once, and then use the git checkout [branch]command to switch between two themes.
3.1.2 Installation dependent
Hexo or in the root directory, if the following plug-in has been installed, without having to install again.
Less
Default theme css use less as a pre-treatment tool.
$ npm install hexo-renderer-less --save
Feed
Used to generate rss.
$ npm install hexo-generator-feed --save
Json-content
Search for generating a static site data, as the data source station.
$ npm install hexo-generator-json-content --save
QRCode
For generating a micro-channel two-dimensional code sharing.
Alternatively, when the request is not installed will jiathis Apigenerate two-dimensional code.
$ npm install hexo-helper-qrcode --save
3.1.3 open tabs
hexo new page tags
Modify hexo / source / tags / index.md metadata
layout: tags
comments: false
---
3.1.4 open category pages
Only card theme support.
hexo new page categories
Modify hexo / source / categories / index.md metadata
layout: categories
comments: false
---
3.2 Frequently Asked Questions
3.2.1 How to set Abstract
Markdown in Canada<!-- more -->
3.2.2 How to add multiple tags article
There are two multi-label format
tags: [a, b, c]
or
tags:
- a
- b
- c
3.2.3 Modify brand images (menu above background)
Replace themes \ indigo \ source \ img \ brand.jpg, keep the same file name.
3.2.4 How to use the icon in the article
First fontawesome find the name of the icon you need, such as: book, use the following format:
<i class="icon icon-book"></i>
Icon style prefix are icon, in addition to five icons for regulating the size and spacing of one class.
<!-- 1.3倍大小 -->
<i class="icon icon-book icon-lg"></i>
<!-- 2倍大小 -->
<i class="icon icon-book icon-2x"></i>
<!-- 3倍大小 -->
<i class="icon icon-book icon-3x"></i>
<!-- 4倍大小 -->
<i class="icon icon-book icon-4x"></i>
<!-- 5倍大小 -->
<i class="icon icon-book icon-5x"></i>
<!-- 5px右边距 -->
<i class="icon icon-book icon-pr"></i>
<!-- 5px左边距 -->
<i class="icon icon-book icon-pl"></i>
3.2.5 Individual icons can not be displayed
If your browser is installed ADBlock, it will shield SNSthe relevant content, such as: Github.
Solution: You can configure your site ADBlock not run.
3.2.6 build a site without style
Installation less
3.2.7 amend its own line style does not take effect
Because the theme of default reference cdnstyle, only the topics updated, cdnthe style will change. If you want to modify your own style, you need to modify the configuration cdn: false. This is not in reference cdnresources, use of local resources.
3.2.8 After changing the style website does not take effect
After confirming the non-cache problem, execute hexo cleanthen generate upload.
It is recommended executed once each submission
hexo clean, you can create a shell script in the project directory, execute the commandhexo clean && hexo generate --deploy, you can ensure that each modification can take effect after the operation.
3.2.9 Change site color
Editing themes \ indigo \ source \ css_partial \ variable.less, change the color of the corresponding variables.
Color Reference: Material's the Palette Color Generator Design
Note: When using custom color configuration to be the subject of close cdn, cdn: false.
3.2.10 Add 404 pages
New 404.html in hexo / source directory.
Set metadata information, if you do not want to apply the theme layout layout can be set to false.
layout: false
title: "My Blog Name | 404"
---
3.2.11 use Emoji in a blog
3.3 custom page
Theme Card branch custom page provides customized module supports, is hereby briefly.
3.3.1 Creating a custom page
hexo new page pageName
After executing command in the root directory of your Hexo source/generated with a directory that you have just entered pageNamethe same folder, there is only one index.md.
3.3.2 page layout
layout: page # 必须
title: pageTitle # 必须，页面名称
description: 用户自定义页面功能演示 # 页面二级标题，描述性文字
comments: false # 禁用评论，可选，默认开启
reward: false # 禁用打赏，可选，默认开启
----
3.3.3 Input modules and content
Custom page, image, blockquote, preetc., will be given a special style. Furthermore, a @moduleName{ ... }tag format for the contents of the parcel, imparting style.
