hexo博客搭建过程

最近搞了一个线上文档，参考了vuejs.orgvue中文网站的风格，才知道他们用hexo搭建的，之前我用Jekyll搭的，要配置很多环境，感觉不如hexo好用，于是就有了这个新博客。整个博客通过hexo在本地写博客并生成博客页面，然后由hexo-deployer-git插件帮我们把博客内容推送到git仓库，由git page 来托管这些静态文件。废话不多说，我们直接开始搭建过程。

1 准备工作

win7用户，按顺序搞就完了，假如因为系统环境或者node版本什么的导致下列哪个安装失败了，请自行百度或者访问官网解决，我们这里认为都是直接成功的。

安装node环境;
我记得很久之前在上写过一篇，写的有点啰嗦，你只要安装一下就行,版本管理啥的，直接跳过。传送
一个github账号;
没有赶紧去注册要是搞不定，点我
安装hexo;

$ npm install -g hexo-cli

2 创建git仓库

打开你的git仓库，新建一个仓库，注意仓库名称一定是 username.github.io 其中username是你的github用户名。如图所示 [图片上传失败...(image-1151f4-1586843983975)] 这是github page的托管站点创建规则。不信？你可以不按这个规则试一试，这是官方说明。

这样，未来我们博客搭建完成并托管在github page之后，就可以通过username.github.io来访问。当然你要是觉得这个域名有点low，不符合你高大威猛的形象。别担心，github也是充分体谅有自己个性域名的小伙伴的。

2.1 绑定自定义域名

在域名控制台，例如阿里云的域名管理界面，找到域名解析设置，分别设置A(将域名指向一个IPV4地址)和CNAME(将域名指向另一个域名)类型。

img3.png

这里有几点需要额外说明一下：

A类型解析是指向一个ipv4地址的，也就是说需要我们github page的ip地址，我们需要先ping 一下得到这个地址。

img2.png

CNAME类型解析，需要我们在github项目根目录存在一个CNAME文件(无后缀)，里面填写你绑定的这个新域名(我们在后面hexo博客搭建时候来配置)。配置完成之后，我们可以看到在项目的settings中 github pages 的自定义域名这里自动绑定了。当然你直接在这边修改我记得好像也是可以的，嘻嘻。

img4.png

在你绑定了新域名之后，原来的username.github.io并不是就失效了，而是会跳转到你新绑定的域名。

3 使用hexo搭建博客

在准备工作阶段，我们已经安装了hexo了(这里插个嘴，我在家里用win10 安装hexo-cli之后，发现并不能执行hexo指令，在全局安装之后，还要把它你的全局node_modules路径配置到系统环境变量中去)，接下来我们开始创建博客。

3.1 创建博客

找个好地方，执行以下命令，hexo-cli 会在这个文件内创建hexo的脚手架环境。

$ hexo init

这里的表示你想要创建的博客项目的名称，比如我就直接 hex init myblog。

小提示，按照官方文档，在执行玩init初始化执行后，还需要运行npm install来安装依赖，但实际情况据我观察，好像并不需要。跟踪一下这个初始化执行：从github上克隆hexo项目到本地，然后把相关git配置删除，并且完成了安装依赖的过程，直接运行下面指令，运行一个本地服务，默认地址为http://localhost:4000，就可以看到默认的博客页面了。

$ hexo server   //可以简写成 hexo s

3.2 配置相关文件

我们看一下文件目录，大概说一下吧

.
├── _config.yml   //博客站点的配置文件，绝大部门配置都在这里完成
├── package.json  //这个就不多说了，nodejs模块的描述文件
├── scaffolds     //这是以后用hexo 指令来创建文件时的Front-matter模板
├── source        //这个真不说了
|   └── _posts    //在这里面的文件.md和.html，将来会被解析到public文件夹发布出去
└── themes        //站点的主题，hexo会根据这个文件内容来生成和解析

这里看一下_config.yml文件的配置，可以看我下面的备注，也可以自行访问官方文档：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: livisun's blog   //这里是站点的title，将来浏览器tab标签栏显示的
subtitle:               // 网站副标题，没啥用
description:            //网站描述 ，用于SEO，给浏览器爬虫抓取的
keywords:               //关键字 ，同上
author: livisun         //作者
language: zh-CN         //网站使用的语言，
timezone:               //网站时区，不知道干啥的，都可以不填，应该会有默认的，下面
//没必要改的我就不写备注了

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://livisun.gitgub.io   //未来站点的网址
root: /                         //网址的根目录 
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: snippet  //这里表示hexo选择的主题，在themes文件下，有一个默认主题，我们这边用了更换了，后面我们会说明一下主题的更换

# Deployment
## Docs: https://hexo.io/docs/deployment.html
//这边需要说明一下 ，这是hexo的部署配置，
deploy:
  type: git  //表示通过git工具来部署
  repository: https://github.com/livisun/livisun.github.io.git  //部署到这个仓
  //库，也就是我们开始创建的那个仓库
  branch: master  //默认的master分支

4 更换主题

