hexo高阶教程：教你怎么让你的hexo博客在搜索引擎中排第一

本文首发在个人我的博客：cherryblog.site/
欢迎你们前去参观，顺便求fork，么么哒~

上一次在掘金上发表的hexo高阶教程：hexo高阶教程next主题优化之加入网易云音乐、网易云跟帖、动态背景、自定义主题、统计功能，收到了很多朋友的喜欢，手动比心♪(＾∀＾●)ﾉ，也有很多朋友私信我给我提改进的意见，本着生命就是要折腾的原则，我又作了以下的优化：

• seo优化
• 多终端修改项目
• 同时托管到github和coding上
• 设置google和百度sitemap，让搜索引擎更好的抓取你的网站
• 使用gulp对css、js进行优化
• 接入七牛图床
• 加入打赏功能
• 加入照片模块

开始作这个博客的时候是想着记录本身学习的过程，并无期望别人发现（本身比较菜，写的都是一些基础的东西，也没有什么特别nb的技巧值得炫耀〒▽〒），可是自从给博客增长了统计的功能以后，而且在掘金社区发布以后，看着天天还有那么百十号人来看看，心里还有点小激动呢~[]~(￣▽￣)~*

酒香不敌巷子深
咱们要作对搜索引擎友好的站点

因此我就在想，怎么才能让其余小伙伴搜索到我写的文章呢？因而就想到了对网站进行seo优化，这段时间也一直在作网站的seo优化，对于hexo生成的博客来讲，代码其实修改的并很少，主要是要多用心去给各个搜索引擎提交你的sitemap，让搜索引擎的小蜘蛛多来你的站点，这样别人在搜索东西的时候才有更多的可能搜出你的文章，给你的网站带来人气~

做为一个前端工做者，对网站的优化确定仍是须要有不少的，奈什么时候间基本都被工做占用，因此就先把优化功能先放了放，只进行了代码压缩

在这半个月的时间，对于hexo搭建搭建的我的博客，虽然没有让我对某一门语言的深度增长，可是却让我对整个建站流程的宽度增长了很多，优化是一件比写出代码的技术难度还要高的事情。

seo优化

推广是一个烦人的事情啊喂，特别是对于咱们搞技术的来讲，可能就不擅长推广，那么怎么才能让别人知道咱们呢，咱们就要想办法让别人经过搜索就能够搜索到你博客的内容，给咱们带来天然流量，这就须要seo优化,让咱们的站点变得对搜索引擎友好

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指经过站内优化好比网站结构调整、网站内容建设、网站代码优化等以及站外优化。

让百度收录你的站点

咱们首先要作的就是让各大搜索引擎收录你的站点，咱们在刚建站的时候各个搜索引擎是没有收录咱们网站的，在搜索引擎中输入site:<域名>,若是以下图所示就是说明咱们的网站并无被百度收录。咱们能够直接点击下面的“网址提交”来提交咱们的网站

查看站点是否被百度收录

验证网站全部权

登陆百度站长平台：zhanzhang.baidu.com, 只要有百度旗下的帐号就能够登陆，登陆成功以后在站点管理中点击添加网站而后输入你的站点地址，建议输入的网站为www开头的，不要输入github.io的，由于github是不容许百度的spider爬取github上的内容的，因此若是想让你的站点被百度收录，只能使用本身购买的域名

百度站长添加网站

在选择完网站的类型以后须要验证网站的全部权，验证网站全部权的方式有三种：文件验证。html标签验证和cname解析验证，使用哪种方式均可以，都是比较简单的， 可是必定要注意，使用文件验证文件存放的位置须要放在source文件夹下，若是是html文件那么hexo就会将其编译，因此必需要加上的layout:false，这样就不会被hexo编译。（若是验证文件是txt格式的就不须要），其余两种方式也是很简单的，我我的推荐文件验证和cname验证，cname验证最为简单，只需加一条解析就好~

验证网站全部权

生成网站地图

