hexo搭建博客之---总结篇

文章目录

hexo搭建博客流程汇总(简述)

一、环境搭建

1.安装Node.js

安装Hexo：npm install -g hexo
在存放博客原始文件夹建立网站所需要的所有文件：hexo init
安装依赖包:npm install
（关于hexo的几个常用指令：hexo clean；hexo g；hexo s；hexo d自行了解）

2.安装Git客户端

配置SSH
添加SSH key到你的Github账户

3.注册Github帐号

github上创建用于博客的repository仓库

二、简单配置

1.部署本地hexo文件到github建好的仓库

配置根目录：_config.yml

deploy:
  type: git
  repo:
      github: ***(仓库地址),master(代表仓库的哪个分支)

2.安装hexo-deployer-git模块

尝试推送到github访问：
hexo g
hexo d
如果报错,安装一下hexo-deployer-git这个模块：
npm install hexo-deployer-git --save

三、发表及访问

发表一篇文章
Git Bash执行命令：hexo new “my new post”
在博客原始文件夹路径下\hexo\source_post中打开my-new-post.md，打开方式使用记事本或者其他文本工具。推荐使用markdown，可自行下载安装，并研究语法，很容易上手。
写完文章后，使用

1. $ hexo g生成静态文件。
2. $ hexo s在本地预览效果。访问地址localhost:4000。
3. hexo d同步到github，然后使用github上仓库名在浏览器进行访问。

四、主题安装及优化，更新

1.安装jacman主题

git clone https://github.com/wuchong/jacman.git themes/jacman

2.启用

修改你的博客根目录下的config.yml配置文件中的theme属性，将其设置为jacman。

3.后续更新

1 2	cd themes/jacman git pull

注：由于后来用git托管hexo原始文件时，删除了jacman下的git库所有不能更新，可以另外建一个目录来更新这个主题，然后合并到原始文件目录下面，再提交，达到一样更新的效果

4.优化处理

menu 默认没有启用 /tags 和 /categories 页面，如果需要启用请在博客目录下的source文件夹中分别建立tags和categories文件夹每个文件夹中分别包含一个index.md文件。内容为：
1
2
3
layout: tags (或categories)
title: tags (或categories)
---
添加搜素，需要在博客目录下的source文件夹中建立search文件夹并包含一个index.md文件。内容为：
1
2
3
layout: search
title: search
---
配置文章模板，修改根目录下\scaffolds\post.md文件，配置好基本的信息，比如：
1
2
3
4
5
title: {{ title }}
date: {{ date }}
categories:
tags:
---

另外修改了博客的整体颜色，logo图片，导航栏背景，博客座右铭，侧边栏自动隐藏等，具体修改方法不再详述

五、其他功能配置

1.配置RSS订阅

安装插件：npm install hexo-generator-feed --save
根目录下面_config.yml配置文件中添加如下

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

themes\jacman下的_config.yml默认会有下面代码，如果你的没有就添加

1 2	\#### RSS rss: /atom.xml ## RSS address.

编译部署exo deploy -g
查看是否成功，输入你的博客域名，后面加上/atom.xml,如果打开有代码数据就表示成功

2.不蒜子-网页，网站极简计数器:即总pv计数和总uv计数

总uv数添加(添加双**中间的代码)：themes\jacman\layout_partial\footer.ejs

		<a href="<%= config.url %>" title="<%= config.title %>"><%= config.title %></a>
		<% } %>
		**</br>
		<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
		<span id="busuanzi_container_site_pv">
		    &nbsp;&nbsp;Total visits:&nbsp;<span id="busuanzi_value_site_pv"></span>
		</span>
		<span id="busuanzi_container_site_uv">
		  &nbsp;&nbsp;You are Visiter No.<span id="busuanzi_value_site_uv"></span>
		</span>**
		</p>
</div>

总pv数添加：emes\jacman\layout_partial\post\header.ejs

  <p class="article-time">
    <time datetime="<%= date_xml(item.date) %>" itemprop="datePublished"> <%= __('datepublished') %> <%= item.date.format(config.date_format) %></time>
		**<span id="busuanzi_container_page_pv"> 总阅读 <span id="busuanzi_value_page_pv"></span> </span>次 **
  </p>
</header>

3.托管coding

国外github访问以及上传都比较慢，于是托管到coding，具体详细步骤见：hexo搭建博客之—托管coding
简述：
1.注册coding账号，新建一个和用户名一样的仓库
2.配置根目录下_config.yml文件的deploy，hexo d可以向两个仓库上传
3.coding上page静态部署

4.多地更新博客：原始文件托管

由于离开了本地pc，不方便持续更新博客，便想把原始文件也托管到coding，这样到其他电脑上，环境ok就可以直接clone下来更新微博，方便快捷，具体见：hexo搭建博客之—github管理原始文件，异地更新博客,同样的方法配置，托管到coding。
简述：
1.在coding上博客的仓库新建一个hexo分支
2.将该分支设为默认分支
3.本地clone下来，可以删除里面的文件，然后把自己本地hexo的原始文件添加上传至hexo分支
4.每次异地记得先git pull，npm install，写完更新后，git add,git push 到远程coding仓库

