（16）打鸡儿教你Vue.js

博客：

Hexo搭建个性博客

快速、简洁且高效的博客框架

超快速度

Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。

支持 Markdown

Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。

一键部署

只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。

丰富的插件

Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。

npm install hexo-cli -g

hexo init blog

cd blog

npm install

hexo server

安装hexo

npm install hexo-cli -g

初始化Hexo

D:\> hexo init blog

获取博客主题

git clone https://github.com/WeicMa/Hexo-Theme-Life.git themes-life

_config.yml 可称为站点配置文件

编译命令：hexo g

启动命令：hexo s

_config.yml中配置Git

# URL

## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: '这里填写你自己的项目地址'

root: '这里写项目名称'

permalink: :year/:month/:day/:title/

permalink_defaults:

安装自动部署发布工具:

npm install hexo-deployer-git --save

hexo clean && hexo g && hexo d

文章直接放在/Hexo/source/_posts目录下

什么是hexo?

安装，git,node.js,hexo

$ npm install -g hexo-cli

安装 Git

Windows：下载并安装 git.

安装 Node.js

安装 Node.js 的最佳方式是使用 nvm。

安装 Hexo

$ npm install -g hexo-cli

使用 git 将主题 clone 至你的 hexo 博客项目下的 themes 文件夹下

cd themes && git clone https://github.com/Mrminfive/hexo-theme-skapp.git

clone 完后将根目录下的 _config.yml 文件中的 theme 字段设置为 hexo-theme-skapp，同时安装对应 node 依赖：

npm install --save hexo-autoprefixer hexo-filter-cleanup hexo-generator-feed hexo-generator-sitemap hexo-renderer-sass hexo-renderer-swig mamboer/lunr.js moment node-sass object-assign

注意：如果安装失败可尝试用 cnpm 进行安装。另外，由于使用 nodejieba 分词库，所以 windows 下用户应提前安装好相应编译环境。操作如下：

npm install -g windows-build-tools

npm install -g node-gyp

主题设置：

编辑根 _config.yml 文件，将 language 设置为你想要的语言：

language: zh-cn

设置菜单

编辑根 _config.yml 文件，将 menu 设置为如下：

menu:

  home: /

  archive: /archives

  about: /about

主题默认的菜单项有：

键值设定值显示文本（简体中文）

home	home: /	首页

archive	archive: /archives	归档

about	about: /about	关于

search	search: /search	搜索页

创建 about 页面：

hexo new page about

创建 search 页面：

hexo new page search

博客配置：

# Site

# 博客的标题

title: MINFIVE

# banner显示的子标题

subtitle: MINFIVE BLOG

# banner显示的简短介绍

subtitle_desc: 日常学习与兴趣交流

# seo关键字

keywords: minfive, minfive blog, 前端博客, 前端, 程序员, 前端开发, 全栈开发, node.js, javascript

# 博客介绍（同时用于seo）

description: 日常学习与兴趣交流的个人博客

# 个人介绍

introduction: 不思量，自难忘！

# 博客的favicon图标，支持本地及在线两种方式，本地请将图标放置于 themes/hexo-theme-skapp/source/img 目录下

favicon_ico: https://blog.static.minfive.com/other/favicon.ico

# 博客的左上角logo图标，支持本地及在线两种方式

logo: http://oo12ugek5.bkt.clouddn.com/images/logo-text-white.png

# 头像/二维码（用于显示在底部）二选一

avatar: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png

# qrcode: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png

# 文章的默认封面

default_cover: http://oo12ugek5.bkt.clouddn.com/images/default_cover.png

# header 的背景图

header_cover: https://blog.static.minfive.com/other/banner-bg.jpg

# 404 页面的背景图

error_page_bg: https://blog.static.minfive.com/other/dogs.jpg

# 页面加载loading图标

loader_img: https://blog.static.minfive.com/other/loader.gif

# 站长信息

author:

  name:

  link:

# 用于页面 footer 的站长信息

about:

  info: 本站是基于 Hexo 搭建的静态资源博客，主要用于分享日常学习、生活及工作的一些心得总结，欢迎点击右下角订阅 rss。

  address: Guangzhou, Guangdong Province, China

  email:

icon-email: 邮箱

icon-rss: rss

icon-in: linkedin

icon-twitter: twitter

icon-facebook: facebook

icon-github: github

icon-zhihu: 知乎

icon-douban: 豆瓣

icon-weibo: 微博

icon-telegram: telegram

https://github.com/Mrminfive/hexo-theme-skapp/blob/master/README-cn.md

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774