咱们须要使用npm自动生成网站的sitemap，而后将生成的sitemap提交到百度和其余搜索引擎

安装sitemap插件

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save复制代码

修改博客配置文件

在根目录配置文件中修改url为你的站点地址

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://cherryblog.site
root: /
permalink: :title.html
permalink_defaults:复制代码

执行完以后就会在网站根目录生成sitemap.xml文件和baidusitemap.xml文件，能够经过www.cherryblog.site/baidusitema…

向百度提交连接

而后咱们就能够将咱们生成的sitemap文件提交给百度，仍是在百度站长平台，找到连接提交，这里咱们能够看到有两种提交方式，自动提交和手动提交，自动提交又分为主动推送、自动推送和sitemap

如何选择连接提交方式
一、主动推送：最为快速的提交方式，推荐您将站点当天新产出连接当即经过此方式推送给百度，以保证新连接能够及时被百度收录。
二、自动推送：最为便捷的提交方式，请将自动推送的JS代码部署在站点的每个页面源代码中，部署代码的页面在每次被浏览时，连接会被自动推送给百度。能够与主动推送配合使用。
三、sitemap：您能够按期将网站连接放到sitemap中，而后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的连接进行处理，但收录速度慢于主动推送。
四、手动提交：一次性提交连接给百度，可使用此种方式。

通常主动提交比手动提交效果好，这里介绍主动提交的三种方法
从效率上来讲：

主动推送>自动推送>sitemap

链接提交

主动推送

安装插件npm install hexo-baidu-url-submit --save
而后再根目录的配置文件中新增字段

baidu_url_submit:
  count: 100 # 提交最新的一个连接
  host: www.cherryblog.site # 在百度站长平台中注册的域名
  token: 8OGYpxowYnhgVsUM # 请注意这是您的秘钥， 因此请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt # 文本文档的地址， 新连接会保存在此文本文档里复制代码

在加入新的deploye

deploy:
 - type:baidu_url_submitter复制代码

这样执行hexo deploy的时候，新的连接就会被推送了

设置自动推送

在主题配置文件下设置,将baidu_push设置为true：

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true复制代码

而后就会将一下代码自动推送到百度，位置是themes\next\layout_scripts\baidu_push.swig,这样每次访问博客中的页面就会自动向百度提交sitemap

{% if theme.baidu_push %}
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}复制代码

sitemap

将咱们上一步生成的sitemap文件提交到百度就能够了~

将sitemap提交到百度

我记得被百度收录过程仍是蛮久的，一度让我觉得个人方法有问题，提交连接在站长工具中有显示大概是有两天的时候，站点被百度收录大概花了半个月= =，让你们看一下如今的成果
在百度搜索 site:cherryblog.site已经能够搜索到结果

站点已被百度收录

在搜索框输入域名也能够找到站点

站点已被百度收录

输入关键字的名字也能够在第二页就找到呢，好开森~

站点已被百度收录

让google收录你的站点

相比于百度，google的效率实在不能更快，貌似十分钟左右站点就被收录了，其实方法是和百度是同样的，都是先验证你的站点全部权，而后提交sitemap
google站点平台：www.google.com/webmasters/…

站点已被google收录

站点已被google收录

站点已被google收录

让其余搜索引擎收录你的站点

除了百度和google两大搜索引擎，还有搜狗、360等其余的搜索引擎，流程都是同样的
，你们就自行选择添加哈，这里就再也不赘述了~

优化你的url

seo搜索引擎优化认为，网站的最佳结构是用户从首页点击三次就能够到达任何一个页面，可是咱们使用hexo编译的站点打开文章的url是：sitename/year/mounth/day/title四层的结构，这样的url结构很不利于seo，爬虫就会常常爬不到咱们的文章，因而，咱们能够将url直接改为sitename/title的形式，而且title最好是用英文，在根目录的配置文件下修改permalink以下：

url: http://cherryblog.site
root: /
permalink: :title.html
permalink_defaults:复制代码

其余seo优化

