Github pages和Hexo搭建

前言

由于之前Jekyll的博客搭建起来,插件支持太少,以及其他的目录和语法高亮支持不太好,过于麻烦。最近看了其他人用Hexo搭建的Blog,被其简洁和方便,美观的界面所深深吸引。所以,查询其相关资料,发现的确很棒,而且文档相对Jekyll来说也齐全很多。顿时萌生了转战Hexo的想法。搭建完成后,发现的确好棒,很多在Jekyll上无法实现的功能,在这里能轻松实现,而且搭配Next主题,秒杀全场啊。

一、基础博客搭建流程

安装Node和Git

1、安装node.js。

brew install node

2、安装git。

brew intall git

3、选装cnpm。

淘宝cnpm官网。由于npm国内下载速度经常抽风,所以建议安装淘宝的这个镜像;使用方法就是在命令中把npm换成cnpm即可。

安装方法:在cmd工具中输入如下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Hexo及其相关插件

1、全局安装Hexo

cnpm install hexo-cli -g #安装hexo
hexo -v #出现版本信息则表示安装成功

2、在项目中安装Hexo

创建文件夹,进入文件夹目录

cnpm install hexo --save #在当前项目中安装hexo

hexo init #初始化hexo

cnpm install #安装依赖包

3、安装Hexo的插件

cnpm install hexo-server --save #搭建本地服务器所需插件
cnpm install hexo-deployer-git --save #使用git方式进行部署博客所需插件

在本地生成博客静态页面并预览

1、在本地生成静态页面

hexo generate,会生成一个存放静态文件的文件夹public,其简写形式为hexo g

2、启动本地服务器

hexo server,其简写形式为hexo s

这条指令运行完成后可在本地启动服务器并预览博客,默认网址为
http://localhost:4000/。

创建GitHub Pages并配置ssh

1、创建博客仓库。

注册并登陆到GitHub官网,假如你注册的用户名是Magic,那么新建一个名为Magic.github.io的仓库,注意仓库的用户名一定要是用户名+github.io的形式!

2、本地生成ssh密钥。

终端下输入ssh-keygen -t rsa -C ‘你的邮箱地址’

3、上传本地的公钥串,使当前电脑与GitHub账户建立联系。

/Users/你的计算机用户名/.ssh 目录下打开刚刚生成的id_rsa.pub,复制里面的内容。然后点击你GitHub账户右上角的头像,选择settings,找到SSH and GPG keys,点击进入之后再点击New SSH key,title随便写,把公钥串粘贴到文本框,保存即可。
cat id_rsa.pub

本地博客同步到GitHub上

这一步其实就是把本地生成的博客内容(静态页面)放到GitHub新建成的仓库Magic.github.io中。

1、编辑博客配置文件: _config.yml

在hexo根目录下找到_config.yml文件,把其中的deploy参数(没有的话就按如下格式新建,注意冒号后面一定要有一个空格),修改为:

deploy: 
     type: git 
     repo: git@github.com:LiLei/LiLei.github.io.git             
     branch: master

2、重新部署

打开终端,进入博客根目录,依次执行如下Hexo命令:
hexo clean #会清除缓存文件db.json及之前生成的静态文件夹public

hexo g #会重新生成静态文件夹public

hexo deploy #因为之前已经安装了插件并且在博客配置文件中也配置好了,所以这个命令会在博客根目录下生成一个.deploy_git的文件夹,并 把本地生成的静态文件部署到Magic.github.io这个仓库中的master分支上;简写形式为hexo d;

hexo ghexo d可以合并在一起写:hexo g -d

3、在浏览器中访问博客

在浏览器中输入Magic.github.io(可能你已经发现了,这个就是之前新建仓库的名字,同时也是你博客的域名),没毛病的话,你应该可以再次看到那个熟悉又亲切的博客页面了。

二、更换主题

Blog的主题还是很重要的,直接影响写博客和看博客人的心情。在浏览了官网的全部主题以及和Next的对比下,最终还是选用了Next。毕竟有官方文档支持,而且符合内心界面简洁的风格,功能自定义强大,全面。

更换主题主要是两步,先下载主题然后放到博客中的themes文件夹(专门用来存放主题)下,再修改主题的配置文件_config.yml中相关参数,启用themes文件夹下新增的主题。这里用Next主题做示例。

下载Next主题。

进入 根目录/themes 文件夹中,打开终端,输入:
git clone https://github.com/iissnan/hexo-theme-next themes/next
把主题包克隆到themes文件夹中即可。

启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开根目录下的站点配置文件_config.yml, 找到 theme 字段,并将其值更改为 next(注意冒号后面要留一个 空格)。

验证主题

清除并重新生成hexo静态文件,启动本地服务器,然后通过http://localhost:4000/预览博客:

hexo clean #清除静态文件
hexo g #重新生成静态文件
hexo s #启动服务器

Next中文官网官网有更加全面的介绍

三、自定义域名

自定义域名对于我们这些不喜欢加github.io后缀的人来说还是很有必要的。而且githubpages的浏览速度过慢,导致体验很差。所以我们需要加速,如果不使用GithubPages的话,可以直接搭在自己的服务器上,这样速度够快。另一种方法就是对域名使用CDN加速了,阿里云的CDN加速太贵了,查了一下发现百度有免费的CDN加速(发现百度还是有点良心的)。百度云加速

百度云加速域名解析设置

1、进入域名服务商的后台解析DNS域名

解析为ns1.bddns.cnns2.bddns.cn

2、进入百度云加速域名的解析后台,添加如下两条解析记录:

20170331149092906634581.png
20170331149092906634581.png

3、在博客目录的source文件夹下(根目录/source)创建一个名为CNAME的文件,内容为你注册域名。

CNAME是不带任何后缀的。

上面操作完毕后,大概过几分钟就可以通过自定义的新域名访问博客了。如果不行,就依次执行hexo cleanhexo ghexo d再试下。

四、博客操作

1、新建文章

hexo new post 背影
在Git Bash中执行上面命令会新建一篇名为‘背影’的文章,源文件会自动生成到hexoBlog/source/_post 路径下,后缀为.md,直接打开编辑就可以了。编辑完保存,然后再依次执行hexo cleanhexo ghexo d在博客就可以看到你的文章了(有时候网络问题生成会比较慢,需要等几分钟才可以看到)。
如果习惯了之前Jekyll的博客命名风格,修改站点配置文件_config.yml的内容new_post_name: :year-:month-:day-:title.md # File name of new posts,之后就可以使用时间-名字的文件命名风格了。

2、新建页面

新建标签、分类、关于我等各种页面,并在博客的菜单栏中显示。这里以新建‘标签’页面来做示范。

1、创建页面。

在终端中执行hexo new page 'tags',会在根目录/source路径下自动生成一个名为tags的文件夹,里面包含一个index.md的文件,在这个文件中添加对应的页面类型type: tags

      ---
      title: Tagcloud
      date: 2017-01-01 15:24:23
      type: 'tags'   #声明页面类型
      ---

把页面路径添加到菜单中。
编辑主题配置文件(themes/_config.yml),找到menu字段,添加tag: /tags(格式为item_name: link),如下:

menu:
    home: /
    tag: /tags    #‘标签’’页面的路径

设置博客中‘标签’这个菜单项的显示图标。
同样是在主题配置文件中,找到nenu_icons字段,添加tags tags(格式为item_name: icon_name),如下:

menu_icons:
    enable: true     #显示图标
    home: home
    tag: tags     #tag标签的icons是‘tags’

设置博客中‘标签’这个菜单项的显示文本。
上面的item_name并不会直接用于博客界面的显示,只是用来匹配图标和显示在页面上的文字,可以理解为一个桥梁。那么到底在哪里设置呢?
首先,在站点配置文件中(hexoBlog下的_config.yml文件)找到language字段,设置为zh-Hans

然后, 在themes/next/languages路径下找到zh-Hans.yml文件,在menu字段下添加tag: 标签云(格式为item_name: show_name),如下:

   menu:
       home: 首页
       tag: 标签云    #博客页面就会显示‘标签云’

五、多终端同步管理技巧

如果你使用过云盘或者有Git操作的基础,下面的内容会非常好理解。

1、思路:

