Grunt-Beginner前端自动化工具

本文章适合对HTML、CSS、JS有一定基础,并且对Nodejs有一定的了解的同学。

学习目标和内容


什么事前端集成解决方案

每一个前端团队都想打造自己的前端开发体系,来帮助团队更高效的工作,目前通常都是东拼西凑,逐渐的整合的过程。

前端集成解决方案个人理解是:

将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题、不足、缺陷和需求,所提出的一种解决问题的方案。

不同角色理解解对比:

开发者:解决前端工程的根本问题;
专家学者:一套包含框架工具,便于开发者快速构建美丽实用的Web应用程序的工作流,同时这套工作流必须是稳健强壮的。(其中美丽和实用有时候不能同时并存)

解决哪些前端问题?

  • 开发团队代码风格不统一,如何强制开发规范;
  • 前期开发的组件库如何维护和使用;
  • 如何模块化前端项目;
  • 服务器部粉前必须的压缩,检查流程如简化,流程如何完善。
主流的方式有哪几种


推荐几款前端解决方案供大家参考:

Grunt的定位

Yeoman,Bower,Grunt其中是怎么样一个定位呢?我们把它定位为—Build Tool

目前Grunt的竞争者

Glup是Grunt强有力的竞争对手,还有Buildy、jasy、Gmake等

准备工作


nodejs简介

安装
  • Nodejs官网
  • MAC上:HomeBrew,这里推荐一个小工具Cakebrew,可以免去我们级命令行的烦恼。
  • Linux:apt-get[ubuntu]、yum 等

nodejs命令行工具:mac和Linux本身就自带强大的控制台,但window虽然有cmd窗口但是它不支持bash脚本,怎么解决这个问题呢?我推荐安装git,git里包含一个git bash shell在一定程度上弥补了这个缺陷。

  • NPM-Node Package Manager(Node包管理和分发工具)

  • Nodejs包括基本模块、框架和库,但是这些很多框架和库管理起来很麻烦,所以才有了NPM,npm能很快的找到特定服务要使用的包,然后进行下载/安装/管理。

命令的使用
#npm常用命令
npm -v          #显示版本,检查npm 是否正确安装。
npm install express   #安装express模块
npm install -g express  #全局安装express模块
npm list         #列出已安装模块
npm show express     #显示模块详情
npm update        #升级当前目录下的项目的所有模块
npm update express    #升级当前目录下的项目的指定模块
npm update -g express  #升级全局安装的express模块
npm uninstall express  #删除指定的模
node项目的基本结构
Yeoman, Bower, Grunt简介及安装
  • Yeoman:The web’s scaffolding tool for modern webapps(现代webapp的脚手架工具)

Yeoman的作用:

  • 在Web项目立项阶段,使用yeoman来生成项目的文件,代码结构。
  • Yeoman自动将最佳实践和工具整合进来,大大加速和方便了后续的开发。

根据项目自行选择Yeoman中的不同生成器,不管怎么变,Yeoman还是统一了现阶段公认的 代码校验测试压缩等最基本功能的流程,其余部分就交给 生成器自由发挥

npm install -g yo #全局安装yeoman
  • Bower:A package manager for the web(Web的包管理器)

    Web站点组成:框架,库,公共部分等,Bower则用来跟踪管理这些

  • Brunt:The JavaScript Task Runner(JavaScript 世界的构建工具)

    为何要用构建工具?
    一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

Yeoman实践

npm install -g generator-angular #全局安装 angular
npm install -g generator-mobile #全局安装 mobile
npm install -g generator-webapp #全局安装 webapp

接下来新建angular项目为例

mkdir yo-action #新建目录
cd yo-action 
mkdir angular-action #新建项目目录
cd angular-aciton
yo angular helloAngular #创建angular项目 helloAngular项目名称
   #选用grunt
   #sass是否包含自行选择(sass基于ruby,要求有ruby环境)和 bootStrap框架等
dir #安装完成之后 查看目录
ls -al# ls列出当前目录下的bash命令 -al表示列出隐藏文件以及一点开头的文件

ruby安装、解决sass未翻墙不能安装等问题。
接下来看看项目下的pageage.json文件

 {
 "name": "helloangular", #项目名
 "version": "0.0.0",#版本号,递增
 "dependencies": {} #项目在生产环境中需要的依赖
 "devDependencies": {
    "grunt": "^0.4.5", # ^表示对版本比较宽松的限制,只限制主版本号,如果有新版本自动更新,直到1.x.x之前的版本都可以
    "grunt-newer": "~1.1.0", # ~只更新1.1.01.1.9 
   },
 "scripts": {
    "test": "grunt test",
    “install”:""  # 执行npm install 会根据package.json文件中的组件来安装
   }
 }

rm -rf node_modules #rm 删除目录命令 -rf递归删除且不需二次确认
  • 目录说明

    pakeage.json :这是NodeJS模块的“信息图”
    bower.json :指定我们可以通过bower去拉哪些相应的前端框架和组件
    .yo-rc.json
    .travis.yml :专为开源打造的持续集成环境
    .jshintrc :jshin配置文件
    .gitignore :指定当前项目要忽略不上传到git的文件
    .gitattributes :git配置项
    .editorconfig :第三方工具
    .bowerrc :bower本身的配置项
    test目录下的文件 :项目自动化测试
    bower_components :线上拉下来的前端框架