seo优化应该说是一个收益延迟的行为，可能你作的优化短时间内看不到什么效果，可是必定要坚持，seo优化也是有很深的能够研究的东西，从咱们最初的网站设计，和最基础的标签的选择都有很大的关系，网站设计就如咱们刚刚说的，要让用户点击三次能够到达网站的任何一个页面，要增长高质量的外链，增长相关推荐（好比说咱们常常见到右侧本站的最高阅读的排名列表），而后就是给每个页面加上keyword和描述
在代码中，咱们应该写出能让浏览器识别的语义化HTML，这样有助于爬虫抓取更多的有效信息：爬虫依赖于标签来肯定上下文和各个关键字的权重；而且对外链设置nofollow标签，避免spider爬着爬着就爬出去了（减小网站的跳出率），而且咱们要尽可能在一些比较大的网站增长咱们站点的曝光率，由于spider会常常访问大站，好比咱们在掘金等技术社区发表文章中带有咱们的站点，这样spider是颇有可能爬到咱们中的站点的，so....

• 网站外链的推广度、数量和质量
• 网站的内链足够强大
• 网站的原创质量
• 网站的年龄时间
• 网站的更新频率（更新次数越多越好）
• 网站的服务器
• 网站的流量：流量越高网站的权重越高
• 网站的关键词排名：关键词排名越靠前，网站的权重越高
• 网站的收录数量：网站百度收录数量越多，网站百度权重越高
• 网站的浏览量及深度：用户体验越好，网站的百度权重越高

同时托管到github和coding上

前面已经提到过一个惨绝人寰的消息，那就是github是不容许百度的爬虫爬取内容的，因此咱们的项目若是是托管在github上的话基本是不会被百度收录的，因此我又同时托管到了coding上，而后在作解析的时候海外的ip 指向到github，国内的或者说百度的直接指向coding

将你的项目托管在coding上

coding

Coding 是一个面向开发者的云端开发平台[1] ，目前提供代码托管，运行空间，质量控制，项目管理等功能。此外，还提供社会化协做功能，包含了社交元素，方便开发者进行技术讨论和协做。
2016年3月CODING宣布收购代码托管平台GitCafe。

以前好多小伙伴都是将项目托管在gitcafe上，可是如今gitcafe被coding收购了，因而就转到coding上了，以前好多人说github的服务器在国外，因而就转战国内的coding了，我将代码迁移至coding还有另一个缘由，github不让百度的爬虫爬取啊，让我哭一会，否则也不会这样折腾。coding就是中国版的github（只是打一个比喻），有提供pages服务。

在coding上建立仓库

首先咱们先要建立一个coding帐号而且在coding上建立一个项目,必需要是公开项目，私有项目是没有page服务的，项目名称能够随意起

建立coding项目

将hexo博客同步到新建立的仓库中

第一次使用coding须要使用ssh，方法和以前github是同样同样的，将ssh公钥复制到coding上

本身的ssh公钥

coding中贴入ssh

在coding中添加过ssh公钥以后咱们须要修改hexo根目录下的配置文件,官方要求配置格式以下

deploy:
  type: git
  message: [message]
  repo:
    github: <repository url>,[branch]
    gitcafe: <repository url>,[branch]复制代码

因此个人配置就是这样的(我这个配置github和coding都有ssh和https两种方式)：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    #github: git@github.com:sunshine940326/sunshine940326.github.io.git
    github: https://github.com/sunshine940326/sunshine940326.github.io.git
    coding: git@git.coding.net:cherry940326/cherry940326.git
    #coding: https://git.coding.net/cherry940326/cherry940326.git复制代码

完成以后在git bash 中输入

ssh -T git@git.coding.net复制代码

若是获得如图提示就说明配置成功了

配置成功ssh

而后从新部署hexo就将代码上传至coding上了

设置coding的pages服务

将代码上传至coding以后咱们就要开启pages服务了，在pages页面咱们只须要将部署来源选择为master分支，而后将自定义域名填写咱们本身购买的域名就能够了

