最近搞了一个线上文档，参考了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(将域名指向另一个域名)类型。
这里有几点需要额外说明一下：
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: |-
## 社交设置 {@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 #生成并上传
到这为止，整个博客就搭完了，竟然写了这么久，后面如何写博客，自行参考，官网，或者在下面留言吧，先溜了。