Bower实践


  1. 接下来就bower是如何对web框架和组件进行管理的,利用jQuery和bootstrap为例。

    mkdir bower-action #创建bower测试目录
    cd bower-action
    mkdir jquery-bootstrap-aciton #项目目录
    cd jquery-bootstrap-action
    bower install jquery
    bower intall bootstrap
    ls -al #安装完成后,查看目录下多了一个bower_components目录
    cd bower_components #目录下就有了jquery和bootstrap
    
  2. 如果组件比较小,没有在bower上注册,怎么办?

    bower提供多种安装方式:

  • 通过github的短语安装
bower install jquery/jquery
  • 用过完整的github地址安装
bower install https://github.com/jquery/jquery.git
  1. 框架和组件,github上没有怎么办?

    bower提供了直接通过url地址安装
    以上bower生成的文件中并没有包含bower.json和.bowerrc两个配置文件:需要初始化生成

bower init #初始化后根据提示设置

手动生成一个.bowerrc,说说其配置

{
  "directory": "bower_components",
  "proxy":"http://proxy.kyj.com:8080", #为了网络安全,设置一层代理
  "https-proxy":"https://proxy.kyj.com:8080",
  "timeout":60000 #超时 毫秒
}

项目中如果单独使用bower,在项目中引用这些框架和组件非常麻烦,所以一定要配合grunt一起使用,提供开发效率。

Grunt实践


mkdir grunt-action
cd grunt-action
mkdir grunt-yo
cd grunt-yo
yo webapp  grunt-yo #注意需要安装:npm install -g yeoman/generator-webpp
#项目出现3个选项
(*)Sass #对css3的扩展,增加了规则、变量、混入、选择器、继承等等特性
(*)BootStrap
(*)Modernizr #用来检测用户浏览器是否支持某些HTML5和CSS3新特性的一个js库

接下来讲解一Gruntfile.js —

'use strict';#遵循ECMAScript(ES5)严格模式,体现js更合理、更安全、更严谨的发展方向
module.exports = function (grunt) {
#所有的gruntpage和逻辑代码都要放入该函数

// 自动加载package.json里声明的 grunt tasks 
// [jit-grunt](https://github.com/shootaroo/jit-grunt)自动加载所需任务 也可以使用load-grunt-tasks插件来加载
  require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin'
  });
 // Configurable paths
 var config = {
    app: 'app',
    dist: 'dist'
 };
 #grunt重要的概念:task(任务),initConfig里配置的是一个一个的单元task
 grunt.initConfig({
    config: config,
    watch: {
      bower: {  #任务watch的第一个目标
        files: ['bower.json'], #属性是可选的
        tasks: ['wiredep']
      },
      babel: {  #任务watch的第二个目标
        files: ['<%= config.app %>/scripts/{,*/}*.js'],
        tasks: ['babel:dist']
      }
    }
  }
}

本人在window环境测试,需要注意几个问题:

1.检查是否安装好ruby并安装好sass,sass在3.3.0之后版本提供了sourcemap功能
2.检查phantomjs是否全局安装成功,yo生成webapp会报相关错误。
3.全局安装generator-mocha
4.运行grunt如果有Plugin没有安装报错,安装一下,比如grunt-mocha,grunt-contrib-sass等

Grunt的Task,Target和Options
从无到有构建Grunt项目
初识Grunt Files处理方式
剖析Grunt Tasks - grunt serve
剖析Grunt Tasks - grunt test
剖析Grunt Tasks - grunt build

Grunt - plugins


剖析Grunt - plugins(一)

扩展知识介绍


gulp-in-action(一)
npm-in-action

总结

Sass 和 Compass 用法

###RubyInstaller

If you are on Windows, there is a great project to help you install Ruby: RubyInstaller. It gives you everything you need to set up a full Ruby development environment on Windows.
Just download it, run it, and you are done!

Check whether Ruby already is available by opening a terminal

ruby -v

Try Ruby

1.由于国内网络原因,首先我们来修改一下Ruby的source地址

gem sources --remove https://rubygems.org/ //移除默认的
gem sources -a https://ruby.taobao.org/ //添加新的地址
gem sources -l # 查看list

gem update //更新ruby版本

2.安装Sass
如果安装多个版本的sass先下载DevKit构建工具

gem install sass
sass -v 
gem install sass --version=3.3 //安装特定版本的sass , 但要先安装build tools 》DevKit
gem list //列出本地的所有ruby程序包
gem unistall sass -- version=3.3.0 //卸载特定版本的sass

简单说一下安装devkit注意事项:

DevKit 是windows平台下编译和使用本地C/C++扩展包的工具。它就是用来模拟Linux平台下的make, gcc, sh来进行编译。注:这个方法目前仅支持通过RubyInstaller安装的Ruby,如果不是建议你重新安装。安装方法:双击下载的7z文件,指定解压路径,路径中不能有空格。如D:/DeveloperInstall\DevKit,这个路径就是
cd

ruby dk.rb init //#生成config.yml,这里会检查将要添加DevKit支持的Ruby列表,只支持通过RubyInstaller安装的Ruby

如果这里列出的Ruby与你的要求不符,可以手动修改

