听说每个程序员都要拥有自己的技术博客站！

听说每个程序员都要拥有个自己的站！

小时候想 也许多年以后，当我每天冒出新的胡须，当我脑子里不再是网络游戏，当我逢人就笑，当我脸上找不出半分骄傲，当我开始习惯了指间的香烟，当我足以扛起家中的天，当我讨厌的不再讨厌，埋怨的不再埋怨，回头看 当时那个少年，早已不见，愿你我不负时光，不负自己！

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生成博文插入图片问题

1. 修改站点配置文件_config.yml 里的post_asset_folder:这个选项设置为true

2. 再运行hexo n "xxxx"来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹

   1. 比如我生成的 hexo n '看完此文-别说你不懂IoC是什么' 生成的目录结构如下：

     _posts  
       看完此文-别说你不懂IoC是什么  
       看完此文-别说你不懂IoC是什么.md  

3. 最后在看完此文-别说你不懂IoC是什么.md中想引入图片时，先把图片复制到看完此文-别说你不懂IoC是什么这个文件夹中，然后只需要在看完此文-别说你不懂IoC是什么.md中按照如下语法引入图片：

   {% asset_img 图片名.jpg 你想输入的替代文字 %}

PS: 这里啰嗦一嘴 如果想用![你想输入的替代文字](图片名.jpg)这种语法来插入图片

可安装插件hexo-renderer-marked解决

可以只用npm install hexo-renderer-marked命令直接安装，之后在_config.yaml中更改配置如下：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就可以在使用![](image.jpg)的方式愉快的插入图片了。

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 ! You've successfully authenticated, but GitHub doesnot provide shell access. 说明链接成功。此处这个应该是你Github的用户名。

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-cor...://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:, ||之后是在图标库中对应的图标。注意空格就行。

图标库链接：http://fontawesome.io/icons/

3.11 设置网站图标

默认的网站图标是一个N，当然是需要制定一个图了，在网上找到图后，将其放在/themes/next/source/images里面，然后在主题配置文件中修改下图所示图片位置

实现效果

更多功能

后面还有各种优化 小伙伴们自行各种折腾吧 这里简单说下其他的方向大概都有哪些吧

• 设置首页不显示全文(只显示预览或者只显示概述)
• 首页在预览文章显示图片
• 隐藏页脚 Hexo 及 Next 显示
• 添加RSS
• 实现点击出现桃心效果
• 修改文章内链接文本样式
• 修改文章底部的那个带#号的标签
• 在每篇文章末尾统一添加“本文结束”标记
• 修改作者头像并旋转
• 博文压缩
• 修改``代码块自定义样式
• 主页文章添加阴影效果
• 在网站底部加上访问量
• 添加热度
• 网站底部字数统计
• 添加 README.md 文件
• 设置网站的图标Favicon
• 实现统计功能
• 添加顶部加载条
• 在文章底部增加版权信息
• 修改网页底部的桃心
• 文章加密访问
• 添加jiathis分享/自定义图标按钮
• 博文置顶
• 修改字体大小
• 修改打赏字体不闪动
• 自定义鼠标样式
• 为博客加上萌萌的宠物
• DaoVoice 在线联系
• 点击爆炸效果
• ......