找到pages

配置pages

设置域名解析

而后咱们到万网下面设置咱们的域名解析，将默认ip解析到coding上（这里要注意，解析到coding时记录值是pages.coding.me，并无具体的帐号名或者仓库名，而且只有设置完成域名解析才能够在coding上设置自定义域名），将海外的ip解析到github上，设置以下：

域名解析

至此就完成了将你的hexo编译的博客同时部署在github和coding上

多终端编辑hexo博客

以前就想到了一个问题，若是我想要在公司写博客怎么办，或者说若是我换电脑了怎么办，由于在github中的咱们github.io项目是只有编译后的文件的，没有源文件的，也就是说，若是咱们的电脑坏了，打不开了，咱们的博客就不能进行更新了，因此咱们要把咱们的源文件也上传到github上，这道题的解题思路（哈哈，忽然想到这个词了）是，将咱们的源文件上传至username.github.io的Hexo分支，而且设置为默认分支（分支须要本身建立），而后对咱们的源文件进行版本管理，这样咱们就能够在另外一台电脑上pull咱们的源码，而后编译完以后push上去。

更为优雅的方式是使用travis-ci，而后用webhook自动部署。你只须要写markdown，push到github就好了。根本不用关心deploy，只要维护你的markdown就行。详情请参考：blog.bigruan.com/2015-03-09-…

建立Hexo分支

建立两个分支：master 与 Hexo,并将Hexo设置为默认分支（这个Hexo分支就是存放咱们源文件的分支，咱们只须要更新Hexo分支上的内容据就好，master上的分支hexo编译的时候会更新的）

删除文件夹内原有的.git缓存文件夹并编辑.gitignore文件

由于有些主题是从git上clone过来的，因此咱们要先删除.git缓存文件，不然会和blog仓库冲突（.git默认是隐藏文件夹，须要先开启显示隐藏文件夹。.git文件夹被删除后整个文件对应的git仓库状态也会被清空)
.gitignore文件做用是声明不被git记录的文件，blog根目录下的.gitignore是hexo初始化带来的，能够先删除或者直接编辑，对hexo不会有影响。建议.gitignore内添加如下内容：

/.deploy_git
/public  
/_config.yml复制代码

.deploy_git是hexo默认的.git配置文件夹，不须要同步

public内文件是根据source文件夹内容自动生成，不须要备份，否则每次改动内容太多
即便是私有仓库，除去在线服务商员工能够看到的风险外，还有云服务商被攻击形成泄漏等可能，因此不建议将配置文件传上去

初始化仓库

而后咱们再初始化仓库，从新对咱们的代码进行版本控制

git init
git remote add origin <server>复制代码

<server>是指在线仓库的地址。origin是本地分支,remote add操做会将本地仓库映射到云端

将博客源文件上传至Hexo分支

依次执行

git add .
git commit -m "..."
git push origin hexo复制代码

提交网站相关的文件；

对B电脑进行的操做

假设B电脑如今没有咱们的源文件

git init
git remote add origin <server> #将本地文件和云端仓库映射起来。
git fetch --all
git reset --hard origin/master复制代码

平常改动

平时咱们对源文件有修改的时候记得先pull一遍代码，再将代码push到Hexo分支，就和平常的使用git同样~

1. 依次执行git add .、git commit -m "..."、git push origin Hexo指令将改动推送到GitHub（此时当前分支应为Hexo）；
2. 而后才执行hexo g -d发布网站到master分支上。

使用gulp压缩你的代码

当你在你的博客页面右键查看源代码的时候，你会发现你的html页面中会有大段大段的空白，这个时候咱们就要使用压缩工具对咱们的代码进行压缩，在前一段时间参见的前端开发者大会（FDCon2017）中，携程的框架式就有讲到，在携程，线上的资源是须要申请的（单位具体到k），因此说咱们的代码不压缩实在是太奢侈~

什么是gulp

