Github部署+Hexo搭建免费博客 next主题美化

前言

工作学习中难免会遇到一些问题,有些问题比较复杂,第一遇到了百度许久,第二次遇到了还是要百度许久!想想
倒不如遇到问题记下来写在博客上!以后好查阅.在CSDN上面看到hexo+github可以免费搭建博客,于是就自己
动手搭建了一下,写下来跟大家分享下!本机默认windows系统下

准备工作

安装git

**关于Git:**Git(读音为/gɪt/。)是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。 [1] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
- Git下载地址：https://git-scm.com/downloads
- 安装步骤:默认下一步

这里选择如图选项，会使得Git安装程序在系统PATH中加入Git的相关路径，这样你可以在CMD界面下调用Git，不用打开Git Bash
- 安装完成查看版本

  git --version

- 安装完成可以使用鼠标右键点击空白区域,调用 Git Bash

关于Hexo

Hexo是高效的静态站点生成框架，基于Node.js。通过 Hexo 你可以轻松地使用 Markdown 编写文章，除了 Markdown 本身的语法之外，还可以使用 Hexo 提供的标签插件来快速的插入特定形式的内容，而且相对于其他框架，Hexo在速度上也有很大优势

搭建Node.js环境

由于Hexo框架基于Node.js,使用前先搭建Node.js环境
下载地址：http://nodejs.cn/download (说明：LTS为长期支持版，Current为最新版)
安装步骤:默认下一步
查看版本:
命令 node -V

安装Hexo

在你的任意盘符下,创建一个文件夹,在命令窗口通过cd命令到该目录
执行安装命令:npm i -g hexo
安装完成,查看版本
执行初始化命令: hexo init
生成如下文件
关于生成文件

node_modules：是依赖包
public：存放的是生成的页面
scaffolds：命令生成文章等的模板
source：用命令创建的各种文章
themes：主题
_config.yml：整个博客的配置
db.json：source解析所得到的
package.json：项目所需模块项目的配置信息
Hexo常用命令:有些会经常用到

npm install hexo -g #安装
npm update hexo -g #更新
hexo init #初始化

hexo n “name” #新建文章
hexo g #生成静态网页
hexo p #发表草稿。
hexo s #启动服务
hexo d #部署网站参数：-g 部署之前先生成静态文件。

npm install hexo-server –save #安装服务
hexo s #启动服务
hexo server -p 5000 #更改端口
hexo s -s #静态模式
hexo s -i 192.168.1.1 #自定义ip
hexo clean #清除缓存

hexo d -g #部署
hexo g -d
在Git Bash 输入命令 hexo s 启动本地预览,默认端口号是4000
在浏览器中输入 localhost:4000,打开本地预览,初始化效果图:

NexT主题

第一步的初始化工作部分已经完成!
接下来,开始第二部
Hexo上面有很多主题可供选择,但是NexT主题在Github上面Star最高!本文已NexT主题为例,进行主题建设.
当然这一部分比较繁琐,想要搭建出自己喜欢的效果,还是要多下些功夫

安装NexT主题

在你创建的文件夹下,右键调用 Git Bash,我的文件夹叫MyBlog

下载最新版主题:输入命令:

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

可以浏览官方文档: http://theme-next.iissnan.com/ 下载稳定版和进行其他相应操作
安装成功

启用NexT主题

关于配置文件

- 我的站点配置文件

- 对应的themes下next下的就是主题配置文件

启用主题

本地预览Next主题

窗口终端中输入hexo s启动服务浏览器输入 localhost:4000 是时候可能会发生端口占用的情况,上面常用命令中有修改端口号的方法

主题设定

NexT默认提供了四种,就是两种导航栏在侧栏,两种导航栏在顶部!
依据个人喜好设定:

设置语言

- 值得注意的是在站点和主题配置文件下!输入中文乱码的请问题可以通过一下方式解决:打开文件时选择文件输出格式,编辑器中保存即可!

- 也有人说,通过txt打开另存为的方式,也可以设置!没试过,我有最优方案,没必要试用其他的.

设置导航栏

菜单里面的页面可以根据个人需求进行模仿添加!
不过需要在NexT主题目录下的 languages/{language}.yml进行添加才能显示你所需要的Language

新建页面

新建页面代码如下:新建的页面都存在的站点目录下Source文件夹中

设置代码高亮

设置侧栏

设置侧栏,如图可以根据你的需求进行显示!

设置头像

设置侧边社交链接

开启友情链接

关注微信公众号

开启打赏功能

公益

背景动画

官方文档估计是跟不上更新了,我用的最新的背景动画有四种

设置阅读全文

更改字体

文章显示摘录

文章宽度

编写文章方式

文章默认存放在站点目录下的source/posts中
comments:false 表示关闭第三方评论服务;
注意空格

集成第三方服务

在追求完美的道路上,我们永不止步

百度统计

注册百度统计,获取百度统计ID

不蒜子统计

本地搜索

开启字数统计,阅读时长

你还可以根据hexo内置标签进行一下个性化操作!不过我觉得没必要了,毕竟这个只是工具拿来用了,效果还可以就行了!没必要搞的花费太多时间深入研究!毕竟人家Hexo就是要你用的时候能够简单高效!

Github

关于Github

gitHub是一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名gitHub。
gitHub于2008年4月10日正式上线，除了git代码仓库托管及基本的 Web管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。目前，其注册用户已经超过350万，托管版本数量也是非常之多，其中不乏知名开源项目 Ruby on Rails、jQuery、python 等。
2018年6月4日，微软宣布，通过75亿美元的股票交易收购代码托管平台GitHub。