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

前言

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

---

安装git

**关于Git:**Git(读音为/gɪt/。)是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。
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 是时候可能会发生端口占用的情况,上面常用命令中有修改端口号的方法

主题设定 关于主题设置 个人推荐参照官方文档,一下内容多为图片无法Copy

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。

Github注册

• 点击登录

• 点击注册

新建仓库

**注意:**新建仓库名必须是 yourName(你的用户名).github.io

yourName即你github用户名.

仓库建造完成之后开启下一步

配置SSH key

在git Bash输入:

如果提示：No such file or directory 说明你是第一次使用git

测试是否成功

在站点配置文件最后添加你的仓库地址!

保存!

最后部署本地站点到github

在生成以及部署之前，需要安装一个扩展：

npm install hexo-deployer-git --save	

清除生成的静态网页缓存数据

生成文章对应的静态页面

hexo g

部署本地站点到github命令

hexo deploy

中文乱码之解决方案: 使用自己编辑器打开或者保存的时候选择UTF-8格式即可解决

我用的编辑器UltraEdit

没有编辑器使用txt给是的记事本打开也能更改

点击查看MyBlog我的博客