需要发布到GitHub仓库的静态内容(也就是执行hexo g -d之后生成的public.deploy_git文件夹)放在master上,而博客所有其他源文件(除了public.deploy_git)存放到另外一个新建的hexo分支(这个分支的名字可以随意取),并且在GitHub上将其设为默认分支。

以后所有的操作都会在hexo这个分支上进行,操作完之后依次执行git add .git commit -m 'commets'git push把所有源文件推到远程仓库的hexo分支上(这里远程仓库其实扮演了一个云盘的角色);即使换了电脑,你可以直接clone远程仓库的hexo分支到本地或者执行git pull下拉更新到本地覆盖现有源文件,就在本地还原了最新的博客内容了。

2、操作流程

假设你最早是在家里的A电脑上搭建了博客,那么A电脑的准备工作:把源文件push到GitHub。

1、初始化仓库

博客根目录下依次执行:

git init

git remote add origin <server>

2、新建并切换到hexo分支

git checkout -b hexo

3、找到.gitignore文件(没有的话就在根目录下新建一个),在最后增加两行内容:

/.deploy_git/public

目的是让git不跟踪这两个文件的更新,也就是push到hexo分支的内容里不会有这两个文件。

4、把本地新建的分支push到远程分支:

git add .

git commit -m 'commets'

git push -u origin hexo:hexo

然后再去GitHub上把新建的hexo分支设置为默认分支。

画面一转,我们到了公司。此时公司B电脑上空空如也,那么执行如下操作:

在桌面(或任意地址)执行

git clone <server> -b <branch>
这里的是你远程仓库的clone地址,就是之前新创建的hexo分支,这句话的作用是把远程仓库中的分支克隆到本地当前目录。

有了源文件就可以任性修改博客了。修改完之后先生成静态文件发布到博客中:

hexo clean

hexo g -d

再把最终保存的源文件push到GitHub,保证多终端可以同步:

git add .

git commit -m 'comment'

git push

最后画面再切换会家中的A电脑,因为此时远程仓库中的博客源文件已经做了更新,而我们A电脑上也有之前的源文件,那么只需要下来更新覆盖到本地就可以啦,进入到博客根目录,执行:

git pull

六、优化博客设置

文字居中(写博客时)

在你博客文章中需要居中处加上下面这段代码即可,中间的文字改成你所需要的文字。

<blockquote class="blockquote-center">
不忘初心,这里可以写多行文字
</blockquote> 
不忘初心,这里可以写多行文字

为博客加上GitHub丝带

如果是Next主题(其他主题也差不多),添加GitHub丝带:在themes\next\layout_layout.swig中加入相关代码,记得修改自己的链接。

相关代码你可以在GitHub官方网站 GitHub Ribbons 上进行选择。

加入作者版权信息

我们可以为博客文章加入作者版权信息。

例如本文地址:http://www......./ 转载请注明出处,谢谢!等等。

对Next主题而言,先找到/themes/next/layout/_macro/post.swig,再找到其中的微信订阅部分,如下所示:

20170331149093965647853.png
20170331149093965647853.png

然后直接在其上面添加如下代码段:

<div align="center">
  {% if not is_index %}
    <div class="copyright">
    <p><span>
    <b>本文地址:</b><a href="{ { url_for(page.path) } }" title="{ { page.title } }">{ { page.permalink } }</a><br /><b>转载请注明出处,谢谢!</b>
    </span></p>
    </div>
  {% endif %}
</div>

当然,在上面这段代码,你可以进行一些个性化编写,可以展示你自己个性化的版权信息。

为博客加入动态背景

首先找到\themes\next\layout_layout.swig,在末尾前加上下面一句:(这里提供两种样式,当然你也可以自由更改)。

  • 默认灰色线条
    <script type="text/javascript" src="/js/src/particle.js"></script>

  • 浅蓝色线条
    <script type="text/javascript" src="/js/src/particle.js" count="50" zindex="-2" opacity="1" color="0,104,183"></script>

  • 然后在themes\source\js\src下新建文件particle.js写上以下代码:

!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)} }function o(){c=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,a=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){l.clearRect(0,0,c,a);var n,e,t,o,u,d,x=[w].concat(y);y.forEach(function(i){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>c||i.x<0?-1:1,i.ya*=i.y>a||i.y<0?-1:1,l.fillRect(i.x-.5,i.y-.5,1,1),e=0;e<x.length;e++)n=x[e],i!==n&&null!==n.x&&null!==n.y&&(o=i.x-n.x,u=i.y-n.y,d=o*o+u*u,d<n.max&&(n===w&&d>=n.max/2&&(i.x-=.03*o,i.y-=.03*u),t=(n.max-d)/n.max,l.beginPath(),l.lineWidth=t/2,l.strokeStyle="rgba("+m.c+","+(t+.2)+")",l.moveTo(i.x,i.y),l.lineTo(n.x,n.y),l.stroke()));x.splice(x.indexOf(i),1)}),r(i)}var c,a,u=document.createElement("canvas"),m=t(),d="c_n"+m.l,l=u.getContext("2d"),r=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},x=Math.random,w={x:null,y:null,max:2e4};u.id=d,u.style.cssText="position:fixed;top:0;left:0;z-index:"+m.z+";opacity:"+m.o,e("body")[0].appendChild(u),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,w.x=n.clientX,w.y=n.clientY},window.onmouseout=function(){w.x=null,w.y=null};for(var y=[],s=0;m.n>s;s++){var f=x()*c,h=x()*a,g=2*x()-1,p=2*x()-1;y.push({x:f,y:h,xa:g,ya:p,max:6e3})}setTimeout(function(){i()},100)}();

为博客加入鼠标点击显示红心

鼠标点击小红心在\themes\next\source\js\src文件目录下添加love.js文件。内容为:

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)} }function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)} }(),n()}(window,document);

找到\themes\next\layout_layout.swing文件,在文件的后面,之前 添加以下代码:

<!-- 小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

给博客添加LICENSE

在主题配置文件中添加下面这段代码(添加之前好好看看你的主题配置文件是否已经包含这段代码,已经包含就不用再加一遍了,因为重复会报错),这个LICENSE显示在侧边栏。

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
#creative_commons:

添加Local Search功能

安装 hexo插件

在你的站点文件夹中,用shell等运行下面这行代码:

$ npm install hexo-generator-searchdb --save

编辑站点配置文件

添加以下字段:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

启用本地搜索

编辑主题配置文件启用本地搜索

# Local search
local_search:
  enable: true

修改字体大小

打开\themes\next\source\css\ _variables\base.styl文件,将$font-size-base改成16px,如下所示:

$font-size-base = 16px

修改网页配色

取色可以用QQ,打开QQ按Ctrl+Alt+A开始截图,将鼠标移到文字上,按住Ctrl键即可看到该颜色的16进制代码。也可以用chrome浏览器的develop tool取色,选取喜欢的颜色。

修改\themes\next\source\css\ _variables\base.styl文件,找到文件开头的colors for use across theme,加入自定义颜色,在orange = #fc6423下加入下面这段代码:

// 下面是我自定义的颜色
$my-link-blue = #0593d3  //链接颜色
$my-link-hover-blue = #0477ab  //鼠标悬停后颜色

修改超链接颜色

打开\themes\next\source\css\ _variables\base.styl文件,像下面这样改掉这几行:

/ Global link color.
$link-color                   = $my-link-blue
$link-hover-color             = $my-link-hover-blue
$link-decoration-color        = $gray-lighter
$link-decoration-hover-color  = $my-link-hover-blue

修改小型代码块颜色

我修改<code>样式是因为我开启了highlighthighlight在渲染<pre><code>标签的同时也渲染了<code>标签,而且优先级高,所以才会出现方法一中这种不开启!important,样式就不起作用的问题。在方法一使用了!important使得此处对<code>的样式优先级最高,所以设置成功。

  • 方法一
    打开\themes\next\source\css\ _variables\base.styl文件,修改如下:
    在下面这段代码:
    // Code & Code Blocks
    // --------------------------------------------------
    $code-font-family = $font-family-monospace
    $code-font-size = 14px
    $code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
    $code-border-radius = 4px

下方加入下面这段代码:

