hexo搭建个人博客
发布于 6 年前 作者 503945930 5534 次浏览 来自 分享

效果预览

介绍

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最新资讯,请关注我的微信公众号“一起玩前端”或扫描二维码关注.

5 回复

用angularjs写后台是不是体验更好一些?

楼主题图都悲剧了

楼主题图都悲剧了

我想看图!!!!

前两天我也刚用hexo搭了个自己的, 确实简单方便, 直接将原来的markdown 笔记整理一下就能自动生成页面了, 赞! 有兴趣看下 http://jason-zi.coding.me

回到顶部