ruby dk.rb review //检查要添加DevKit支持的Ruby列表是否有误,可以略过
ruby dk.rb install //安装后会出现以下两条信息
//[INFO] Updating convenience notice gem override for 'D:/DeveloperInstall/Ruby22'
//[INFO] Installing 'D:/DeveloperInstall/Ruby22/lib/ruby/site_ruby/devkit.rb'

gem install rdiscount --platform=ruby //检查是否安装成功  如果能安装rdiscount成功说明安装DevKit成功

安装好DevKit后就可以安装多个版本的sass等

测试一下:
mkdir learn-sass-cli
vim main.scss //按i进入编辑后添加 *{margin:0;padding:0;} 然后按esc进入命令行模式 输入:wq 保存退出
sass main.scss main.css // 转css文件
sass-convert main.scss main.sass // 转.sass文件,可以了解一下sass写法

3.安装Compass

gem install compass

compass create learn-sass-syntax //创建compass-sass项目

在命令行模式下,除了一次性编译命令,compass还有自动编译命令

  compass watch

运行该命令后,只要scss文件发生变化,就会被自动编译成css文件。
1.sass 变量声明

/*在.scss文件中 ---变量的声明
$headline-ff:Arial,Verdana,Helvetica,sans-serif;
$main-sec-ff:Arial,Verdana,Helvetica,sans-serif;

2.scss中包含已有的.scss文件

例如:把上面的变量存在一个新建的_variables.scss文件中,由于变量不用被转化成css文件,所以在文件名前加下划线:表示局部文件

@import "varables"; //scss文件中的import并非css中的import,css中import必须放在代码最前面,对性能也不利,css文件中不建议用import指令

3.引入时没有带入下划线:基于sass的既定规则

1.没有文件后缀名的时候,sass会添加.scss或.sass的后缀
2.同一目录下,局部文件和非局部文件不能重名

4.使用css原生@import的既定规则:

1.当@import后边跟的文件名是以.css结尾的时候
2.当@import后边跟的是http://开头的字符串的时候
3.当@import后边跟的是一个url()函数的时候
4.当@import后边带有media queries的时候

注意:多个x需要import的文件可以写成一行,用逗号隔开


sass编译中文时候出现如下错误的解决方法:

error sass/screen.scss (Line 2 of sass/_variables.scss: Invalid GBK character "\xE5")

到ruby安装目录下的gems\2.2.0\gems\sass-3.4.19\lib\sass等目录下找到engine.rb文件,在文件里require后加上就可以了:

Encoding.default_external = Encoding.find('utf-8')

语法注意事项

例如:

  1. 如下图1:a标签的hover
    左侧是scss文件,右边是生成后的css文件,blue的a后面多一个空格影响就很大,指a标签下面所有元素hover效果,注意&特殊符号的应用。

2.sass里提供了class嵌套,也提供了Atrribute嵌套

//class嵌套
.mian-sec{
    font-family:$main-sec-ff;
    .headline{
        font-family: $main-sec-ff;
        font-size: 16px;
    }
}
//属性嵌套
.mian-sec{
    font-family:$main-sec-ff;
    .headline{
        font:{
          family: $main-sec-ff;
          size: 16px;
        }
    }
}

两种形式生成css结果一样:

/* line 31, ../sass/screen.scss */
.mian-sec .headline {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 16px;
}

hexo搭建静态博客

安装

系统环境 Windows 7 64bit

文本编辑器推荐使用 WebStorm 10,
文件编码选择 UTF-8
Git

安装 GitHub for Windows,
登录后会自动在本地配置好 SSH, 执行git shell时也不需要-config用户名和邮箱

新建仓库, Github Pages 的仓库名必须为your_user_name.github.io
your_user_name 替换成你的用户名

配置 SSH, 参考 SSH配置教程Node.js
安装 Node.js, Node 安装包里带有 npm
Hexo

安装 Hexo
//2.x
npm install hexo -g

//3.x
npm install hexo-cli -g
npm install hexo --save

查看 Node 版本

node -v

查看 Hexo 版本

hexo version

创建项目

hexo init hexo-lcx

进入目录

cd hexo-lcx

也可以先建文件夹再进目录初始化

cd hexo-lcx
hexo init

安装依赖包

//2.x
npm install

// 3.x
npm install
// generators
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
// server
npm install hexo-server --save
// deployers
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
// plugins
npm install hexo-renderer-marked@0.25 --save
npm install hexo-renderer-stylus@0.3 --save
npm install hexo-generator-feed@1.0.3 --save
npm install hexo-generator-sitemap@1.0.1 --save

以后所有的命令都在该目录下进行

启动服务

hexo server

用浏览器打开 http://localhost:4000/ 或者 http://127.0.0.1:4000/ 就能看到网页了
推荐使用现代化浏览器(Chrome)获得最佳效果

按 Ctrl+C 停止本地预览服务
使用
目录结构

├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

全局配置 _config.yml

配置文件的冒号”:”后面有空格

# Site #站点信息
title: Hank
subtitle: Hank's Blog
description: 关注WEB前端,前端开发
author: hank
author_title: 'Web Developer & Designer'
avatar: css/images/avatar.png
location: 'Beijing, China'
follow: https://github.com/huangjihua/
language: zh-CN
since: 2015
timezone: Asia/Beijing #时区