code {
  color:#dd0055 !important;
  background:#eee !important;
}
  • 方法二
    你也可以不用方法一(建议使用方法一,因为第二种可能会失效,被其他的样式定义覆盖),而是在source/css/_variables/custom.styl文件中设定$code-foreground$code-background的值,也是用的优先级。
    $code-foreground = #fc6423
    $code-background = #fc6423
    # 此处颜色只是例子,你自己设置。

20170331149093227147630.png
20170331149093227147630.png

修改其他颜色

修改:themes\next\source\css\_variables\.base.styl文件:

grey-dim     = #666         >>>      $grey-dim     = #353535
$black-light  = #555         >>>      $black-light  = #353535
$blue-bright  = #87daff      >>>      $blue-bright  = #45c5ff

加入统计和提高索引量

添加sitemap插件

谷歌与百度的站点地图,前者适用于其他搜索引擎,用来手动提交以增加收录。

sitemap 安装

在你的站点文件夹中,用shell等分次运行下面这两行代码:

npm install hexo-generator-sitemap@1 --save
npm install hexo-generator-baidu-sitemap@0.1.1 --save

设置站点配置文件

在站点配置文件中添加代码:

# hexo sitemap网站地图
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
  • 配置成功后,hexo编译时会在hexo站点根目录生成sitemap.xmlbaidusitemap.xml。其中sitemap.xml适合提交给谷歌搜素引擎,baidusitemap.xml适合提交百度搜索引擎。

  • 其次,在站点根目录下新建一个robots.txt文件,其中添加下面的一段代码(具体网站改为你自己的网址):

# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://dingxuewen.github.io/sitemap.xml
Sitemap: https://dingxuewen.github.io/sitemap.xml

给非友情链添加标签

经过chinaz站长工具友情链接检测,发现有不必要的PR值输出,对于非友情链接的PR值输出,我们可以加上nofollow便签避免不必要的PR输出。方法是给链接加上rel="external nofollow"属性。例如:

找到\themes\next\layout\_partials\footer.swig文件,将下面代码:

{ { __('footer.powered', '<a class="theme-link" href="http://hexo.io">Hexo</a>') } }

改成:

{ { __('footer.powered', '<a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>') } }

将下面代码:

<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">

改成:

<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">

加入Baidu站长统计

先准备一些代码。站长统计,注册并获取统计代码:

  |  
<script type="text/javascript">
  var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
  document.write(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' type='text/javascript'%3E%3C/script%3E"));
</script>

修改底栏:找到\themes\next\layout\_partials\footer.swig文件,加入上面这段代码,出于保护隐私的考虑,我编辑掉了部分关键代码,直接复制上面的无法使用。注意把上面的xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx换成你自己的站长统计代码。

在页脚加入地图

在页脚加入百度地图和谷歌地图链接:

找到\themes\next\layout\_partials\footer.swig文件,百度和Google网站地图,上面已经安装了,这是插入到底栏的代码:

|  <span><a href="/sitemap.xml">Google网站地图</a></span>  
|  <span><a href="/baidusitemap.xml">百度网站地图

添加Baidu自动推送

百度自动推送代码,在页面被访问时,页面URL将立即被推送给百度,可以增加百度收录:找到\themes\next\layout\_partials\footer.swig\themes\next\layout\_macro\post.swig文件,(Next主题已经有了\themes\next\layout\_scripts\baidu-push.swig)添加下面的代码。

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

不蒜子统计

找到\themes\next\layout\_partials\footer.swig文件,加入下面不蒜子统计代码:

  |  本页点击 <span id="busuanzi_value_page_pv"></span> 次
  |  本站总点击 <span id="busuanzi_value_site_pv"></span> 次
  |  您是第 <span id="busuanzi_value_site_uv"></span> 位访客
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

在标题下添加【阅读量】等

现在要添加的阅读量统计也依赖下面这段代码。

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

打开/themes/next/layout/_macro/post.swig,找到标签<div class="post-meta"></div>,在该标签内部合适的位置(如timecategories之间或categories后面)添加:

{% if not is_index %}
  <span id="busuanzi_container_page_pv">  |  阅读量 <span id="busuanzi_value_page_pv"></span> 次</span>
{% endif %}

将阅读量改为热度(更个性)

还可以继续修改,看到好多人的博客不是阅读次数(阅读量),而是热度 188 ℃,那么可以继续这样修改,首先在Next主题的/themes/next/languages/zh-Hans文件中查找”阅读次数“这几个字,可以看到,在post中的visitors被定义为“阅读次数”,把这里的“阅读次数”改为“热度”。

那么怎么在页面中显示呢。打开Next主题文件夹中layout/_macro/post.swig,在这个文件里加上摄氏度的标志,在<span class="leancloud-visitors-count"></span>下面增加一行<span>℃</span>即可。

20170331149093272186421.png
20170331149093272186421.png

修改标题下分类等的样式

在Next主题中,我用的是LeanCloud数据统计,默认样式是在统计数据前有个小眼睛,我感觉不好看,想把它去掉,那么打开/themes/next/layout/_macro/post.swig,找到标签<i class="fa fa-eye"></i>,去掉下面这段代码即可:

<span class="post-meta-item-icon">
  <i class="fa fa-eye"></i>
</span>

多说个性化设置

设置多说动感头像
打开多说后台,进入后台管理,点击设置,在设置里有“自定义CSS”,将下面的这段代码粘贴进去:

#ds-reset .ds-avatar img,
#ds-recent-visitors .ds-avatar img {
width: 54px;
height: 54px;     /*设置图像的长和宽,这里要根据自己的评论框情况更改*/
border-radius: 27px;     /*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
-webkit-border-radius: 27px;     /*圆角效果:兼容webkit浏览器*/
-moz-border-radius: 27px;
box-shadow: inset 0 -1px 0 #3333sf;     /*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;     /*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/
-moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover,
#ds-recent-visitors .ds-avatar img:hover {
/*设置鼠标悬浮在头像时的CSS样式*/    box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 10px #fff;
rgba(255, 255, 255, .6), inset 0 0 20px rgba(255, 255, 255, 1);
transform: rotateZ(360deg);     /*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background: url(http://ww4.sinaimg.cn/small/649a4735gw1et7gnhy5fej20zk0m8q3q.jpg) right no-repeat;
}
#ds-recent-visitors .ds-avatar {
float: left
}
/*隐藏多说底部版权*/
#ds-thread #ds-reset .ds-powered-by {
display: none;
}

最近访客设置

  • 第一步 为页面添加代码
    往你想添加的页面增加下面的一小段代码即可。
    <div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>

解释一下上一段代码,其中:

class=“ds-recent-visitors”    //指定显示最近访客容器
data-num-items=“28”    //显示最近访客的数量
data-avatar-size=“42”    //显示最近访客头像尺寸大小
id=“ds-recent-visitors”    //为了调节最近访客样式加的

可以通过生成了一个guestbook页面,然后直接在\guestbook\index.md中添加了上面那段代码实现的。

  • 第二步 修改其样式
    通过多说后台管理>设置>基本设置>自定义CSS修改最近访客css样式。
    我的整个多说自定义css,其中访客样式和评论样式统一。代码已经包括在上一节设置多说动感头像的那段代码中了。你还可以不直接用那段代码,而是对其进行编辑,修改成你喜欢的样式。

增加留言页

那么有人会问,guestbook是如何创建的,那么现在我就把方法写出来。

新建一个 guestbook 页面:

在你的站点文件夹,用shell等运行下面这行代码:

hexo new page "guestbook"

找到你NexT主题_config.yml(主意是Next主题的_config.yml,不是hexo站点目录下的_config.yml),文件路径\themes\next\_config.yml,添加guestbookmenu中,如下:

menu:
  home: /
  #categories: /categories
  about: /about
  archives: /archives
  # tags: /tags
  #commonweal: /404.html
  guestbook: /guestbook

找到你Next主题zh-Hans.yml文件(我的网站是简体语言的),文件路径\themes\next\languages\zh-Hans.yml,添加guestbook: 留言板到menu中,如下:

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  commonweal: 公益404
  guestbook: 留言

SEO优化

更改首页标题格式为「关键词-网站名称-网站描述」。打开\themes\next\layout\index.swig文件,找到这行代码:

{% block title %} { { config.title } } {% endblock %}

把它改成:

