效果预览
介绍
hexo一款nodejs框架,具有快速、简洁且高效的静态博客框架。
ps:后面所有操作均在windows下完成,其它平台请自行google
优势
- 超快速度
- 一键部署
- 支持 Markdown
- 丰富的插件
准备工作
#### 安装git 下载对应版本安装完成,将安装目录配制到环境变量**path中,然后在命令中输入
git
出现上面就可以了。
安装Node
下载对应版本安装完成,然后在命令中输入
node -v
npm -v
对应的版本不一样也可以的,只要出现上面就可以了。
注册coding
由于github在国内的访问比较慢,所有我选择coding提供的pages服务来做作为我们的服务器.
开始
前面的准备工作就做完了,下面就正式进入hexo部分了。 新建一个文件夹,用来放自己的项目同,然后在当前目录执行。
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server
ps:如果国内npm比较慢,可以使用淘宝 NPM 镜像.
生成的目录如图
然后出现
就可以打开浏览器访问
一个基本的博客系统就完成了。
### 切换主题
hexo安装的时候自带了一个主题,在theme目录下,我们一般都要的换成其它主题,我们选择比较流行的**Next**.
Next具体配置,后面我们写文章具体来详解。
创建 Hexo 主题非常容易,您只要在 themes 文件夹内,新增一个任意名称的文件夹,并修改 _config.yml 内的 theme 设定,即可切换主题。一个主题可能会有以下的结构:
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source
我们在theme目录下执行
git clone https://github.com/iissnan/hexo-theme-next
将next主题克隆到我们在theme文件夹中。 然后修改我们**_config.yml**
theme: hexo-theme-next
然后重新预览我们的页面,发现页面已经改变。
指令
写作
你可以执行下列命令来创建一篇新test文章。 hexo new test 然后我们去source/_posts/test.md,去编辑一些内容。最后内容如下
---
title: test
date: 2016-04-03 11:14:26
tags:
---
hello test
然后去浏览器预览。
### 部署
我们修改**_config.yml**
deploy:
type: git
# repository: https://github.com/503945930/yqwqd.com.git
repository: #自己的远程coding远程仓库,需要注册完coding,然后新建一个项目。
branch: coding-pages #自己的分支名称,可以不和我一样。
另外还需要安装hexo-deployer-git 插件
npm install hexo-deployer-git --save
然后执行 hexo clean hexo generate hexo deploy 输入coding帐号,密码即可完成部署。 然后进入coding 发现多了一些代码,然后选项Pages 选择你的分支,点击立即开启。就可以了,同时会生成一个域名给我们。 到这里面我们去访问我们的页面发现样式没有作用,因为我们还有一个地方没有修改。
我们修改**_config.yml**
url: http://weiy.coding.me/hexo_test #coding给我们生成的域名
root: /hexo_test #域名的根目录,其实就是我们的项目名称
以上信息可以会我的不一样,请按自己的信息填写。
然后执行 hexo clean hexo generate hexo deploy 输入coding帐号,密码即可完成部署。 最后在访问我们的域名即可看到效果。
本次教程基本结束,后续还有一些针对Next具体配置,后面写陆续完成,谢谢大家。 对于本教程有任何疑问,请联系公众号
Web最新资讯,请关注我的微信公众号“一起玩前端”或扫描二维码关注.
用angularjs写后台是不是体验更好一些?
楼主题图都悲剧了
楼主题图都悲剧了
我想看图!!!!
前两天我也刚用hexo搭了个自己的, 确实简单方便, 直接将原来的markdown 笔记整理一下就能自动生成页面了, 赞! 有兴趣看下 http://jason-zi.coding.me