# URL #链接格式
url: http://blog.huangjihua.com #网址
root: / #根目录
permalink: post/:title.html #文章的链接格式
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 #新文章标题
default_layout: post #默认模板(post page photo draft)
titlecase: false #标题转换成大写
external_link: true #新标签页里打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #语法高亮
  enable: true
  line_number: false #显示行号
  auto_detect: true
  tab_replace:

# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:

# Date / Time format #日期时间格式
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination #分页
per_page: 20 #每页文章数, 设置成 0 禁用分页
pagination_dir: page

# Extensions #插件和主题
## 插件: http://hexo.io/plugins/
## 主题: http://hexo.io/themes/
theme: next

# Deployment #部署, huangjihua是我的用户名, 同时发布在 GitHub 和 GitCafe 上面
deploy:
  type: git
  repository:
    github: https://github.com/huangjihua/huangjihua.github.io.git,master
    gitcafe: https://gitcafe.com/huangjihua/huangjihua.git,master

# Disqus #Disqus评论系统
disqus_shortname:

plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
命令行使用

常用命令:

hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页, 可以在 public 目录查看整个网站的文件
hexo server #本地预览, 'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存, 

强烈建议每次执行命令前先清理缓存, 每次部署前先删除 .deploy 文件夹

复合命令:

hexo deploy -g #生成加部署
hexo server -g #生成加预览

简写:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

安装插件, 为插件名

npm install <plugin-name> --save #安装
npm update #升级
npm uninstall <plugin-name> #卸载

安装主题, 为主题的 git 仓库, 为要存放在本地的目录名

git clone <repository> themes/<theme-name>

##### 修改网站配置文件

theme: <theme-name>

编辑文章

新建文章

hexo new "标题"

在 _posts 目录下会生成文件 标题.md

title: 标题
date: 2014-11-11 11:11:11
tags:
- 标签1
- 标签2
- 标签3
categories: [分类1,分类2,分类3]
---

正文, 使用 Markdown 语法书写

编辑完后保存, hexo server 预览

发布

以发布到 Github 为例

编辑全局配置文件 _config.yml 中的 deploy 部分, huangjihua为用户名

deploy:
  type: github
  repo: https://github.com/huangjihua/huangjihua.github.io.git
  branch: master

或者

deploy:
  type: github
  repository: git@github.com:huangjihua/huangjihua.github.com.git
  branch: master

项目主页需要把 branch 设置为 gh-pages

托管到 Gitcafe 的话修改为

deploy:
  type: github
  repository: git@gitcafe.com:huangjihua/huangjihua.git
  branch: gitcafe-pages

部署

hexo deploy

以下提示说明部署成功

[info] Deploy done: github

点击 Github 上项目的 Settings, GitHub Pages, 提示 Your site is published at http://huangjihua.github.io/
第一次上传网站需要等十分钟左右, 以后每次更新都能马上打开

绑定域名

不绑定域名的话只能通过 your_user_name.github.io 访问
申请域名推荐 GoDaddy, 域名解析推荐 DNSPod
绑定顶级域名

新建文件 CNAME, 无后缀, 纯文本文件, 内容为要绑定的域名 huangjihua.com
如果要使用 www.huangjihua.com 的形式, 文件内容改为 www.huangjihua.com
DNS设置
主机记录@, 类型A, 记录值192.30.252.153
主机记录www, 类型A, 记录值192.30.252.153
参考 Tips for configuring an A record with your DNS provider
绑定子域名

比如使用域名huangjihua.com的子域名blog.huangjihua.com
CNAME文件内容为blog.huangjihua.com

DNS设置
主机记录blog, 类型CNAME, 记录值huangjihua.github.io
参考 Tips for configuring a CNAME record with your DNS provider
Gitcafe 绑定域名

项目管理界面, 左侧的导航栏中有自定义域名设置

主题

代码:
https://github.com/ppoffice/hexo-theme-icarus
下载安装主题

cd hexo-theme-icarus
git clone https://github.com/ppoffice/hexo-theme-icarus.git

也可以手动下载后解压到 themes 目录

全局配置文件 _config.yml 中 theme 改成 icarus

主题目录结构

.
├── languages #国际化
| ├── default.yml #默认
| └── zh-CN.yml #中文
├── layout #布局
| ├── _partial #局部的布局
| └── _widget #小挂件的布局
├── script #js脚本
├── source #源代码文件
| ├── css #CSS
| | ├── _base #基础CSS
| | ├── _partial #局部CSS
| | ├── fonts #字体
| | ├── images #图片
| | └── style.styl #style.css
| ├── fancybox #fancybox
| └── js #js
├── _config.yml #主题配置文件
└── README.md #主题介绍

主题配置文件

以下是主题 Icarus 的配置文件

# Logo
logo: css/images/logo.png # Empty this to unset logo
# Header
menu:
  首页: /
  归档: /archives
  #生活: /life
  #分类: /categories
  #标签: /tags
  关于: /about

# Content
excerpt_link: 阅读全文 #替换为中文
fancybox: true   #插件添加照片 ![img caption](img url)
archive_yearly: true #按年存档


# Profile
profile: true # whether to show profile bar
gravatar: false # whether to use gravatar with the email
showlogo: false # whether to show the logo in the header

