听说每个程序员都要拥有个自己的站！
小时候想 也许多年以后，当我每天冒出新的胡须，当我脑子里不再是网络游戏，当我逢人就笑，当我脸上找不出半分骄傲，当我开始习惯了指间的香烟，当我足以扛起家中的天，当我讨厌的不再讨厌，埋怨的不再埋怨，回头看 当时那个少年，早已不见，愿你我不负时光，不负自己！
Hexo简介
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
如果你是一个不甘寂寞的程序员,也想拥有一个自己的网站,可跟随该篇文章搭建后进而根据自己的喜好,让你的个人站更符合自己的审美
效果图
Baoxing 的个人站 (bd3star.github.io)
1. Hexo安装
本步骤需要Git与Node.js的支持。
1.1 初始化
电脑中任选盘符新建一个文件夹作为博客网站的根目录，文件名最好不要是中文。
空白处右键点击Git Bash here
1.2 安装
设置npm淘宝镜像站
- npm默认的源的下载速度可能很慢，建议使用淘宝镜像替换。
- 执行下面的命令，将npm的源设置成淘宝镜像站。
npm config set registry "https://registry.npm.taobao.org"
出现的命令行窗口中输入npm install -g hexo-cli，等待运行完成依次输入以下命令
hexo init <新建文件夹的名称>
cd <新建文件夹的名称>
npm install
等待运行完成，此时文件夹中多了许多文件。
这里解释一下各个文件夹的作用：
config.yml
博客的配置文件，博客的名称、关键词、作者、语言、博客主题...设置都在里面。
package.json
应用程序信息，新添加的插件内容也会出现在这里面，我们可以不修改这里的内容。
scaffolds
scaffolds就是脚手架的意思，这里放了三个模板文件，分别是新添加博客文章（posts）、新添加博客页（page）和新添加草稿（draft）的目标样式。
这部分可以修改的内容是，我们可以在模板上添加比如categories等自定义内容
source
source是放置我们博客内容的地方，也就是资源文件夹，里面初始只有一个文件夹，_posts（文章文件夹），之后我们通过命令新建tags（标签文件夹）还有categories（分类）页后，这里会相应地增加文件夹。
themes
放置主题文件包的地方。Hexo会根据这个文件来生成静态页面。
注意：后续的命令均需要在站点目录下（即bd3starblog文件夹内）使用Git Bash运行。
此时Hexo框架的本地搭建已经完成了。我们来运行一下看看：
命令行依次输入以下命令
1.3 运行
# 编译文件(生成静态页面) 是 hexo generate 的简写形式
hexo g
# 运行文件 start
hexo s
浏览器中打开http://locakhost:4000或者http://127.0.0.1:4000
可以看到一个网页，说明Hexo博客已经成功在本地运行。
1.4 扩展
新建文章或页面。
hexo new "title"
这里的posts就是添加新的文章，如果是page就是添加新的页面。
默认是添加posts。
然后我们就可以在对应的posts或drafts文件夹里找到我们新建的文件，然后在文件里用Markdown的格式来写作了。
hexo生成博文插入图片问题
修改站点配置文件
_config.yml里的post_asset_folder:这个选项设置为true-
再运行
hexo n "xxxx"来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹- 比如我生成的
hexo n '看完此文-别说你不懂IoC是什么'生成的目录结构如下：
- 比如我生成的
_posts
看完此文-别说你不懂IoC是什么
看完此文-别说你不懂IoC是什么.md
-
最后在
看完此文-别说你不懂IoC是什么.md中想引入图片时，先把图片复制到看完此文-别说你不懂IoC是什么这个文件夹中，然后只需要在看完此文-别说你不懂IoC是什么.md中按照如下语法引入图片：{% asset_img 图片名.jpg 你想输入的替代文字 %}
PS: 这里啰嗦一嘴 如果想用[图片上传失败...(image-e72759-1610527250001)]这种语法来插入图片
可安装插件hexo-renderer-marked解决
可以只用npm install hexo-renderer-marked命令直接安装，之后在_config.yaml中更改配置如下：
post_asset_folder: true
marked:
prependRoot: true
postAsset: true
之后就可以在使用[图片上传失败...(image-916241-1610527250001)]的方式愉快的插入图片了。
2 本地博客发布到Github Pages
2.1，在Github上创建好Github Pages仓库。
(ps: 要自行搜索下(可参考) Github Pages仓库 大概步骤就是 建立 bd3star.github.io 这个仓库 然后空着就可以 最后我们编辑好的html页面及css、js文件都会放到这个仓库里 然后浏览器访问 http://bd3star.github.io 就可以打开该仓库的index.html页面)
2.2，安装发布插件。
在站点目录中运行命令行输入npm install hexo-deployer-git --save
后续博客的修改等等各种功能 都需要安装各种插件。这个对博客的帮助是非常大的。
等待插件安装完成。
2.3，将本地目录与Github关联起来。
命令行输入ssh-keygen -t rsa -C "邮箱地址"， 这里要输入之前注册Github时的邮箱，例如我之前注册用的是 [email protected]，那命令行就输入ssh-keygen -t rsa -C "[email protected]"输入后一直回车。
打开C:\Users\用户名，文件夹内寻找.ssh文件夹
打开Github 点击右上角的头像 Settings 选择SSH and GPG keys
点击New SSH key 将之前复制的内容粘帖到Key的框中。 上面的title 可以随意 点击add 完成添加。
此时回到命令行。 试一下是否跟Github连接成功。命令行输入ssh -T [email protected] ，弹出的内容输入yes，看到出现Hi 说明链接成功。此处这个
2.4 修改Hexo站点的配置文件。
进入博客文件夹，找到_config.yml文件。 这个是博客配置文件，后面的修改会多次用到它
修改一下title跟url等，url修改为https://<用户名>.github.io，例如我的用户名是example的话，就应该输入https://example.github.io
拉到文件最底部，在deploy下面添加一个repo项 一个branch项。填入如下代码：
type: git
repo: [email protected]:/.github.io.git
branch: master
图中也是以用户名为example为例。填写完成后保存即可。
2.5 生成页面上传至Github
命令行输入hexo g，此时Hexo会根据配置文件渲染出一套静态页面。
完成后输入hexo d，此时会将之前渲染出的一系列文件上传至Github。
如果报如下错误
执行如下两行代码. 邮箱和名字可自己定义
git config --global user.email "[email protected]"
git config --global user.name "Your Name"
# 生成静态页面
hexo g
# 将内容部署到网站 是hexo deploy 的简写 也可以简写成 hexo -d
hexo d
# 启动服务器 是hexo server 的缩写
hexo s
Tips： 也可以直接输入hexo g -d直接完成渲染和上传。
上传完成后，打开https://<用户名>.github.io查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息，没有的话清除一下浏览器缓存试试。
# 本地运行 可以用debug方式运行 方便调试报错信息
hexo s --debug
根据我的经验，除了第一次部署的时候，我们会重点用到
hexo init这个命令外，在平时写博客和发布过程中最常用的就是：
hexo n新建文章hexo s启动服务器，在本地查看内容hexo g生成静态页面hexo deploy部署到网站以上四个步骤。
其实以上命令我觉得就足够了，文档里还有很多功能，但我在实际使用的过程中都还没有遇到。
3. 美化篇-- 使用 Next 主题
现在我们的博客网站是灰常的不美观的 可以使用添加一些官方提供的主题 这里推荐使用 Next主题
3.1 下载主题
参考地址
3.1.1) 如果你熟悉 Git， 建议你使用 克隆最新版本 的方式，之后的更新可以通过 git pull 来快速更新， 而不用再次下载压缩包替换。
在终端窗口下，定位到 Hexo 站点目录下(我们的站点目录是 d://blog/bd3star)。使用 Git checkout 代码：
$ cd bd3star
# 注意下面命令的后面 themes/next 指的是将代码 clone 下来放到 themes/next 目录下 以便于我们配置
# 切记不要直接放在站点目录下
$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next
3.1.2) 不熟悉Git 下载 可以从官网点击 releases->下载最新的zip包
将重命名后的文件夹放置在 站点目录下的 themes文件夹下
此时的目录结构如下:
3.2 启用主题
与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件(即站点目录下的_config.yml文件)， 找到 theme 字段，并将其值更改为 next。
theme: next
到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。
3.3 验证主题
首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。 在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。 当命令行输出中提示出：
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。
当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse
现在，你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定，包括个性化以及集成第三方服务。
3.4 主题设定
选择 Scheme
Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：
- Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
- Mist - Muse 的紧凑版本，整洁有序的单栏外观
- Pisces - 双栏 Scheme，小家碧玉似的清新
Scheme 的切换通过更改 主题配置文件(主题配置文件是 站点目录/themes/next/_config.yml)，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。
这里自行试一下 将第一个注释掉 删除第二个注释 使用下后面的几个外观 然后重启下 看下都啥样的
3.5 设置 语言
编辑 站点配置文件及主题的配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：
PS: 这里说明下几个重要的路径 后面将不再重申
站点根路径: `D:\blog\bd3starblog`
站点配置文件路径 `站点根路径\_config.yml`
主题配置文件路径 `站点根路径\themes\next\_config.yml`
# 这里具体是 zh-Hans 还是 zh-CN 要看一下 themes/next/languages 里面有哪个文件
# 另一个需要注意的是 站点配置文件和主题配置文件都有这个language
language: zh-Hans
hexo s --debug重启服务 查看是否生效
这里都变成中文 配置语言完成
3.6 设置头像
头像显示在右侧区域的
编辑 主题配置文件， 修改字段 avatar， 值设置成头像的链接地址。其中，头像的链接地址可以是：
| 地址 | 值 |
|---|---|
| 完整的互联网 URI | http://example.com/avatar.png |
| 站点内的地址 | 将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在） 配置为：avatar: /uploads/avatar.png或者 放置在 source/images/ 目录下 配置为：avatar: /images/avatar.png |
头像设置示例
avatar: http://example.com/avatar.png
3.7 添加分类
修改主题配置文件下的menu分支
可以看到添加成功了 但是 我们新添加的还不能点击打开(点开报错 Cannot GET /tags/)不要慌，不能获取tags，创建一个就OK！
hexo new page 'name' # name分别为tags、categories
这样就创建了pages。
在控制台输入以下命令：
hexo new page 'tags' #创建tags子目录
hexo new page 'categories' #创建categories子目录
在你的网站根目录下面的source文件夹会分别生成tags、categories以及about文件夹。
分别修改这tags和categories文件夹中的index.md文件，新增type属性，如下：
---
title: 标签
date: 2019-01-14 20:56:48
type: "tags" #新添加的内容
---
categories的修改类似。
---
title: 文章分类
date: 2019-01-14 20:53:04
type: "categories" #这部分是新添加的
---
给模板添加分类属性 - 这样在我们下次创建文章的时候hexo n test.md会自动有分类和标签 我们填写内容即可
现在我们打开scarffolds文件夹里的post.md文件，给它的头部加上categories:，这样我们创建的所有新的文章都会自带这个属性，我们只需要往里填分类，就可以自动在网站上形成分类了。
title: {{ title }}
date: {{ date }}
categories:
tags:
当你新建一篇博文的时候(我们写的博文到创建到站点目录/source/_posts下面)，增加上tags和categories属性值，就能在tags和categories界面检索到你的文章了。
注意: 给文章添加标签又两种写法:
- 第一种是类似数组的写法，把标签放在中括号
[]里，用英文逗号隔开 - 第二种写法是用
-短划线列出来
source/_posts/vim-node.md
---
layout: posts
title: vim-node.md
date: 2019-01-14 22:23:43
categories: 学习笔记
tags: [vi, vim]
---
# vim 笔记
## 01 学习 vi 的目的
此处省略一堆
这是 很多 很多 很多 内容
source/_posts/Hello World.md
---
layout: posts
title: Hello World.md
date: 2019-01-14 22:23:43
categories: helloworld
tags: [hello, world]
---
这是 helloworld 文件的内容 后面省略一大堆内容
重启后可以看到如下效果 标签和分类可以点击 也可以统计了 并且左侧也发生了一点变化
3.8 个性化定制
添加fork me on github 在博客的左上角或者右上角
在http://tholman.com/github-corners/或者https://github.com/blog/273-github-ribbons选择合适的样式复制代码到
themes/next/layout/_layout.swig，在下面：
注意：须手动输入style放置自己想要的位置
3.9 动态背景
目前NexT主题最新的是V6+版本，这个版本中可以有4种动态背景：
- canvas-nest
- three_waves
- canvas_lines
- canvas_sphere
这里仅演示 canvas-nest 动态背景
# 切换到主题路径下
$ cd themes/next
# 注意 后面 下载到 主题next路径下的 source/lib/canvas-nest 文件夹里面
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
创建footer.swig文件 在 /source/_data目录下
编辑文件footer.swig
在NexT中_config.yml，取消注释footer此custom_file_path部分。
custom_file_path:
footer: source/_data/footer.swig
# 清理缓存
$ hexo clean
# 编译
$ hexo g
# 启动
$ hexo s
# 部署到 github 上
# $ hexo d
3.10侧边栏社交小图标设置
打开主题配置文件_config.yml，搜索social:, ||之后是在图标库中对应的图标。注意空格就行。
[图片上传失败...(image-760880-1610527250001)]
图标库链接：http://fontawesome.io/icons/
3.11 设置网站图标
默认的网站图标是一个N，当然是需要制定一个图了，在网上找到图后，将其放在/themes/next/source/images里面，然后在主题配置文件中修改下图所示图片位置
实现效果
更多功能
后面还有各种优化 小伙伴们自行各种折腾吧 这里简单说下其他的方向大概都有哪些吧
- 设置首页不显示全文(只显示预览或者只显示概述)
- 首页在预览文章显示图片
- 隐藏页脚 Hexo 及 Next 显示
- 添加RSS
- 实现点击出现桃心效果
- 修改文章内链接文本样式
- 修改文章底部的那个带#号的标签
- 在每篇文章末尾统一添加“本文结束”标记
- 修改作者头像并旋转
- 博文压缩
- 修改``代码块自定义样式
- 主页文章添加阴影效果
- 在网站底部加上访问量
- 添加热度
- 网站底部字数统计
- 添加 README.md 文件
- 设置网站的图标Favicon
- 实现统计功能
- 添加顶部加载条
- 在文章底部增加版权信息
- 修改网页底部的桃心
- 文章加密访问
- 添加jiathis分享/自定义图标按钮
- 博文置顶
- 修改字体大小
- 修改打赏字体不闪动
- 自定义鼠标样式
- 为博客加上萌萌的宠物
- DaoVoice 在线联系
- 点击爆炸效果
- ......