搭建hexo + github pages + next主题

搭建hexo + github pages + next主题

在用hexo+github pages博客之前,先说一说原理,了解原理后再去搭建博客时,遇到了问题也会有解决思路

当你执行hexo new [defaut] article这里的[default]可以在站点的_config.ymldefault_layout去设置,我这里默认配置是post,所以当我执行

hexo new article

其实就是相当于执行

hexo new post article

就会去在scaffolds的目录下去寻找文件名为"post"的文件,并以它为模板创建一个名为"article.md"文件到source/_posts/目录下

当你执行

hexo new page tags

hexo就会去scaffolds的目录去寻找文件名为page的文件,并会在source目录下创建一个tags的子文件夹,其中有个index.md文件

当你执行

hexo generate

hexo就会把source文件夹下的内容然后结合Theme主题把你写的markdown文章转化为静态的HTML文件,放入到public文件夹中

当你执行

hexo deploy

hexo就会自动把public文件夹中的内容拷贝到.deploy_git中,然后调用git命令把.deploy_git文件夹上传到你建立的github仓库中,这样你就可以在浏览器输入http://# "你的github账号.github.io"就可以访问到了

下面开始说我搭建过程中遇到的问题

  • 第一个傻逼错误是,我执行hexo init命令后,竟然把整个初始化生成的文件夹通过git命令上传到了github上面,现在想真2B
  • 调用hexo g命令失败,后来发现是没有安装hexo插件,解决办法是在hexo初始化项目目录执行下面命令

    npm install hexo-deployer-git --save
    
  • 添加云标签的时候,每次在主页点击标签按钮时,都是显示0.0.0.0/#,我在主题的_config.yml文件下面配置了tags: /tags为什么就是没有标签云呢,结果是我没有执行

    hexo new page tags
    
  • 添加Rss订阅,当你执行hexo g -d会生成一个atom.xml文件到你github跟目录,这个就是你也文章列表文件,提供给被人订阅

    //执行如下命令
    npm install hexo-generator-sitemap
    npm install hexo-generator-feed
    
    #在站点_config.yml添加
    Plugins:
    - hexo-generator-feed
    - hexo-generator-sitemap
    
    #Feed Atom
    feed:
      type: atom
      path: atom.xml
      limit: 20
    
  • 添加swift站内搜索插件,我已经在swift网站申请账号,并添加了一个搜索引擎,并已经在站点配置文件设置了swiftype_key: xxxxxxxxxxx但点击搜索按钮就是不能调用搜索框,解决方法是

    hexo new page search
    
  • 添加多说评论时copy你的代码放入到theme/layout/_partials/comments.swig文件中例如:

    <!-- 这是next主题自带的,貌似不行,所以我全部注释了
    {% if page.comments %}
      <div class="comments" id="comments">
        {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
          <div class="ds-thread" data-thread-key="{{ page.path }}"
               data-title="{{ page.title }}" data-url="{{ page.permalink }}">
          </div>
        {% elseif theme.disqus_shortname %}
          <div id="disqus_thread">
            <noscript>
              Please enable JavaScript to view the
              <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
            </noscript>
          </div>
        {% endif %}
      </div>
    {% endif %}
    -->
    
    <!-- 多说评论框 我直接从多说网站copy过来的,而且加上了{% if page.comments %}........{% endif %} 不加上这个,你在新建的文章中设置comments: false会不起作用-->
    {% if page.comments %}
        <div class="ds-thread" data-thread-key="<%= post.path %>" data-title="<%= post.title %>" data-url="<%= post.permalink %>"></div>
    {% endif %}
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"pyonhu"};
        (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 -->
    
  • 说说hexo-generator-sitemap这个插件的用法,有了这个插件后,当你执行hexo g -d命令后会在你github仓库的根目录下生成sitemap.xml文件,这个文件的作用是你提交个google和baidu,让这2个搜索引擎可以搜索到你的网站,来提高你网站的曝光率,这个sitemap.xml格式百度是不接受的,百度接受的是baidusitemap.xml,因为它自己定义了规则(真另类!fuck),如何生成baidusitemap.xml我会在另一篇文章说

上面就是我遇到的坑,还真多!!!

具体的搭建流程可以参考一下文章:
http://www.jianshu.com/p/05289a4bc8b2 如何搭建一个独立博客——简明Github Pages与Hexo教程
http://www.jianshu.com/p/35e197cb1273 Hexo搭建Github-Pages博客填坑教程
https://github.com/iissnan/hexo-theme-next/wiki hexo-theme-next主题使用教程
http://theme-next.iissnan.com/theme-settings.html next主题配置
https://hexo.io/zh-cn/docs/ hexo官方文档

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