教你半小时搭建博客网站-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托管你的博客载体,后期维护只需要添加内容即可,不需要另外申请服务器来存你的博客。


在本机(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的网址,很好用:生成iconicon库
  • 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–>(c)购买域名,添加解析–>(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都有,看个人。

    进入到控制台,添加解析如下:

    红圈里的是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
评论使用来必力,百度收录也是参照这位小姐姐,需要“科学上网”,如果不能“科学上网(提示一下,现在蓝deng可以用,灯光的灯,github找找吧哈哈哈)”,那就得花些时间使用valine方法了。

到此,第四步finish!

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

欢迎经常来玩哦~