# Sidebar
sidebar: right # set to false if you don't want a sidebar
widgets: #站点右边栏,暂时默认,后面介绍修改和添加
#- search
- recent_posts
- category
- tag
- tagcloud
- archive
- weibo
thumbnail: true
contacts:
  github: http://github.com/huangjihua  #ppoffice/hexo-theme-icarus
  weibo:  http://www.weibo.com/236797891
  csdn: http://blog.csdn.net/huangjihua0402
  #twitter: '#'
  #facebook: '#'
  #dribbble: '#'
  rss: atom.xml #rss地址  默认即可

# Links
links:
  hank: http://www.github.com/huangjihua

# CDN
cdn: useso #If your site loads slowly change it to "google" , because "useso" is slow out of China

addthis: #SNS分享,身在天朝,当然用“百度分享”,暂时默认,后面会介绍
  enable: true
  pubid:
  facebook: true
  twitter: true
  google: true
  pinterest: true

# Miscellaneous 分享
google_site_verification:
google_analytics: #要使用google_analytics进行统计的话,这里需要配置ID,暂时默认,后面介绍
baidu_analytics: 07c425d4bcfc27b868657ca3f2a6e187
jiathis: true
favicon: favicon.png #添加小图标
baidushare: true
#twitter:
#google_plus:
#fb_admins:
#fb_app_id:

#将 favicon.ico 文件放在 source 目录下, 修改主题配置文件

语言设置

可用的语言及代码

English (en)
中文简体 (zh-Hans)
French (fr-FR)
正体中文 (zh-hk/zh-tw)
Russian (ru)
German (de)

站点配置文件

language: zh-hk
菜单设置

编辑主题配置文件的 menu
若站点运行在子目录中, 将链接前缀的 / 去掉

menu:
  home: /
  archives: /archives
  categories: /categories
  tags: /tags
  commonweal: /404.html
  about: /about

标签云页面

添加一个标签云页面, 并在菜单中显示页面链接

新建 tags 页面

hexo new page “tags

将页面的类型设置为 tags

title: tags
date: 2015-09-19 22:37:08
type: "tags"
---

关闭评论

title: tags
date: 2015-09-19 22:37:08
type: "tags"
comments: false
---

在菜单中添加链接. 编辑主题配置文件, 添加 tags 到 menu 中

menu:
  tags: /tags

分类页面

添加一个分类页面, 并在菜单中显示页面链接

新建 categories 页面

hexo new page categories

将页面的类型设置为 categories

title: categories
date: 2015-09-19 22:38:00
type: "categories"
---

关闭评论

title: categories
date: 2015-09-19 22:38:00
type: "categories"
comments: false
---

在菜单中添加链接. 编辑主题配置文件, 添加 categories 到 menu 中

menu:
  categories: /categories

RSS 链接

编辑主题配置文件 rss 字段

rss: false

禁用Feed链接

rss:

默认使用站点的 Feed 链接, 需要安装 hexo-generator-feed 插件
浏览http://localhost:4000/atom.xml查看是否生效

rss: http://your-feed-url

指定特定的链接地址, 适用于已经烧制过 Feed 的情形
代码高亮主题

NexT 使用 Tomorrow Theme 作为代码高亮, 共有5款主题
站点建立时间

例如 © 2014 - 2015

站点配置文件新增字段 since

since: 2014

数学公式显示

NexT 使用 MathJax 来显示数学公式, 默认关闭

主题配置文件 mathjax 设定为 true

##### MathJax Support
mathjax: true

访问过慢可替换为其他CDN, 修改文件
themes\next\layout_scripts\mathjax.swig

侧栏设置

post - 默认行为, 在文章页面(拥有目录列表)时显示
always - 在所有页面中都显示
hide - 在所有页面中都隐藏(可以手动展开)

sidebar: post

头像设置

编辑站点配置文件, 新增字段 avatar, 头像的链接地址可以是:

网络地址
https://avatars2.githubusercontent.com/u/4962914?v=3&s=460

站点内的地址
/uploads/avatar.jpg //头像图片放置在站点的 source/uploads/
/images/avatar.jpg //头像图片放置在主题的 source/images/

avatar: /images/huangjihua_avatar.png

作者名称

编辑站点配置文件 author
站点描述设置

编辑站点配置文件 description
侧边栏社交链接

站点配置文件新增字段 social, 然后添加社交站点名称与地址

# Social links
social:
  GitHub: https://github.com/huangjihua
  Twitter: https://twitter.com/huangjihua
  Zhihu: http://www.zhihu.com/people/huangjihua
  Douban: http://www.douban.com/people/huangjihua
  #Weibo: http://weibo.com/lmlcx
自定义页面

以关于页面为例
新建一个 about 页面

hexo new page "about"

编辑 source/about/index.md:

title: About
date: 2014-11-1 11:11:11
---
About Me

菜单显示 about 链接, 主题配置文件中将 menu 中 about 前面的注释去掉

menu:
  about: /about

友情链接

站点配置文件添加

# 标题
links_title: 友情链接
# 链接
links:
  Hexo: http://hexo.io/
  huangjihua: http://blog.huangjihua.com/

Sitemap 网站地图

安装插件

npm install hexo-generator-sitemap

站点配置文件里开启插件

plugins:
- hexo-generator-sitemap

浏览http://localhost:4000/sitemap.xml查看是否生效

404 页面

效果 http://blog.huangjihua.com/404.html

source 目录下新建 404.html 页面

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="your-site-url" homePageName="回到我的主页"></script>

</body>
</html>

文章摘录

