Hexo+Github搭建自己的博客


阅读数: 次   
× 文章目录
  1. 1. 一、说明
  2. 2. 二、安装Hexo和基本使用
  3. 3. 三、更换主题Theme及基本配置
    1. 3.1. 1、更换主题
    2. 3.2. 2、主题基本配置
      1. 3.2.1. (1) 图片的位置：
      2. 3.2.2. (2) 百度、谷歌统计配置
      3. 3.2.3. (3) 文章评论设置
  4. 4. 四、博客的基本配置
    1. 4.1. 1、部署配置
    2. 4.2. 2、主题配置
    3. 4.3. 3、其他
  5. 5. 五、进阶功能配置
    1. 5.1. 1、网站访问量显示
      1. 5.1.1. (1) 效果
      2. 5.1.2. (2) 实现
    2. 5.2. 2、实现单篇文章浏览统计和评论统计
      1. 5.2.1. (1) 效果
      2. 5.2.2. (2) 实现
    3. 5.3. 3、实现网易云跟帖评论
      1. 5.3.1. (1) 效果
      2. 5.3.2. (2) 实现
  6. 6. 六、绑定到申请的域名
    1. 6.1. 1、申请域名
    2. 6.2. 2、解析域名
    3. 6.3. 3、配置一下
    4. 6.4. 4、细节说明
  7. 7. 七、写作的一些说明
  • 最终效果可以查看：http://lawlite.me/
  • 后序继续完善，有问题可以联系我或是下面评论

一、说明

二、安装Hexo和基本使用

  • 安装Hexo: npm install -g hexo
  • 初始化Hexo: hexo init
  • 生成静态页面：hexo generate 或者 hexo g
  • 启动服务器：hexo server 或者 hexo s
    • 注意：服务器默认是4000端口，若是安装了福昕阅读器可能端口冲突
    • 可以制定端口：hexo s -p5000
  • 浏览器中访问：http://localhost:4000

三、更换主题Theme及基本配置

1、更换主题

  • 默认主题是landscape，在themes文件夹下，可以使用别人开发好的主题，这里有很多，我使用的是这一个: https://github.com/litten/hexo-theme-yilia
    • 下载之后放到themes文件夹下即可：git clone git@github.com:litten/hexo-theme-yilia.git

2、主题基本配置

  • 配置在_config.yml文件中，基本的配置尝试一下就知道了，不在给出

    (1) 图片的位置：

  • 比如打赏的支付宝二维码图片，是在当前博客的source/assets/img/下 （不是当前主题）
    enter description here
  • 配置：
    1
    2
    3
    4
    5
    6
    7
    8
    # 打赏基础设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
    reward_type: 1
    # 打赏wording
    reward_wording: '谢谢你请我吃糖果'
    # 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
    alipay: /assets/img/alipay.jpg
    # 微信二维码图片地址
    weixin: /assets/img/weixin.png

(2) 百度、谷歌统计配置

1
2
3
# Miscellaneous
baidu_analytics: '454d1a5ba8ed29xxxxxxxx'
google_analytics: 'UA-9700xxxxxxxx'
  • 就可以统计网站访问情况了，如下图，
    enter description here
  • 谷歌统计同理

(3) 文章评论设置

  • 由于主题之实现了多说和disqus的第三方评论功能，这里不配置
  • 因为多说6月份要关闭了，disqus需要翻墙访问才行，还有友言不支持https协议，因为github使用的是https协议
  • 下面会给出使用网易云跟帖和来必力的第三方评论功能

四、博客的基本配置

1、部署配置

  • 配置到github对应的仓库中
    • 使用hexo deploy或hexo d命令即可发布到github仓库中
    • 浏览器输入网址https://userName.github.io即可访问（userName对应你的用户名）
1
2
3
4
deploy:
  type: git
  repo: git@github.com:lawlite19/lawlite19.github.io.git
  branch: master