{% block title %}
  { { theme.keywords } } - { { config.title } } - { { theme.description } }
{% endblock %}

20170331149093514340074.png
20170331149093514340074.png

博客部署的message设置

\hexo\node_modules\hexo-deployer-git\lib\deployer.js文件末尾找到这一句:

Site updated: { { now('YYYY-MM-DD HH:mm:ss') } }.

改得个性化一点:

勤奋的博主又更新啦: { { now(\'YYYY-MM-DD HH:mm:ss\') } }.

为项目主页添加README

Github 上的博客仓库主页空荡荡的,没有README。如果把README.md放入source文件夹,hexo g生成时会被解析成html文件,放到public文件夹,生成时又会自动删除。
  解决方法很简单,在站点配置文件中,搜索skip_render:,在其冒号后加一个空格然后加上README.md即可。
  

优化主题 sidebar 头像

就是为主题 sidebar 头像添加圆形化旋转的效果。修改 /themes/next/source/css/_common/components/sidebar/sidebar-author.styl 文件,我的整个 sidebar-author.styl文件的代码如下,你可以直接复制这段代码去替换你这个文件中的所有代码。
有一个注意事项,就是你要保证你的头像,也就是 avatar.jpg 这个图片是正方形,不是的话你要将其修改成正方形,这样才能通过样式将其展现为很好看的正圆,否则会是一个椭圆形。

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1;

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}
.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

20170331149093770262972.gif
20170331149093770262972.gif

小红心优化

为博客加入鼠标点击显示小红心,但是如果我们只想在博客的某个页面添加这个功能呢?
那么就可以在 \themes\next\source\js\src 文件目录下添加 love.js 文件。内容为:

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)} }function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)} }(),n()}(window,document);

之后呢,不在\themes\next\layout\_layout.swing 文件中添加代码,而是在你想要显示红心的页面的 Markdown文件中加入下面这段代码,例如我就在我的留言板页面的 Markdown 文件中加入了下面这段代码。

<!-- 小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

文章内文本样式

Markdown 毕竟是为了方便写作,在样式上过于单调。我们可以自己来给文章加一些样式。NexT 作者提供了一个供用户自己定义样式的文件:\themes\next\source\css\_custom\custom.stly。可以按照自己的需要写。

设置动态title

\themes\next\source\js\src 目录下新建 dytitle.js 。添加以下内容:

<!--崩溃欺骗-->
var OriginTitile = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/TEP.ico");
         document.title = ' 页面崩溃啦 ~ | cwyaml!';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = ' 噫又好了~ ' + OriginTitile;
         titleTime = setTimeout(function () {
             document.title = OriginTitile;
         }, 2000);
     }
 });

更改 \themes\next\layout\_layout.swig 。在</body> 之前添加:

<!--卖萌-->
<script type="text/javascript" src="/js/src/dytitle.js"></script>

2017033114909378973004.gif
2017033114909378973004.gif

添加听音乐

代码设置
\themes\next\layout\_macro目录下新建 high.swig 文件,添加以下内容:

<a title="收藏到书签,偶尔High一下^_^" rel="alternate" class="mw-harlem_shake_slow wobble shake" href='javascript:(
    /*
     * Copyright (C) 2015 Rocko (rocko.xyz) <rocko.zxp@gmail.com>
     *
     * Licensed under the Apache License, Version 2.0 (the "License");
     * you may not use this file except in compliance with the License.

     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS,
     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     * See the License for the specific language governing permissions and
     * limitations under the License.
     */
    function go() {

      var songs = [
          "http://m2.music.126.net/3uHnH7uQAeFwUfuvEB9lrg==/3265549619475054.mp3", 
          "http://m2.music.126.net/NnHwR2HV-1OoKZ6R5LVy4Q==/18502581673300023.mp3",
          "http://m2.music.126.net/qv3RI4K7ABKJ0TyAdb3taw==/3250156397064860.mp3",    
          "......"
      ];

      function S() {
          var e = document.getElementById("audio_element_id");
          if(e != null){
              var index = parseInt(e.getAttribute("curSongIndex"));
              if(index > songs.length - 2) {
                  index = 0;
              } else {
                  index++;
              }
              e.setAttribute("curSongIndex", index);
          }
          e.src = i;
          e.play()
      }
      function initAudioEle() {
          var e = document.getElementById("audio_element_id");
          if(e === null){
            e = document.createElement("audio");
            e.setAttribute("curSongIndex", 0);
            e.id = "audio_element_id";
            e.loop = false;
            e.bgcolor = 0;
            e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
            document.body.appendChild(e);
            e.addEventListener("ended", function() {
              go();
            }, true);
          }        
      }

      initAudioEle();
      var curSongIndex = parseInt(document.getElementById("audio_element_id").getAttribute("curSongIndex"));
      var i = songs[curSongIndex];
      S();
    })()'>
    <i class="fa fa-music"></i> 听音乐</a>

在侧边栏引用该文件:修改 \themes\next\layout\_macro\sidebar.swig ,添加以下代码:

20170331149093972649955.png
20170331149093972649955.png

20170331149093796919415.png
20170331149093796919415.png

样式修改:使 听音乐 和 RSS 并排展示。
修改 \themes\next\source\css\_schemes\Pisces\_sidebar.styl文件:

display: inline-block;

2017033114909380131689.png
2017033114909380131689.png

添加自己喜欢的音乐:修改其中的歌曲链接即可.

var songs = [
      "http://m2.music.126.net/3uHnH7uQAeFwUfuvEB9lrg==/3265549619475054.mp3", 
      "http://m2.music.126.net/NnHwR2HV-1OoKZ6R5LVy4Q==/18502581673300023.mp3",
      "http://m2.music.126.net/qv3RI4K7ABKJ0TyAdb3taw==/3250156397064860.mp3",    
      "......"
  ];

首页听音乐摇晃:需要加载 css 样式。在 themes\next\layout\_layout.swig文件的 </body>标签前 添加以下代码:

<!-- 听音乐摇晃 -->
<link href="http://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css" rel="stylesheet" type="text/css">

注意:有时候使用 FirefoxChrome时会提示非法插件并禁止使用,遇到这种情况我们把样式代码引入到 \themes\next\source\css\_custom\custom.stly文件即可解决。

音乐链接获取

  • 先获取歌曲id,直接打开 网易云音乐网页版 http://music.163.com 搜索自己喜欢的音乐,点击外链生成器获取歌曲的 ID 。举个例子:(id显而易见吧)
    http://music.163.com/#/song?id=443205403
  • 将下面网址中的两处id替换成的歌曲 id ,你将会获得一大串代码:外链就隐藏其中(如下图,自己找)。
  • http://music.163.com/api/song/detail/?id=425137664&ids=[425137664]&csrf_token=
    2017033114909381448123.png
    2017033114909381448123.png
  • 将上一步中获取到的网址放到地址栏中,若能正常播放音乐说明获取到的网址是正确的。然后你就可以把这些歌曲添加到自己的网页中了!用这种方法有些歌曲并不能获得,不过时效很长(只要网易云能听)。

博文压缩

目前知道的有两个插件可以压缩博文,hexo-all-minifier 插件和 gulp 插件。hexo-all-minifier 虽然使用比较简单,而且也可以压缩图片,但是对文章缩进(输入法全拼模式下按 Tab)不支持,所以暂时使用 gulp 压缩手段。

hexo-all-minifier 使用方法

安装 hexo-all-minifier,在站点的根目录下执行以下命令:

$ npm install hexo-all-minifier --save

hexo g 编译的时候就会自动压缩 HTML、JS、图片。详情参考插件介绍 hexo-all-minifier

glup 使用方法

hexo 依赖 gulp 插件安装,在站点的根目录下执行以下命令:

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

package.json 同级目录下,新建 gulpfile.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');
// 压缩 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,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

生成博文是执行 hexo g &&amp; gulp 就会根据 gulpfile.js 中的配置,对 public目录中的静态资源文件进行压缩。

博文置顶

修改 hero-generator-index 插件

替换文件:node_modules/hexo-generator-index/lib/generator.js 内的代码为:

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

设置文章置顶

在文章 Front-matter 中添加 top 值,数值越大文章越靠前,如:

---
title: 图集
categories: [图片]
tags: [picture]
date: 2015-04-02 14:36:04
top: 10
---

