用Hexo搭建博客
一、概述
本篇将介绍使用Hexo框架和github pages来搭建简单的博客,主要涉及环境搭建、github空间创建、主题运用(新浪微博秀、多说评论,About的完成)等,其实这也就是个人博客最主要,最核心的组件的。我的github博客为jiyiren.github.io,我就以我的博客为例介绍。
二、步骤
1、配置Hexo环境(Windows)
- Hexo官方主页
- Hexo官方环境安装介绍
其实主要分三步:
(1)git工具的安装
- git官网
- git官网下载
- 安装后通常用到的git bash。你可以同过电脑的开始菜单里找到git bash,或者通过桌面,但通常有一种方便的是在文件夹里右击就会有git bash的选项的(这个的好处就是自动将工作目录切换到你所在文件夹)
- 测试git环境成功,打开git bash输入git –version,出现版本号就行。
(2)Node.js环境的安装
- Node.js官网
- Node.js官网下载
根据自己电脑位数选择。 - 下载完后双击安装就行。
- 测试nodejs环境成功,还是打开git bash,输入node -v,输出版本号就行。
- 如果没有出现版本号,请将nodejs的安装目录加入电脑环境变量。
(3)Hexo环境的安装
经过上面的两步,这一步就十分的轻松了,依旧打开git bash输入安装命令就行:
* 官网安装命令
* 通常下面的这句就行了:
$ npm install -g hexo
- 但是经过我的测试,不管输入什么安装的命令都是一直等待状态,搜索网上原来是安装源出的问题,我是用下面的这个方法解决的:
更改npm源命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
详细地址:https://npm.taobao.org/
* 现在再用git bash 用安装命令试试,就可以安装成功了,有时安装第一行出现fault,没关系的。
* 测试在git bash里输入 hexo -v,第一行为版本号就行了。
到此Hexo环境配置完成。
2、在github上创建自己唯一的项目空间
这一步骤不多说,只介绍注意点:
(1)、注册
注册时的账号邮箱尽量是微软,谷歌等国外大公司邮箱,国内的邮箱通常收不到消息。
(2)、项目创建
创建项目是的项目名称必须是 UserName.github.io 前面的UserName是你github的用户名,后面的.github.io是一定的,不变的,也就是每个用户只能建立一个这样的仓库的。
3、本地测试部署
目的:把本地当服务器运行项目
(1)、初始化Hexo项目
首先创建一个文件夹,然后在这个文件夹里右击—选择git bash,然后执行如下命令:
hexo init //自动创建所需文件
npm install hexo-server --save//安装server命令工具
(2)、运行本地测试
在新建的文件夹内,右击git bash,输入如下命令,访问localhost:4000,效果如图。
hexo server
4、首次远程测试部署
目的:把项目部署到github的项目里
(1)、网站配置文件配置
文件夹里有_config.yml文件,这个是配置整个网站的配置文件,下面会有主题中的_config.yml,那个只是配置具体文章和显示的配置文件,不要搞混了。用编辑器打开,找到最后,该为如下样式(请把两个jiyiren换为你的github名称就行了):
deploy:
type: git
repository: https://github.com/jiyiren/jiyiren.github.io.git
branch: master
(2)、生成部署
输入下面两个命令即可,它会自动部署到github上,成功后就可以访问UserName.github.io看到效果了。
hexo g
hexo d
5、创建第一个测试博客并部署运行
(1)创建博客
创建博客通常在sources目录下的_posts目录下,新建.md的后缀名就可以直接写了。
(2)举例说明
假如新建名为helloeveryone.md文件,文件内容如下,然后保存,回到主目录,git bash,然后hexo server,浏览器输入localhost:4000,看看有哪些变化吧。
title: HelloEveryone
date: 2015-07-23 21:45:40
categories:
- Begin
- Hexo
tags:
- Hexo
---
这是主体部分
6、整体博客配置介绍
_config.yml的配置
博客主_config.yml配置:我是初学者,可能写的不好,所以就大家推荐看zippera博客我就是照着这个学会一点点的。
7、运用Jacman主题(更多主题)
(1)介绍
该主题由我介绍肯定没有该主题制作者讲的明白了,请看作者博客介绍吧:Jacman主题详细介绍
(2)内容
里面包括了新浪微博秀,添加多说评论,添加About等配置,我认为这个是一个博客的所有基本功能了,能满足大部分人建立博客的需求。