利用Hexo来快速搭建博客系统

时间: 2017-12-22阅读: 280标签: Hexo

Hexo是什么

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。


Hexo安装

要使用Hexo,需要在你的系统中支持Nodejs以及Git。  

Node.js下载:https://nodejs.org/en/
Git下载:http://git-scm.com/download/

接下来只需要使用 npm 即可完成 Hexo 的安装:

npm install hexo-cli -g
hexo init blog
cd blog
npm install #安装依赖
hexo generate 
hexo server #可以在http://localhost:4000/ 查看

注意:Hexo 3.0 把服务器独立成了个别模块,您必须先安装 hexo-server 才能使用hexo服务器命令。如下:

npm install hexo-server --save


Hexo常用命令

hexo generate  # 生成静态文件,会在当前目录下生成一个新的叫做public的文件夹

hexo deploy # 将网站部署到服务器上(比如github, heroku等平台),在部署之前需要修改文件_config.yml 中修改参数,例如:

deploy:
  type: git

然后执行命令: 

npm install hexo-deployer-git --save

hexo generate --deploy  # (或hexo deploy --generate) 让 Hexo 在生成完毕后自动部署网站

hexo server -s # 通常用于生产环境,启动web服务用于博客的预览

hexo server -p 5000 # 更改端口,或是在执行时遇到了 EADDRINUSE 错误,可以在执行时使用 -p 选项指定其他端口

hexo server -i 192.168.1.1 # 服务器默认运行在 0.0.0.0,您可以覆盖默认的 IP 设置

hexo new "postName" #  新建文章  

hexo new page "pageName" #  新建页面

hexo help # 查看帮助 

 hexo version #查看Hexo的版本


Hexo常用简写

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy


Hexo报错总结

1.ERROR Deployer not found: git 或者 ERROR Deployer not found: github,解决如下:

npm install hexo-deployer-git --save

2.ERROR Process failed: layout/.DS_Store , 那么进入主题里面layout和_partial目录下,使用删除命令:

rm-rf.DS_Store

3.ERROR Plugin load failed: hexo-server,解决方法,执行命令:

sudo npm install hexo-server

4.执行命令hexo server,提示:Usage: hexo ....原因: 我认为是没有生成本地服务解决方法,执行命令:

npm install hexo-server --save

5.点击http://0.0.0.0:4000,正常情况下应该是最原始的画面,如果出现:白板和Cannot GET / 几个字 原因:由于2.6以后就更新了,我们需要手动配置些东西后在重新生成:

npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save


Hexo主题设置

Hexo 主题设置需要您在 themes 文件夹下,新增一个任意名称的文件夹,并修改 _config.yml 内的 theme设定,即可切换主题,安装yilia为列:

hexo clean
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

启用主题 

cd themes/yilia
git pull
hexo g # 生成
hexo s # 启动web服务器

主题推荐

Cover- A chic theme with facebook-like cover photo

Oishi- A white theme based on Landscape plus and Writing.

Sidebar- Another theme based on Light with a simple sidebar

TKL- A responsive design theme for Hexo. 一个设计优雅的响应式主题

Tinnypp- A clean, simple theme based on Tinny

Writing- A small and simple hexo theme based on Light

Yilia- Responsive and simple style 优雅简洁响应式主题,我用得就是这个。

Pacman voidy- A theme with dynamic tagcloud and dynamic snow


Hexo模版

模板决定了网站内容的呈现方式,每个主题至少都应包含一个 index 模板,以下是各页面相对应的模板名称:

模板用途回调
index首页
post文章index
page分页index
archive归档index
category分类归档archive
tag标签归档archive

每个模板都默认使用 layout 布局,您可在 front-matter 指定其他布局,或是设为 false 来关闭布局功能,您甚至可在布局中再使用其他布局来建立嵌套布局。


其他Hexo使用技巧

1.绑定独立域名

在你的域名注册提供商那里配置DNS解析,获取GitHub的IP地址点击,进入source目录下,添加CNAME文件

cd source/
touch CNAME
vim CNAME # 输入你的域名
git add CNAME
git commit -m "add CNAME"

2.添加百度站内搜索

点击其它工具->站内检索->现在使用->新建搜索引擎->查看代码,将代码里的id值复制,打开/d/hexo/themes/jacman/_config.xml,配置成如下即可。

baidu_search:     ## http://zn.baidu.com/
  enable: true
  id: "123456" ##"123456"  for your baidu search id
  site: http://zhannei.baidu.com/cse/search #your can change to your site instead of the default

3.添加插件

如添加sitemap和feed插件 
npm install hexo-generator-feed
npm install hexo-generator-sitemap

修改_config.yml,增加以下内容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
#sitemap
sitemap:
  path: sitemap.xml

4.添加404页面

直接在根目录下创建自己的404.html或者404.md就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。