embed.js本地化

embed.js 是多说使用的远程脚本,你可以访问 http://static.duoshuo.com/embed.js 这个网址。右键另存为 \theme\next\source\js\src\这个文件夹。

然后打开 \themes\next\layout\_scripts\third-party\comments\duoshuo.swig 这个文件,在文件里搜索 //static.duoshuo.com/embed.js ,把它改成 /js/src/embed.js。搞定啦!

Hexo更改默认Google字体库

因为一些国内的客观原因,google字体库 的访问速度一直很慢,所以生成页面后,访问系统总是会耗费一大部分的时间在加载google字体库上,而且经常加载不成功。

解决的办法是可以用国内的CDN库来替代主题中的google字体库,更改方法如下:
shell中运行如下命令:

grep -ir fonts.google themes/
找到对应的google字体库地方,用国内的CDN字体库替换,如360字体库:360前端公共库CDN

首页分割线

\themes\next\source\css\_custom\custom.styl 文件中添加以下代码,可以修改博客首页中每篇文章的分割线长度,我设置为了100%长度。

//index页面中每篇文章相隔的那条线
.posts-expand {
  .post-eof {
    display: block;
    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
    width: 100%;
    height: 3px;
    background: $grey-light;
    text-align: center;
  }
}

字体、颜色等设置

\themes\next\source\css\_variables\custom.styl 文件中添加以下代码。具体功能我已经做了注释。

// 标题,修改成你期望的字体族
$font-family-headings = Georgia, sans
// 修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif
// 代码字体
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace
// 正文字体的大小
$font-size-base = 16px
// 代码字体的大小
$code-font-size = 14px
// 代码块颜色
$code-foreground = #dd0055
// Background color for <body>
$body-bg-color = #e7e5dc  //theme mist use #fdfdfd
// text-color
$text-color = #353535

语言配置

_config.yml中的language要配置为选定的主题cilia文件夹下的language目录下的文件,如:

language: zh-Hans
language: en
language: zh-hk
language: zh-tw

这里修改 zh-Hans为标准的zh-cn,并添加一些汉化内容

语言配置用法:

# 不带参数的
__('xxxx')
# 带参数的
_p('xxx',xx)

不蒜子统计显示

添加站点统计配置为不蒜子统计,并且可开关

busuanzi: true

配置自己的分享

国内的jiathis
themes/yilia/_partial/share_jia.ejs中的内容替换为:

<div class="jiathis_style">
    <span class="jiathis_txt"><%= __('post.share') %>:   </span>
    <a class="jiathis_button_weixin">微信</a>
    <a class="jiathis_button_cqq">QQ好友</a>
    <a class="jiathis_button_qzone">QQ空间</a>
    <a class="jiathis_button_tsina">新浪微博</a>
    <a href="http://www.jiathis.com/share?uid=2080230" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a>
    <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2080230" charset="utf-8"></script>

其中uid为自己在jiathis注册的uid
国外的add this
themes/yilia/_partial/share_jia.ejs中的内容替换为:

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox"></div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-568f54bcfd6a7b04" async="async"></script>

Rss

添加Rss,需要先安装rss生成模块:

npm install hexo-generator-feed --save

然后在themes/yilia/_config.yml开启rss

rss: /atom.xml

添加站点地图插件

npm install hexo-generator-sitmap --save

会在每次hexo generator后自动生成到网站根目录

设置网站logo

通过网站favicon在线制作 制作favicon图片,logo最好设置32*32。
next主题:将图片放在next主题source/images目录下

# 在next主题配置文件中添加:
favicon: /uploads/images/favicon.png

2017033114909390045735.png
2017033114909390045735.png

Hexo文章简单加密访问

找到themes->next->layout->_partials->head.swig文件。
按道理是添加在任何地方都行,但是推荐加在所有的<meta>标签之后。

<script>
    (function() {
        if('{ { page.password } }') {
            if (prompt('请输入文章密码') !== '{ { page.password } }') {
                alert('密码错误!');
                history.back();
            }
        }
    } )();
</script>
---
title: Hexo文章简单加密访问
date: 2016-12-02 
tags: hexo
categories: 博客
keywords:
    - Hexo
    - 加密
description: 文章访问密码:password
password: password
---

20170331149093898495542.png
20170331149093898495542.png

Hexo high一下

是直接把这段代码当成一个菜单项加在博客主题配置的_config.yml文件中

<li> <a title="把这个链接拖到你的Chrome收藏夹工具栏中" href='javascript:(function() {
    function c() {
        var e = document.createElement("link");
        e.setAttribute("type", "text/css");
        e.setAttribute("rel", "stylesheet");
        e.setAttribute("href", f);
        e.setAttribute("class", l);
        document.body.appendChild(e)
    }

    function h() {
        var e = document.getElementsByClassName(l);
        for (var t = 0; t < e.length; t++) {
            document.body.removeChild(e[t])
        }
    }

    function p() {
        var e = document.createElement("div");
        e.setAttribute("class", a);
        document.body.appendChild(e);
        setTimeout(function() {
            document.body.removeChild(e)
        }, 100)
    }

    function d(e) {
        return {
            height : e.offsetHeight,
            width : e.offsetWidth
        }
    }

    function v(i) {
        var s = d(i);
        return s.height > e && s.height < n && s.width > t && s.width < r
    }

    function m(e) {
        var t = e;
        var n = 0;
        while (!!t) {
            n += t.offsetTop;
            t = t.offsetParent
        }
        return n
    }

    function g() {
        var e = document.documentElement;
        if (!!window.innerWidth) {
            return window.innerHeight
        } else if (e && !isNaN(e.clientHeight)) {
            return e.clientHeight
        }
        return 0
    }

    function y() {
        if (window.pageYOffset) {
            return window.pageYOffset
        }
        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
    }

    function E(e) {
        var t = m(e);
        return t >= w && t <= b + w
    }

    function S() {
        var e = document.createElement("audio");
        e.setAttribute("class", l);
        e.src = i;
        e.loop = false;
        e.addEventListener("canplay", function() {
            setTimeout(function() {
                x(k)
            }, 500);
            setTimeout(function() {
                N();
                p();
                for (var e = 0; e < O.length; e++) {
                    T(O[e])
                }
            }, 15500)
        }, true);
        e.addEventListener("ended", function() {
            N();
            h()
        }, true);
        e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
        document.body.appendChild(e);
        e.play()
    }

    function x(e) {
        e.className += " " + s + " " + o
    }

    function T(e) {
        e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
    }

    function N() {
        var e = document.getElementsByClassName(s);
        var t = new RegExp("\\b" + s + "\\b");
        for (var n = 0; n < e.length; ) {
            e[n].className = e[n].className.replace(t, "")
        }
    }

    var e = 30;
    var t = 30;
    var n = 350;
    var r = 350;
    var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
    var s = "mw-harlem_shake_me";
    var o = "im_first";
    var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
    var a = "mw-strobe_light";
    var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
    var l = "mw_added_css";
    var b = g();
    var w = y();
    var C = document.getElementsByTagName("*");
    var k = null;
    for (var L = 0; L < C.length; L++) {
        var A = C[L];
        if (v(A)) {
            if (E(A)) {
                k = A;
                break
            }
        }
    }
    if (A === null) {
        console.warn("Could not find a node of the right size. Please try a different page.");
        return
    }
    c();
    S();
    var O = [];
    for (var L = 0; L < C.length; L++) {
        var A = C[L];
        if (v(A)) {
            O.push(A)
        }
    }
})()    '>High一下</a> </li>
menu:
  high: javascript:void(0)
menu_icons:
  high: play

// 第一个 high 的javascript:void(0)是指a标签的跳转链接,其实这里的功能就是为了让它不跳转的,另外还有一个功能,可以把空链接的a标签悬浮变成手型的鼠标。

第二个 high对应的play是展示的图标,NexT主题使用的是fontawesome图标,这里的play就是其对应的图标,想自己 diy 一下就去fontawesome上找个自己喜欢的。

这样的方法简单粗暴有效,并且还有一个好处,可以直接把这个链接保存成浏览器的书签,这样就能在任何网页都能够调用这个 High一下 的方法。

high 一下自定义页面歌曲

