deepin环境下hexo+coding博客搭建

环境:deepin15.4桌面版操作系统
这两天搭建了这个博客,网上的例子也挺多的教程很详细。在这里记录一下基本过程。


搭建博客部分

参考了一位大佬的博客。搭建了一下环境

http://ookamiantd.top/2017/build-blog-hexo-base/index.html

在把node安装目录下的node和npm移动到/usr/bin后那个npm一直不对,找不到命令,后来使用ls -l发现原来是软连接的问题解决方法,在/usr/bin目录下

1
2
3
$ cd /usr/bin
$ sudo ln -s /usr/local/node-v6.10.2-linux-x64/lib/node_modules/npm/bin/npm-cli.js
$ sudo mv npm-cli.js npm

然后使用npm -v就正常了


解决Hexo命令fs.SyncWriteStream问题

2017.12.3重装了一下系统,之后node升级到了8.0以后出现了一个问题
(node:538) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.

操作但是未解决方法如下:

1
2
3
4
$ npm install hexo-fs --save
$ npm install hexo-deployer-git@0.3.1 --save
$ npm install hexo-renderer-ejs@0.3.1 --save
$ npm install hexo-server@0.2.2 --save

解决的详细可以看上面那个搭建教程的博客,已经更新。我进行修复参考了一下这个操作–>链接

按照这个链接升级,还是有这个问题,在使用hexo clean --debug的打印信息却并没有出现这个问题。然后我估计是hexo版本有点低,于是还是升级了一下hexo发现正常了,这里不知道上面的操作有没有连带影响,只做记录。
$ sudo npm install -save hexo

不过更新完之后感觉有点变慢了,32篇博客需要7s的时间使用hexo g来进行渲染生成。


主题修改部分

把原本自带的主题换成了next

next主题官网“开始使用”文档
http://theme-next.iissnan.com/getting-started.html
next主题官网“主题配置”文档
http://theme-next.iissnan.com/theme-settings.html


加入统计浏览人数

然后加入了统计浏览人数的功能使用的是learncloud这个平台。
使用learncloud统计人数直接从第三部分配置learncloud开始看即可。其实这个链接在官方的“开始使用”文档中已经给出。


加入博客运行时间&&不蒜子总访客

–2018.11.24更新(nextV6.4.2)
本博客下面的运行时间的,就是使用的一个js的插件,处理一下next/layout/_partials/footer.swig,加入一个js的插件即可。
修改前建议备份源文件,友链的一个大佬给我的网址.

https://github.com/haiwx/vno-plus/blob/master/partials/footer.hbs

把其中的内容粘贴进去即可,这里放一下我的文件代码,加入了一行运行时间和不蒜子总访客,可以直接使用,修改一下日期即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<div class="copyright">{#
#}{% set current = date(Date.now(), "YYYY") %}{#
#}&copy; {% if theme.footer.since and theme.footer.since != current %}{{ theme.footer.since }} – {% endif %}{#
#}<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love" id="animate">
<i class="fa fa-{{ theme.footer.icon.name }}"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright | default(author) }}</span>

<div><span id="span_dt_dt"> </span>
<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("4/24/2017 00:00:00");//这个日期是可以修改的
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());//其实仅仅改了这里
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML="博客已萌萌哒运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒 🐼 ";
}
show_date_time();
</script></div>

{% if config.symbols_count_time.total_symbols %}
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-area-chart"></i>
</span>
{% if theme.symbols_count_time.item_text_total %}
<span class="post-meta-item-text">{{ __('symbols_count_time.count_total') + __('symbol.colon') }}</span>
{% endif %}
<span title="{{ __('symbols_count_time.count_total') }}">{#
#}{{ symbolsCountTotal(site) }}{#
#}</span>
{% endif %}

{% if config.symbols_count_time.total_time %}
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-coffee"></i>
</span>
{% if theme.symbols_count_time.item_text_total %}
<span class="post-meta-item-text">{{ __('symbols_count_time.time_total')}} &asymp;</span>
{% endif %}
<span title="{{ __('symbols_count_time.time_total') }}">{#
#}{{ symbolsTimeTotal(site, theme.symbols_count_time.awl, theme.symbols_count_time.wpm, __('symbols_count_time.time_minutes')) }}{#
#}</span>
{% endif %}
</div>

{% if theme.seo %}
{% set nofollow = ' rel="external nofollow"' %}
{% endif %}

{% if theme.footer.powered.enable %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank"' + nofollow + ' href="https://hexo.io">Hexo</a>') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.powered.enable and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} – {#
#}<a class="theme-link" target="_blank"{{ nofollow }} href="https://theme-next.org">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.custom_text %}
<div class="footer-custom">{#
#}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}

注:不蒜子的部分看的这个–>文档
突然我意识到github和coding两个地方的不蒜子统计访客是不能同步的。


加入博客文章分享和评论

分享功能

—————2018.11.25——————-
之前使用的是jiathis,由于他们的服务关闭了,一直也没有找到比较好用的分享服务

评论功能

之前因为听说多说要关了.也没有什么比较好用的适合静态博客的评论系统.一直等到今天.
有个大佬使用learnCould进行储存.写了一个名叫valine博客的插件,具体教程的地址可以戳这里哦–>valine评论-教程

具体做法如下了(基于next主题的Pisces风格):
>需要使用的文件,随便搞个迅雷或者啥下载这个就行了,等下要用的Valine.min.js

### 配置_config.yml
主题目录下的/themes/next/_config.yml中添加:

1
2
3
4
valine:
enable: true
appId: Your_AppId
appKey: Your_AppKey

### 修改comments.swig
打开/themes/next/layout/_partials/comments.swig,(可以将其备份)整个文件修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if page.comments %}
<div class="comments" id="comments">
{% if (theme.valine and theme.valine.enable)%}
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='/lib/Valine.min.js'></script>
<script>
new Valine({
av: AV,
app_id: '{{ theme.valine.appId }}',
app_key: '{{ theme.valine.appKey }}',
el: '.comments'
});
</script>
{% endif %}
</div>
{% endif %}

>注:我引入的Valine路径为:/lib/Valine.min.js,是已将文件Valine.min.js放到了目录/themes/next/source/lib/下。

然后hexo g,hexo s之后应该就能看到评论的界面了.具体图片可以参照本博客的评论。
//———————–2018.3.8——————–
现在这个评论的包已经引入到了npm的仓库,先放一个Valine官网,在官网中的快速开始中有操作方法。
Valine 现已发布到npm,可以直接用命令安装:

1
npm install valine --save

然后在hexo的主题配置文件(themes/next/_config.yml)中更改Valine的配置

1
2
3
4
5
6
7
8
9
10
new Valine({
el: '#comment' ,
notify:false,
verify:false,
appId: '这里填上面获得的appid',
appKey: '这里填上面获得的appkey',
placeholder: 'just go go',
path:window.location.pathname,
avatar:'mm'
});

然后就开启了,如果是旧版本的Hexo,则需要自己添加comments.swig中的内容,具体参照官网上的配置方法。


大概在很久以前使用了WordPress玩了一下个人博客但是感觉这个用不长久。
使用的腾讯云的学生服务器的优惠,但是等到以后毕业之后也不知道会如何,然后就不了了之。
这几天决定还是使用hexo+(github||coding)的方式来进行吧。
希望这个博客能够激励并提醒自己进步。

印象笔记这东西挺好用的。本来用的OneNote,但是microsoft也不会给Linux做软件,网页版还是感觉好慢。印象笔记网页版+chrome的剪影插件还是挺方便的。

如果对您有帮助,请我喝杯咖啡?