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-

站内搜索

安装 hexo-generator-search

npm install hexo-generator-search --save

安装 hexo-generator-searchdb

$ npm install hexo-generator-searchdb --save

启用搜索,编辑站点配置文件_config.yml,新增以下内容到任意位置:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

安装 RSS 插件

安装hexo-generator-feed

$ npm install hexo-generator-feed --save

配置到站点配置文件_config.yml

#RSS订阅
plugin:
 - hexo-generator-feed

feed:
  type: atom
  path: atom.xml
  limit: 20

搜索引擎收录

1.安装插件:

//生成站点地图
npm install hexo-generator-sitemap --save 
//生成百度站点地图
npm install hexo-generator-baidu-sitemap --save 

2.在站点下的_config.yml文件中添加下面的内容:

sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

3.在robots.txt文件中添加以下内容(注意把域名换成你自己的):

Sitemap: http://test.com/sitemap.xml
Sitemap: http://test.com/baidusitemap.xml

4.robots.txt是蜘蛛协议,给搜索引擎爬的,可以参考下面的文件:

User-agent: *
Allow: /
Allow: /archives/ 
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://test.com/sitemap.xml
Sitemap: http://test.com/baidusitemap.xml

手动创建文件,将其放在站点目录下的source目录下即可

优化性能插件

SEO优化

npm install hexo-generator-seo-friendly-sitemap --save

HTML压缩

npm install hexo-html-minifier --save

CSS压缩

npm install hexo-clean-css --save

JS压缩

npm install hexo-uglify --save

imagages压缩

npm install hexo-imagemin --save

添加本地图片

在\hexo\source目录下新建文件夹,命名为images或者其他你喜欢的名字,然后编辑你的md博文,插入下面的代码样式:

1
![“图片描述”](/images/你的图片名字.JPG)

插入音乐

比如网易云音乐,找到喜欢的歌曲,点击分享按钮,把里面的代码复制下来,直接粘贴到博文中即可

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86   
   src="http://music.163.com/outchain/player?type=2&id=25706282&auto=0&height=66">  
</iframe>   

插入视频

如:

<iframe   
    height=498 width=510   
    src="http://player.youku.com/embed/XNjcyMDU4Njg0"   
    frameborder=0 allowfullscreen>  
</iframe>  

博客图床

1.强烈推荐七牛云储存,注册地址

2.七牛云储存提供10G的免费空间,以及每月10G的流量.存放个人博客图片最好不过了

3.七牛云储存还有各种图形处理功能、缩略图、视频存放速度也给力。

具体使用见使用推荐吴同学的: 七牛作为github博客的图床

文章目录
  1. 1. 安装
    1. 1.1. 安装 Hexo
    2. 1.2. 全局配置 _config.yml
    3. 1.3. 命令行使用
  2. 2. 发布
  3. 3. 部署
    1. 3.1. 绑定域名
  4. 4. 主题
    1. 4.1. 主题目录结构
    2. 4.2. 主题配置文件
    3. 4.3. 菜单设置
    4. 4.4. 自定义页面
    5. 4.5. 404 页面
    6. 4.6. 多说评论系统
    7. 4.7. 设置网站统计
    8. 4.8. 分享
    9. 4.9. Swiftype 搜索
    10. 4.10. 添加 robots.txt
    11. 4.11. 给 GitHub 添加 README
    12. 4.12. hexo简要流程
  5. 5. markdown里的一些特殊用法
    1. 5.1. 绘制表格
  6. 6. 绘制流程图
  7. 7. 站内搜索
  8. 8. 安装 RSS 插件
  9. 9. 搜索引擎收录
  10. 10. 优化性能插件
  11. 11. 添加本地图片
  12. 12. 插入音乐
  13. 13. 插入视频
  14. 14. 博客图床