个人博客Blog搭建过程

小白的博客构建之路,GitHub Pages+coding pages+jekyll 的构建过程

Posted by Mao Yanjun on December 7, 2017

“🙉🙉🙉 ”

本博客主要是基于GitHub Pages + jekyll+coding的搭建方式,正所谓,前人栽树,后人乘凉。作为对jkelly和js一窍不通的理科生,凭着好奇,开始了搭建过程(采坑)。

博客快速搭建

本博客建设过程主要是是参考了BY”手把手教你在半小时内搭建自己的个人博客(如果不踩坑的话🙈🙊🙉)”@BY。搭建主体过程已经足够详细。请各位先移步。进行主体建设工作。

相关改进

博客搭建好后,面临这样几个问题

  • 博客的评论系统采用Disqus(需要翻墙),因此不方便添加到博客中供国内用户使用。
  • 博客中没有检索功能。
  • 基于github pages搭建的博客无法被百度爬虫检索。
  • 短时间内如何使自己的Blog可以被google和百度检索。
  • 博客中如何进行Latex 支持和代码高亮(先占坑,后面填坑)

针对于是问题,可以在网上找到大量的资源,为方便大家,并作为自己建站过程的记录,在此对一下几个的实现一一进行介绍或者提供参考网址。下面按照我解决上面问题的时间顺序进行。

intensedebate 评论功能的添加

对于评论系统的添加,有disqus 等,自行百度,找了一圈,国内貌似也没啥像样的评论系统了。于是发现了一个还能用的,intensedebate。评论系统的添加,正如网站上指示的操作。在官网注册账户后,会得到一段js script 代码:(多数评论系统大都类似)

<script>
var idcomments_acct = '***************';
var idcomments_post_id;
var idcomments_post_url;
</script>
<span id="IDCommentsPostTitle" style="display:none"></span>
<script type='text/javascript' src='https://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>

需要将此段代码引入到post.html中。因此,首先在_include/中新建一个名为intensedebate-comments.html的文件。然后在其中对上面的代码,加入两行。文件整体样式如下:


<script>
var idcomments_acct = '*************';
var idcomments_post_id;
var idcomments_post_url;
</script>
<span id="IDCommentsPostTitle" style="display:none"></span>
<script type='text/javascript' src='https://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>

然后在post.html的最后,某合适位置添加include,可观察一下整体结构:


    
<script>
var idcomments_acct = '1025ace1155c64d812141036f075e12e';
var idcomments_post_id;
var idcomments_post_url;
</script>
<span id="IDCommentsPostTitle" style="display:none"></span>
<script type='text/javascript' src='https://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>


最后,在_config.yml配置文件中加入开关判断,建议写在代码实例位置:

# 评论系统
# Disqus settings(https://disqus.com/)
#disqus_username: maoyanjun

# 多说 将于2017年6月1日正式关停服务,建议使用 Disqus(http://dev.duoshuo.com/threads/58d1169ae293b89a20c57241)
# Duoshuo settings
# duoshuo_username: qiubaiying
# Share component is depend on Comment so we can NOT use share only.
# duoshuo_share: true                     # set to false if you want to use Comment without Sharing

#intensedebate_comments system
intensedebate_comments: true

然后基本上完成了,对于评论系统的部署。

页面内搜索功能

页面内搜索功能作为实用功能有必要添加。可以方便快速的进行信息的检索。于是参考@小胖轩博文,大神开发的search功能,可以对标题,和标签内容进行搜索。文章已对如何加入组件做了详细的指导说明。但是对于小白来讲还是出错了。因此,特别感谢大神23:05发来的热心的解答邮件。jquery的引入要放在cb-search.js的前面,其次引入了2个jquery,请去除。。详细介绍一下我犯的错误。建议在加入cb-footer-add.html的文件内容后,直接添加,同时要将下面多余的jQuery和Bootstrap Core JavaScript注释,或者删除掉。具体参考下文大段代码内容。

<!-- jQuery -->
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
................
.........
</footer>
<!-- 为引入的cb-footer-add.html -->
<div class="cb-search-tool" style="position: fixed; top: 0px ; bottom: 0px; left: 0px; right:  0px;
      opacity: 0.95; background-color: #111111; z-index: 9999; display: none;">
    <input type="text" class="form-control cb-search-content" id="cb-search-content" style="position: fixed; top: 60px" placeholder="文章标题 日期 标签" >

    <div style="position: fixed; top: 16px; right: 16px;">
        <img src="/search/img/cb-close.png"  id="cb-close-btn"/>
    </div>
</div>