2、主题配置

  • 设置为你下载的主题：theme: yilia

    3、其他

  • 加入如下配置，
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    jsonContent:
      meta: false
      pages: false
      posts:
        title: true
        date: true
        path: true
        text: true
        raw: false
        content: false
        slug: false
        updated: false
        comments: false
        link: false
        permalink: false
        excerpt: false
        categories: false
        tags: true

五、进阶功能配置

1、网站访问量显示

(1) 效果

enter description here

(2) 实现

1
2
3
4
5
6
7
8
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<span id="busuanzi_container_site_pv">
  本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span id="busuanzi_container_site_uv">
总访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

2、实现单篇文章浏览统计和评论统计

  • 评论数的统计是网易云跟帖中获取的，下面给出

    (1) 效果

    enter description here

    (2) 实现

  • 修改themes\yilia\layout\_partial文件夹下的article.ejs文件
  • 在<%- partial('post/title', {class_name: 'article-title'}) %>节点下加入：
    • 注意这里网易云跟帖还没设置，而评论数中使用到了，这里运行会有问题，下面给出
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      <!-- 显示阅读和评论数 -->
      <% if (!index && post.comments && config.wangYi){ %>
      <br/>
      <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
      <span class="icon-sort"></span>
      <span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
                阅读数: <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;
      </span>
      </a>
      <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:#ef7522;font-size:14px;">
      	<span class="icon-comment"></span>
      	<span class="join-text" style="color:#ef7522;font-size:14px;">评论数:</span>
      	<span class="join-count">0</span>次
      </a>
      <% } %>

3、实现网易云跟帖评论

(1) 效果

enter description here

(2) 实现

  • 注册账号：https://gentie.163.com/info.html
  • 填写完成之后获取WEB代码
  • 修改themes\yilia\layout\_partial文件夹下的article.ejs文件
  • 在最后加入
    • 这里需要注意下，一个站点不同端标识文章的方式必须统一（同一站点可以采用以下方式标识文章：①URL；②Sourceid+productKey ；③URL+Sourceid+productKey，建议用②或者③），否则跟贴数据可能错乱。比如同一站点PC端采用URL，APP采用Sourceid+productKey，这种情况跟贴数据会错乱，必选采用统一方式标识。
    • 这里使用方式②
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 网易云跟帖 -->
<% if (!index && post.comments && config.wangYi){ %>
<section class="duoshuo" id="comments">
<div id="cloud-tie-wrapper" class="cloud-tie-wrapper"></div>
<script>
  var cloudTieConfig = {
    url: "", 
    sourceId: "<%= post.path%>",
    productKey: "<%= config.wangYi%>",
    target: "cloud-tie-wrapper"
  };
</script>
<script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script>
</section>
<% } %>
  • 在博客的配置文件_config.yml最后加入获取代码中的productKey
    enter description here
1
wangYi: 06ab5cdc0b4c45efb39xxxxxxxxxxxx
  • 发布到github上可以查看效果

六、绑定到申请的域名

  • 可以绑定到自己申请的域名上，不用使用userName.github.io访问了，直接使用自己的域名访问

    1、申请域名

  • 我在万网购买的域名，地址：https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7
  • 我这里是.me结尾的域名，一年13大洋

    2、解析域名

  • 添加如下的解析
    enter description here

    3、配置一下

  • 在博客的source文件夹下建立一个CNAME的文件
  • 内容写入你的域名信息，比如我这里是lawlite.me
  • 发布到github即可

    4、细节说明

  • 之前网易云跟帖，百度统计设置的域名这里对应该过来一下

    七、写作的一些说明

  • 执行命令：hexo new "xxxx"创建Markdown文件，在博客的source\_posts文件夹下
  • 比如如下例子，
    • comments设置为true允许评论，若设置为false则不能评论
    • reward设置为true允许打赏，若设置为false则不能打赏，（注意对应主题的配置文件reward_type: 设置的为1）
      enter description here
  • 在文章中加入<!-- more -->将文章截断显示在主页
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码
本站总访问量次 总访客数人次

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

程序猿👨🏻‍💻