Fork me on GitHub

搭建博客时候问题小记

摘要:汇总搭建博客遇见的几个问题(持续更新。。。)

nothing added to commit but untracked files present

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ git commit -m "first commit"
On branch master
Untracked files:
.gitignore
_config.yml
git
git.pub
package-lock.json
package.json
scaffolds/
source/
themes/

nothing added to commit but untracked files present

这个错误原因有两个:

  1. 已经存在的项目?
  2. 没有把需要提交的文件加载进来,所以需要用
    1
    git add (文件名)

fatal: remote origin already exists.

1
fatal: remote origin already exists.

用到的解决办法:

  1. 删除远程仓库,再添加远程仓库

    1
    2
    3
    $git remote rm origin

    $git remote add origin [email protected]:wufans/wufans.github.io.git
  2. 修改git的config文件的内容。

    1
    $vi .git/config

删除[remote “origin”]


github rejected

1
2
3
4
5
6
To github.com:wufans/wufans.github.io.git
! [rejected] master -> master (non-fast-forward)
'[email protected]:wufans/wufans.github.io.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.

这个方法就是因为本地仓库和github上面仓库的内容有冲突导致的
我用的解决办法是删除了原来的repository,重新建立了一个仓库,问题解决。


创建流量统计功能的方法

参考博客


附加功能的添加

参考博客


解决公式显示不正常的问题

参考博客


hexo设置侧边栏头像

编辑站点的 _config.yml,新增字段 avatar, 值设置成头像的链接地址。

其中,头像的链接地址可以是:

完整的互联网 URL,例如:https://avatars1.githubusercontent.com/u/32269?v=3&s=460

站点内的地址,例如:

/uploads/avatar.jpg 需要将你的头像图片放置在 站点的 source/uploads/(可能需要新建uploads目录)
/images/avatar.jpg 需要将你的头像图片放置在 主题的 source/images/ 目录下。


hexo部署失败,不能连接github的解决

一直在解决这个问题,修改了本地文件的几个配置之后,突然发现生成的博客不能直接push到github上了,显示错误
此处输入图片的描述
但是用

1
2
hexo generate
hexo server

部署到本地的时候是没有问题的。
然后用

1
ssh -T [email protected]

测试连接也出现了

1
ssh_exchange_identification: read:Connection reset by peer


1
Connection reset by 192.30.253.112 port 22

这样的错误
尝试了以下解决办法:

  1. 因为前几次修改了hosts文件解决github不能加载CSS的问题,让电脑解析github的域名时用的是自定义的IP,所以可能有这个原因,因此在hosts里面注释掉了修改的部分,然后刷新DNS缓存
    1
    2
    3
    ipconfig /flushdns
    #这里还遇到了ipconfig和ping不是一个命令的错误,需要配置环境变量path
    #%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem

最后发现没用。

  1. 删除了github上面的ssh配置,重新配置了github服务器端与本地的ssh秘钥,然后再使用
    1
    ssh -T [email protected]

结果能连上了,但是再用

1
hexo deploy

之后,又报了刚才的错误,而且再测试与github上面的连接居然也出错了~

  1. 俗话说,重启治百病,于是重启了一下————是的,没用
  2. 用网上的解决办法,可能是网络防火墙设置的原因,用手机给电脑开热点再测试连接,结果也没用
    最后打算第二天重新部署博客了,然后奇迹发生了,起床之后再测试链接,work~

Github不能访问、不能正常加载CSS的解决

修改了windows的hosts文件之后,经常会出现github访问异常,页面的CSS样式无法加载等的情况。
解决办法
给hosts文件增加github的CDN fastly.net,跳过域名解析,直接通过IP访问github。
在hosts文件下增加一行:

1
185.31.17.184 github.global.ssl.fastly.net

问题

使用

1
hexo deploy

部署博客时,出现下列错误:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
fatal: TaskCanceledException encountered.
▒▒ȡ▒▒һ▒▒▒▒▒▒
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': No error
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: fatal: TaskCanceledException encountered.
��ȡ��һ������
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': No error

at ChildProcess.<anonymous> (D:\blog\GIT\hexo\node_modules\hexo-util\lib\spawn.js:37:17)
at emitTwo (events.js:125:13)
at ChildProcess.emit (events.js:213:7)
at ChildProcess.cp.emit (D:\blog\GIT\hexo\node_modules\cross-spawn\lib\enoent.js:40:29)
at maybeClose (internal/child_process.js:927:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

解决

如果开启了本地预览,先关闭
然后用

1
hexo clean

清空缓存,再重新生成静态文件并部署,问题解决~

另外
用了上面的方法之后还出现了这个问题的话,重启一下电脑~~

添加版权声明

添加版权声明

在Github上,Next主题的issues上有设置 Creative Commons 协议,这个就是设置版权声明,但是配置了以后图标比较小,没有文字说明(就是没逼格),而且还会出现在它不该出现的地方。

新建 passage-end-tag.swig 文件

在路径\themes\next\layout_macro中添加passage-end-tag.swig文件,其内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ccc;font-size:14px;">
------ 本文结束 ------</div>
<br/>
<div style="border: 1px solid black">
<div style="margin-left:10px">
<span style="font-weight:blod">版权声明</span>
<img src="http://creativecommons.org/images/deed/logo_deed.gif"><a href="http://wufan.site/" style="color:#258FC6">Fan Wu's Blog</a> by <a href="http://wufan.site/" style="color:#258FC6">Fan Wu</a> is licensed under a <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" style="color:#258FC6">Creative Commons BY-NC-ND 4.0 International License</a>.<br/>
由<a href="http://wufan.site/" style="color:#258FC6">Fan Wu</a>创作并维护的<a href="http://wufan.site/" style="color:#258FC6">Fan Wu's Blog</a>博客采用<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" style="color:#258FC6">创作共用保留署名-非商业-禁止演绎4.0国际许可证</a>。<br/>
本文首发于<a href="http://wufan.site/" style="color:#258FC6">Fan Wu's Blog</a> 博客( <a href="http://wufan.site/" style="color:#258FC6">http://wufan.site/</a> ),版权所有,侵权必究。</p>
</div>
</div>
{% endif %}

如果觉得上面的样式不好看,也可以引用下面的内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if theme.passage_end_tag.enabled %}
<div style="text-align:center;color: #ccc;font-size:14px;">
-------------本文结束<i class="fa fa-heart"></i>感谢阅读-------------</div>
<ul class="post-copyright">
<li class="post-copyright-author">
<strong>本文作者:</strong>{{ theme.author }}
</li>
<li class="post-copyright-link">
<strong>本文链接:</strong>
<a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.path }}</a>
</li>
<li class="post-copyright-license">
<strong>许可协议:</strong>
除特殊声明外,本站博文均采用 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0 CN</a> 许可协议,转载请注明出处!
</li>
</ul>
{% endif %}