NexT 支持三种方式来控制首页文章的显示方式

在文章中使用 <!-- more --> 手动进行截断
在文章的 front-matter 中添加 description, 内容为文章摘要
自动形成摘要, 在主题配置文件中添加

设定首页/归档/标签页面文章的篇数

安装以下插件

hexo-generator-index
hexo-generator-archive
hexo-generator-tag

站点配置文章中设定

index_generator:
  per_page: 5

archive_generator:
  per_page: 20
  yearly: true
  monthly: true

tag_generator:
  per_page: 10

优化

多说评论系统
如需取消某个页面/文章的评论, 在 md 文件的 front-matter 中增加 comments: false

登陆多说创建站点, 多说域名 xxx.duoshuo.com 前面的 xxx 即为 duoshuo_shortname, 在站点配置文件中新增 duoshuo_shortname 字段

duoshuo_shortname: xxx

多说评论组件提供热评文章功能, 仅在文章页面显示

站点/主题配置文件中设置

# 多说热评文章 true 或者 false
duoshuo_hotartical: true

Disqus

在 Disqus官网 申请新网站的 shortname
站点配置文件, 添加 disqus_shortname

disqus_shortname: xxxxxxxx
设置网站统计

百度统计

登录 百度统计, 定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id
编辑站点配置文件, 新增字段 baidu_analytics 字段

baidu_analytics: xxxxxxxxxxxxxxxx

Google Analytics

从 Google Analytics 获取 ID
站点配置文件新增 google_analytics, 设置成 Google 跟踪 ID. 通常是以 UA- 开头

google_analytics: UA-xxxxxxxx-x
分享

分享服务优先选择 JiaThis
JiaThis

站点/主题配置文件添加字段 jiathis, 值为 true

# JiaThis 分享服务
jiathis: true

百度分享

站点/主题配置文件添加字段 baidushare, 值为 true

# 百度分享服务
baidushare: true

多说分享

站点/主题配置文件添加字段 duoshuo_share, 值为 true, 多说分享必须与多说评论同时使用

# 多说分享服务
duoshuo_share: true
Swiftype 搜索

站点配置文件新增 swiftype_key 字段, 值为 swiftype 搜索引擎的 key

#Swiftype Search Key
swiftype_key: xxxxxxxxx

Google Webmaster tools

设置 Google 站点管理工具的验证字符串, 用于提交 sitemap

获取 google site verification code
登录 Google Webmaster Tools, 导航到验证方法, 并选择 HTML 标签, 将会获取到一段代码:

<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXXXXXXX" />

将 content 里面的 XXXXXXXXXXXXXXXXXXXXXXX 复制出来, 站点配置文件新增字段 google_site_verification

google_site_verification: XXXXXXXXXXXXXXXXXXXXXXX

版权

参见 知识共享许可协议
站点配置文件新增

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa

图片显示

把图片放到 source/images 目录下

![test](images/xxx.jpg)

推荐使用图床, 例如七牛云存储
自定义 404 页面

添加 source/404.html

404 页面不需要 Hexo 解析

layout: false
--------
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>404</title>
    <link rel="icon" href="/favicon.ico">
  </head>
  <body>
    <div align="center">
      <p>404 你懂的</p>
    </div>
  </body>
</html>
添加 robots.txt

source 目录下添加 robots.txt

# robots.txt
User-agent: Baiduspider
Disallow: /
User-agent: Googlebot
Disallow:

生成 post 时默认生成 categories 配置项

在 scaffolds/post.md 中添加

categories:

添加 “fork me on github”

官方教程
点击加载评论

在 themes\next\layout_layout.swig 里找到

<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>

在上面添加

<button id="load-disqus" onclick="disqus.load();" style="background-color: #ebebeb; color: #646464; font-size: 18px; padding: 8px 12px; border-radius: 5px; border: 1px solid #ebebeb;">点击查看评论</button>

修改文件
themes\next\layout_scripts\comments\disqus.swig

<script type="text/javascript">

var disqus = { //添加的内容
load : function disqus(){ //添加的内容

      var disqus_shortname = '';
      var disqus_identifier = '';
      var disqus_title = '';
      var disqus_url = '';
      function run_disqus_script(disqus_script){
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      }
      run_disqus_script('count.js');
      

$('#load-disqus').remove(); //添加的内容
} //添加的内容
} //添加的内容

</script>
给 GitHub 添加 README

把 README.MD 文件的后缀名改成 MDOWN, 放到 source 文件夹下, 这样 Hexo 不会将其解析成网页, GitHub 也会作为 MD 文件解析
网站访问量统计

使用 不蒜子 提供的服务

安装脚本

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

安装标签

算法a: pv的方式, 单个用户连续点击n篇文章, 记录n次访问量.

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span></span>

算法b: uv的方式, 单个用户连续点击n篇文章, 只记录1次访客数.

<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

网站运行时间

脚本

<script>
var birthDay = new Date("11/20/2014");
var now = new Date();
var duration = now.getTime() - birthDay.getTime();
var total= Math.floor(duration / (1000 * 60 * 60 * 24));
document.getElementById("showDays").innerHTML = "本站已运行 "+total+" 天";
</script>

标签

<span id="showDays"></span>

简体中文/繁体中文切换

下载 js文件 放到主题的 js 文件夹

添加标签

