个人博客指南

GuoYanjun2015-12-242015-12-24

文/一月筠 -- 转载请注明 --
hexo是一款基于Node.js的静态博客框架，这篇文章针对Mac用户，熟悉hexo的同学可以绕道哈。初步搭建只需要简单的几步，动动你的手指头，在终端试一下吧…

Hexo博客环境搭建for Mac

history_permalink: 2015/12/25/hexo-blog-environment-set-up-for-mac.html
history_date: 2015-12-25 18:00:00
history_updated: 2015-12-25 18:00:00

前言

hexo是一款基于Node.js的静态博客框架，这篇文章针对Mac用户，熟悉hexo的同学可以绕道哈。初步搭建只需要简单的几步，动动你的手指头，在终端试一下吧…

cd /users/GuoYanjun/Documents/yajon_blog
hexo init                  #执行init命令初始化hexo到当前目录
hexo new post "post_name"  # 新建一篇文章
hexo g                     # g == generate 自动根据当前目录下文件,生成静态网页
hexo s                     # s == server 运行本地服务

部署步骤

每次部署的步骤，可按以下三步来进行。

1
2
3

hexo clean
hexo generate
hexo deploy

这里有必要提下Hexo常用的几个命令:

1
2
3

hexo generate       #自动根据当前目录下文件,生成静态网页,会在当前目录下生成一个public的文件夹
hexo server         #启动本地web服务，预览访问（默认端口4000，'ctrl + c'关闭server）
hexo deploy         #部署播客到远端（比如github, coding等平台）

常用命令

$ hexo new "postName"         #新建文章,其中postName是文章题目
$ hexo new page "pageName"    #新建页面
$ hexo help                   #查看帮助
$ hexo version                #查看Hexo的版本
$ hexo clean                  #清除缓存 网页正常情况下可以忽略此条命令

常用简写

$ hexo n "我的博客" == hexo new "我的博客" #新建文章
$ hexo p == hexo publish
$ hexo g == hexo generate					#生成
$ hexo s == hexo server						#启动服务预览
$ hexo d == hexo deploy						#部署

常用组合

1 2	$ hexo d -g #生成部署 $ hexo s -g #生成预览

服务器

$ hexo server #Hexo 会监视文件变动并自动更新，您无须重启服务器。 
$ hexo server -s #静态模式 
$ hexo server -p 5000 #更改端口 
$ hexo server -i 192.168.1.1 #自定义 IP

监视文件变动

1 2	hexo generate #生成静态文件 hexo generate --watch #监视文件变动

以下为上述部署步骤的相关截图。

hexo init 之后出现的文件夹

npm install 之后出现 node_modules

hexo generate 之后出现 public 和 db.json

最后，可以在本地查看localhost:4000
在Mac terminal按下ctrl+C结束

运行效果图

配置SSH密钥

Mac下已安装的ssh的id_rsa.pub文件位置

如果之前生成的SSH Key是选择默认路径的，因此要找到ssh文件夹下的id_rsa.pub文件，只需要：
打开终端输入open ~/.ssh即可。

step1: 看看是否存在SSH密钥(keys)

首先，我们需要看看是否看看本机是否存在SSH keys,打开Git Bash,并运行:

1	$ cd ~/. ssh

检查你本机用户home目录下是否存在.ssh目录

如果，不存在此目录，则进行第二步操作，否则，你本机已经存在ssh公钥和私钥，可以略过第二步，直接进入第三步操作。

step2: 创建一对新的SSH密钥(keys)

按照你提供的邮箱地址，创建一对密钥

1	$ssh-keygen -t rsa -C "your_email@example.com"

运行完之后会出现以下提示：

1 2	Generating public/private rsa key pair. Enter file in which to save the key (/Users/yourname/.ssh/id_rsa):

直接回车，则将密钥按默认文件进行存储。此时也可以输入特定的文件名，比如/Users/yourname/.ssh/github_rsa
接着，根据提示，你需要输入密码和确认密码（说到这里，如果你很放心，其实可以不用密码，就是到输密码的地方，都直接回车，所以每次push就只管回车就行了。所谓的最安全的密码，就是没有密码）。这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。注意：输入密码的时候没有*字样的，你直接输入就可以了。

step3: 在GitHub账户中添加你的公钥