5.打赏功能

出于好玩，在自己的博客上也添加了打赏功能，具体操作：
在themes\jacman_config.yml文件中添加如下语句（微信和支付宝的图片链接当然要换成你自己的）：

donate:
  enable: true
  text: 打赏我的人，运气都不会太差~
  wechat: https://wx1.sinaimg.cn/mw690/006qxJmqgy1fu5w4jmxxsj307w08ot9i.jpg
  alipay: https://wx3.sinaimg.cn/mw690/006qxJmqgy1fu5w4ly4ovj308x08oab4.jpg
  web: true

然后themes\jacman\layout_partial\post\article.ejs在<div class="article-content">...</div>的下面，<%- partial('footer') %>的上面插入如下HTML代码：

	<% if (theme.donate) { %>
	<!-- css -->
	<style type="text/css">
	    .center {
	        text-align: center;
	    }
	    .hidden {
	        display: none;
	    }
		.donate_bar a.btn_donate{
			display: inline-block;
			width: 82px;
			height: 82px;
			background: url("http://7xsl28.com1.z0.glb.clouddn.com/btn_reward.gif") no-repeat;
			_background: url("http://7xsl28.com1.z0.glb.clouddn.com/btn_reward.gif") no-repeat;

			<!-- http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif
			     因为本 hexo 生成的博客所用的 theme 的 a:hover 带动画效果，
				 为了在让打赏按钮显示效果正常 而 添加了以下几行 css，
				 嵌入其它博客时不一定要它们。-->
			-webkit-transition: background 0s;
			-moz-transition: background 0s;
			-o-transition: background 0s;
			-ms-transition: background 0s;
			transition: background 0s;
			<!-- /让打赏按钮的效果显示正常 而 添加的几行 css 到此结束-->
		}

		.donate_bar a.btn_donate:hover{ background-position: 0px -82px;}
		.donate_bar .donate_txt {
			display: block;
			color: #9d9d9d;
			font: 14px/2 "Microsoft Yahei";
		}
		.bold{ font-weight: bold; }
	</style>
	<!-- /css -->

    <!-- Donate Module -->
    <div id="donate_module">

	<!-- btn_donate & tips -->
	<div id="donate_board" class="donate_bar center">
	    <br>
	    ------------------------------------------------------------------------------------------------------------------------------
	    <br>
		<a id="btn_donate" class="btn_donate" target="_self" href="javascript:;" title="Donate 打赏"></a>
		<span class="donate_txt">
			<%= theme.donate.text %>
		</span>
			
		
	</div>
	<!-- /btn_donate & tips -->

	<!-- donate guide -->
    
	<div id="donate_guide" class="donate_bar center hidden">
        <br>
	    ------------------------------------------------------------------------------------------------------------------------------
	    <br>
	    <% if(theme.donate.web) { %>
	    <div width="100%" align="center"><div name="dashmain" id="dash-main-id-87895f" class="dash-main-3 87895f-0.99"></div></div>
		<script type="text/javascript" charset="utf-8" src="http://www.dashangcloud.com/static/ds.js"></script>
		<% } %>

		<a href="<%= theme.donate.wechat %>" title="用微信扫一扫哦~" class="fancybox" rel="article0">
			<img src="<%= theme.donate.wechat %>" title="微信打赏 Donate" height="190px" width="auto"/>
		</a>
        
        &nbsp;&nbsp;

		<a href="<%= theme.donate.alipay %>" title="用支付宝扫一扫即可~" class="fancybox" rel="article0">
			<img src="<%= theme.donate.alipay %>" title="支付宝打赏 Donate" height="190px" width="auto"/>
		</a>

		<span class="donate_txt">
			<%= theme.donate.text %>
		</span>

	</div>
	<!-- /donate guide -->

	<!-- donate script -->
	<script type="text/javascript">
		document.getElementById('btn_donate').onclick = function() {
			$('#donate_board').addClass('hidden');
	    $('#donate_guide').removeClass('hidden');
		}

		function donate_on_web(){
			$('#donate').submit();
        }

		var original_window_onload = window.onload;
        window.onload = function () {
            if (original_window_onload) {
                original_window_onload();
            }
            document.getElementById('donate_board_wdg').className = 'hidden';
		}
	</script>
	<!-- /donate script -->
</div>
<!-- /Donate Module -->
   <% } %>

有兴趣的可以自行研究下代码逻辑。

6.注册域名并绑定