<a id="translateLink" href="javascript:translatePage();">繁體</a>

添加脚本

<script type="text/javascript" src="/js/tw_cn.js"></script>
<script type="text/javascript">
var defaultEncoding = 2; //网站编写字体是否繁体,1-繁体,2-简体
var translateDelay = 0; //延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
var cookieDomain = "http://www.arao.me/"; //Cookie地址, 一定要设定, 通常为你的网址
var msgToTraditionalChinese = "繁體"; //此处可以更改为你想要显示的文字
var msgToSimplifiedChinese = "简体"; //同上,但两处均不建议更改
var translateButtonId = "translateLink"; //默认互换id
translateInitilization();
</script>

Kill IE6

<!--[if IE 6]>
  <script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->
hexo简要流程

Hexo首先解析md文件,然后根据layout.ejs判断布局类型,再转发给其他布局文件。在布局中可以引入其他文件,比如

<%- partial('_partial/header') %>

这样每一块内容都是单独的,方便二次使用,也可以几个不同布局引用一个代码片段。
简要流程

markdown里的一些特殊用法

绘制表格
MD写法:
 | 名称 | 属性 | 方法 |
|:-----|:---:|----------:|
|测试| **`name`** |test()|
|测试| **`name`** |test()|

编译后的效果如下:

名称 属性 方法
测试 name test()
测试 name test()

绘制流程图

一个完整示例:

<img src="http://yuml.me/diagram/nofunky/usecase/(note: figure 1.2{bg:beige}),
[User]-(Login),[Site Maintainer]-(Add User),(Add User)<(Add Company),
[Site Maintainer]-(Upload Docs),(Upload Docs)<(Manage Folders),[User]-(Upload Docs),
[User]-(Full Text Search Docs), (Full Text Search Docs)>(Preview Doc),(Full Text Search Docs)>(Download Docs),
[User]-(Browse Docs),(Browse Docs)>(Preview Doc), (Download Docs),
[Site Maintainer]-(Post New Event To The Web Site), [User]-(View Events)" >


-EOF-

HTTP与HTTPs区别以及SSL/TLS协议运行机制

HTTP和HTTPS介绍

1.http介绍

超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。1960年美国人Ted Nelson构思了一种通过计算机处理文本信息的方法,并称之为超文本(hypertext),这成为了HTTP超文本传输协议标准架构的发展根基。Ted Nelson组织协调万维网协会(World Wide Web Consortium)和互联网工程工作小组(Internet Engineering Task Force )共同合作研究,最终发布了一系列的RFC,其中著名的RFC 2616定义了HTTP 1.1。

1.0与1.1版本的主要区别

1,HTTP/1.0协议使用非持久连接,即在非持久连接下,一个tcp连接只传输一个Web对象,;
2,HTTP/1.1默认使用持久连接(然而,HTTP/1.1协议的客户机和服务器可以配置成使用非持久连接)。
   在持久连接下,不必为每个Web对象的传送建立一个新的连接,一个连接中可以传输多个对象!

图解HTTP推荐看:图解HTTP(上)图解HTTP(下)

2.https介绍

HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 它是一个URI scheme(抽象标识符体系),句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP,但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层(在HTTP与TCP之间)。这个系统的最初研发由网景公司(Netscape)进行,并内置于其浏览器Netscape Navigator中,提供了身份验证与加密通讯方法。

HTTPS工作图解:
时序图

HTTP与HTTPS主要区别
  1. HTTPS使用端口443,而不是象HTTP那样使用端口80来和TCP/IP进行通信。(不同的连接方式和不同的端口)
  2. HTTPS协议需要到ca申请证书,一般免费证书很少,需要交费。
  3. http是超文本传输协议,信息是明文传输,https 则是具有安全性的ssl加密传输协议
  4. http的连接很简单,是无状态的。
  5. HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议 要比http协议安全
HTTPS解决的问题
  1. 信任主机的问题:采用https 的server 必须从CA 申请一个用于证明服务器用途类型的证书. 改证书只有用于对应的server 的时候,客户度才信任次主机.
  2. 通讯过程中的数据的泄密和被窜改
1. 一般意义上的https, 就是 server 有一个证书.
    a) 主要目的是保证server 就是他声称的server. 这个跟第一点一样.
    b) 服务端和客户端之间的所有通讯,都是加密的.
        i. 具体讲,是客户端产生一个对称的密钥,通过server 的证书来交换密钥. 一般意义上的握手过程.
        ii. 接下来所有的信息往来就都是加密的. 第三方即使截获,也没有任何意义.因为他没有密钥. 当然窜改也就没有什么意义了.
2. 少许对客户端有要求的情况下,会要求客户端也必须有一个证书.
    a) 这里客户端证书,其实就类似表示个人信息的时候,除了用户名/密码, 还有一个CA 认证过的身份. 
       应为个人证书一般来说上别人无法模拟的,所有这样能够更深的确认自己的身份.
    b) 目前少数个人银行的专业版是这种做法,具体证书可能是拿U盘作为一个备份的载体.
