hexo平台搭建

作者: 最黑暗的自己 | 来源:发表于2020-01-27 20:47 被阅读0次

为什么搭建这个博客?

从毕业到现在已经有一年多的时间,在开发中遇到了很多问题,但总是记录在excel中,复习起来不方便,搭建这个博客刚好有个地方可以记录学习历程。

搭建工具

先整理下需要用到的工具:

  • hexo -> 生成文章
  • node.js -> 生成静态页面
  • git -> 云端存储

安装过程

下载安装上述工具(node.js,git)均可在官网下载
安装完git,点击鼠标右击选择Git Bash Here,分别输入

npm install hexo-cli -g //安装hexo
npm install hexo-deployer-git --save //安装hexo部署到git page的deployer

创建hexo文件夹

在电脑上任意位置新建一个Hexo文件夹,进入文件夹根目录鼠标右击选择Git Bash Here,输入

hexo init //在此文件夹新建所需文件,包括主题配置文件、网页等等
到这里你已经完成了本地建站,你可以在本地看到你的网页了!
如何在本地看到刚刚生成的网页?

hexo g //生成
hexo s //开启本地预览服务
开启后打开浏览器输入http://localhost:4000 即可看见网站
以上仅仅只是在本地预览,我们需要将hexo部署到github,实现云端预览

部署至Github

1、拥有github账号
2、新建仓库,仓库名:"用户名.github.io"
3、编辑hexo根目录下的_config.yml文件

deploy:
  type: git
  repository: https://github.com/mirse-partner/mirse-partner.github.io //仓库对应链接
  branch: master

4、保存上述修改后的文件,git bash 执行下述命令

hexo generate
hexo deploy //部署到github

5、成功后通过网址https://你的github用户名.github.io 即可打开你在云端部署的博客。

发表第一篇文章

只需要在根目录下

hexo new "文章名称"

即可生成你的文章,在hexo\source_posts路径下,可以看到相应的.md文件,打开文件你就可以开始创作你的第一篇文章了。

使用Next主题

打开你的网站后,你会发现默认主题并不美观,你可以随意更换主题,打开https://hexo.io/themes/ 寻找你喜欢的主题,下载即可使用主题,本初以Next主题为例,打开 https://github.com/iissnan/hexo-theme-next 下载该主题,并解压至至hexo/themes下,打开根目录/hexo路径下的_config.yml文件按,全局查找theme关键字,改为theme:next ,执行指令hexo g->hexo s ,即可在本地预览next主题,执行hexo d,即可在云端预览效果。

修改next样式

next自带四种主题样式

# Schemes
#scheme: Muse # 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
#scheme: Mist # Muse 的紧凑版本,整洁有序的单栏外观
scheme: Pisces # 双栏 Scheme,小家碧玉似的清新
#scheme: Gemini # 类似 Pisces

我使用的是Pisces

修改主题语言

默认主题语言是英文,我们可以将其改成中文,打开根目录文件_config.yml,找到language字段修改成language: zh-Hans,即可将主题语言改成中文。目前支持的语言可以在themes\next\languages文件夹下进行查看。

修改侧边栏

侧边栏默认标签有Home、about、tags等等,如果你想修改这些显示可以在themes\next_config.yml文件中修改,找到menu字段,即可修改成自己设置的字段,目前我用的字段是:

menu:
  主页: /|| home  # 主页链接及其图标
  #about: /about/ || user
  标签: /tags/|| tags # 标签页链接及其图标
  分类: /categories/|| th # 分类页链接及其图标
  归档: /archives/|| archive # 归档页及其图标
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

侧边栏点击指向

在设置好侧边栏之后,当你点击标签或分类时会出现Cannot GET /tags/ 问题,此时你需要在根目录下创建两个文件夹分别命名为tags、categories,并在文件夹中创建新文件index.md,分别在两个文件中写入

---
title: 标签
date: 2019-12-25 20:47:24
type: "tags"
---
---
title: 分类
date: 2019-12-25 20:46:21
type: "categories"
---

hexo g->hexo d后重新打开网页,点击tags,就可以跳转至点击的链接了。

