Hexo搭建博客

写博客的地方很多,新浪博客,百度空间,博客园,Jekyll,CSDN等等,但页面样式都不是很喜欢,有学长推荐Hexo,感觉很不错,所以决定就用它了。

Hexo是一款非常优秀的博客框架。用它官网上的话说就是快速、简洁和高效。我想它最吸引人的地方就是速度,渲染几百个页面只需要几秒钟的时间。

下面简单讲一下它的搭建过程。

Hexo环境要求

  • Node.js

  • Git

这两个不多说了,安装都比较简单。

安装Hexo

Node和Git都安装好后,首先创建一个文件夹,如Blog,用户存放hexo的配置文件,然后进入Blog里安装Hexo。

执行如下命令安装Hexo

sudo npm install hexo-cli -g

安装 Hexo 完成后,执行下列命令,初始化并安装依赖,Hexo将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

生成静态页面

hexo generate

本地启动预览

hexo server

浏览器输入http://localhost:4000

部署到github

在github上创建名为your_user_name.github.io的仓库,例如我的github的用户名是flyxu,那么创建的仓库名称为flyxu.github.io

编辑博客所在文件夹下的_config.yml文件,翻到最下面,修改deploy如下:

deploy:
  type: git
  repository: git@github.com:flyxu/flyxu.github.io.git
  branch: master

然后执行下面命令安装 hexo-deployer-git

npm install hexo-deployer-git --save

最后部署到github

hexo deploy

然后在浏览器中输入http://flyxu.github.io 就行了,我的github的账户叫flyxu,把这个改成你github的账户名就行了

每次部署的步骤,可按以下三步来进行。

hexo clean

hexo generate  

hexo deploy

clean的作用是清理缓存,有时候作用很大,最好不要舍弃这一步,最后两步可简写为hexo d -g

一些常用命令:

hexo new "postName" #新建文章

hexo new page "pageName" #新建页面

hexo generate #生成静态页面至public目录

hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)

hexo deploy #将.deploy目录部署到GitHub

hexo help # 查看帮助

hexo version #查看Hexo的版本

写文章

hexo new [layout] "postName" #新建文章

其中layout是可选参数,默认值为post。有哪些layout呢,请到scaffolds目录下查看,这些文件名称就是layout名称。当然你可以添加自己的layout,方法就是添加一个文件即可,同时你也可以编辑现有的layout,比如post的layout默认是hexo\scaffolds\post.md

title: { { title } }
date: { { date } }
tags:
---

若要添加categories,以免每次手工输入,只需要修改这个文件添加一行,如下:

title: { { title } }
date: { { date } }
categories:
tags:
---

主题推荐

我使用的主题是jacman,Jacman是一款为Hexo打造的一款扁平化,有着响应式设计的主题。感觉非常不错。

安装指南

  • 从github上克隆
git clone https://github.com/wuchong/jacman.git themes/jacman
  • 启用

修改config.yml配置文件中的theme属性,将其设置为jacman.

  • 更新
cd themes/pacman
git pull

配置指南

Jacman主题提供了丰富的配置属性,配置文件_config.yml位于主题根目录下。配置文件中已经包含了详细的英文注释.

  • menu 默认没有启用 /tags 和 /categories 页面,如果需要启用请在博客目录下的source文件夹中分别建立tags 和 categories文件夹每个文件夹中分别包含一个index.md文件。内容为:
layout: tags (或categories)
title: tags (或categories)
---

因为主题中已经内置了这两个页面的模板,所以他们会被正确的解析出来。使用了这两个标签后,新建文章就可以使用post的布局。

  • duoshuo: 多说评论系统。在大陆地区更好用的评论系统,填上short_name,我申请的shortname是xufly

  • hexo文章中图片存放位置有以下几种方法

1)本地路径存放在hexo目录的source/img下,文章中写![](/source/img/logo.jpg),显然这样在本地的编辑器里完全不能正确识别图片的位置。

2)使用图床,但有移动运营商的广告,图床只支持 http 。

3)使用插件hexo-asset-image,注意图片目录名和文章名保持一致,图片目录也保存在_posts文件夹下

其他的不多说了,都有详细的介绍

常见的错误

报错:ERROR Process failed: layout/.DS_Store

进入主题目录的layout目录下,删除.DS_Store,然后分别进入layout/_partial/ 和 layout/_widget/目录下,删除.DS_Store.

参考资料

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值