安装Node.js并配置Node.js环境

成功界面如下：

安装git并配置git环境

注册Github并新建项目

首页

新建仓库页

参考其他博客的时候，很多博客中都提到

项目名必须是 github账户名.github.io

但经本人测试其实项目名称可以任意选取，如本人的仓库名就是blog，而非destinywang.github.io

设置

进入项目的setting选项卡中

下拉到Github Pages，此时该项目已经被部署，可以通过提供的外网链接去访问。

安装Hexo

Hexo中文网站

Hexo是个快捷，简介且高效的博客框架
让上百个页面在几秒内完成渲染
Hexo支持Github Flavored Markdown的所有功能

在合适的位置创建文件夹

以上操作需要在空文件夹中进行

1
2
3

$ npm install hexo -g             # 安装Hexo
$ hexo -v                         # 检查Hexo是否安装成功
$ hexo init                       # 初始化文件夹

Hexo init

npm install

此命令用于安装所需要的组件

hexo g

首次体验Hexo

hexo s

此命令会在本地开启Hexo的服务器

可以在发布到github之前先在本地进行调试

然后再浏览器中输入localhost:4000/blog/
如果出现如下界面就成功了

将Hexo和Github page联系起来

设置本地git

如果是第一次使用git的话需要设置name和email

$ ssh-keygen -t rsa -C "your email"     # 生成秘钥，路径在~/.ssh下，windows用户的路径为C:\Users\Administrator\.ssh

$ eval "$(ssh-agent -s)"                # 添加秘钥到ssh-agent
$ ssh-add ~/.ssh/id_rsa                 # 添加生成的SSH key到ssh-agent

登录github，进行设置

进入用户的setting页面

在SSH and GPG keys选项卡中添加一个ssh key，并将id_rsa.pub(公钥)的内容复制上去

配置Deployment

为了保证Hexo能够正确的通过Git进行add、commit、pull、push等操作
需要将本地及远程的git仓库信息进行配置

当前站点文件夹的状态：

修改_config.yml文件，将deployment部分相关的内容进行替换

type: 部署类型
repository: 远程仓库路径，即github中的仓库路径
branch: 分支名

新建一篇博客

在终端中执行命令`hexo new post 博客名`

会在source/_posts路径下生成对应的博客文件test.md

安装`hexo-deployer-git`扩展文件

1	$ npm install hexo-deployer-git --save

编辑文章

1	$ vim source/_posts/test.md

打开test.md文件，按照正常的Markdown文件编辑即可

部署

$ hexo d -g
INFO  Start processing
INFO  Files loaded in 640 ms
INFO  Generated: tags/index.html
INFO  Generated: about/index.html
INFO  Generated: 2018/04/01/jvm/index.html
INFO  Generated: 2018/04/01/test/index.html
INFO  Generated: 2018/04/01/hello-world-1/index.html
INFO  Generated: archives/index.html
INFO  Generated: tags/jvm/index.html
INFO  Generated: archives/2018/index.html
INFO  Generated: archives/2018/04/index.html
INFO  Generated: tags/java基础/index.html
INFO  Generated: index.html
INFO  Generated: 2018/04/01/hello-world/index.html
INFO  Generated: 2018/04/01/一-Nginx基本知识/index.html
INFO  Generated: tags/Nginx/index.html
INFO  Generated: images/cc-by-nc-nd.svg
INFO  Generated: images/avatar.gif
INFO  Generated: images/apple-touch-icon-next.png
INFO  Generated: images/cc-by-nc-sa.svg
INFO  Generated: images/algolia_logo.svg
INFO  Generated: images/cc-by-nc.svg
INFO  Generated: images/cc-by-nd.svg
INFO  Generated: images/cc-by-sa.svg
INFO  Generated: images/cc-by.svg
INFO  Generated: images/cc-zero.svg
INFO  Generated: images/favicon-16x16-next.png
INFO  Generated: images/favicon-32x32-next.png
INFO  Generated: images/loading.gif
INFO  Generated: images/logo.svg
INFO  Generated: images/placeholder.gif
INFO  Generated: images/quote-r.svg
INFO  Generated: images/searchicon.png
INFO  Generated: lib/font-awesome/css/font-awesome.css.map
INFO  Generated: images/quote-l.svg
INFO  Generated: lib/font-awesome/HELP-US-OUT.txt
INFO  Generated: images/blog-logo.jpeg
INFO  Generated: lib/font-awesome/fonts/fontawesome-webfont.woff2
INFO  Generated: css/main.css
INFO  Generated: lib/font-awesome/fonts/fontawesome-webfont.woff
INFO  Generated: js/src/affix.js
INFO  Generated: js/src/exturl.js
INFO  Generated: js/src/algolia-search.js
INFO  Generated: js/src/bootstrap.js
INFO  Generated: js/src/love.js
INFO  Generated: js/src/js.cookie.js
INFO  Generated: js/src/post-details.js
INFO  Generated: js/src/motion.js
INFO  Generated: js/src/scrollspy.js
INFO  Generated: js/src/scroll-cookie.js
INFO  Generated: lib/font-awesome/bower.json
INFO  Generated: js/src/utils.js
INFO  Generated: lib/ua-parser-js/dist/ua-parser.min.js
INFO  Generated: lib/velocity/velocity.ui.min.js
INFO  Generated: lib/velocity/velocity.min.js
INFO  Generated: js/src/schemes/pisces.js
INFO  Generated: lib/ua-parser-js/dist/ua-parser.pack.js
INFO  Generated: lib/velocity/velocity.ui.js
INFO  Generated: lib/font-awesome/css/font-awesome.css
INFO  Generated: lib/jquery/index.js
INFO  Generated: lib/font-awesome/css/font-awesome.min.css
INFO  Generated: lib/font-awesome/fonts/fontawesome-webfont.eot
INFO  Generated: lib/velocity/velocity.js
INFO  61 files generated in 1.13 s
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[master 966acc9] Site updated: 2018-04-01 21:18:16
 1 file changed, 1 insertion(+), 1 deletion(-)