3. HTTPS 一定是繁琐的.
    a) 本来简单的http协议,一个get一个response. 由于https 要还密钥和确认加密算法的需要.单握手就需要6/7 个往返.
        i. 任何应用中,过多的round trip 肯定影响性能.
    b) 接下来才是具体的http协议,每一次响应或者请求, 都要求客户端和服务端对会话的内容做加密/解密.
        i. 尽管对称加密/解密效率比较高,可是仍然要消耗过多的CPU,为此有专门的SSL 芯片. 如果CPU 信能比较低的话,肯定会降低性能,从而不能serve 更多的请求.
        ii. 加密后数据量的影响. 所以,才会出现那么多的安全认证提示
SSL/TLS协议运行机制

互联网的通信安全,建立在SSL/TLS协议之上。
本文简要介绍SSL/TLS协议的运行机制。这里就重点介绍一下设计思想和运行过程,不涉及具体的实现细节。详情请参阅RFC文档

一、历史
互联网加密通信协议的历史,几乎与互联网一样长。
1994年,NetScape公司设计了SSL协议(Secure Sockets Layer)的1.0版,但是未发布。
1995年,NetScape公司发布SSL 2.0版,很快发现有严重漏洞。
1996年,SSL 3.0版问世,得到大规模应用。
1999年,互联网标准化组织ISOC接替NetScape公司,发布了SSL的升级版TLS 1.0版。
2006年和2008年,TLS进行了两次升级,分别为TLS 1.1版和TLS 1.2版。最新的变动是2011年TLS 1.2的修订版。
目前,应用最广泛的是TLS 1.0,接下来是SSL 3.0。但是,主流浏览器都已经实现了TLS 1.2的支持。
TLS 1.0通常被标示为SSL 3.1,TLS 1.1为SSL 3.2,TLS 1.2为SSL 3.3。


二、作用
不使用SSL/TLS的HTTP通信,就是不加密的通信。所有信息明文传播,带来了三大风险。

1) 窃听风险(eavesdropping):第三方可以获知通信内容。
(2) 篡改风险(tampering):第三方可以修改通信内容。
(3) 冒充风险(pretending):第三方可以冒充他人身份参与通信。

SSL/TLS协议是为了解决这三大风险而设计的,希望达到:

1) 所有信息都是加密传播,第三方无法窃听。
(2) 具有校验机制,一旦被篡改,通信双方会立刻发现。
(3) 配备身份证书,防止身份被冒充。

互联网是开放环境,通信双方都是未知身份,这为协议的设计带来了很大的难度。而且,协议还必须能够经受所有匪夷所思的攻击,这使得SSL/TLS协议变得异常复杂。

三、基本的运行过程
SSL/TLS协议的基本思路是采用公钥加密法,也就是说,客户端先向服务器端索要公钥,然后用公钥加密信息,服务器收到密文后,用自己的私钥解密。但是,这里有两个问题。

(1)如何保证公钥不被篡改?

解决方法:将公钥放在数字证书中。只要证书是可信的,公钥就是可信的。

(2)公钥加密计算量太大,如何减少耗用的时间?

解决方法:每一次对话(session),客户端和服务器端都生成一个"对话密钥"(session key),用它来加密信息。
         由于"对话密钥"是对称加密,所以运算速度非常快,而服务器公钥只用于加密"对话密钥"本身,这样就减少了加密运算的消耗时间。

因此,SSL/TLS协议的基本过程是这样的:

1) 客户端向服务器端索要并验证公钥。
(2) 双方协商生成"对话密钥"。
(3) 双方采用"对话密钥"进行加密通信。

上面过程的前两步,又称为”握手阶段”(handshake)。

参考资料:

MicroSoft, SSL/TLS in Detail.aspx)
The First Few Milliseconds of an HTTPS Connection

linux学习随笔

系统分区只分区与格式化

1.分区类型

  • 主分区:最多只能4个 (硬盘由等大小的扇区组成,每个扇区有512字节,512个字节当中446个字节用来记录启动信息的,另外64个字节用来分区表示的,每16个字节一个分区所以只能分4个主分区)
  • 扩展分区:
    最多只能有1个;
    主分区加扩展分区最多有4个;
    不能写入数据,只能包含逻辑分区;
    
  • 逻辑分区

2、格式化:
·格式化(高级格式化)又称逻辑格式化,它是指根据用户选定的文件系统(如FAT16、FAT32、NTFS、EXTZ、EXT3、EXT4等),
在磁盘的特定区域写入特定数据,在分区中划出一片用于存放文件分配表、目录表等用于文件管理的磁盘空间。

分区之分区设备文件名与挂载

硬件 设备文件名
IDE硬盘 dev/hd[a一d]
SCSI/SATA/USB硬盘 /dev/sd[a一p]
光驱 /dev/cdrom或/dev/hdc
软盘 /dev/fd[0-1]
打印机(25针) /dev/1p[0-2]
打印机(USB) /dev/usb/lp[0-15]
鼠标 /dev/mouse

分区设备文件名

  • /dev/hda1(IDE硬盘接口)
  • /dev/sda1(SCSI硬盘接口、SATA硬盘接口[串口]) SATA1,2,3

    挂载

  • 必须分区
    1. /(根分区)
    2. swap分区(交换分区,内存2倍,不超过2GB)
  • 推荐分区
    1. /boot (启动分区,200MB)

文件系统结构


文件系统与目录树的关系(挂载)
目录树结构

总结

  • 分区:把大硬盘分为小的逻辑分区
  • 格式化:写入文件系统
  • 分区设备文件名:给每个分区定义设备文件名
  • 挂载:给每个分区分配挂载点