你会发现你刚刚运行的博客跟本博客比起来是不是有点丑，没问题，安排~。

官方提供了一个很方便的主题更换机制，我们可以看到在上面的_config.yml配置中有主题配置项，实际操作只需要下载（大佬可以自己制作）一个主题文件，放在themes文件下，然后到配置文件中，替换一下就可以了。官方怕我们找不到这样的主题，做又做不出来，很贴心的搞了一个主题分享站点，我们可以去淘一个喜欢的主题，甚至你要是看上了好几个，你还可以做到主题的切换，这里是传送门。哦对了，当前主题在本博客页脚处，可以自行获取。算了，来，坐车。

我为什么会选这个主题呢，因为这个主题简约但不简单，个人不是很能接受那种花哨的页面，主要内容要绕一大圈去找，去猜, ~~玩捉迷藏呢~~。这个就很好，功能强大，主次分明。

按照snippent主题官方仓库的介绍，有以下特点:

原生JavaScript实现，去jQuery化
样式支持CSS预处理器Less，方便主题自定义
文章过期提醒功能
文章阅读进度条
网站公告功能
首页图片懒加载
首页文章缩略图自动检索文章内图片，支持自动随机图片
主题支持响应式
支持3D云标签
支持文章推送和文章打赏
站内本地搜索和谷歌搜索
支持多个第三方评论系统
支持网站统计和不蒜子访客统计
移动端的简洁设计
支持代码高亮并支持自定义高亮样式
支持Shell脚本通过Travis CI自动化部署Hexo博客
支持Hexo自动化部署结果发送邮件和实时推送到钉钉

嗯，看上去很6的样子，有些功能对我来说不来必要，但是可以看出作者还是很用心的，并且这个主题库一直在保持更新，最近一次提交在21天之前，感兴趣的可以深入了解一下，我们这里只简单介绍一下本博客的配置:

4.1 snippet主题下载

snippet获取可以通过两种方式：

下载snippet主题的zip文件，解压后放在themes目录下，和默认landscape为同级目录
在hexo博客根目录，例如我的在myblog执行：

$ git clone git://github.com/shenliyang/hexo-theme-snippet.git themes/hexo-theme-snippet

4.2 安装主题插件

因为 hexo-theme-snippet 使用了 ejs 模版引擎、 Less CSS预编译语言以及在官方插件的基础上进行功能的开发，以下为必装插件：

$ npm i hexo-renderer-ejs hexo-renderer-less hexo-deployer-git -S

4.3主题配置

下面就是主题的配置，关系到未来hexo如何解析我们写的文章，并配置主题所提供的其他功能，废话太多了，我们开始，当然你也可以在阅读主题的官方文档，因为也许之后该主题会出更多新功能或其他重大更新，当然你要是觉得这样挺好，跟我来就行。

snippet主题同样有一个——config.yml文件，这就是主题的配置文件了，同样我们贴一下配置，并注释。

# ---------------------------------------------------------------
#   Site Information And Theme Configuration Settings
#   language: zh-CN
# ---------------------------------------------------------------

## menu 
//  导航菜单显示{[@page:名字,@url:地址,@icon:图标]}
menu:
- page: home
  url: /
  icon:
- page: 编程
  url: /categories/编程/
  icon:
- page: 阅读
  url: /categories/阅读/
  icon:
- page: 随笔
  url: /archives/随笔
  icon:
- page: 工具
  url: /categories/工具/
  icon:
- page: 时间轴
  url: /archives/
  icon:
- page: 关于我
  url: /about/
  icon:

## favicon -- 网站图标位置{@favicon}
favicon: /favicon.ico

## Feed
rss: /atom.xml

# ## Carousel
# carousel:
#   img: './img/head-img.jpg'
#   url: 'https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=xs0pypd2'

# 各个小工具的设置
//这里是右侧6个左边小工具
## widgets
widgets:
  - search
  - notification
  - social
  - category
  - archive
  - tagcloud
  - friends


## 搜索
jsonContent:          //配置那些目录支持站点搜索
  searchLocal: true   // 是否启用本地搜索
  searchGoogle: false //是否启用谷歌搜索
  posts:
    title: true
    text: true
    content: true
    categories: true
    tags: true

## 网站公告设置 支持 html 和 纯文本
notification: |-
            
              Vue源码学习 

              scratch3 源码分析 

            

## 社交设置 {@name:社交工具名字，@icon:社交工具图标，@href:设置工具链接} [参考图标]
//(http://fontawesome.io/icons/)
social:
 - name: Github
   icon: git
   href: //github.com/livisun
 - name: 邮箱
   icon: envelope-o
   href: mailto:[email protected]
 - name: 联系QQ
   icon: qq
   href: tencent://message/?uin=1105432766
 - name: 微信
   icon: weixin
   href: /
 - name: QQ群
   icon: users
   href: /
 - name: RSS
   icon: feed
   href: /atom.xml

## 文章分类设置 
cate_config:
   show_count: true      //是否显示数字
   show_current: true    //是否高亮当前分类