To github.com:DestinyWang/blog.git
 + fa066f8...966acc9 HEAD -> master (forced update)
Branch 'master' set up to track remote branch 'master' from 'git@github.com:DestinyWang/blog.git'.
INFO  Deploy done: git

至此，博客已经部署成功，可以去http://用户名.github.io查看。

安装Next

1	$ git clone https://github.com/iissnan/hexo-theme-next themes/next

下载到站点文件夹路径下的themes/next

启用Next主体

在站点目录中，打开配置文件_config.yml，修改theme: next

1
2
3

$ pwd
~/blog
$ vim _config.yml

主题设定

在next主题目录下的_config.yml，修改scheme: Pisces

1
2
3

$ pwd
~/blog
$ vim themes/next/_config.yml

语言设定

Hexo提供了多种语言支持，包括简体中文zh-Hans
在站点根目录下修改配置文件_config.yml中的language为zh-Hans

1
2
3

$ pwd
~/blog
$ vim _config.yml

修改菜单栏

在主题目录下修改配置文件_config.yml中的menu

1
2
3

$ pwd
~/blog
$ vim themes/next/_config.yml

设置菜单项图标

对应字段是menu_icons
同样在主题目录下的_config.yml中修改

格式为item name: icon name，其中item name 与所配置的菜单名字对应，icon name是Font Awesome图标的名字。而 enable可用于控制是否显示图标，你可以设置成 false 来去掉图标。

1
2
3

$ pwd
~/blog
$ vim themes/next/_config.yml

设置侧栏位置

修改主题目录下sidebar的position值

1
2
3

$ pwd
~/blog
$ vim themes/next/_config.yml

设置头像

在站点根目录下载配置文件中新增avatar，值设置为头像的链接地址。地址可以是网络地址，也可以是本地地址（放置在source/images/目录下）

设置文章代码主题

在主题目录下修改配置文件_config.yml，字段highlight_theme，默认值为nomal。可以设置为night

1
2
3

$ pwd
~/blog
$ vim themes/next/_config.yml

添加分类

在站点路径下新建页面categories

$ pwd
~/blog
$ hexo new page categories

# 在 source/categories 目录中修改index.md
vim source/categories/index.md

1 2	# 在主题的 _config.yml 中取消注释: $ vim _config.yml

在要分类的文章中加入 category 属性:

添加标签页面

标签是对博客分类的方式
比如一个系列的博客都是将神经网络，那么就可以给每篇博客加上神经网络的tag

$ pwd
~/blog
$ hexo new page tags
INFO Created: ~/blog/source/tags/index.md

# 在新建的index.md中添加type: "tags"
vim source/tags/index.md

后面只需要在博客的开头中添加tags: [A, B, C]即可

成功后，标签部分的导航栏为

`Aboute Me`

$ pwd
~/blog
$ hexo new page about
INFO Created: ~/blog/source/about/index.md

# 在新建的index.md中添加如下内容
vim source/about/index.md

成功后效果如下所示：

添加github导航条

从这里选择主题

然后将代码复制到themes/next/layout/_layout.swig

1
2
3

$ pwd
~/blog
$ vim themes/next/layout/_layout.swig

成功后的效果如下：

修改内容区域宽度

默认情况

Next 对内容的宽度的设定如下：

700px，当屏幕宽度 < 1600px
900px，当屏幕宽度 >= 1600px
移动设备下，宽度自适应

非`Pisces Scheme`主题修改

1	$ vim source/css_variables/custom.styl

修改内容：

// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

`Pisces Scheme`主题修改

1	$ vim themes\next\source\css\_schemes\Picses\_layout.styl

修改内容：

1
2
3

.header {width: 1150px;}
.container .main-inner {width: 1150px;}
.content-wrap {width: calc(100% - 260px);}

设置首页不显示全文(只显示预览)

打开主题路径下的`_config.yml`

1	$ vim themes/next/_config.yml

修改`auto_excerpt`

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

将enable属性改为true

修改`code`代码块自定义样式

1	$ vim themes/next/source/css/_custom/custom.styl

取消`文章目录`对标题的自动编号

nexT对 markdown 语法的标题

#            一级标题
##            二级标题
###            三级标题
####        四级标题
#####        五级标题
######        六级标题

会默认进行标号分配，这样有可能会打乱文章原有标题

取消方式：

修改主题配置文件

1	$ vim theme/next/_config

将 number 设为 false

结束

至此，博客基本设置OK
但还有很多地方可以继续挖掘

后续会持续更新