教你半小时搭建Hexo-hueman主题博客

没错，半小时入门，能搭起来网站，然后后期修改等一共预计整体耗时2~5天。
采用HEXO搭建个人博客，配合其中的hueman主题，根据个人需要进行修改，整体都托管在github上。在万网申请一个域名，来解析对应的github，就可以访问啦~

先上自己的效果图~我的博客

整体流程

一、申请github账号，本机电脑安装git，node.js
二、通过hexo创建博客网站
三、下载hexo中的hueman主题
四、hueman主题基本修改+域名解析
五、开始写第一个博客
六、博客menu菜单栏、侧边展开定制
七、字数统计、访问量统计、评论系统 百度和谷歌收录SEO

一、申请github账号，本机电脑安装git.bash，node.js

1、github申请，注册等等不再赘述，有github账户后，创建一个仓库repository,仓库名必须和你的github用户名一致，操作如下图。
repository的作用是，将你的hexo博客部署在github上，由github托管你的博客载体，后期维护只需要添加内容即可，不需要另外申请服务器来存你的博客。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7XdjAGEZ-1576073094252)(https://ftp.bmp.ovh/imgs/2019/12/4683584a43a4c460.png)]
在本机（windows）安装git.bash和node：官网下载安装包，并添加到系统变量（如果在此之前你有类似webstorm或VS这样的编辑器，应该有node环境）。

二、通过hexo创建博客

安装hexo
hexo是一款开源的博客系统，也是一个制作博客的工具。开源是因为hexo源码可见，你可以随自己的想法来定制修改，另一方面hexo现在集成度很好，很多功能都已经兼容，而且有上百种主题（hueman主题就是其中之一，功能最丰富的就是NexT主题）。
自己先创建一个文件夹，该文件夹用来存hexo和以后你的博客，在cmd或者Git中进入到你的文件夹，执行：
npm install -g hexo
通过npm安装并生成（generate）hexo，初始化hexo init再通过以下命令即可在浏览器中打开博客：
hexo c（或者全写 hexo clean，先对hexo清理）
hexo g（或者全写hexo generater，生成hexo网站，相当于平时所用的build或debug）
hexo s（即hexo serve，开启服务）
此时在浏览器中输入localhost:4000 即可查看。
当你在浏览器里看到网站时，不要悲伤不要心急，忧虑的日子总会过去，因为到这里我们已经完成了第0步，如果加上安装node那些，这里已经由半小时了吧哈哈哈。后面还要，，，放张图，你懂我的意思吧

##三、下载hexo中的hueman主题
博客换成hueman主题
hueman主题是hexo上百种主题的一种，可以挑你喜欢的风格，不同风格对应的功能也不一样，很多要后期自己配置，此处放hexo各种主题备选
很多博主都选用了NexT主题，功能很强大，不过风格我不大喜欢，看到一位小姐姐visugar和一位帅小哥的博客时眼前一亮，简单清晰，想找的内容第一眼就能看到，就它hueman了！
在你创建的文件夹（即根目录）下，从hexo的github上git下载hueman主题，以下指令会自动下载到你的themes文件夹中，注意别整错位置了。
git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman
在根目录下的_config.yml文件中修改theme，默认是landscape，就是你第一次打开的主题。修改为：
theme: hueman
修改完，浏览器里就直接变了？？年轻！先保存，然后：
hexo c
hexo g
hexo s
再次刷新浏览器，才能看到新主题。是的，现在我们完成了第1步。

四、hueman主题基本修改+域名解析

1、hueman修改logo、副标题和网站icon等

• logo：对应那个“hueman”图片，图片位置\myblog（根目录，你创建的那个）\themes\hueman\source\css\images\logo-header.png 替换文件名
• 副标题（subtitle）: Do what u love, love what u do：\myblog_config.yml 在config文件中找到相应位置，添加内容，另外注意：冒号后面有一个空格，否则会报错
• 网站icon： 打开网址时浏览器标题栏里的小图标\themes\hueman\source\css\images，icon文件添加到这个文件夹中，并在hueman的config文件中找到这一行favicon: css/images/favicon.ico # path to favicon，附两个生成icon的网址，很好用:生成icon和icon库
• title：打开网址时浏览器标题栏里的内容 \myblog_config.yml，就在开头很好找。

域名解析
这里就要用到最开始说的那一步了–github，截至目前，你的网站已经可以在本地运行，并且作了基本修改，那么下一个就是把这个网站放到网上，别人可以通过浏览器上网访问你的博客。
**[原理图]**是这样的： （1）别人在浏览器里输入网址(域名，需要购买，1块钱！！)–>（2）浏览器解析这个域名对应到服务器A处–>（3）A服务器将存好的页面展示出来，OK √
现在（3）中的页面内容已经有了初始化,本地服务器hexo也有了，但是不能联网，所以将hexo托管到github，由github充当服务器A的角色，在域名中解析你的github的ip地址。
现在要做的事：(a)github创建仓库4o4NotFoundd.github.io（见一，用你自己的github用户名）–>(b)本地hexo部署到github–>©购买域名,添加解析–>(d)调试结果

• （a）创建仓库,ssh验证
  在本地git.bash中：
  git config --global user.name "你的用户名，我的是4o4NotFoundd"
git config --global user.email "注册时使用的邮箱"
  生成ssh（ssh是一种通信方式，让你的本地git和github正常通信，能上传到github）
  ssh-keygen -t rsa -C "你的邮箱"这一步会在你的电脑上生成一个带“pub”字样的公钥和一个私钥，把公钥复制添加到你仓库（Setting那里）的ssh key中。
  验证：ssh -T git@github.com

• （b）本地hexo部署到github
  根目录下的congfig文件中加上：
  deploy: type: git repo: git@github.com:4o4NotFoundd/4o4NotFoundd.github.io.git branch: master #使用git@方式，每次从hexo向github部署的时候不用重复输入密码
  [注意：]一定要使用git@，别用http协议的，不然每次部署时输入username和password能气死，来自http用户的血泪教训。
  config配置完了，记得操作：
  hexo c 清理
  hexo g 如果有报错，修改后继续hexo c, hexo g
  hexo d此处使用hexo deploy(部署，提交到github)

• （c）购买域名,在域名中添加解析
  到（b）这里，在浏览器里输入https://你的用户名.github.io已经可以看到网站了，但是，这个网址不大好看啊，自己申请一个简单好记的域名岂不美滋滋？
  于是，在万网找到"域名优惠”字样，发现了新大陆，一块钱域名，不亏了吧，其他9元，19都有，看个人。
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hE0zuocO-1576073094254)(https://ftp.bmp.ovh/imgs/2019/12/877e5ab5b74ef65f.png)]
  进入到控制台，添加解析如下：
  
  红圈里的是github的解析，上面两个是添加到百度站点（添加之后百度就会爬你的网页，别人搜东西就会把你的推荐给人家，不然别人一直看不到你的博客，具体搜SEO）
  github的记录值哪来的？ 在你的本机ping https://4o4NotFoundd.github.io 就出来了，这个ip就是“服务器A”的ip。
  对了，在购买域名的时候还有身份认证，有一个快捷的方法，用淘宝或支付宝这样的认证很快，不然你得几个工作日。

• （d）不出意外，当你在浏览器里输入域名，就能看到你的网站了！！！开不开心？？这是第2步!!!

五、开始写第一个博客

两种方法：hexo-admin 和 自选编辑器（我用的webstorm，sublime text3也可以）,两种都是编辑markdown（.md）格式的文档。
（1）hexo-admin使用过程：
npm install --save hexo-admin
hexo s
在浏览器里输入localhost:4000/admin进入到编辑页面，对新手友好一些。
（2）自己用编辑器写（推荐）
主要是写.md文件，hexo会把.md文件转成html页面，博主只需要关注内容就好，不用太关心页面布局。
在/myblog/source/_posts文件夹下的md文件会最终展示在博客上，，所以可以直接在里面新建filename.md文件来测试，格式如下
title: Vue.js之vuex入门
author: He Zhaoxiang
id: learn-vuex
tags:
- Vuex
categories:
- web前端
- Vue学习
date: 2019-12-04 19:11:30
---
虚线一下是正文
![](https://图片链接.png)

## 一、这是一级目录

• id是在链接里展示的内容
• tags是文章的标签，在侧边栏能展示
• categories 是menu菜单栏，分别是一级菜单“web前端”，二级下拉菜单“vue学习”
• 插入图片的格式就是上面那样，试一次就知道了。
  最后，hexo c， heox g -d部署到github，就成了~ 哈哈哈第3步get~

有了以上三步，完全可以写博客了，那为什么还有下面4,5,6。。。步呢，当然是做的更好啦~
##六、博客menu菜单栏、侧边展开定制
1、menu菜单栏增加内容
最方便的方式是通过category添加，在写.md的时候就自己确定了在哪个分类下，比较方便。所以，用好上面我给的模板，剩下的就是你自己的内容了。
在category中不同一级菜单的顺序，是按字母和拼音的先后来的，不是依次向右排，也没有自己定制位置的方法，所以最好先自己规划好一级分类。
侧边栏在hueman的config文件中是widgets，展示的内容自己选吧，相应的汉语意思在/hueman/languages/zh-CN.yml中
这里是我设置情况：

七、字数统计、访问量统计、评论系统 百度和谷歌收录SEO

1、字数统计
在根目录下安装hexo-wordcount：
npm install --save hexo-wordcount
config中counter选择true，没错，就是这么简单，但是自己捣鼓就很费时间，多数博客都是基于NexT主题改的，hueman主题的博客比较少。
2、访问量统计
使用不蒜子,参考这位小哥需要一提的是小哥给的代码失效了，进入不蒜子那里直接获得最新代码，就两行代码，引用一下不蒜子的js就可以。
3、评论系统,百度收录SEO
评论使用来必力，百度收录也是参照这位小姐姐，需要“科学上网”，如果不能“科学上网”，那就得花些时间使用valine方法了。

到此，第四步finish！

后续可以改的东西还很多，有很大的可定制性，先到这里，有问题可以Email我或者留言，看到会及时回复滴~

欢迎经常来玩哦~