手把手教你使用hexo搭建属于你的个人博客

前言

每当看到别人精美的个人博客时，不知你是否有一点点的羡慕。别急，现在我就来手把手教你搭建自己的个人博客。

在技术日趋成熟的今天，有着很多种快速生成博客的框架:Hexo,Jekyll,Wordpress等等。今天我们就用Hexo来带着大家完成自己的博客

---

什么是Hexo?

Hexo官网中说是这么描述的：A fast, simple & powerful blog framework,即:一个快速、简单且强大的博客快速生产工具。它的简单体现在你完全有可能在30分钟内就生成属于你的个人博客。而它的强大体现在你对细节的调整上完全有可能花上一天的时间。

一、巧妇难为无米之炊:准备搭建环境

1.安装node.js

Node.js 的实质是一个JavaScript运行环境,这里我们主要使用它来生成我们博客的静态页面。从官网下载最新的安装包进行默认安装就好。安装过程略。

2.安装git环境

git是最流行的分布式版本控制系统，我们使用它主要是与github进行交互。安装git使用默认选项安装即可，安装过程略。如果你还对git不是特别熟悉，推荐一个学习git的教程:传送门

3.注册github

github就不用说了吧，它是一个面向开源及私有软件项目的托管平台。几乎所有的程序员都听说过它的大名。就正常注册一个账号就好了。

注册号以后首先给我们的账号添加本机的SSH，具体方法及原因在这篇文章已经有了详细说明，并且方法也很简单

二、上正菜：开始搭建博客

环境都准备好后，我们就可以开始安装博客了:

1.创建文件夹

在本地新建一个文件夹用于存放我们的博客，并且右键菜单选择Git Bash Here,然后在Git Bash里输入：

npm install hexo

然后回车，如图：

我在执行这个的时候出现了下图的警告,但是并不影响我们的安装，不用理会它。

如果没有输出err之类的错误并且目录下多了一个node_modules文件夹，那这步就算成功了

2.执行hexo命令

依次执行以下3个命令:

hexo init  --初始化hexo环境,这时会在目录下自动生成hexo的文件

npm install --安装npm依赖包

hexo generate --生成静态页面

hexo server --生成本地服务

好了，这时候我们打开浏览器输入http://localhost:4000看看可不可以访问。如果默认的hexo博客出现，那么恭喜你，你已经搭建好了自己的博客，接下来我们就要将它发布到网上。

3.可能遇到的报错:

• 日志报错

这个报错一般是由于在命令执行中用户使用Ctrl+C强制中断了命令的执行，导致log中记录已经执行，但实际没有执行完成。解决办法:删除图中路径下的.log文件

• 在非空文件夹下执行hexo init命令

hexo init这个命令是自动生成hexo目录时使用的命令，使用他有一个前提是必须是空文件夹，如果出现了这个错误，把所有文件删除就行。如果还是报错，别着急，看看是不是有隐藏文件没有删除。

• hexo命令未找到

有的同学可能会出现在执行hexo命令时出现conmand not found的提示，这是由于hexo没有配到环境变量中，只需要手动配置一下就好了，这里演示一下win7的配置方式，其他系统也差不多，自行百度就好:

1.找到并进入根目录下node_modules文件夹,这时我们发现里面有很多文件夹，找到hexo文件夹,这里我们可以看到一个bin文件夹，进到bin目录下，复制当前路径:

2.右键我的电脑–>高级系统设置–>高级–>环境变量。在系统变量那栏找到Path并双击这行,在弹出的编辑系统变量这栏的变量值的最后先输入一个分号；表示与前一个变量隔开,然后再把刚才复制的hexo路径添加到分号后面。

三、万事具备，只欠东风：将本地博客发布到网络上

这时候就要用到了我们的github：

1.创建远程仓库

新建一个跟自己账号名字一样的空仓库，如图：

2.连接本地与远程github仓库

打开本地博客的文件夹，打开**_config.yml**进行编辑

翻到文件最下方，将deploy的选项改成以下的形式，并将yournmae修改为你自己的名称：

deploy:

type: git

repo: git@github.com:yourname/yourname.github.io.git

branch: master

然后在GitBash中执行

npm install hexo-deployer-git --save

这时候，我们再最后执行一句

hexo deploy

就可以在浏览器中访问http://yourname.github.io/来进入你的博客啦

大功告成！！

四、一鼓作气：详细了解Hexo

博客已经可以访问了，但我相信大家对Hexo还是一头雾水，现在我们来深入学习一下Hexo:

