技术学习Hexo

Hexo静态博客搭建（1）初步搭建

文章目录
  1. 1. 准备工作
  2. 2. 小提示
  3. 3. 详细过程
    1. 3.1. 一 安装Hexo
    2. 3.2. 二 添加SSH-Key
    3. 3.3. 三 初始化Hexo
    4. 3.4. 四 生成静态界面
    5. 3.5. 五 本地启动
    6. 3.6. 六 主题更换
    7. 3.7. 七 加入多说评论
    8. 3.8. 八 加入文章导航
  4. 4. 搭建心得

      经过这段时间零零星星的折腾，个人的第一个博客算是已经有一个雏形了，在此感谢Moon学长在校时的指导，让我少折腾了很多的弯路，不过我知道目前的版本还有很多需要优化的地方，我会继续的优化，同时也会不定期的更新自己的技术学习文章或者一些生活的杂记，如果有什么好的建议或者不足，欢迎在每篇博客下面评论回复哦~(～￣▽￣)～*
后面我会继续学习Android和Web相关的知识，新注册的Github,欢迎交流~（ps：原来的git账号种种原因放弃使用~）


下面整个博客的搭建流程：

准备工作

-Git
-Node.js
-Github账户

小提示

      按照提示正确安装上述软件即可~如果不懂可以直接一直下一步傻瓜式安装
      个人安装环境为Windows 8.1，如果是Mac请移步Google或Baidu
      ps：过程前几步操作可自由排序，并不影响最后效果

详细过程

一 安装Hexo

Node 和 Git 都安装好后，可执行如下命令安装hexo： 

npm install -g hexo

如果您安装的是3.0版本，则使用以下命令： 

npm install -g hexo-cli

二 添加SSH-Key

GitHub账号和GitHub Pages一般都有，已有的请自动略过这一部分。（后续补充）

三 初始化Hexo

初始化Hexo到指定路径： 

hexo init <folder>

也可以到相应的路径下： 

hexo init

四 生成静态界面

hexo generate

      命令必须在init目录下执行，否则不成功，但是也不报错。
当你修改文章Tag或内容，不能正确重新生成内容，可以删除hexo\db.json 后重试，还不行就到 public 目录删除对应的文件，重新生成。

五 本地启动

      执行如下命令，启动本地服务，进行文章预览调试： 

hexo server

      执行之后可以在浏览器输入localhost:4000进行预览调试
      ps：建议使用高版本浏览器，否则可能……

六 主题更换

      Hexo提供了很多的博客主题供大家更换，详情可以登录Hexo官网点击Themes选项，或者网友提供的主题
1、主题安装（一行git命令）： 

git clone https://github.com/#主题地址

2、安装完成后，打开 hexo_config.yml ，修改主题为： 

theme: #选择的主题名

3、hexo\themes\modernist 目录，编辑主题配置文件 _config.yml：
      根据相应的主题介绍可以自行修改，每个主题的某些代码会有出入。

4、更新主题 

cd themes/#主题根目录
git pull

七 加入多说评论

      Hexo默认使用的评论插件是Disqus，为了方便广大国内用户使用多说来替换Disqus，特推出此教程。使用步骤如下：

      在_config.yml中添加多说的配置：

duoshuo_shortname: 你站点的short_name

      修改themes\landscape\layout_partial\article.ejs模板
把

1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
 <section id="comments">
   <div id="disqus_thread">
     <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
   </div>
 </section>
 <% } %>

修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (!index && post.comments && config.duoshuo_shortname){ %>
  <section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
      (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
    <!-- 多说公共JS代码 end -->
  </section>
  <% } %>

八 加入文章导航

在article.ejs文件中加入：

<%- partial('post/nav') %>

在主题\themes\主题名\layout_partial\post目录下加入nav.ejs文件（如果有自行忽略）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<% if (post.prev || post.next){ %>
<nav id="article-nav">
  <% if (post.prev){ %>
    <a href="<%- url_for(post.prev.path) %>" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption"><%= __('sidebar.newer') %></strong>
      <p class="article-nav-title">
        <% if (post.prev.title){ %>
          <%= post.prev.title %>
        <% } else { %>
          (no title)
        <% } %>
      </p>
      <i class="icon" id="icon-chevron-right"></i>
    </a>
  <% } %>
  <% if (post.next){ %>
    <a href="<%- url_for(post.next.path) %>" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption"><%= __('sidebar.older') %></strong>
      <p class="article-nav-title"><%= post.next.title %></p>
      <i class="icon" id="icon-chevron-left"></i>
    </a>
  <% } %>
</nav>
<% } %>

搭建心得

      作为一个临近期末的大学生，理应把自己投入紧张的复习和预习工作中，但是作为一个不安分的代码少年，想尝试一下Hexo的效果，也为自己后续的学习做一点总结吧~搭建过程整体还算顺利，但是也有一些小的细节，比如在添加SSH的时候可以用GITHUB的官方客户端登录一下就自动生成、用Everthing可以快速定位文件位置，在hexo的3.0版本之后
type: git
同时在yml文件中，代码：之后一定要有空格，最初的时候遇到好几次这个问题的报错~

      不过在这个过程中还是收获了很多东西，因为之前一直做Android方向的东西，对网页都只是停留在很基础的一个层面，这次的搭建也让我了解了一些WEB方面的东西，同时为自己准备了一个存储和学习总结的平台，总体感觉还是不错~
后续的优化技巧会不定期更新~
（初稿于6月底，改于7月中）