<div style="position: fixed; right: 16px; bottom: 20px;">
    <img src="/search/img/cb-search.png"  id="cb-search-btn"  title="双击ctrl试一下"/>
</div>
<!-- 为引入的JQuery 和Bootstrap-->
<!--jQuery -->
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- 引入结束 -->
<link rel="stylesheet" href="/search/css/cb-search.css">
<script src="/search/js/bootstrap3-typeahead.min.js"></script>
<script src="/search/js/cb-search.js"></script>

<!-- jQuery -->
<!--script src="/js/jquery.min.js "></script>

<!-- Bootstrap Core JavaScript -->
<!--script src="/js/bootstrap.min.js "></script>

<!-- Custom Theme JavaScript -->
<script src="/js/hux-blog.min.js "></script>

关于百度检索问题

此问题可以百度到很多方式,这里面推荐两个bibitigerCherry’s Blog博客内容,也是本文主要参考构建方式。按照bibitiger的方式进行的构建,这里面,有两个问题:

  • 万网的域名解析设置部分,貌似不是很有效。可以参考cherry blog.中的设置方式。参考如下图:可以正确的解析,从而达到分流的目的。 域名设置

  • git 的分支设置有一点无法理解。(可能是我水平太低了,后面来填坑)

填一个小坑,这个地方,需要用git分别向github和coding推送。且github是推送到master,conding是推送到coding-pages 分支。所以推送上略有不同。这方面可以自行参考,附上自己写的bash脚本,可以在linux的bash环境中直接执行,或者在windows下利用构建bahs环境上执行,推送post:

#!/bin/bash
echo Hello world: 
date
echo            
#git status
git status
echo "if no change please input Y,else input N"
read abool
if [abool=Y]
then
	echo "no change to add so shell break out"
	exit
else
	echo "begin to add changes"
fi
# git add to the repository
git add .

#git status
git status
#git commit
echo "                 "
echo "give you commit to change,detail commite is useful: your commit is :"
read commit
git commit -m "$commit"

#git push to the remote branch
echo "begin to push to github"
git push origin master
echo "begin to push to coding"
git push coding master:coding-pages
echo

一点感想

利用命令行模式真的方便很多,习惯了linux命令行模式,你会发现效率高了很多,再也不用鼠标无聊的点点点了,特别是针对一些长期重复性的,而且需求更改不频繁的情况,利用脚本,方便很多。在这里鼎力推荐,难度不高,只是需要转换思维而已。多数命令都可以直接百度,或者google得到。我觉得这就是linux得以生存的根本。毕竟大多数人记不住那么多命令。最后,推荐大家学下一下shell 脚本语言,以及python,方便脚本的编写。

增强google 搜索和百度搜索的检索。

此部分依旧可以参考cherry blog。在此不赘述了,本人也不太熟悉这个工作,在谷歌或者百度中输入site:sample.top(你的域名),如果没被收录,然后可以根据提示,提交一下,具体更复杂的参考百度吧。

最后一个小坑

百度统计的trick id 就是你注册完百度统计之后代码中那一串编码数字。

支持LaTeX的公式编译,和代码高亮。

2018年1月5日更新,添加mathjax,使得博客可以支持LaTex数学公式,是一种非常美妙的感觉。

打开_includes文件夹中的head.html,添加到整个<head>的框架里面,添加如下代码:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

<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>

然后就可以像使用Latex一样,使用$ $添加行内公式,使用$$ $$添加行间公式了。 如:

欧拉公式:$e^{\pi i}+1=0$

行间公式:

博文预览

4/9/2018 2:12:47 PM

因博客书写过程中常遇到排版和查错字的问题,可以利用127.0.0.1:4000端口可以预览博文,需要安装jekyll,相关内容可以自行百度,推荐网址

cd your repositor/
jekyll s #启动jekyll

Q1:

jekyll 3.6.2 | Error:  Permission denied - bind(2) for 127.0.0.1:4000

此时在浏览器中访问127.0.0.1:4000,即可看到自己的博文,其中经常遇到4000端口被占用的问题,因此需要输入netstat -ano|findstr "4000" 查看那个进程占用此端口,在任务管理器中停止该进程

Q2:

 Please add the following to your Gemfile to avoid polling for changes:
   gem 'wdm', '>= 0.1.0' if Gem.win_platform?
Auto-regeneration: enabled for 'H:/myBlog/maoyanjun.github.io'
ekyll 3.6.2 | Error:  Permission denied - bind(2) for 127.0.0.1:4000

用下面命令既可以解决此问题:gem install wdm

可参考下面的博客内容:

https://www.jianshu.com/p/32af878fdf69