hexo搭建博客网站全过程

一、项目介绍

  1. 使用技术框架:hexo+next+Valine评论
  2. 本地测试
  3. leancloud官网 注册账号,管理评论的地方,
  4. 常用命令 hexo clean hexo g hexo s hexo d hexo s -d hexo d -g

二、安装nodejs/npm/cnpm

  1. nodejs官网 下载windows默认版本,
  2. 安装最新的版本,防止出问题,
  3. C:\Program Files\nodejs\安装在默认地址,
  4. 打开cdm, win+r--cmd,
  5. 测试node --version npm -v
  6. npm install -g cnpm --registry=https://registry.npm.taobao.org安装cnpm,cnpm -v测试,

三、安装git

  1. 下载git C:\Program Files\Git默认安装路径,选择在桌面建立快捷方式on the desk
  2. 测试,在桌面右键出现两个“Git GUI Here”和“Git Bash Here”
  3. 测试,cmd--git --version

四、安装hexo

  1. hexo官网 根据文档执行命令
cd huren_ren
npm install hexo-cli -g
hexo init
npm install
hexo s
  1. 命令行介绍
    新建文章 hexo new "post title with whitespace"

生成静态文件 hexo g
启动服务器 hexo s
清除缓存文件 hexo clean
部署网站 hexo d -g

五、安装next主题

  1. 下载 git clone https://github.com/theme-next/hexo-theme-next,
  2. 配置 theme: next language: zh-CN 语言两个配置文件都要配置,不然菜单是默认语言不是中文的
  3. tags: /tags/ || tags //标签 配置菜单,放开注释 执行命令 hexo new page "tags" 类似的一共开启了5个菜单
menu:
  home: / || home                        //首页
  about: /about/ || user                 //关于
  tags: /tags/ || tags                   //标签
  categories: /categories/ || th         //分类
  archives: /archives/ || archive        //归档

在tags/index.md里面添加type: "tags" /scaffolds/post.md修改为如下: 不然 标签页没有标签 分类页没有分类

---
title: {{ title }}
date: {{ date }}
categories:
tags:
---
  1. 添加阅读全文按钮 在文章中添加分割线<!--more-->
  2. 设置网站缩略图标 把你的图片(png或jpg格式,不是favicon.ico)放在themes/next/source/images里,然后打开 主题配置文件 找到favicon,将small、medium、apple_touch_icon三个字段的值都设置成/images/图片名.jpg,其他字段都注释掉。
  3. 设置头像 编辑主题配置文件,修改字段 avatar,url: /images/tx.jpg\themes\next\source\images\tx.jpg
  4. 百度统计,没有账号的话就注册账号,复制你的baiduId,编辑-主题配置文件,修改字段 baidu_analytics字段,值设置成百度统计脚本id。
  5. 服务器的MIME类型设置,解决fontawesome-webfont.woff2?v=4.7.0提示404的问题,添加:扩展名.woff2 MIME类型application/woff2
  6. 修改文章内链接文本样式 打开文件 themes/next/source/css/_common/components/post/post.styl,在末尾添加
.post-body p a {
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}
  1. 添加搜索功能: 安装插件,npm install hexo-generator-searchdb --save,打开 站点配置文件 找到Extensions在下面添加
# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

打开 主题配置文件 找到Local search,将enable设置为true

  1. 添加Valine评论 leancloud官网 注册账号
    主题配置文件中,添加appid和appkey等,创建了一个class,名称必须为Counter-确定即可,1186行 设置js路径,不然默认的unpkg.com的加载会很慢,valine: https:cdn.jsdelivr.net/npm/valine@1.3.4/dist/Valine.min.js 在后台 设置-安全中心-Web安全域名 添加如下你的域名,不然评论的api调用不通,visitor: true开启文章计数,可以在页面看到,也可以在后台看到。评论的时候,留下gravatar注册的邮箱,即可显示头像 avatar官网
  2. 去掉底部的版权信息一行,themes/next/layout/_partial/footer.swig 删除39行以后的,找不到就浏览器查看dom-className
  3. 添加站点访问计数 themes/next/layout/_partial/footer.swig 底部添加代码
<div>
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv" style='display:none'>
    本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
    <span class="post-meta-divider">|</span>
</span>
<span id="busuanzi_container_site_uv" style='display:none'>
    有<span id="busuanzi_value_site_uv"></span>人看过我的博客啦
</span>
</div>
  1. 安装hexo-admin官网, 编辑器里面编辑文章是最方便的
    本地管理地址
npm install --save hexo-admin
hexo s -d
open http://localhost:4000/admin/
  1. 联系方式添加,
social:
  GitHub: https://github.com/hurenweb || github
  E-Mail: mailto:hurenweb@qq.com || envelope
  1. 背景图片添加,\next\source\images css文件next\source\css\_custom\custom.styl
// Custom styles.
body {
    background: url("/images/bg.jpg") no-repeat left top;
    background-attachment:fixed;
    background-size:100%;
}
  1. ftp插件,调试未成功
  2. 添加编辑器对于swig后缀名的支持,显示为html即可
  3. 底部添加联系方式,添加到footer.swig
  4. 添加友情链接,主题配置文件-搜索links 添加名称和网址即可
  5. 关于页面,添加。
  6. 结束。

标签: hexo