(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