在2017年的前端中，gulp彷佛不是最流行的自动化工具，可是谁让咱们公司用的是gulp呢。为了能和公司用同样的构建工具，因此我本身的博客也是使用的gulp。
gulp是前端开发过程当中对代码进行构建的工具，是自动化项目的构建利器。不只能对网站的资源进行优化，而且能在开发过程当中可以对不少重复的任务使其自动完成。

能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操做系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操做上很是简单。

既然gulp是基于node，因此咱们就要先有node环境，不过咱们自己就是使用hexo构建咱们的博客，就已是基于node环境了~

npm小知识

npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

####使用npm安装插件：npm install <name> [g] [--save -dev]

• <name>:node 插件名称
• -g:全局安装，会在node安装的根目录下载对应的包，在计算机的任何文件均可以使用该插件，默认的node安装目录是：C:\Users\Administrator\AppData\Roaming\npm;若是不带该属性，将会安装在当前目录，下载安装包的位置是当前目录的node_modules文件夹
• --save：将配置信息保存在node项目配置文件package.json中
• -dev：保存至package.json的devDependencies节点，若是没有该属性，该插件将会被保存至dependencies节点，devDependencies和dependencies有什么区别呢？其实从名字就应该能够看出来二者的区别，devDependencies中dev是development（开发）的缩写，dependencies是依赖的意思。因此 dependencies 是程序正常运行所须要安装的依赖，而devDependencies是开发所须要的依赖，好比一些单元测试的包~
• 为何要保存至package.json？由于咱们使用node的时候须要不少的包，因此咱们将咱们的配置信息，也就是咱们须要包的名称等其余信息保存至一个文件中，若是说其余开发者就能够直接使用一个命令就能够安装和咱们相同的配置，这个命令就是npm install，就能够下载package.json 下全部须要的包。npm install --production则只下载dependencies下的包

使用npm卸载插件：npm unstall <name> [-g] [--save-dev]

• 在npm中要卸载插件不是将文件夹删除就能够了，由于你的配置信息还在package中，因此要使用npm unstall <name> [-g] [--save-dev] 命令
• 删除所有插件:rimraf node_modules（首先你须要先安装rimraf 插件）

更新npm插件：npm update <name> [g] [--save-dev]

使用cnpm

什么是cnpm呢，你们都知道，因为不可描述缘由，咱们访问国外的资源有时候的速度，你们懂的，因此淘宝除了一个npm镜像，服务器就在中国。c能够理解为China（应该能够这样理解吧）,cnpm使用方法和npm彻底相同，只需将npm所有换成cnpm就能够。本文都是使用的npm，若是想要尝试cnpmde的麻烦自行替换~

这是一个完整 npmjs.org 镜像，你能够用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽可能与官方服务同步。

cnpm 官网地址：npm.taobao.org；
安装命令为npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符从新打开，安装完直接使用有可能会出现错误；

全局安装gulp

言归正传，简单介绍了gulp和npm，咱们须要的是使用gulp压缩咱们的代码
npm install gulp -g,而后npm -v 查看版本号就能够知道咱们是否是安装成功了~★,°:.☆(￣▽￣)/$:.°★。撒花！

新建package.json

使用npm init就能够建立package.json文件

建立package.json文件

，而后输入yes以后你就会在文件夹中找到建立好的package.json文件。来贴一下我如今的package.json文件，已是安装了很多包的了~

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.2.2"
  },
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-htmlclean": "^2.7.14",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^2.1.2",
    "hexo": "^3.2.0",
    "hexo-baidu-url-submit": "0.0.5",
    "hexo-deployer-git": "^0.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-baidu-sitemap": "^0.1.2",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-sitemap": "^1.1.2",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-marked": "^0.2.10",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0",
    "hexo-util": "^0.6.0",
    "hexo-wordcount": "^2.0.1"
  },
  "devDependencies": {
    "gulp-babel": "^6.1.2",
    "gulp-clean": "^0.3.2",
    "hexo-generator-baidu-sitemap": "^0.1.2"
  }
}复制代码

