0%

deepin环境下hexo+coding博客搭建

发表于 更新于 分类于 阅读次数： Valine：

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

搭建博客部分

参考了一位大佬的博客。搭建了一下环境
https://yangbingdong.com/2017/build-blog-hexo-base/

在把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开始看即可。其实这个链接在官方的“开始使用”文档中已经给出。

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

–2019.1.20更新(nextV6.7.0)
本博客下面的运行时间的，就是使用的一个 js 处理，处理一下 themes/next/layout/_partials/footer.swig
修改前建议备份源文件，友链的一个大佬给我的网址.

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
87
88
<div class="copyright">{#
#}{% set current = date(Date.now(), "YYYY") %}{#
#}{% if theme.footer.beian.enable %}{#
#}  {{ next_url('http://www.miitbeian.gov.cn', theme.footer.beian.icp + ' ') }}{#
#}{% endif %}{#
#}&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 || 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);
//加入年的计算
yearsold=Math.floor(e_daysold/365);
daysold=Math.floor(e_daysold%365);
span_dt_dt.innerHTML="博客已萌萌哒运行"+yearsold+"年"+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.footer.powered.enable %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'})) }}{#
  #}{% 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') }} – {{ next_url('https://theme-next.org', 'NexT.' + theme.scheme, {class: 'theme-link'}) }}{#
  #}{% 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的剪影插件还是挺方便的。

听说好看的人都关注了我的公众号《泫言》