发表的文章增加字数和阅读时长

此功能需要安装相关插件

npm i --save hexo-wordcount

安装完插件之后,进入next_config.yml文件,找到post_wordcount:并修改

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true //文本显示
  wordcount: true //字数统计
  min2read: true //阅读时长
  totalcount: false //站点总字数
  separated_meta: true

文章侧边栏显示文章目录

搭建博客时,发现别人的博客文章侧边栏有文章的层级目录,上网搜了下如何达到这个效果,发现几乎没有这个回答,后来经过研究,发现只要在自己的文章里,用上大标题、小标题等,侧边即可实现显示文章目录。

# //一级标题
## //二级标题
### //三级标题

增加版权声明

如果你的next版本时7.2.0,在next_config.yml文件中,找到post_copyright:false 修改为:

# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

老版本需要修改文件,建议使用新版本Next

添加github推广

在网页上可以添加github的推广,如在右上角添加“fork me on Github”,具体实现方法为在
https://github.blog/2008-12-19-github-ribbons/ 挑选自己喜欢的样式并复制代码,在

<div class="headband"></div>

代码下方添加你刚刚复制的代码,以我复制后的代码为例:

  <div class="{{ container_class }} {% block page_class %}{% endblock %}">
    <div class="headband"></div>

    <a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;"  width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>

注意:你复制完代码后查看效果时,可能位置不太合理,可以在img中添加style属性设置图片位置,具体可以参考我上面的代码。

添加gitalk

1、 在Github创建一个仓库来存放issue.
2、创建github application用来授权登录,网址https://github.com/settings/applications/new ,其中需要注意Homepage URL和Authorization callback URL,第一个填写你在1、创建的issue仓库地址,第二个为你的github首页地址
3、gitalk主题样式
在themes/next/layout/_third-party/comments路径下新建gitalk.swig文件,内容为:

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <div id="gitalk-container"></div>
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '{{ theme.gitalk.clientID }}',
      clientSecret: '{{ theme.gitalk.clientSecret }}',
      repo: '{{ theme.gitalk.repo }}',
      owner: '{{ theme.gitalk.owner }}',
      admin: ['{{ theme.gitalk.admin }}'],
      id: location.pathname,
      distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
    })
    gitalk.render('gitalk-container')
  </script>
{% endif %}

在themes/next/layout/_third-party/comments/index.swig文件中,引入刚刚创建的文件
具体语句如下:

{% include 'gitalk.swig' %}

在themes/next/layout/_partials/comments.swig文件中找到最后一条

 {% endif %}

替换为

{% elseif theme.gitalk.enable %}
  <div id="gitalk-container"></div>
{% endif %}

最后在themes/next/_config.yml文件中进行gitalk配置,

gitalk:
  enable: true # 是否启用
  owner: mirse-partner # 用户名
  repo: MyGitalk # 存放评论的仓库名
  clientID: xxxx 
  clientSecret: xxxx
  admin: mirse-partner # 用户名
  distractionFreeMode: false # 评论时遮照效果的开关

执行完上面的操作,hexo clean -> hexo g->hexo d就欧克了。

未找到相关的Issues/Error:Validation Failed.

但是可能不那么顺利,这里列举下我遇到的问题,首先疯狂报错Error: Validation Failed.或者 未找到相关的 Issues 进行评论,遇到这种情况返回第2个步骤确认下填写的地址正不正确或者是themes/next/_config.yml文件中gitalk的配置,请认真检查一遍,一般都是在这儿填写错误导致。
还有可能是的你文章文件名的原因,你会发现只要把你的文章文件名xxxx.md中的xxxx改少就不会出现这个问题了,但是这明显不是解决方法,所以下面给出真正的解决方法
打开文件路径themes\next\layout_third-party\comments\gitalk.swig,修改文件中的id值使用page.date代替,具体代码如下:

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <div id="gitalk-container"></div>
  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '{{ theme.gitalk.clientID }}',
      clientSecret: '{{ theme.gitalk.clientSecret }}',
      repo: '{{ theme.gitalk.repo }}',
      owner: '{{ theme.gitalk.owner }}',
      admin: ['{{ theme.gitalk.admin }}'],
      id: '{{ page.date }}', //location.pathname **fixed**
      distractionFreeMode: '{{ theme.gitalk.distractionFreeMode }}'
    })
    gitalk.render('gitalk-container')
  </script>
{% endif %}

