hexo 搭建个人博客

hexo 搭建个人博客

tags ： git

什么是Hexo ?

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku上，是搭建博客的首选框架。

准备工作

相关资料

Github 官网
Github Pages
Hexo 官网
Node.js 官网
Git 官网

相关教程

使用 GitHub 和 Hexo 搭建免费静态 Blog
简书 搭建个人博客
知乎
主题配置

常用命令

依照上面的连接把准备工作做完了之后来使用下面命令开始博客之旅。

npm install hexo -g #安装Hexo
npm update hexo -g #升级 
hexo init #初始化博客
命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
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 #清除缓存，若是网页正常情况下可以忽略这条命令

Markdown 格式

---

添加标签

title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories:

• web前端
  tags:
• jQuery
• 表格
• 表单验证
  设置以后点击对应的标签均可连接到当前文章内。

添加文章分类

title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories:

• web前端
  如果在 web前端下方添加-xx 不会产生两个分类，会产生层级的分类，嵌套在上一级分类下。

个性化定制

添加网易云音乐
打开网页版的网易云音乐，选择喜欢的音乐，点击生成外链播放器 复制外链的代码
修改 blog\themes\next\layout_macro的sidebar.swig文件，添加刚刚复制的外链代码

设置背景
把你挑选的背景图片命名为：background.jpg，放在blog\themes\next\source\images里，在blog\themes\next\source\css_custom文件的custom.styl首部添加：

body {
  background:url(/images/background.jpg);
  background-attachment: fixed;
}

background-attachment: fixed;是固定背景图片。

###踩过的坑
域名失效问题
每次在执行命令hexo g -d （先生成文件再部署）时，都会使设置好的域名失效。
因此需要在生成静态资源的目录（blog/public）底下新建CNAME文件（无后缀名）在其中配置上域名即可。

添加评论，页面不显示
关于评论，我选择的是来必力思密达的插件，在配置时Next主题文档提示只需要在主题配置gentie_productKey 配置上来必力的id即可。
但是在实际操作时发现页面并没有显示评论窗口，在查看配置文件时（next\layout_partials\comments.swig）发现，加载思密达的插件逻辑是如果没有多说，多言或等等等且gentie_productKey不为空则加载插件，考虑到可能中间可能有哪个评论的配置没有注释掉而没有加载，这里直接偷懒把判断加载思密达插件的逻辑放到了判断的前面，hexo clean、hexo g -d 至此评论区显示成功。
配置文件如下：

{% if page.comments %}

  {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
    <div class="comments" id="comments">
      <div class="ds-thread" data-thread-key="{{ page.path }}"
           data-title="{{ page.title }}" data-url="{{ page.permalink }}">
      </div>
    </div>
	
  {% elseif theme.livere_uid %}
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
    </div>


  {% elseif theme.facebook_sdk.enable and theme.facebook_comments_plugin.enable %}
    <div class="comments" id="comments">
      <div class="fb-comments"
           data-href="{{ page.permalink }}"
           data-numposts="{{ theme.facebook_comments_plugin.num_of_posts }}"
           data-width="{{ theme.facebook_comments_plugin.width }}"
           data-colorscheme="{{ theme.facebook_comments_plugin.scheme }}">
      </div>
    </div>

  {% elseif theme.vkontakte_api.enable and theme.vkontakte_api.comments %}
    <div class="comments" id="comments">
      <div id="vk_comments"></div>
    </div>

  {% elseif theme.disqus.enable %}
    <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div>
    </div>

  {% elseif theme.hypercomments_id %}
    <div class="comments" id="comments">
      <div id="hypercomments_widget"></div>
    </div>

  {% elseif theme.youyan_uid %}
    <div class="comments" id="comments">
      <div id="uyan_frame"></div>
    </div>
	
  {% elseif theme.changyan.appid and theme.changyan.appkey %}
    <div class="comments" id="comments">
      <div id="SOHUCS"></div>
    </div>

  {% elseif theme.gitment.enable %}
    <div class="comments" id="comments">
      {% if theme.gitment.lazy %}
        <div onclick="showGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
        <div id="gitment-container" style="display:none"></div>
      {% else %}
        <div id="gitment-container"></div>
      {% endif %}
    </div>

  {% elseif theme.valine.appid and theme.valine.appkey %}
    <div class="comments" id="comments">
    </div>
  {% endif %}

{% endif %}