HEXO+Github Pages博客搭建指南

HEXO+GithubPages搭建指南

---

Skill Point

1. HEXO

2. Node

3. github

4. Linux(这不是必须，但是是最好的选择)

5. 也许你还需要翻一下墙(Shadowsocks)

6. 一个你喜欢的IDE

神马是HEXO

HEXO-----一个Node编写的快速生成网页的博客框架

如果你熟悉Node在安装完hexo后你可以去看看，有你熟悉的node_modules，package.json，ejs文件，还有一些JS文件等。
目前这样搭建博客的框架还是有一些比如：hexo,jekyll(ruby写的，使用起来感觉比hexo麻烦多了)

搭建步骤

在搭建之前我觉得我们有必要先搞一个github账号以及熟悉git

github

github是一个面向开源和提供私有项目的托管平台，使用git作为代码的版本控制。
作为程序员来说使用github是一个必不可少的技能。具体学习就是去实践吧，从创建项目到提交然后可以提出PR，merge等等操作

git

对于正确且快速的使用github的前提是你要熟悉git操作，对于git学习的教程推荐Pro Git。当然也可以使用
客户端工具，比如sourcetree,github的客户端之类的。但是相比使用客户端我觉得命令行更快点吧??

创建xxx.github.io仓库并且设置GitHub Pages

完成了以上步骤后，你就可以在自己的仓库中创建一个：你的github用户名.github.io的仓库。名字一定要用这个
完成后，点击项目上面的Settings--->GitHub Pages按照步骤一步一步点下去就可以了。然后等个10分钟吧，在浏览器
输入你的仓库名：xxx.github.io你会看到一个默认的页面出现了。那么github这面的工作工作计算完成了。

提示：
对于以上操作应该不会有什么坑出现了，主要就是要注意仓库名，还有找到Settings---->GitHub Pages

本地安装Node

Linux安装node
只需要跑小田田??的这个脚本就可以了 curl -sSL http://tools.danwi.me/n/insta... | sudo sh
然后在终端输入n,就会列出很多版本，只需要选择安装的版本就可以了。我安装的的是4.6.2和6.3.0这两个版本。
安装node的时候会自动安装npm，并且这个脚本会自动安装cnpm(淘宝的npm镜像)，提高npm包下载的速度

提示：对于使用Linux的用户来说安装的时候需要使用root权限，可以使用命令chown将当前用户赋予root权限

对于windows的安装请大家可以百度一下??

安装hexo

1. npm install hexo-cli -g 全局安装hexo

2. mkdir blog(创建一个blog文件夹)——>cd blog(进入文件夹)——>hexo init(在文件夹中初始化hexo)

3. npm install(安装需要的包)

4. hexo d(deploy-部署hexo)

5. hexo s(server-本地启动hexo,浏览器输入http://localhost:4000)

提示：由于网络问题可能会出现安装缓慢，所以要淡定。Linux&Mac用户跑完脚本会安转cnpm，Windows用户需要
自己添加cnpm地址。

hexo各文件用途

hexo--------+
            +
            +
            _config.yml(配置文件)
            +
            +
            +
            db.json
            +
            +
            +
            node_modules(npm包安装的文件夹)
            +
            +
            +
            package.json(需要包的版本号，hexo版本号)
            +
            +
            +
            public(放置静态文件的文件夹)
            +
            +
            +
            scaffolds
            +
            +
            +
            source
            +
            +
            +
            themes(主题设置文件夹)

以上就是一个hexo的组成部分，对于我们来说我们只需要关注_config.yml文件和source就可以了。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: LangDonHJJ's blog //博客的题目
subtitle: Share technology and smile to Change The World //博客的副标题
description: Technology Blog //博客的描述
author: LangDonHJJ //博客的作者
language: zh-CN //使用的语言
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://hymcode.cn //这是博客的域名，我使用的是我自己的域名
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Hacker //博客的主题，hexo有很多主题的

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: //以下的配置关系着你能否成功的放在github上显示
  type: git
  repository: https://github.com/用户名/用户名.github.io.git
  branch: master

以上是一个_config.yml文件的demo，特别注意：再修改这个文件的时候每一个冒号后都要有一个英文输入法的空格
要是没有的话就会设置无效。

source文件夹
_posts:这是文章放置的位置，注意文章需要使用markdown写
如果要添加新的页面需要新创建一个同名文件夹比如about,然后在里面创建一个index.md文件

e.g

---
title: about
date: 2016-11-19 02:39:17
---

function Hym(){}
Hym.prototype.name = "候延明";
Hym.prototype.nickName = "蛋蛋";
Hym.prototype.age = 23;
Hym.prototype.gender = "单身纯爷们";
Hym.prototype.weChat = "god_Hym";
Hym.prototype.email = "286459153@qq .com";

### 主题选择

关于主题选择可以去hexo官网去找，然后git clone到themes文件中。主题的文件结构和hexo的基本一致，也是在_config.yml里面修改
配置。

### 上传至github

在_config.yml文件中配置好后执行以下两个命令

hexo d：这个命令部署你的hexo,并且会让你输入你的用户名和密码

hexo g：这个命令将部署的hexo上传到你的仓库中，过十几分钟候就可以访问啦

### 访问

如果没有域名，则在浏览器中输入xxx.github.io

如果有域名需要在项目的根目录中创建CNAME文件，在该文件中写你的域名。然后配置域名的DNS解析，比如我的是万网的域名，我就要去阿里云后台的云dns解析去设置我的dns指向xxx.github.io
这样就可以通过域名访问了

***注意***：CNAME文件必须是大写且没有任何后缀名

---

### 结尾

以上就是hexo基本搭建过程，hexo还支持很多插件，这些安装只需搜索一下就可以啦

有什么问题和建议欢迎来提出哦??