hexo-搭建个人blog步骤

发表于 | 分类于

1、下载node安装
https://nodejs.org/en/
安装hexo：npm install -g hexo

2、下载github
https://git-scm.com/download/win

3、vscode的预览Markdown的插件
在扩展里面直接搜索：Markdown Preview Enhanced

4、安装主题，到官网下载自己喜欢的主题
https://hexo.io/themes/
下载完成后，文件夹放到blog目录的/themes/下，并修改_config.ymal
theme: 你主题的名字
5、_config.yaml需要配置的地方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
title: xxxxx's Blog  #标题
subtitle: 
description: 运气就是机会碰巧撞到了你的努力   #
author: 站着洗澡 
language: zh-Hans
timezone: Asia/Shanghai

deploy:
type: git
repo:
    github: https://github.com/xxxxxxxxxx
    coding: https://git.coding.net/xxxxxxxx

#站内搜索
search:
    path: search.xml
    field: post
    format: html
    limit: 10000

6、主题下的_config.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
keywords: "xxx, ksowo.com" #关键字
#增加导航菜单
menu:
    home: /
    categories: /categories
    tags: /tags/
    archives: /archives
    about: /about/

# 友链
links_title: Links
# links_layout: block
links_layout: inline
links: 
    xxx：http://xxx.com

#支付    
reward_comment: ⭐您的支持将鼓励我继续创作⭐
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

7、增加百度收录插件
npm install hexo-generator-sitemap –save
npm install hexo-generator-baidu-sitemap –save
npm install hexo-generator-baidu-sitemap –save
8、增加关于、分类、标签导航栏
在/source/目录下创建文件夹about、categories、tags

1
2
3
4
5
---
title: xxxx
date: 2018-01-09 09:53:19
type: "xxxx"
---

xxx为对应的文件夹名称
9、最后图片的修改和页面样式的修改需要查源代码具体去修改

10、为NexT主题添加文章阅读量统计功能，注册账号填一下API接口信息
注册地主：https://leancloud.cn
打开文件： themes/next/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: false
  app_id: xxxxxxxxxxxxxxxxxxxxx
  app_key: xxxxxxxxxxxxxxxxxxxxxxxxx

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访问人数
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 阅读数
  page_pv_footer:
⭐您的支持将鼓励我继续创作⭐