首先是在需要自定义曲子的文章中加上:

<div id="musicUrl" url="***"><div>

然后最终版high.js代码是这样:

document.getElementsByClassName('menu-item-high')[0].addEventListener('click', (function(){
    var play = false;
    var musicUrl = document.getElementById('musicUrl');
    if(musicUrl){
        musicUrl = musicUrl.getAttribute('url');
    }else{
        musicUrl = null;
    }
    return function(){
        if(play){
            console.log('Enjoying');
            return;
        }
        play = true;
        function c() {
            var e = document.createElement("link");
            e.setAttribute("type", "text/css");
            e.setAttribute("rel", "stylesheet");
            e.setAttribute("href", f);
            e.setAttribute("class", l);
            document.body.appendChild(e)
        }

        function h() {
            var e = document.getElementsByClassName(l);
            for (var t = 0; t < e.length; t++) {
                document.body.removeChild(e[t])
            }
        }

        function p() {
            var e = document.createElement("div");
            e.setAttribute("class", a);
            document.body.appendChild(e);
            setTimeout(function() {
                document.body.removeChild(e)
            }, 100)
        }

        function d(e) {
            return {
                height: e.offsetHeight,
                width: e.offsetWidth
            }
        }

        function v(i) {
            var s = d(i);
            return s.height > e && s.height < n && s.width > t && s.width < r
        }

        function m(e) {
            var t = e;
            var n = 0;
            while (!!t) {
                n += t.offsetTop;
                t = t.offsetParent
            }
            return n
        }

        function g() {
            var e = document.documentElement;
            if (!!window.innerWidth) {
                return window.innerHeight
            } else if (e && !isNaN(e.clientHeight)) {
                return e.clientHeight
            }
            return 0
        }

        function y() {
            if (window.pageYOffset) {
                return window.pageYOffset
            }
            return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
        }

        function E(e) {
            var t = m(e);
            return t >= w && t <= b + w
        }

        function S() {
            var e = document.createElement("audio");
            e.setAttribute("class", l);
            e.src = i;
            e.loop = false;
            e.addEventListener("canplay", function() {
                setTimeout(function() {
                    x(k)
                }, 500);
                setTimeout(function() {
                    N();
                    p();
                    for (var e = 0; e < O.length; e++) {
                        T(O[e])
                    }
                }, 15500)
            }, true);
            e.addEventListener("ended", function() {
                N();
                h();
                paly = false;
            }, true);
            e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
            document.body.appendChild(e);
            e.play()
        }

        function x(e) {
            e.className += " " + s + " " + o
        }

        function T(e) {
            e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
        }

        function N() {
            var e = document.getElementsByClassName(s);
            var t = new RegExp("\\b" + s + "\\b");
            for (var n = 0; n < e.length; ) {
                e[n].className = e[n].className.replace(t, "")
            }
        }

        var e = 30;
        var t = 30;
        var n = 350;
        var r = 350;
        var i = musicUrl || "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
        var s = "mw-harlem_shake_me";
        var o = "im_first";
        var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
        var a = "mw-strobe_light";
        var f = "/vendors/high/high.css";
        var l = "mw_added_css";
        var b = g();
        var w = y();
        var C = document.getElementsByTagName("*");
        var k = null;
        for (var L = 0; L < C.length; L++) {
            var A = C[L];
            if (v(A)) {
                if (E(A)) {
                    k = A;
                    break
                }
            }
        }
        if (A === null) {
            console.warn("Could not find a node of the right size. Please try a different page.");
            return
        }
        c();
        S();
        var O = [];
        for (var L = 0; L < C.length; L++) {
            var A = C[L];
            if (v(A)) {
                O.push(A)
            }
        }
    };
})(), false);

修改文章链接

HEXO 默认的文章链接形式为domain/year/month/day/postname,默认就是一个四级url,并且可能造成url过长,对搜索引擎是十分不友好的,我们可以改成domain/postname的形式。编辑站点_config.yml文件,修改其中的permalink字段改为permalink: :title.html即可。

七、总结

每次写完博客发布都需要用到的命令

hexo clean

hexo g -d

发布之前,在本地预览博客用到的命令:

hexo s

同步博客需要用到的命令:

git add .

git commit -m 'comment'

git push

git clone <server> -b <branch>

git pull

2017/4/11 posted in  服务器

Git学习笔记

前言

Git 是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势。相对于SVN来说,可能Git更符合个人开发者的习惯。而且由于GitHub开源代码平台的出色,导致很多优秀的代码都通过Git保存在其中,所以学会使用Git也是重中之重,对于一个程序员来说基本是必备的技能。所以,全面了解Git还是很有必要的。

Git常用操作命令

远程仓库相关命令

检出仓库:$ git clone git://github.com/jquery/jquery.git

查看远程仓库:$ git remote -v

添加远程仓库:$ git remote add [name] [url]

删除远程仓库:$ git remote rm [name]

修改远程仓库:$ git remote set-url --push [name] [newUrl]

拉取远程仓库:$ git pull [remoteName] [localBranchName]

推送远程仓库:$ git push [remoteName] [localBranchName]

如果想把本地的某个分支test提交到远程仓库,并作为远程仓库的master分支,或者作为另外一个名叫test的分支,如下:

$git push origin test:master // 提交本地test分支作为远程的master分支

$git push origin test:test // 提交本地test分支作为远程的test分支

分支(branch)操作相关命令

查看本地分支:$ git branch

查看远程分支:$ git branch -r

创建本地分支:$ git branch [name] ----注意新分支创建后不会自动切换为当前分支

切换分支:$ git checkout [name]

创建新分支并立即切换到新分支:$ git checkout -b [name]

删除分支:$ git branch -d [name] ---- -d选项只能删除已经参与了合并的分支,对于未有合并的分支是无法删除的。如果想强制删除一个分支,可以使用-D选项

合并分支:$ git merge [name] ----将名称为[name]的分支与当前分支合并

创建远程分支(本地分支push到远程):$ git push origin [name]

删除远程分支:$ git push origin :heads/[name]$ gitpush origin :[name]

创建空的分支:(执行命令之前记得先提交你当前分支的修改,否则会被强制删干净没得后悔)

$git symbolic-ref HEAD refs/heads/[name]

$rm .git/index

$git clean -fdx

版本(tag)操作相关命令

查看版本:$ git tag

创建版本:$ git tag [name]

删除版本:$ git tag -d [name]

查看远程版本:$ git tag -r

创建远程版本(本地版本push到远程):$ git push origin [name]

删除远程版本:$ git push origin :refs/tags/[name]

合并远程仓库的tag到本地:$ git pull origin --tags

上传本地tag到远程仓库:$ git push origin --tags

创建带注释的tag:$ git tag -a [name] -m 'yourMessage'

子模块(submodule)相关操作命令

添加子模块:$ git submodule add [url] [path]

如:$git submodule add git://github.com/soberh/ui-libs.git src/main/webapp/ui-libs

初始化子模块:$ git submodule init ----只在首次检出仓库时运行一次就行

更新子模块:$ git submodule update ----每次更新或切换分支后都需要运行一下

删除子模块:(分4步走哦)

  • $ git rm --cached [path]
  • 编辑“.gitmodules”文件,将子模块的相关配置节点删除掉
  • 编辑“ .git/config”文件,将子模块的相关配置节点删除掉
  • 手动删除子模块残留的目录

忽略一些文件、文件夹不提交

在仓库根目录下创建名称为“.gitignore”的文件,写入不需要的文件夹名或文件,每个元素占一行即可,如

target
bin
*.db

Git 常用命令