可以尝试注册自己的域名，来绑定博客的地址，可以选一些比较便宜的，本人注册域名为：www.macintosh-c.online,首年7元。推荐使用万网（阿里），在其他网站碰到很多坑，阿里的万网处理以及实名认证还是很迅速的。
1.万网注册账号并登陆，地址：https://wanwang.aliyun.com/
2.挑选域名，并购买及实名认证
3.配置2个CNAME，解析到自己的博客网址
4.coding项目页，>代码>pages服务>设置>自定义域名,绑定刚刚购买的域名即可通过域名来访问博客主页。

7.添加百度站内搜索，以及提交百度，360，搜狗搜索引擎

具体要实现的就是在网站上搜索框换成百度的，同时搜索可以链接到百度的站内搜索，并且将自己的博客网站提交给百度，360，搜狗搜索引擎，这样别人就可以通过搜索引擎搜到你的文章并点击进入。
1.先到百度搜索资源平台注册账号登录：https://ziyuan.baidu.com/site/index
2.新建站点，填上自己注册的域名（此时域名已绑定到coding的博客地址，否则填博客源地址）
3.进入到百度站内搜索,新建搜索引擎，也就是域名地址，进入管理后台：https://zn.baidu.com/cse/engine/list
4.验证网站，证明您是该域名的拥有者，推荐文件验证，很简单。
5.新建搜素框，选择自己想要的样式，最后会提供一段代码给你，复制，加到自己博客代码里去就行了，我加的地方：themes\jacman\layout_partial\header.ejs,如下(删除原来的搜索框)：

1
2
3

<% } else if(theme.baidu_search.enable){ %>
						<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=14512095850844642904' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>
					<% } else if(theme.tinysou_search.enable){ %>

5.主题下的_config.yml文件，记得打开百度搜索的配置，设为true就行。
6.此时百度内站有检测机制，检测代码添加成功便ok。
对于后面搜素引擎收录博客碰到的坑就很多了，大致描述下，自行捣鼓，大体也都是跟着站内的教程来。
百度是否收录，以及什么时候收录取决于很多因素，我们不能决定，可以通过主动推送，自动推送，sitemap和收到推送四个方法来推动进展，方法见：百度资源平台>链接提交，但也不保证很快可以被其收录，本人已经推送2天了，至今未果。还有一个原因可能也是和网站需要备案有关系，扯到备案，查了一大推资料继续捣鼓，之前我也是没有注册域名，就是因为打算备案，所以购买了域名，重新部署了百度的搜索、统计等，然后备案网址：http://beian.vhostgo.com/，捣鼓到最后搜到一封邮件，还需要去就近核验点办理备案当面核验手续，收取30元服务费。懒得跑，于是我的备案以及百度等搜索引擎收录到此为止。后续只通过配置到代码中的自动推送每天向百度发送提交，希望早日能够被百度爬虫找到，其他提交360和搜狗引擎如出一辙，自行搜索对应站长平台，处理即可。

8.添加百度统计

步骤很简单，但是很有趣，可以实时通过后台看到你的博客的访问量，访问者的入口页面，以及你的受访网页，以及访问者的ip地域等信息，生成报告图表信息给你。
1.百度统计注册账号登录：https://tongji.baidu.com/web/welcome/login
2.新建网址
3.获取到代码，添加到你的博客代码中，具体位置：themes\jacman\layout_partial\analytics.ejs,添加地方如下（当然添加你自己站点获取到的代码）：

<% if (theme.baidu_tongji.enable){ %>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7a4f7d80ffc1f18cb51b3d3e1c6bd36a";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

4.主题下的_config.yml文件，记得打开百度统计的配置，如下：

1
2
3

baidu_tongji:
  enable: true
  sitecode: 你自己的 ## e.g. e6d1f421bbc9962127a50488f9ed37d1 your baidu tongji site code

注:sitecode见百度统计站点下网址链接最后siteId=***
5.平台可以检测代码是否添加正确，ok后过一会后台便有数据产生了，你也可以关注百度统计的公众号，手机端查看网站被访问情况。

9.添加评论插件

想着给博客添加一个评论，多说和有言好像都要关了，畅言比较火，但是需要备案，最后用了韩国棒子的来必力，简单清爽，来必力官网： https://livere.com
1.注册并登录账号
2.点击安装，City免费版，填写博客网站地址
3.会生成安装代码，粘贴到博客代码里，具体文件位置：themes\jacman\layout_partial\post\comment.ejs,在最后依葫芦画瓢，添加一个来必力的判断，然后里面贴上安装代码，如下：

<% if (theme.livere_uid){ %>
<div id="lv-container" data-id="city" data-uid="***你自己生成的代码粘贴">
	<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
	</script>
<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<% } %>

4.主题下的_config.yml文件，记得打开来必力评论配置，添加如下：

1	livere_uid: ***你自己生成的代码粘贴

hexo g,hexo d访问可以看到有评论了，同时来必力网站提供评论管理，可以更好的分析评论数据。

macintosh-c's blog

当你的才华撑不起你的野心时，就应该静下心来好好学习。