修改 post.swig 文件

在\themes\next\layout_macro\post.swig中,post-body之后,post-footer之前添加如下代码:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

在主题配置文件中添加字段

在主题配置文件”_config.yml”中添加以下字段开启此功能:

1
2
3
#文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

完成以上设置之后,在每篇文章之后都会添加“版权声明”标记。

添加动画效果

背景动画基于canvas,添加到博客上也比较简单,在\themes\next\layout_layout.swig的上面添加

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

在\themes\next_config.yml中添加以下字段开启此功能:

1
2
3
4
# background settings
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

添加完了,发现博客背景是白色,会遮住动画,只留下两边一点点的位置看到动画效果,这时候可以去设置一下背景颜色,在\themes\next\source\css_schemes\Pisces_layout.styl中,把.content-wrap中的background修改为none。

这时候如果用手机打开,也能看到动画效果,但是带来的体验不好,显得页面比较乱,这是可以把.content-wrap的+mobile()中的background修改为white,这样手机端的体验就好很多,却又不影响电脑端的炫酷动画。

解决博客浏览统计功能突然失效的方法(hexo-theme-next-busuanzi_count)

说明

我这里是使用的hexo-theme-next主题,主题版本为:3.8.0(更新于10-31日)

原因分析

由于定位到是不蒜子统计功能突然有问题了,所以前往不蒜子官网进行查看,发现官网有一段很重要的提示:
“因七牛强制过期『dn-lbstatics.qbox.me』域名,与客服沟通无果,只能更换域名到『busuanzi.ibruce.info』!”
所以定位到问题,原来是不蒜子使用的七牛的域名被强制过期。
需要把 dn-lbstatics.qbox.me 域名更换为 busuanzi.ibruce.info

解决方案

hexo-theme-next主题中使用了dn-lbstatics.qbox.me域名的文件位置为:

1
themes\next\layout\_third-party\analytics\busuanzi-counter.swig

修改busuanzi-counter.swig

找到如下代码:

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

修改为:

1
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

重新预览,即可看到不蒜子统计功能已经生效
原文

恢复你的博客,只需要三步

如果你重装了系统或者更换了新电脑/新平台,怎么才能快速恢复原来的博客呢?
如果你保留了原来博客文件夹下所有文件,那么恢复博客只需要三步:

安装必备组件

包括:安装Git,安装Node.js

Github配对

打开git bash,在用户主目录下运行:

1
ssh-keygen -t rsa -C "[email protected]"

把其中的邮件地址换成自己的邮件地址,然后一路回车,在用户主目录下生成.ssh目录,里面有id_rsa和id_rsa.pub两个文件,这两个就是SSH key密钥对,id_rsa是私钥
登陆GitHub,打开「Settings」->「SSH and GPG keys」,然后点击「new SSH key」,填上任意Title,在Key文本框里粘贴公钥id_rsa.pub文件的内容),最后点击「Add SSH Key」
测试是否配对成功:

1
ssh -T [email protected]

安装hexo

打开git bash客户端,输入

1
npm install hexo-cli -g

,开始安装hexo
安装成功后,进入你原来的博客目录,就可以用hexo命令进行博客生成和部署啦~

给博客自定义域名开启Https

HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer 或 Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。
GitHub官方在5月1号宣布,GitHub Pages的自定义域名获得对HTTPS的支持。但是因为自己的域名是自定义的,购于阿里云,因此不能直接在Setting中设置Enforce HTTPS:
此处输入图片的描述
而Github pages不支持SSL证书上传,因此,开启HTTPS需要借助CloudFlare的CDN代理。即用户到CDN服务器的连接为https,而CDN服务器到GithubPage服务器的连接为http,就是在CDN服务器那里加上反向代理。
步骤如下:

  1. 首先注册并登陆CloudFlare,在域名购买的地方修改name sever,修改DNS解析地址。(启用动态DNS加速)
    此处输入图片的描述
  2. 与域名绑定并激活成功后,设置CloudFlare 的 DNS:
    此处输入图片的描述
  3. 设置CloudFlare 的 Crypto:
    此处输入图片的描述
  4. 设置路由规则Page Rules:
    此处输入图片的描述
    至此,等待一段时间,就可以用https协议访问你的自定义域名
    为了让博客完全开启Https,还需要修改文章内容中用http协议的链接,比如图片,这样,就能看到浏览器域名旁边的小绿锁啦!
    此处输入图片的描述
    同时,修改了DNS解析服务器后,网站响应速度也更快了!一举两得!

-------------本文结束感谢阅读-------------