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

front-pic-1

前言

每当看到别人精美的个人博客时，不知你是否有一点点的羡慕。别急，现在我就来手把手教你搭建自己的个人博客。
在技术日趋成熟的今天，有着很多种快速生成博客的框架: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

然后回车，如图：

buildHexo_1
我在执行这个的时候出现了下图的警告,但是并不影响我们的安装，不用理会它。
buildHexo_5
如果没有输出err之类的错误并且目录下多了一个node_modules文件夹，那这步就算成功了
buildHexo_6

2.执行hexo命令
依次执行以下3个命令:

    hexo init  --初始化hexo环境,这时会在目录下自动生成hexo的文件
    npm install --安装npm依赖包
    hexo generate --生成静态页面
    hexo server --生成本地服务

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

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

buildHexo_7

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

buildHexo_8

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

1.找到并进入根目录下node_modules文件夹,这时我们发现里面有很多文件夹，找到hexo文件夹,这里我们可以看到一个bin文件夹，进到bin目录下，复制当前路径:
buildHexo_9
2.右键我的电脑-->高级系统设置-->高级-->环境变量。在系统变量那栏找到Path并双击这行,在弹出的编辑系统变量这栏的变量值的最后先输入一个分号；表示与前一个变量隔开,然后再把刚才复制的hexo路径添加到分号后面。
buildHexo_10

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

这时候就要用到了我们的github：
1.创建远程仓库
新建一个跟自己账号名字一样的空仓库，如图：
buildHexo_2
buildHexo_3
2.连接本地与远程github仓库
打开本地博客的文件夹，打开_config.yml进行编辑
buildHexo_4
翻到文件最下方，将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
本文链接： http://catalinali.top/2017/fi...
版权声明：原创文章，有问题请评论中留言。非商业转载请注明作者及出处。