具体问题的原因是因为github创建issue有长度限制,gitalk默认使用location.pathname即url来创建,只要文件名过长就无法创建,现在改成page.date就不会有影响了。

gitalk样式显示问题

解决完这个问题又遇到个抓狂的问题-gitalk样式显示问题,现象如图


gitalk.png

在网上百度了好久一直找不到答案,索性打开样式文档研究看看吧。
打开themes\next\layout_partials\comments.swig,代码整合后如下图


comments.png

发现问题所在,代码中并没有把gitalk-container样式包含在endif中,重新修改代码。直接附上comments.swig文件的全部代码:

{% 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.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.livere_uid %}
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></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>

    {% elseif theme.gitalk.enable %}
  <div id="gitalk-container"></div>
  {% endif %}

相关指令

怎么删除文章 删除本地文章 -> hexo g -> hexo d
怎么修改文章 修改本地文章(保存修改) -> hexo g ->hexo s -> hexo d
怎么修改主题 hexo clean #删除缓存 -> hexo g ->hexo s #更改本地仓库 -> hexo d

后续,搭建过程中遇到的问题及解决方法

1、##标题 预览时不生效
正确写法 ## 标题 ##之后得有空格,语言才能生效。

2、如何在主页不显示全文
打开主题中得_config.yml ,找到 auto_excerpt:设置成true即可,
auto_excerpt中的参数可以修改显示文字:

    site_uv_header: 访客数
    site_uv_footer: 人
    site_pv_header: 总访问量
    site_pv_footer: 次

3、如何实现本站人数统计
如果你使用得是next主题,在themes\next_config.yml文件中,找到busuanzi_count:enable 设置成true即可实现人数统计,但是由于不蒜子统计的域名过期了,所以你看到的人数统计是空,修改 /theme/next/layout/_third-party/analytics/busuanzi-counter.swig文中,修改后:

 <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

相关文章

  • Hexo 静态博客

    Hexo静态博客Mac平台搭建全流程记录 Mac install node & hexo-cli Extend h...

  • 使用hexo+github搭建个人博客

    本次使用hexo+github搭建个人博客,使用Linux平台。 一.准备工作 1.了解Hexo Hexo是高效的...

  • hexo平台搭建

    为什么搭建这个博客? 从毕业到现在已经有一年多的时间,在开发中遇到了很多问题,但总是记录在excel中,复习起来不...

  • 如何用Nginx代理静态博客

    之前使用Hexo在各个平台搭建了一遍博客,最后发现,最好的办法是,本地搭建Hexo,编译文件后的文件放在git上,...

  • Hexo博客搭建全攻略(六):博文图片处理

    Hexo博客搭建全攻略系列文章: Hexo博客搭建全攻略(一):基于Hexo+Github环境搭建 Hexo博客搭...

  • 2019年Hexo从0到1再到结束的体验总结

    本文说明 Hexo作为静态化博客,受到欢迎,本文作者在2018年-2019年进行Hexo的平台搭建,文章编辑,构建...

  • 在Coding上搭建Hexo博客

    title: 在Coding上搭建Hexo博客 tags: hexo 参考文章 使用hexo搭建博客Pacman主...

  • Hexo博客平台搭建

    摘要: 进入计算机行业已经好几年了,这么多年的摸爬滚打,我终于意识到了一个血的教训:好记性不如烂键盘!当我们遇到问...

  • Gitee+Hexo搭建个人博客

    Gitee+Hexo搭建个人博客 用Hexo 3 搭建github blog Hexo图片显示(typora工具辅...

  • Hexo博客多平台之间同步

    前言: 笔者搭建了自己的Hexo博客平台,但有多台设备,在Windows和Mac下需要对Hexo进行管理和更新,所...

网友评论

    本文标题:hexo平台搭建

    本文链接:https://www.haomeiwen.com/subject/ahwethtx.html