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

前言

每当看到别人精美的我的博客时，不知你是否有一点点的羡慕。别急，如今我就来手把手教你搭建本身的我的博客。
在技术日趋成熟的今天，有着不少种快速生成博客的框架:Hexo,Jekyll,Wordpress等等。今天咱们就用Hexo来带着你们完成本身的博客

---

什么是Hexo?

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

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

1.安装node.js

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

2.安装git环境

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

3.注册github

github就不用说了吧，它是一个面向开源及私有软件项目的托管平台。几乎全部的程序员都据说过它的大名。就正常注册一个帐号就行了。
注册号之后首先给咱们的帐号添加本机的SSH，具体方法及缘由在这篇文章已经有了详细说明，而且方法也很简单

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

环境都准备好后，咱们就能够开始安装博客了:
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路径添加到分号后面。

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

这时候就要用到了咱们的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/来进入你的博客啦
大功告成！！

4、一气呵成：详细了解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格式检测网站去检测一下格式是否正确:传送门。

5、结语

完成上面的操做,你就已经一只脚踏进了hexo的大门,这时的你确定还有不少疑问,好比博客的头像怎么更换，博客的主题怎么配置等等等等。这里先留下一个悬念,有兴趣的同窗能够先行查询一些资料^_^

---

本文做者： catalinaLi
本文连接： http://catalinali.top/2017/fi...版权声明： 原创文章，有问题请评论中留言。非商业转载请注明做者及出处。