1.添加Google统计
- 访问Google Analytics,需要登录,按照提示填写网站信息开通GA服务，获取统计ID。
- 编辑
主题配置文件, 找到关键字google_analytics, 删除注释#并填写获取到的统计ID
google_analytics: your-analytics-id
2.开启不蒜子博客访问量统计
- 编辑
主题配置文件, 找到关键字busuanzi_count
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i> 访问人数
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i> 总访问量
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-eye"></i> 阅读次数
page_pv_footer:
3.添加分享功能
image.png
- 我选择的是AddThis作为博客的第三方分享。AdThis是国外的第三方分享,使用方便,可以用google直接登录。能自定义分享样式
3.1 注册AddThis，选择分享按钮：
image.png
3.2 选择显示样式(Select a Tool Type),AddThis提供了7种显示样式,你可以更加左边菜单栏点击,右边会自动显示你选择的相应样式。值得注意的是。在其右上角可以切换PC和Phone显示
image.png
3.3 点击Continue配置分享按钮,注意：不同的风格样式,配置方式不同
image.png
3.4 配置完成后 , 获取代码ID , 在js代码中获取pubid后面的ID
image.png
3.5 编辑主题配置文件, 找到关键字add_this_id, 添加pubid
4.添加文章书写样式
4.1 文字增加背景色块
image.png
- 打开
themes/next/source/css/_custom下的custom.styl文件,添加属性样式
// 颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
- 在你需要编辑的文章地方。放置如下代码
<span id="inline-blue"> 站点配置文件 </span>
<span id="inline-purple"> 主题配置文件 </span>
<span id="inline-yellow"> 站点配置文件 </span>
<span id="inline-green"> 主题配置文件 </span>
4.2下载样式
image.png
- 打开
themes/next/source/css/_custom下的custom.styl文件,添加属性样式
a#download {
display: inline-block;
padding: 0 10px;
color: #000;
background: transparent;
border: 2px solid #000;
border-radius: 2px;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #000;
color: #fff;
}
}
- 在你需要编辑的文章地方。放置如下代码
<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span> </a>
4.3 在文档中增加图标, Font Awesome 提供图标
image.png
<i class="fa fa-pencil"></i>支持Markdown
5.添加Disqus评论系统
-
Disqus注册很简单，主要是获取
Shortname
image.png 编辑
主题配置文件, 找到关键字disqus
# Disqus
disqus:
enable: true
shortname: you-shortname
count: true
6.绑定godaddy域名
- Note:这里讲的是
Github绑定godaddy域名。 - 提示：
如果你想好好的搭建个人博客,那么建议你在国内购买域名和主机(腾讯或者阿里都可以,看你个人喜好)。优点：访问速度快，百度抓取方便。毕竟一分钱一分货。缺点:主机价格太贵，购买域名和主机需要实名认证和报备,很麻烦，而且报备需要等3-5天。如果你只是打算玩玩，试试水，为后期准备，那么建议里在godaddy购买域名,购买信息你随便填写。Github上托管博客。优点：方便，不用实名认证和报备。价格便宜，只需要购买域名即可。还可以练手,可随时弃坑。缺点：访问速度较慢。需要你自己把控blog安装的插件。Github屏蔽了百度抓取，处理比较麻烦。
6.1打开终端,ping你的github.io获取ip地址
$ ping your.github.io
6.2进入你的域名DNS管理，修改信息
image.png
6.3设置GitHub
image.png
7.如果你觉得godaddy麻烦，可以用dnspod托管你的域名
7.1 注册，dnspod是腾讯的,可以使用QQ直接注册登录
7.2 域名解析
image.png
7.3 根据域名解析，配置
image.png
8.SEO 优化
8.1 需要安装两个插件来生成 sitemap 文件，前一个是传统的 sitemap，后一个是百度的 sitemap(如果你blog托管在GitHub,并且，若果你不想在多花钱弄百度抓取，可以不用安装百度的 sitemap)
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
8.2 编辑站点配置文件 ,文件末尾添加：
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
8.3 编辑站点配置文件 , 搜索关键字url,并修改url
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :category/:title/
permalink_defaults:
8.4 添加蜘蛛协议
- 在站点
source文件夹下新建robots.txt文件，文件内容如下:
User-agent: *
Allow: /
Allow: /archives/
Allow: /tags/
Allow: /categories/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://yoursite.com/sitemap.xml
Sitemap: http://yoursite.com/baidusitemap.xml
-
Allow字段的值即为允许搜索引擎爬区的内容，/表示网站首页，/categories/为分类页面，如果菜单栏还有其他选项都可以按照格式自行添加。
8.5 提交站点到 Google
8.5.1 打开 Google Search Console，添加博客地址。并进行相关验证,根据提示即可完成认证,认证成功如下：
image.png
8.5.2 验证通过后点进入控制台测试robots.txt文件,没有错误和警告即可
image.png
8.5.3 提交 sitemap.xml 文件，点击右上角添加/测试站点地图输入 sitemap.xml 进行测试，测试无误后再提交文件
image.png
8.5.4 robots.txt验证和sitemap.xml验证通过，抓取网页
image.png
- 输入框留空表示抓取首页，填入 about 表示抓取关于页面，抓取完成后,抓取因为验证原因,可能会有几种状态：完成、部分完成和已重定向等，不过无需担心，这些状态并不会影响提交。此时点击请求编入索引即可，至此博客就成功提交到了 Google
8.5.5 验证站点是否被收录
-
谷歌中输入：site:yousite，会有提示：(抓取需要时间。等几分钟)
image.png
8.6 提交站点到 BaiDu
- 如果你是github上部署的blog，百度是不能直接爬去到你的网站的。现最简单实惠的办法是搭建CDN.相关文章:如何解决百度爬虫无法爬取搭建在Github上的个人博客的问题？
8.6.1 进入百度站长管理，单击站点管理，添加网站，进行认证
image.png
8.6.2 HTML标签认证
image.png
- 打开
themes/next/layout/_partials/head.swig文件，搜索baidu_site_verification替换复制的内容
{% if theme.baidu_site_verification %}
<meta name="baidu-site-verification" content="9v8CMO9Qh8" />{% endif %}
-
主题配置文件， 添加代码如下
baidu_site_verification: true
- 然后
hexo clean
hexo g
hexo d
- 然后点击完成验证
8.6.4 验证Robots文件是否生效
image.png
- 验证完成后，自己的网站会被提交，过段时间在百度中验证站点是否收录即可(一般为2-7天)
