Hexo博客搭建

2021-04-25  本文已影响0人  BI罗

1.准备环境

安装 Node
安装 Git
注册码云
npm安装 Hexo

npm install hexo-cli -g

2.初始化Hexo

新建文件夹项目，初始化

hexo init

#生成静态页面
hexo g 

#启动
hexo s

浏览器访问 http://localhost:4000

关闭hexo服务，ctrl+c

3.Next主题

项目文件夹\themes 内

git clone https://github.com/theme-next/hexo-theme-next.git

根目录下的_config.yml 设置next主题

theme: hexo-theme-next

4.发布文章

两种方法：

1.根目录下，命令创建

hexo new "此处输入文章名字"

项目名称 /source/_posts 目录下，直接创建md文件

5.next主题的细致美化

1. next主题风格选择

主题文件夹下（非根目录）的 _config.yml 配置文件

scheme: Mist
2. 博客site设置，中文设置

根目录下的_config.yml

# Site
title: 网站名
subtitle: '只玩有趣的，顶级的2'
description: '只玩有趣的，顶级的'
keywords:
author: xxx
language: zh-CN          
timezone: ''
3. 添加分类

根目录下，命令创建categories文件夹

hexo new page categories

打开 categories 文件夹中的 index.md 文件，添加 type 字段，设置为 “categories”

---
title: categories
date: 2021-04-12 08:08:59
comments: false
type: "categories"
---

到主题文件夹下的 _config.yml 配置文件下，找到 menu 模块，把 categories 的注释给去掉

给文章分类，在文章 的front-matter 部分加入categories（注意冒号后面多一个空格）

---
title: Hello World
comments: false
categories: 测试
---
4. 如何添加其他类似分类的网站导航

主题文件夹下的 _config.yml 配置文件下，找到 menu 模块，PowerBI作品就是新加的

menu:
  home: / || fa fa-home
  PowerBI作品: /gallery/ || fa fa-th
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  about: /about/ || fa fa-user
5. Hexo 博客添加站内搜索（Local Search）

根目录，命令（cmd或git bash）

npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save

项目根目录下的 _config.yml 配置文件的文末添加下面这段代码

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题文件夹的 _config.yml 配置文件，设置 local_search 为 ture

local_search:
  enable: true
6. 头像设置

主题文件夹的 _config.yml 配置文件

avatar:
  # Replace the default image and set the url here.
  url: /images/mao2.gif

照片地址在themes\hexo-theme-next\source\images

7. 首页文章预览设置

每篇文章在想要展示的地方使用 < !–more–> 切断

8. 社交小图标设置

在主题文件夹下的 _config.yml 配置文件中，搜索 Social，然后提示自己增加自己需要的小图标并设置对应连接。 图标可以到 Font Awesome Icon 网站查找。

9. 底部隐藏由Hexo强力驱动，主题NexT.Mist

注释即可

<!-- 
{%- if theme.footer.powered %}
  <div class="powered-by">
    {%- set next_site = 'https://theme-next.org' %}
    {%- if theme.scheme !== 'Gemini' %}
      {%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
    {%- endif %}
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
  </div>
{%- endif %}

{%- if theme.add_this_id %}
  <div class="addthis_inline_share_toolbox">
    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{ theme.add_this_id }}" async="async"></script>
  </div>
{%- endif %}

{{- next_inject('footer') }}
-->
10. 设置网站图片 Favicon

在 阿里巴巴矢量图标库 下载图标，覆盖主题文件夹下的 source/images 目录里面的三张图片。

11. 博客置顶
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

文章的 front-matter， 加入 top ，数值越大表示等级越高，越靠前显示。

---
title: this is my first blog
date: 2019-04-14
top: 100
---

设置置顶标志
打开：/blog/themes/next/layout/_macro目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：

        <div class="post-meta">
          {% if post.top %}
            <i class="fa fa-thumb-tack"></i>
            <font color=e94563>TOP</font>
            <span class="post-meta-divider">|</span>
          {% endif %}
12. 文章代码主题设置

NexT 使用 Tomorrow Theme 作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties。
在主题文件夹的 _config.yml 配置文件中，定位到 highlight_theme，根据需求修改相应的值即可。

13. 网站底部字数统计设置，主题添加访客统计、访问次数统计、文章阅读次数统计
npm install hexo-wordcount --save

主题文件夹下的 layout/_partials/footer.swig 文件，在文末添加

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

打开next主题配置文件\themes\next_config.yml，搜索找到busuanzi_count，把enable设置为true

# Show Views / Visitors of the website / page with busuanzi.#展示访问数
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true   #统计访客数
  total_visitors_icon: user
  total_views: true   #统计访问数
  total_views_icon: eye
  post_views: true   #统计文章阅读数 
  post_views_icon: eye

busuanzi_count设置后，这一步没必要
同样是在next主题配置文件\themes\next_config.yml下，搜索footer，在它底下添加counter，设值为true

  #统计
  counter: true

busuanzi_count设置后，这一步好像也没必要

来到themes\next\layout_partials，找到footer.swig文件，打开编辑，在底下添加代码

{% if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}

根目录_config.yml

symbols_count_time:
  symbols: true                # 文章字数统计
  time: false                   # 文章阅读时长
  total_symbols: false          # 站点总字数统计
  total_time: false            # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计

使用hexo s部署在本地预览效果的时候，uv数和pv数会过大，这是由于不蒜子用户使用一个存储空间，所以使用localhost:4000进行本地预览的时候会导致数字异常，这是正常现象，只需要将博客部署至云端即可恢复正常

14. 评论模块接入

首先得先到 来必里(http://livere.com/) 申请一个账号。
点击右上角的头像，进入“管理页面”，会看到“您确定要获得来必力安装代码吗?”的提示，直接点击“实行”即可。
申请 City 免费版，如实填写信息即可。申请成功后，可以看到“一般网站”下的第二行代码，有个 data-uid，把后面的值复制下来留着备用。
在主题文件下打开 _config.yml 配置文件，定位到 livere_uid，把刚刚拷贝的data-uid粘贴到相应的位置。

# LiveRe comments system
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: MTAyM88656522228DI3OQ==

文章禁止出现评论页面，front-matter加入comments: false

6. 部署到码云（或github）

在码云上创建一个公有仓库，获取链接


打开项目根目录下的 _config.yml 配置文件，修改 deploy 的值

deploy: 
  type: git
  repo: https://gitee.com/xxx/xxx.git
  branch: master

在项目根目录下，打开 Git Bash，配置码云的用户和邮箱

git config --global user.name空格+你的码云的名字
git config --global user.email空格+你的码云的邮箱

安装hexo-deployer-git

npm install hexo-deployer-git --save

部署命令

hexo d -g

在项目首页 -> 服务 -> Gitee Pages


打开项目根目录下的 _config.yml 文件，修改 URL 部分的参数。
url 字段的值修改为远程访问连接
root 字段的值修改 /+远程仓库的名称

上一篇下一篇

猜你喜欢

热点阅读