运行如下命令，从Finder中找到你的id_rsa.pub文件，打开之后，将其内容全部复制。看清楚是全部复制！！！

1	$ cd ~/. ssh

step4: 将密钥添加到你的GitHub账户中

step1: 登陆GitHub,进入你的Account Settings.
step2: 选择SSH Keys
step3: 粘贴密钥，添加即可

粘贴密钥

step5: 测试

添加完密钥后可以输入下面的命令，看看设置是否成功，git@github.com的部分不要修改：

1	$ ssh -T git@github.com

如果是下面的反馈：

1
2
3

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要紧张，输入yes就好，然后会看到：

1	Hi Yajon! You've successfully authenticated, but GitHub does not provide shell access.

step5: 设置用户信息

现在你已经可以通过SSH链接到GitHub了，还有一些个人信息需要完善的。
Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的，名字必须是你的真名，而不是GitHub的昵称。

1 2	$ git config --global user.name "Yajon"//用户名 $ git config --global user.email "your_email@gmail.com"//填写自己的邮箱

Extensions

Plugins: http://hexo.io/plugins/
Themes: http://hexo.io/themes/

Hexo命令和一些使用方法

hexo是一个基于Node.js的静态博客程序，可以方便的生成静态网页托管在github和Heroku上…
history_permalink: 2015/12/24/the-hexo-comand-and-some-usage.html
history_date: 2015-12-24 10:30:00
history_updated: 2015-12-24 10:30:00

前言

hexo是一个基于Node.js的静态博客程序，可以方便的生成静态网页托管在github和Heroku上。作者是来自台湾的@tommy351。
我们可以用hexo创建自己的博客，托管到github或Heroku上，绑定自己的域名，用markdown写文章。
本博客即使用hexo创建并托管在github上。

网上有很多hexo大的搭建教程，这里就不多说了，这里主要介绍hexo的使用方法，同时也是为了方便自己记忆。

hexo命令

1
2
3

npm install hexo -g #安装  
npm update hexo -g #升级  
hexo init #初始化

简写

hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo p == hexo publish
hexo g == hexo generate#生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署

服务器

hexo server #Hexo 会监视文件变动并自动更新，您无须重启服务器。
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP

hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

监视文件变动

1 2	hexo generate #使用 Hexo 生成静态文件快速而且简单 hexo generate --watch #监视文件变动

完成后部署

两个命令的作用是相同的
hexo generate –deploy
hexo deploy –generate

1 2	hexo deploy -g hexo server -g

草稿

1	hexo publish [layout] <title>

模版

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub

hexo new [layout] <title>
hexo new photo "My Gallery"
hexo new "Hello World" --lang tw

变量	描述
layout	布局
title	标题
date	文件建立日期

title: 使用Hexo搭建个人博客
layout: post
date: 2014-03-03 19:07:43
comments: true
categories: Blog
tags: [Hexo]
keywords: Hexo, Blog
description: 生命在于折腾，又把博客折腾到Hexo了。给Hexo点赞。

模版（Scaffold）

hexo new photo "My Gallery"

变量	描述
layout	布局
title	标题
date	文件建立日期

设置文章摘要

1	以上是文章摘要 <!--more--> 以下是余下全文

创建一篇新文章

1	$ hexo new "my new post"

然后在~\hexo\source\ _posts中打开这个文件（我用的是subline text3打开的），配置开头。

---
title: my new post  \#文章标题，可以改为中文。
date: 2016-01-14 20:37:51  \#发表日期，自动生成，不改。
categories:  ***  \#文章分类
tags: 
- hexo   \#文章标签，多于一项是使用这种格式。
---
#这里是正文，用markdown写，所有的书写切记需要在  " : "  后面留空格。
<!--more-->  \#在<!--more-->之前的内容会显示在首页，之后的内容会被隐藏，当游客点击Read more才能看到。

推送到服务器上

1
2
3

hexo n #写文章
hexo g #生成
hexo d #部署 #可与hexo g合并为 hexo d -g

markdown语法

markdown语法，这里不做太多描述，有需要可以参考markdown 简明语法.我在这里记录一下我自己使用过程中经常用到的。

换行：
回车键或连续3个—表示分割线。
强调：
星号（*）与下划线（_）都可以，单是斜体，双是粗体，符号可跨行，符号可加空格。
有序列表：
数字 + . + 空格，数字不能省略但可无序，点号之后的空格不能少。