## 文章归档设置
arch_config:
   type: 'monthly'
   format: 'YYYY年MM月'
   show_count: true
   order: -1

## 标签云设置
tagcloud:
  tag3d: false            // 是否启用3D标签云
  textColour: '#444'      //字体颜色
  outlineMethod: 'block'  // 选中模式(outline|classic|block|colour|size|none)
  outlineColour: '#FFDAB9'// 选中模式的颜色
  interval: 30            //动画帧之间的时间间隔，值越大，转动幅度越大
  freezeActive: true      //选中的标签是否继续滚动
  frontSelect: true       //不选标签云后部的标签
  reverse: true           //是否反向触发
  wheelZoom: false        //是否启用鼠标滚轮

## 友链设置
links:
  - Hexo官网: https://hexo.io/zh-cn/


# 主题自定义个性化配置

## 网站宣传语
branding: 读有趣的书，写简单的代码。

## 设置banner背景图片 //支持动态背景
banner:
    img: http://snippet.shenliyang.com/img/banner.jpg


## 首页列表底部面板
homePanel: true

## 缩略图自定义随机图片
defaultImgs:
  -

## 截取文章首页描述字数
//自定截图内容摘要，支持自定义摘要，
//自定义摘要{@:截取more之前的内容为摘要}
excerptLength: 120


## 是否开启文章目录
toc: true

## 代码高亮配置
highlightTheme:

## bootstrap配置
bootstrap:

## ICON配置
fontAwesome:

## 文章过期提醒功能
warning:
  days: 300
  text: '本文于%d天之前发表，文中内容可能已经过时。'

## 文章内声明
declaration:
  enable: true
  title: '转载声明'
  tip: |-
      商业转载请联系作者获得授权,非商业转载请注明出处 © livisun

## 文章打赏
reward:
  alipay: '/img/zfb.png'
  wepay: ' /img/wx.png'
  tip: 假如你刚好有兴趣请我喝杯奶茶

## 主题评论

//这里我们用的Valine评论，支持其他评论，自行探索
## Valine评论

valine:
   enable: true
   appId: PFF3iz6l46WOQXhWBVPX22um-gzGzoHsz  //自己去注册
   appKey: aQNed97fCoI0PTI26eDHdtBe
   placeholder: 说点什么吧
   notify: false // 邮件通知
   verify: true  // 验证码
   avatar: mm    // avatar头像
   meta: nick,mail   // 输入框内容，可选值nick,mail,link
   pageSize: 10

### 畅言评论(需要ICP备案)
changyan:
  enable: false
  appid:
  conf:

### 来必力
livere:
  enable: false
  livere_uid: MTAyMC8zMzA1MS85NjEz

## Gitalk评论
gitalk:
   enable: false
   clientID:
   clientSecret:
   repo:
   owner:
   admin:
   perPage:
   distractionFreeMode: true

### Disqus评论
disqus:
  enable: false
  shortname: snippet
  count: false

### gitment评论(长期不更新，不建议使用)
gitment:
  enable: false
  owner:
  repo:
  client_id:
  client_secret:
  perPage: 10

### 友言评论(服务不稳定)
uyan:
  enable: false
  uyan_id: 1966422


## 网站访客统计
//本博客未开启访客统计
visit_counter:
   site: false
   page: false

## 网站访问统计分析

### 网盟CNZZ统计
cnzz_analytics:

### 百度统计
baidu_analytics:

### 谷歌统计
google_analytics:

### 腾讯分析
tencent_analytics:

### 百度站点认证
baidu_site_verification:

### 百度自动推送
baidu_push: true

#网站主题配置
since: 2019   //建站时间
robot: 'all' // 控制搜索引擎的抓取和索引编制行为，默认为all
version: 1.2.1  //主题版本

另外需要提醒的一点是，如果要使用站点搜索，必须安装插件hexo-generator-json-content 来创建本地搜索需要的json文件

$ npm i [email protected] -S

ok主题配置基本就到这，当然页面的模板你可以自定义，修改layout文件夹内的模板，这里就不再赘述。

5 将博客部署到github page

我们回顾一下之前的配置，与部署相关的有两个地方:

在绑定自定义域名时候，我们提到了CNAME文件，对了，在部署之前需要，在hexo的source文件下创建一个无后缀名的CNAME文件，并在里面写入你的绑定域名

img5.png
在hexo的_config.yml文件中，配置了我们将来hexo部署的仓库

img6.png

接下来还需要安装一个部署插件，执行以下命令：

$ npm install hexo-deployer-git --save

ok,下载我们执行部署命令：

$ hexo g -d

咔咔一顿运行，之后，我们得到返回：Deploy done：git,表示部署成功，快去看看吧。

hexo 常见命令：

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

缩写命令

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

当然，也可使用组合命令，就像上面的部署操作一样。

hexo s -g #生成并本地预览
hexo d -g #生成并上传

到这为止，整个博客就搭完了，竟然写了这么久，后面如何写博客，自行参考，官网，或者在下面留言吧，先溜了。