git branch 查看本地所有分支
git status 查看当前状态 
git commit 提交 
git branch -a 查看所有的分支
git branch -r 查看本地所有分支
git commit -am "init" 提交并且加注释 
git remote add origin git@192.168.1.119:ndshow
git push origin master 将文件给推到服务器上 
git remote show origin 显示远程库origin里的资源 
git push origin master:develop
git push origin master:hb-dev 将本地库与服务器上的库进行关联 
git checkout --track origin/dev 切换到远程dev分支
git branch -D master develop 删除本地库develop
git checkout -b dev 建立一个新的本地分支dev
git merge origin/dev 将分支dev与当前分支进行合并
git checkout dev 切换到本地dev分支
git remote show 查看远程库
git add .
git rm 文件名(包括路径) 从git中删除指定文件
git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来
git config --list 看所有用户
git ls-files 看已经被提交的
git rm [file name] 删除一个文件
git commit -a 提交当前repos的所有的改变
git add [file name] 添加一个文件到git index
git commit -v 当你用-v参数的时候可以看commit的差异
git commit -m "This is the message describing the commit" 添加commit信息
git commit -a -a是代表add,把所有的change加到git index里然后再commit
git commit -a -v 一般提交命令
git log 看你commit的日志
git diff 查看尚未暂存的更新
git rm a.a 移除文件(从暂存区和工作区中删除)
git rm --cached a.a 移除文件(只从暂存区中删除)
git commit -m "remove" 移除文件(从Git中删除)
git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
git stash push 将文件给push到一个临时空间中
git stash pop 将文件从临时空间pop下来
---------------------------------------------------------
git remote add origin git@github.com:username/Hello-World.git
git push origin master 将本地项目给提交到服务器中
-----------------------------------------------------------
git pull 本地与服务器端同步
-----------------------------------------------------------------
git push (远程仓库名) (分支名) 将本地分支推送到服务器上去。
git push origin serverfix:awesomebranch
------------------------------------------------------------------
git fetch 相当于是从远程获取最新版本到本地,不会自动merge
git commit -a -m "log_message" (-a是提交所有改动,-m是加入log信息) 本地修改同步至服务器端 :
git branch branch_0.1 master 从主分支master创建branch_0.1分支
git branch -m branch_0.1 branch_1.0 将branch_0.1重命名为branch_1.0
git checkout branch_1.0/master 切换到branch_1.0/master分支
du -hs

-----------------------------------------------------------
mkdir WebApp
cd WebApp
git init
touch README
git add README
git commit -m 'first commit'
git remote add origin git@github.com:daixu/WebApp.git
git push -u origin master

20170406149149207674904.png
20170406149149207674904.png

2017/4/5 posted in  服务器

Mac命令行整理

前言

命令行是操作Mac和Linux最基础和重要的内容,简单的命令行自然会随时记得。但是碰到配置环境以及安装软件这种活,还是得时不时的上网查询,而且在不同的电脑配置还得重新上网查询,所以在此记录一下,以节省以后使用命令行的时间。

查看端口占用情况及杀死进程

sudo lsof -i :9000 #查看端口进程
sudo kill -9 716 #根据PID杀死进程

2017/3/25 posted in  服务器

Apache简单搭建文件共享服务器

前言

因为公司需求,增加打包测试发布的效率以及方便查看log信息。所以需要搭建一个简单的文件服务器。Mac内置Apache,所以我们可以很方便的搭建起来。

启动Apache

启动:sudo apachectl start

停止:sudo apachectl stop

重启:sudo apachectl restart

查看 Apache 版本 httpd -v

浏览器打开
http://127.0.0.1 可以看到 It works! 的页面

文件根目录

系统级的根目录

http://localhosts/ 对应的是 /Library/WebServer/Documents/

系统级根目录默认没有开启目录列表,开启方法:

编辑 /etc/apache2/httpd.conf

文件搜索找到 <Directory "/Library/WebServer/Documents">Options FollowSymLinks Multiviews 修改为Options Indexes FollowSymLinks Multiviews

用户级根目录

另一个 Web 根目录默认是 ~/Sites ,10.9 中你需要手动创建这个Sites目录。

检查/etc/apache2/users/这个目录下是否有 username.conf 文件

如果没有,则需要新建一个,username 需要是你的账户名字,建议使用终端创建这个文件:

cd /etc/apache2/users

sudo vi username.conf

贴入以下内容,注意修改 username 为你的账户名字

<Directory "/Users/username/Sites/">
Options Indexes MultiViews FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>

这个文件的权限应该是:

-rw-r--r-- 1 root wheel 298 Jun 28 16:47 username.conf

如果不是,请修改:

sudo chmod 644 username.conf

编辑 /etc/apache2/httpd.conf 文件,删除下列这些代码前的注释符号: #

Include /private/etc/apache2/extra/httpd-userdir.conf
LoadModule authz_core_module libexec/apache2/mod_authz_core.so
LoadModule authz_host_module libexec/apache2/mod_authz_host.so
LoadModule userdir_module libexec/apache2/mod_userdir.so

编辑 /etc/apache2/extra/httpd-userdir.conf文件,删除下列这些代码前的注释符号: #