超链接：
文字：

1	[文字](url "可选的title")

图片：

1	![图片名称](图片路径) \#我是放在本地文件夹下的，所以路径是：/img/Share project on github.png

插入代码：
新起一行，按2次Tab键或者8次空格。插入代码也可以加入有序列表。
或者
{ % codeblock [title] [lang:language] [url] [link text] % } code snippet { % endcodeblock % }
防止github中的READ.me文件被渲染的方法：
在~\Hexo\source文件夹下建立READ.md文件。
在~\Hexo\ _config.yml文件中skip_render:后面加上README.md即skip_render: README.md。

一些转义符：
Markdown中的转义字符为\，转义的有：

\\ 反斜杠
\` 反引号
\* 星号
\_ 下划线
\{\} 大括号
\[\] 中括号
\(\) 小括号
\# 井号
\+ 加号
\- 减号
\. 英文句号
\! 感叹号

Hexo自定义页面做首页

如果你想了解：如何在 GitHub Pages 上传自己写的网页作为首页，Hexo 博客作为其子页？即自己写的页面作为http://user.github.io的页面，将hexo博客放在http://user.github.io/blog上，怎么做？那就接着看…
history_permalink: 2016/03/28/hexo-custom-page-for-home-page.html
history_date: 2016-03-28 18:00:00
history_updated: 2016-03-28 18:00:00

前言

本教程的前提已经用hexo将博客搭建在yourname.github.io的repository上，接下来跟随博主开始愉快的旅程吧。

说一下我走过的弯路吧，想想真是曲折蜿蜒。音乐music，走起！我看见一座座山，一座座。。。那就是青藏高原。。。好了，言归正传。
之前我的想法是通过子域名访问，即主域名(yoursite.com)和子域名(blog.yoursite.com)都解析到你的GitHub Pagesyourname.github.io。然后再自定义主页，比如index.html。我的博客页面是存放在yourname.github.io的repo中，自定义的主页放在一个叫做Home-Page的repo中。在yourname.github.io和Home-Page这两个仓库中分别在根目录放置了CNAME文件，文件的内容分别为blog.yoursite.com和yoursite.com。其实这样也是可以实现的，只是觉得太繁琐，索性就改成了现在的布局。

新建一个repository

名字可以随意，我的是blog
那么现在你有了一个空的repository然后本地clone下按照提示初始化一个master分支，并且开启github pages。
注意，这里的repo的目录下是不存在CNAME文件的

修改hexo配置文件`_config.yml`

找到url下的root 修改成/你起的名字/ (博主这里就是/blog/)url也要改！！！博主一开始没发现。。。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://yourname.github.io/blog
root: /blog/
permalink: :year/:month/:day/:title/
permalink_defaults:

然后再找到_config.yml下的deploy，把repository改成你新的repository的clone地址

deploy:
  type: git
  repository: https://github.com/yourname/blog.git (改这里)
  branch: master

重新部署你的博客

在对应的文件下在gitbash上输入hexo g再输入hexo d
这样你的博客就被部署到https://yourname.github.io/blog/上了

清空原来的repository

现在原来那个yourname.github.io的repository你就可以清空，然后留下一个index.html，把你自定义页面的代码复制到里面就好了，然后可以通过以下链接跳转到你的博客界面了。

1	<a href="blog/"></a>

改主题里URL的ROOT

# Subdirectory | 子目录
## If your site' url is 'http://yoursite.com/blog', set root_url as '/blog/'
## 网站若存放在子目录，请按上面格式填写
## https://hexo.io/docs/configuration.html#URL
root_url: /blog/

像本站用的XXX主题改了以后左边栏会出现问题，这时候需要到left-col.ejs改一下
我是这样解决的

<section class="switch-part switch-part1">
                   <nav class="header-menu">
                       <ul>
                       <% for (var i in theme.menu){ %>
                       <!-- 修改这里 -->
                           <li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
                       <%}%>
                       </ul>
                   </nav>
                   <nav class="header-nav">
                       <ul class="social">
                           <% for (var i in theme.subnav){ %>
                               <a class="fa <%= i %>" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"></a> 
                           <%}%>
                       </ul>
                   </nav>
               </section>

参考资料

这里附上一个不错的主页效果。
https://github.com/jacklightChen/jacklightChen.github.io
以下附上我觉得不错的参考资料。

如何将你的github仓库部署到github pages（repo里建gh-pages分支，上传hexo到blog的gh-pages里面）

hexo系列教程：（二）搭建hexo博客

hexo + github + 多说来搭建免费博客 // Netpi 日志（本地打不开解决方法）

使用HEXO搭建github个人网站（本地发布、部署失败解决方法）

如何搭建一个独立博客——简明Github Pages与Hexo教程（ssh key的设置）

hexo你的博客Hexo

3.1.1 静态博客搭建指南

Hexo博客添加打赏功能

当你的博客搭建好之后，你或许想要添加一些更有趣的功能，比如说打赏，虽然说现在是共享经济，但也有付费阅读的需求。况且读者是否打赏全凭个人心情决定…
permalink: 2016/01/08/hexo-blog-ad-reward-function.html
date: 2016-01-08 18:00:00
updated: 2016-01-08 18:00:00

前言

当你的博客搭建好之后，你或许想要添加一些更有趣的功能，比如说打赏，虽然说现在是共享经济，但也有付费阅读的需求。况且读者是否打赏全凭个人心情决定，倘若你的文章勾勒出一点他/她的共鸣和感慨，那恭喜你，你已经有拥戴者了。

打赏的基本思路是将微信和支付宝的收款二维码放到每篇文章的最后，打赏的时候扫下二维码就可以了。

以 yilia/Yelee主题为例：

step 1：编写打赏模块的代码

layout\_partial下新建donate.ejs输入如下内容：

<! -- 添加捐赠图标 -->
<div class ="post-donate">
    <div id="donate_board" class="donate_bar center">
        <a id="btn_donate" class="btn_donate" href="javascript:;" title="打赏"></a>
        <span class="donate_txt">
           ↑<br>
           <%=theme.donate_message%>
        </span>
        <br>
      </div>  
    <div id="donate_guide" class="donate_bar center hidden" >
        <!-- 方式一： 
            <img src="/img/Alipay.jpg" alt="支付宝打赏">
            <img src="/img/WeChatpay.jpg" alt="微信打赏">
        -->
        <!-- 方式二；
            step1：在_config.yml中添加配置
                Alipay: /img/Alipay.jpg
                WeChatpay: /img/WeChatpay.jpg
            step2：此处两张图片的路径分别设置为如下
                <img src="<%- theme.root_url %><%=theme.Alipay%>"
                <img src="<%- theme.root_url %><%=theme.WeChatpay%>"
        -->
        <!-- 支付宝打赏图案 -->
        <img src="<%- theme.root_url %>/img/Alipay.jpg" alt="支付宝打赏">
        <!-- 微信打赏图案 -->
        <img src="<%- theme.root_url %>/img/WeChatpay.jpg" alt="微信打赏">
    </div>
    <script type="text/javascript">
        document.getElementById('btn_donate').onclick = function(){
            $('#donate_board').addClass('hidden');
            $('#donate_guide').removeClass('hidden');
        }
    </script>
</div>
<! -- 添加捐赠图标 -->

step 2：设置打赏模块的样式

source\css\_partial下新建donate.styl输入如下内容：

.donate_bar {
	text-align: center;
	margin-top: 5%
}

.donate_bar a.btn_donate {
	display: inline-block;
	width: 82px;
	height: 82px;
	margin-left: auto;
	margin-right: auto;
	background: url(http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif)no-repeat;
	<!-- 因为本 hexo 生成的博客所用的 theme 的 a:hover 带动画效果，为了在让打赏按钮显示效果正常 而 添加了以下几行 css，嵌入其它博客时不一定要它们。本段注释请在添加时删除-->
	-webkit-transition: background 0s;
	-moz-transition: background 0s;
	-o-transition: background 0s;
	-ms-transition: background 0s;
	transition: background 0s
}

.donate_bar a.btn_donate:hover {
	background-position: 0 -82px
}

.donate_bar .donate_txt {
	display: block;
	color: #9d9d9d;
	font: 14px/2 "Microsoft Yahei"
}
.donate_bar.hidden{
	display: none
}

.post-donate{
	margin-top: 80px;
}

#donate_guide{
	height: 210px;
	width: 420px;
	margin: 0 auto;
}

#donate_guide img{
	height: 200px;
	height: 200px;
}

最后，记得在source\css\style.styl中添加@import '_partial/donate'

step 3：讲打赏模块整合到文章中

在layout\_partial\article.ejs中的<article> </article>标签内添加如下内容：

1
2
3

<% if (!index && theme.donate){ %>
	<%- partial('donate') %>
<% } %>

如果你只想在所有post的文章页面添加打赏功能，可以参照以下：

<!-- 添加打赏功能 只在文章详情中显示-->
<% if (page.prev || page.next){ %>
<% if (!index && theme.donate){ %>
<%- partial('donate') %>
<% } %>
<% }%>

如果你想在指定页面添加打赏功能，需在你的主题文件夹下的layout\_partial\article.ejs路径中，更改article.ejs中的内容。例如：只有页面的属性中添加了donate: true属性后，才显示打赏，则需在你的文章的头部添加上donate: true字段，article.ejs中需改为如下所示：

<!-- 添加打赏功能 -->
<% if (page.donate){ %>
<% if (!index && theme.donate){ %>
<%- partial('donate') %>
<% } %>
<% }%>

step 4：编写配置文件

我们可以在主题的_config.yml文件中关闭和打开打赏功能，还可以自定义设置打赏文案。例如：

#是否开启打赏功能
donate: true
#打赏文案
donate_message: 欣赏此文？求鼓励，求支持！

大功告成，这样一个简单的打赏功能就实现了！
当然，你如果觉得麻烦，但是又想实现打赏功能，那么可以尝试下*云打赏*，据说一行代码集成打赏功能。

使用iframe嵌入打赏

如果想要更加方便快捷的添加打赏功能，可以使用ifram的方式直接嵌入到你的文章中。
示例如下：

<iframe src="https://yojoy.top/donate-page/sample1/index.html" style="overflow-x:hidden;overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;"  frameborder="0" scrolling="no" allowtransparency="true"></iframe>

查看效果：

Hexo百度主动提交链接

某些主机，比如Github，禁止百度爬虫访问博客，导致博客无法被百度收录。多亏百度提供了主动提交的接口，这才有了个补救的方法。除此之外…
history_permalink: 2016/01/05/hexo-baidu-actively-submit-links.html
history_date: 2016-01-05 12:00:00
history_updated: 2016-01-05 12:00:00

先学习百度站长平台页面抓取栏的推送说明

以下两种方式都可以推送，可以使用其中一种，也可以两种都使用

自动推送

一般在目录blog\themes\hiker\layout\_partial\head.ejs中加入JS，这样全站都有了：

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

主动推送

感谢作者：https://github.com/huiwang/hexo-baidu-url-submit

作用：某些主机，比如Github，禁止百度爬虫访问博客，导致博客无法被百度收录。多亏百度提供了主动提交的接口，这才有了个补救的方法。除此之外，使用主动推送还会达到如下功效：

及时发现：可以缩短百度爬虫发现您站点新链接的时间，使新发布的页面可以在第一时间被百度收录
保护原创：对于网站的最新原创内容，使用主动推送功能可以快速通知到百度，使内容可以在转发之前被百度发现

效果图如下：

效果图

安装hexo-baidu-url-submit插件

首先，在Hexo根目录下，安装本插件：

1	npm install hexo-baidu-url-submit --save

请注意，本插件的配置文件中包含秘钥，请把您的Hexo博客源文件托管到私有仓库里。

配置_config.yml文件

同样在根目录下，把以下内容配置到_config.yml文件中:

baidu_url_submit:
  count: 3 ## 比如3，代表提交最新的三个链接
  host: yojoy.top ## 在百度站长平台中注册的域名
  token: your_token ## 请注意这是您的秘钥， 请不要发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

检查url

其次，记得查看_config.yml文件中url的值，必须包含是百度站长平台注册的域名（一般有www），比如:

# URL
url: http://yojoy.top
root: /
permalink: :year/:month/:day/:title/

最后，加入新的deployer:

deploy:
- type: git
  repo:
    coding: https://用户名:密码@git.coding.net/Yajon/blog.git,master
- type: baidu_url_submitter

执行hexo deploy的时候，新的链接就会被推送了。

实现原理

推送功能的实现，分为两部分：

新链接的产生，hexo generate会产生一个文本文件，里面包含最新的链接
新链接的提交，hexo deploy会从上述文件中读取链接，提交至百度搜索引擎。
链接参考：
http://yojoy.top/