前记
今天真的是做了好多的事啊，主要是将hexo和github一起做个人博客的东西搞了一边，主要都通了。
然后，呢，也没什么喽。
关于hexo更换主题以及对于 mathjax 的支持工作，回去继续搞吧。
上文。
采用hexo在github上搭建个人博客
1. 安装 node.js 以及 调试 npm
- 安装 node.js 和 npm
下载的最新版本node.js是集成了 npm 的，所以统一安装后即可使用。
通过如下代码查看安装的版本，确保安装成功。
node -v
npm -v
- 调试 npm
- 参考网页
- 在 nodejs 安装目录下建立 "node_global"及"node_cache"两个文件夹
- 启动 cmd，输入
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"
- 安装 express 试验
npm install express -g
- 设置系统变量
用户变量： PATH 修改为 C:\Program Files\nodejs\node_global
新建系统变量：NODE_PATH,且输入 C:\Program Files\nodejs\node_global\node_modules
并通过 cmd 输入 node 进入node环境，输入 require('express') 测试相关信息
2. 安装 hexo 并在本地搭建平台
- 安装 hexo
npm install hexo-cli -g
- 本地搭建平台
首先，新建目的文件夹，比如我的在：E:\S_blog\Hexo.blog ；
然后，将 cmd 调整地址到上述文件夹，运行命令
hexo init npm install
可以看到在该文件下生成了大批新文件；
然后，运行 hexo server 便可以在本地 http://localhost:4000 查看效果，此时为hexo默认页面；
然后，通过命令新建 md 文件，通过书写md文件便可以生成自己的新博客内容
hexo new 名称
最后，通过下述命令来查看本地效果
hexo generate
hexo server
3. 将内容同步到 github ,并在自己的域名中生成博客
同jekyll一样，我为了试验hexo的同时不影响原来账户搭建的基于jekyll的博客，所以重新申请了github账户。流程相同，在这里只需要新建一个库，一样的是 用户名.github.io的库。然后里面空的即可。
- 修改 _config.yml 配置文件
email: *********@qq.com # 要用当前github账号的申请邮箱
deploy:
type: git
repository: https://github.com/*********/*********.github.io.git
branch: master
# URL 这一项可以全部不管
- 通过 git BASH 进入当前目录，并运行
npm install hexo-deployer-git --save # 针对的是上述 deploy 的 type 是github时运行不成功的情况
然后，运行
hexo g(enerate)
hexo d(eploy)
然后，如果成功的话，在bash里面会提示输入 github 的用户名 和 密码。输入即可同步到github了。自己的页面也就可以用了。
4. 更换主题以及添加针对自己的必要插件
- 所选主题为 Yilia
github上适配于hexo的海量主题
自己所选主题为地址为
主题内部已经配置了较多东西，比如 mathjax 的支持，多说的评论支持等。所以对于新手还是很不错的，以后有想要改进的地方也可以在这个基础上修改。
将主题 clone 到自己的博客目录下，
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
修改hexo根目录下的 _config.yml ： theme: yilia
然后，再修改 theme/yilia/ 目录下的 _config.yml，配置自己的相关信息。
- 添加 mathjax 的支持
(参考地址)
首先，进入 themes/yilia/layout/_partial/ 目录下，新建文件 mathjax.ejs,并将代码复制到该文件：
<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
然后，在themes/pacman/layout/_partial/after_footer.ejs 的最后一行，增加对mathjax的引用
<% if (theme.mathjax){ %>
<%- partial('mathjax') %>
<% } %>
- 添加 返回顶部 按钮
参考网址
与添加mathjax类似，首先新建文件 /themes/yilia/layout/_partial/totop.ejs，并添加如下代码（以自己为例）
<div id="totop" style="position:fixed;bottom:150px;right:50px;cursor: pointer;">
<a title="返回顶部"><img src="/img/scrollup.png"/></a>
</div>
然后，添加js代码，新建文件 /themes/yilia/source/js/totop.js ，并添加
(function($) {
// When to show the scroll link
// higher number = scroll link appears further down the page
var upperLimit = 150;
// Our scroll link element
var scrollElem = $('#totop');
// Scroll to top speed
var scrollSpeed = 500;
// Show and hide the scroll to top link based on scroll position
scrollElem.hide();
$(window).scroll(function () {
var scrollTop = $(document).scrollTop();
if ( scrollTop > upperLimit ) {
$(scrollElem).stop().fadeTo(300, 1); // fade back in
}else{
$(scrollElem).stop().fadeTo(300, 0); // fade out
}
});
// Scroll to top animation on click
$(scrollElem).click(function(){
$('html, body').animate({scrollTop:0}, scrollSpeed); return false;
});
})(jQuery);
然后，添加引用，修改/themes/yilia/layout/_partial/after_footer.ejs，在末尾添加以下代码
<%- partial('totop') %>
<script src="<%- config.root %>js/totop.js"></script>
最后，将该图片复制到 /themes/pacman/source/img 目录下，且文件名为 scrollup.png
说明：如果有的主题中没有 _partial 文件夹，则找到里面的相应的文件夹即可，里面包含了post文件夹的那个。
- 导航栏添加自定义页面
首先，新建 hexo n page "about"
然后，编辑 博客/source/about/index.md 内容
最后，修改themes/yilia/_config.yml文件
menu:
关于: /about
同样，可以采用相同方式建立 index 索引目录。
- 通过 swifttype 进行 站内搜索
参考网址
首先，注册一个swifttype的账号
然后，需要新建一个搜索引擎，输入自己的 blog 地址 http://*********.github.io/ ，然后输入 自己想叫的这个搜索引擎的名字，star_searchengine
然后，在该搜索引擎界面，点击菜单栏中 的 install ,并进行多项设置：
主要是 install code 这一项，会生成一段 script 代码，这份代码需要复制到多个文件中。so 记得保留。
<script type="text/javascript">
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
})(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
_st('install','ERewtaPxns4BFertxsm1','2.0.0');
</script>
由于yilia主题中没有设置google和百度的搜索栏，因此在install设置中都选择的是 默认的搜索框（位于页面底部），以及默认的搜索结果页面。完成安装后，进入自己博客的配置项设置中。
- 修改 blog\themes\yilia\ _config.yml 文件的末尾添加
swift_search:
enable: true
-
blog\themes\yilia\layout\ _partial 目录下，将上面install swifttype时候生成的代码，copy到 header.ejs 和 footer.ejs中，两个都是出于文件最后一个标签 </div> 之前
-
同时，在该文件夹下 新建 search.ejs，同样把代码copy进去即可。
（关于此步是不是必要，不太清楚了，可以试验下，因为我觉得只要把这个代码加入到 header里就可以）
P.S. 在采用jekyll时，与这里类似，就是将生成的代码在放在 _includes/ 文件夹下面的 header.html中即可
- 加入 disqus 评论插件
首先，申请账户：
然后，https://disqus.com/websites/?utm_source=*********&utm_medium=Disqus-Footer 该网址去申请 在自己的网站上使用 disqus
然后，设置（可略去），然后选择 universal code 格式进行安装，copy代码到自己的平台中
首先是 主题 \ layout \ _partial ，footer.ejs 中加入如下代码：
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = '********';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
然后为了显示评论数，将下列代码同样加入到 footer 中
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES * * */
var disqus_shortname = '********';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
网友评论