Include /private/etc/apache2/users/*.conf

重启 Apache

sudo apachectl restart

这时,这个网址应该已经可以用了:

http://localhost/~username/

想去除/~username/

~username看着的确比较累赘,所以我们重定向把他给去掉

进入/Library/WebServer/Documents文件夹中,找到index.html.en文件,在里面添加一行<META HTTP-EQUIV="Refresh" CONTENT="0; URL=/~rainbird">。最后变成这个样子。

<META HTTP-EQUIV="Refresh" CONTENT="0; URL=/~rainbird">
<html><body><h1>It works!</h1></body></html>
2017/3/17 posted in  服务器

命令行工具使用

替换Ruby的源

  • $gem source -r https://rubygems.org/
  • $ gem source -a https://ruby.taobao.org
  • $ gem sources -l要想验证是否替换成功了,可以执行
  • CURRENT SOURCES http://ruby.taobao.org/正常的输出结果

Mac OS X安装Ruby运行环境

  • 先安装 Xcode 开发工具,它将帮你安装好 Unix 环境需要的开发包。
  • 安装 RVM
    • $ curl -L https://get.rvm.io | bash -s stable期间可能会问你sudo管理员密码,以及自动通过homebrew安装依赖包,等待一段时间后就可以成功安装好 RVM。
    • $ source ~/.rvm/scripts/rvm载入 RVM 环境
    • rvm -v检查一下是否安装正确
  • 用 RVM 安装 Ruby 环境
    • $ rvm list known列出已知的ruby版本
    • $ rvm install 2.4.0可以选择现有的rvm版本来进行安装
    • $ rvm list查询已经安装的ruby
    • $ rvm remove 1.9.2卸载一个已安装版本
  • 设置 Ruby 版本
    • $ rvm 2.0.0 --defaultRVM 装好以后,需要执行下面的命令将指定版本的 Ruby 设置为系统默认版本

Mac OS X安装cocoapods

  • sudo gem install cocoapods
  • 如果速度不行,更换源。

Mac OS X安装命令行切图工具

  • 由一张1024*1024的图片批量生成applogo
    • brew install imagemagick
    • 配置icon_convert.sh文件
    • cd 到icon_convert.sh所在文件夹
    • 执行./icon_convert.sh '1024.png'
    • 生成对应的appicon
      icon_convert.sh
      icon_convert.sh
2017/2/18 posted in  服务器

CentOS7搭建Git

前言

Git是一个好东西,分布式管理的方式的确使管理代码变得方便很多。而且git致富和linux之父是同一个人,在linux上搭建git十分简单。感觉除了用GitHub公有仓库外,自己搭建一个私有的仓库来储存自己的代码还是蛮有必要的。

git作为一个 分布式代码仓库,其实没有server和client的概念,每个机器上保存的都是一份完整的代码库,不过貌似是大团队的话,为了管理方便,会在服务器装一个管理的东东,俺是小团队,有需要再去研究,小团队手动就口以了

服务端安装Git

  • 安装Git # yum -y install git
  • 创建一个裸仓库 cd /srv
    mkdir GitServer
    cd GitServer
    cd MyBlog
    git init --bare MyBlog.git //初始化空的Git版本库
  • 创建一个git用户 useradd gitUser
    passwd gitUser
  • 然后把GitServer文件夹赋予git用户 chown -R gitUser: gitUser GitServer

至此,服务端的git搭建就完毕了。

客户端操作Git

  • 在本机创建一个文件夹,进入文件夹
  • 直接clone git clone gitUser@***.**.**.**:/srv/GitServer/project.git //**.**.**.**为你服务器的外网ip
  • 输入git的密码
  • 进入project.git
  • 创建一个测试文件 vim test.txt
  • 输入 Hello Git World!
  • 查看状态 git status 看到待添加的文件test.txt
  • 添加test.txt让git追踪 git add test.txt
  • 提交到版本库,并写上备注信息 git commit test.txt -m 'jest a test'
  • 把他推送到服务器的版本库中去,要输入密码 git push origin master

服务端查看

  • 由于在服务器端创建版本库时用的是git init --bare project.git加了个–-bare就是创建一个裸仓库,没有工作区,所以这里只记录了文件的改动,要看是不是同步过来了,需要在git clone一次,看是不是这一次有test.txt啦
  • git clone gitUser@127.0.0.1:/srv/GitServer/MyBlog.git
  • 输入密码后,下载代码,然后进入仓库查看果然master分支已经有test.txt,打开文件,发现内容一致。
  • git log查看提交记录,作者时间以及备注信息一致
  • 啦啦啦,私有git搭建完成
2015/4/29 posted in  服务器

如何搭建LAMP环境

前言

由于买了阿里云学生机,就想着自己在服务器上搭建网站。首先给服务器搭建LAMP环境,以后搭建网站就有着落了。

安装Apache服务

  • 安装 yum -y install httpd
  • 开启apache服务 systemctl start httpd.service
  • 设置apache服务开机启动 systemctl enable httpd.service
  • 验证Apache服务是否安装成功 在本机浏览器中输入阿里云服务器的外网ip,出现Testing 123... Apache页面说明安装成功。

安装PHP

  • 安装 yum -y install php
  • 重启Apache服务 systemctl restart httpd.service或者systemctl restart httpd
  • 写一个php文件在浏览器中运行一次 vi /var/www/html/info.php--------输入<?php phpinfo(); ?>-------在本机浏览器中输入ip/info.php,出现php version说明php安装成功。

安装MySql

CentOS 7.0 安装MariaDB,这是MySql的一个分支,是由MySql的创始人Michael Widenius带领开发的,团队依旧,所以两者使用基本没有太大的区别。

  • 安装 yum install mariadb-server -y
  • 开启MySQL服务 systemctl start mariadb.service
  • 设置开机启动MySQL服务 systemctl enable mariadb.service
  • 设置root帐户的密码 mysql_secure_installation
  • 之后会让你输入当前mysql的密码,直接Enter。之后输入新密码,以及确认密码,后面的内容看你的情况进行选择是或者否。
  • 想要确认密码是否已经改变,可以输入mysql -uroot -p进行测试。

将PHP和MySQL关联起来

输入yum -y install php-mysql

安装常用的PHP模块

  • 安装:yum -y install php-gd php-ldap php-odbc php-pear php-xml php-xmlrpc php-mbstring php-snmp php-soap curl curl-devel
  • 重启Apache服务 systemctl restart httpd.service

结束

然后,再次在浏览器中运行info.php,你会看到安装的模块的信息。
至此,LAMP环境就搭建好了。

2015/4/23 posted in  服务器

Github pages和Jekyll搭建

前言

最近才发现Github原来也可以支持博客的搭建,利用Jekyll这个静态网站生成器,可以很快搭建一个博客来记录自己开发学习生活的一些知识点和经验。之前的WordPress用的不怎么顺手,一台服务器既要搭建博客,又要玩些其他小应用还是不怎么方便,所以既然有了这个免费的技术分享区还是可以好好利用的。

Step 1.Github选址

GitHub是拿来干什么的就不多说了,GitHub Pages(Website for you and your project.),这就是我们所需要搭建的博客了,通过Git方式对博客进行管理,这种方式免费,安全,快捷。

  • 新建repository名为username.github.io,username为你github的用户名。那么他的master分支上的文件就能在username.github.io的根目录访问到。
  • 创建仓库后,进入Setting,拉动滚动条至GitHub Pages那一栏,点击Automatic page generator.
  • 进入创建用户页面,可以自己编辑,也可以从readme加载。
  • 点击continue to layout,继续选择主题。选好后点击PUBLISH,发布,整个技术博客站点的CSS,HTML和IMG都会导入到你的仓库中。
  • 最后在浏览器中输入username.github.io就可以进入到你的博客主页中了。

    ps.觉得域名丑的,或者不想用这个域名的,可以花钱买个域名或者把自己已经买的域名映射过去。在仓库根路径下创建一个名为"CNAME"的文件,注意没有后缀。文件中填入你所要指向的域名。这样访问 http://username.github.io 时浏览器就接收到重定向指令,跳转到CNAME里面指定的域名去了。接着还需要到你域名的服务商那里修改域名的记录,通过在终端输入ping username.github.io可以获得博客的ip,添加"www"和"@"两条记录,这样就完成修改域名了。

    Git教程-廖雪峰

    Git使用教程图文详解

Step 2.本地环境搭建

这一步不是必须的,但是强烈建议完成。这样,在博客发布之前方便调试检验一下。

  • 首先更新本机上的ruby。
    • 安装RVM
      • $ curl -L get.rvm.io | bash -s stable
      • $ source ~/.bashrc
      • $ source ~/.bash_profile
      • 测试安装是否正常rvm -v
    • 用RVM升级Ruby
      • 查看当前ruby版本$ ruby -v
      • 列出已知的ruby版本$ rvm list known
      • 安装最新版本ruby$ rvm install x.x.x
      • 查看当前ruby版本$ ruby -v
  • 安装Bundle
    • $ gem install bundle
    • 在根目录下创建一个叫Gemfile的文件,注意没有后缀
    • 在Gemfile文件中输入 source 'https://gems.ruby-china.org//' gem 'github-pages'
    • 保存后,在命令行中执行$ bundle install
    • $ bundle update
    • 启动转化和本地服务 $ bundle exec jekyll serve
  • 安装Jekyll

Step 3.Jekyll

  • Jekyll目录
    • _config.yml 是配置文件,你可以在里面配置你博客会用到的常量,比如博客名,邮件
    • _includes:就是你文章各个部分的html文件,可以在布局中包含这些文件
    • _layouts:存放模板。就是你网页的布局,主页布局,文章布局。当然不是指CSS那样的布局,是指,你包含哪些基本的内容到页面上。包含的内容就是includes里面的文件。
    • _posts: 存放博客文章
    • index:博客主页
    • CNAME文件:域名地址
    • CSS:存放博客所用CSS
    • JS: 存放博客所用JavaScript
  • 如何发表文章
    • 文章的写法,在Markdown开头加上一段:
---
layout: posttitle: "Welcome to Jekyll!"
date: 2014-01-27 21:57:11
categories: Blog
---

文件命名格式: 时间加标题 比如:2015-08-15-HowTOBuildBlog.md
ok,你可以写文章了,放入_post文件夹即可。

  • 修改主题
    • 学习学习前端,并且研究下Jekyll官网,自己修改。或者fork别人在github写好的模板进行修改

Step 4.同步本地和GitHub博客文件

使用git命令或者用图形化客户端直接进行文件同步,方法简单不详述。

Step 5.Markdown

使用这种语法写文件简单的多了,附上markdown语法和心得

参考网址:

http://www.jianshu.com/p/9a6bc31d329d

https://zhuanlan.zhihu.com/p/21333968

Step 6.代码高亮

代码:

2017022454565java_highlight.png
2017022454565java_highlight.png

在文中使用效果:

 public void hello(){
    int a = 0;
    int b = 1;
    int c = a + b;
 }

Step 7.MarkDown解析器

现在github推荐kramdown作为markdown解析器。其解析速度很快比PHP markdown和Maruku都要快几倍。kramdown有很多一般markdown所没有的语法特点,包括和GFM也有差异。另外也可以很方便地作为文件转换使用。

kramdown和markdown较大的差异比较

Step 8.生成目录

没有目录还是一件很苦恼的事情。特别是长篇博客,所以去查了markdown如何生成目录,在此更新一下。

kramdown默认是支持TOC。在_config.yml中的配置方式为:

markdown: kramdown
kramdown:
  input:  GFM

在编写文章时,插入下面代码,渲染之后就可以生成TOC了:

2017022426562屏幕快照 2017-02-24 14.48.52.png
2017022426562屏幕快照 2017-02-24 14.48.52.png

Step 9.插入数学公式

/source/_includes/head.html中将下面的代码插入<head></head>标签之间。

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

接着使用LaTeX表达式进行编辑。

2015/4/11 posted in  服务器