本地安装gulp插件

在你的Hexo目录下右键git bash here而后执行npm install <name> --save,和gulp有关的包名称有如下几个，只需将<name>替换一下就好~

"gulp": "^3.9.1",
    "gulp-htmlclean": "^2.7.14",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^2.1.2",复制代码

聪明的你是否是以为有些眼熟，对的，就是我po出来的package.json中dependencies下面对应的包名称和版本号~是否是和刚刚所讲的npm的知识联系到了一块呢~

创建gulp.js

gulp.js是gulp的配置文件，须要咱们手动建立（应该还会有更高级的方法T T ）
个人gulp.js文件以下

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')

// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,  //清除HTML注释
            collapseWhitespace: true,  //压缩HTML
            collapseBooleanAttributes: true,  //省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true,  //删除全部空格做属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,  //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,  //删除<style>和<link>的type="text/css"
            minifyJS: true,  //压缩页面JS
            minifyCSS: true  //压缩页面CSS
        }))
        .on('error', function(err) {
            console.log('html Error!', err.message);
            this.end();
        })
        .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});


// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
    // 1. 找到图片
    gulp.src('./photos/*.*')
    // 2. 压缩图片
        .pipe(imagemin({
            progressive: true
        }))
        // 3. 另存图片
        .pipe(gulp.dest('dist/images'))
});

// 执行 gulp 命令时执行的任务
gulp.task('build', [
    'minify-html','minify-css','minify-js','images',
]);复制代码

执行gulp：gulp build

gulpbuild执行结果

在git bash中执行

在git bash中直接输入命令gulp build就能够，这个gulp build是你本身建立的任务，你建立的任务是什么名的就在gulp后面跟什么名字

在webstorm中执行

webstorm真的太强大，已经帮咱们继承了gulp，咱们只须要动动鼠标就能够执行gulp

在webstorm中执行gulp

增长七牛图床

增长七牛图床就是要将咱们电脑上的图片上传至七牛，而后得到外链，在咱们使用md写博客的时候直接插入外链，更方便的是能够直接获取带水印、压缩、剪裁事后的图片~

注册七牛

万年不变的第一步，注册。官网：七牛云

上传资源

在登陆成功以后，点击对象存储

上传资源至七牛

上传完图片以后，关闭上传页面，能够在图片列表的最后面有一个眼睛的icon，点击以后就会在右下角找到该图片的外链，在用md写博客的时候就能够直接加入外链就好~也能够对上传的源文件进行重命名，由于大部分我上传到七牛上的图片都是相册中使用的，因此我将源文件的名字都改为统一的形式，在引用的时候只须要修改最后的数字就能够~

上传资源至七牛

添加水印

使用七牛图床最棒的地方在于能够对图片进行处理，我就只拿添加水印来举例。
七牛能够对上传的图片添加图片样式

增长图片样式

增长图片样式就是对图片进行处理，这里的处理方式有不少，好比缩放方式、裁剪、增长图片水印、设置输出格式。

增长图片样式

在设置了图片样式以后咱们要怎么使用呢，开始我也是一脸懵逼的，不知道怎么使用，百度以后才知道，你直接访问获取的外链就是你上传的原图，在外链的后面加上链接符和你的样式名称访问的就是通过处理后的图片，有没有很赞~既能够访问到你的原图片，也能够访问到通过处理后的图片，只不过是链接不一样，还能够给一个图片增长多个样式访问，就不须要咱们一张一张对图片进行处理了~简直不能太赞~(～￣▽￣)～好比:个人原图地址是： oova2i5xh.bkt.clouddn.com/IMG49.jpg ，能够看到是一张很大的不带水印的图片

这里写图片描述

而后在该地址后加上我设置的链接符,"-"和个人样式名称： oova2i5xh.bkt.clouddn.com/IMG49.jpg-c… ，就能够看到是一张带水印的小图，我进行了缩放和加水印

这里写图片描述