1.Hexo的基本命令

hexo generate --生成个人博客所需的静态页面

hexo server --本地预览

hexo deploy --部署我们的个人博客

hexo clean --清除缓存

这几个命令都能用首字母缩写完成

hexo g --generate

hexo s --server

hexo d --deploy

2.写文章的需要用到下面的命令

hexo new "postName" --新建文章

hexo new page "pageName" --新建页面

编辑我们的博客的时候可以使用

hexo s --debug

然后访问http://localhost:4000/来进入调试模式，更改了配置或文章后随时刷新页面来查看效果。

Hexo的文章支持的是MarkDown语法。网上有很多资料，这里提供一个传送门。

3.我们每次部署的步骤是

hexo clean

hexo generate

hexo deploy

后两步可以简写为hexo g -d，另外我们也可以使用hexo help来查看hexo命令帮助

4.目录结构说明

hexo init 出来的文件各自的作用如下:

`-----------

|  +-- .deploy      #hexo deploy生成的文件

|  +-- node_modules  #npm组件

|  +-- public        #生成的静态网页文件

|  +--scaffolds      #模板

|  +-- source        #博客正文和其他源文件

|  |  +-- _posts    #我们自己写的文章以md结尾

|  +-- themes        #主题

|  +-- _config.yml  #全局配置文件

|  `-- package.json  #定义了hexo所需要的各种模块

5.配置文件

搭建好博客后，我们的各种细节配置基本都是在配置文件中完成的，Hexo中的配置文件一共分2中，在文件夹跟目录下的_config.yml叫做站点配置文件,同样的文件名我们可以在theme文件夹下的主题文件夹里面也找的。而主题文件夹下的_config.yml叫做主题配置文件。这里说明一下站点配置文件：

# Hexo Configuration

## Docs: http://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

# Site #站点信息

title:  #标题

subtitle:  #副标题

description:  #站点描述，给搜索引擎看的

author:  #作者

email:  #电子邮箱

language: zh-CN #语言

# URL #链接格式

url:  #网址

root: / #根目录

permalink: :year/:month/:day/:title/ #文章的链接格式

tag_dir: tags #标签目录

archive_dir: archives #存档目录

category_dir: categories #分类目录

code_dir: downloads/code

permalink_defaults:

# Directory #目录

source_dir: source #源文件目录

public_dir: public #生成的网页文件目录

# Writing #写作

new_post_name: :title.md #新文章标题

default_layout: post #默认的模板，包括 post、page、photo、draft（文章、页面、照片、草稿）

titlecase: false #标题转换成大写

external_link: true #在新选项卡中打开连接

filename_case: 0

render_drafts: false

post_asset_folder: false

relative_link: false

highlight: #语法高亮

enable: true #是否启用

line_number: true #显示行号

tab_replace:

# Category & Tag #分类和标签

default_category: uncategorized #默认分类

category_map:

tag_map:

# Archives

2: 开启分页

1: 禁用分页

0: 全部禁用

archive: 2

category: 2

tag: 2

# Server #本地服务器

port: 4000 #端口号

server_ip: localhost #IP 地址

logger: false

logger_format: dev

# Date / Time format #日期时间格式

date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/

time_format: H:mm:ss

# Pagination #分页

per_page: 10 #每页文章数，设置成 0 禁用分页

pagination_dir: page

# Disqus #Disqus评论，替换为多说

disqus_shortname:

# Extensions #拓展插件

theme: landscape-plus #主题

exclude_generator:

plugins: #插件，例如生成 RSS 和站点地图的

- hexo-generator-feed

- hexo-generator-sitemap

# Deployment #部署，将 lmintlcx 改成用户名

deploy:

type: git

repo: github创库地址.git

branch: master

有时候我们部署了以后自己博客的链接打不开,查看生成的静态文件也没有index.html,或者是各种奇怪的报错。这时候有可能是我们的站点配置文件_config.yml格式出现了问题。这时候不妨去一些YAML格式检测网站去检测一下格式是否正确:传送门。

五、结语

完成上面的操作,你就已经一只脚踏进了hexo的大门,这时的你肯定还有很多疑问,比如博客的头像怎么更换，博客的主题怎么配置等等等等。这里先留下一个悬念,有兴趣的同学可以先行查询一些资料^_

---

本文作者： catalinaLi
版权声明： 原创文章，有问题请评论中留言。非商业转载请注明作者及出处。