一、前期准备
git
git安装地址
nodejs
nodejs安装地址
hexo 使用npm安装
安装好nodejs以后,进入nodejs安装目录
二、Hexo
hexo是一款基于Node.js的静态博客框架。
在nodejs安装目录下执行命令
$npm install hexo -g
仅需一步就把 Hexo 本体和所有相依套件安装完毕。
更新hexo到最新版
$npm update hexo -g
查看版本
node -v
v0.12.7
初始化
创建hexo目录,比如E:\hexo ,进入E:\hexo 目录,执行命令
$hexo init
安装依赖包
$npm install
启动服务
$hexo server
新开启一个gitbash
$ hexo new "My New Post"
刷新http://localhost:4000/。
可以发现已生成了一篇新文章 “My New Post”。
执行下面的命令,将markdown文件生成静态网页。
$ hexo generate
该命令执行完后,会在 E:\hexo\public\ 目录下生成一系列html,css等文件。
编辑需要使用markdown语法
hexo常用命令:http://segmentfault.com/a/1190000002632530
常用命令:
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
简写:
hexo n == hexo newhexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
三、GitHub
注册Github 账号
创建一个新的repository
chenlly99.github.io //注意,名称必须是xxx.github.io 格式,并且xxx必须是GitHub的用户名
编辑_config.yml 在E:\hexo 目录下
deploy:
type: git
repository: git@github.com:chenlly99/chenlly.github.io.git
branch: master
$hexo deploy 如果最后显示
[info] Deploy done: github
说明发布成功
问题1:hexo deploy 命令行没有任何输出,也没有错误。
deploy:标签,在每个冒号后面必须要空格
问题2:
hexo deploy命令显示ERROR Deployer not found : github
解决:
deploy的type改成git,然后运行下npm install hexo-deployer-git –save
再hexo g
hexo d
问题3:
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
FATAL Something’s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: Host key verification failed.
fatal: Could not read from remote repository.
解决:
先生成key:
登录git bash
$ ssh-keygen -t rsa -C “chenliling99@126.com”
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Administrator/.ssh/id_rsa):
/c/Users/Administrator/.ssh/id_rsa already exists.
Overwrite (y/n)? y
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Administrator/.ssh/id_rsa.
Your public key has been saved in /c/Users/Administrator/.ssh/id_rsa.pub.
The key fingerprint is:
02:80:dc:c0:02:25:9b:73:0e:3f:59:fa:ea:d6:35:29 chenliling99@126.com
The key’s randomart image is:
+–[ RSA 2048]—-+
|*+= |
|o* o |
|* . o |
| * + . |
| * ..S |
| oE +. |
| ..o . |
| … |
| oo |
+—————–+
之后会要求确认路径和输入密码,我们这使用默认的一路回车就行。成功的话会在~/下生成.ssh文件夹,进去,打开id_rsa.pub,复制里面的key。
回到github,进入Account Settings,左边选择SSH Keys,Add SSH Key,title随便填,粘贴key。为了验证是否成功,
$ ssh -T git@github.com
Enter passphrase for key ‘/c/Users/Administrator/.ssh/id_rsa’:
Hi chenlly99! You’ve successfully authenticated, but GitHub does not provide shell access.
问题4:执行命令hexo deploy 报如下错误
Error: spawn git ENOENT at exports._errnoException (util.js:746:11) at Process.ChildProcess._handle.onexit (child_process.js:1053:32) at child_process.js:1144:20 at process._tickCallback (node.js:355:11)
添加环境变量:C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\libexec\git-core,这样就解决了问题了。
点击 Github 上项目的 Settings,GitHub Pages,提示Your site is published at http://chenlly99.github.io/
第一次上传网站的话需要等十分钟左右,以后每次更新都能马上打开
四、主题
参考:https://github.com/zippera/lightum
复制主题:
$ git clone https://github.com/zippera/lightum.git themes/lightum
更新主题:
cd themes/lightum
git pull
复制下来以后,修改配置文件
修改Hexo目录下的config.yml配置文件中的theme属性,将其设置为
theme: lightum
五、布局
站点配置用到两个文件,一个是对整站的配置H:\hexo_config.yml,另一个是对主题的配置H:\hexo\themes\light_config.yml,
添加分类、标签云、友情链接widget
修改themes\light_config.yml 增加widgets
widgets:
- search
- category
- tagcloud
- blogroll
在D:\hexo\themes\lightum\layout_widget 分别增加
search.ejs
category.ejs
tagcloud.ejs
blogroll.ejs
参考:http://www.ituring.com.cn/article/23
1、字体
*这些文字显示为斜体*
**这些文字显示为粗体**
2、代码:
$ hexo deploy
3、标题
#表示这是一级标题
##表示这是二级标题
###表示这是三级标题
4、无序列表
- 列表项目
- 列表项目
- 列表项目
5、嵌套列表
- 列表项目
+ 列表项目
+ 列表项目
+ 列表项目
- 列表项目
6、有序列表
数字接着一个英文句点
1. Bird
2. McHale
3. Parish
7、连接
URL格式:[图灵社区](http://www.ituring.com.cn)
图片连接
开头加一个惊叹号
![图灵社区](http://www.turingbook.com/Content/img/Turing.Gif)
图片可以是网络图片也可以是本地图片
本地图片建议放在\source\img 目录下。
eg:
![图灵社区](/img/forkme_left_green_007200.png)
或者直接用img标签,同时指定图片大小
<img src="/img/forkme_left_green_007200.png" alt="图灵社区" width="200px" />
8、表格
http://www.jianshu.com/p/q81RER
七、写文章
hexo new [layout] “postName” #新建文章
其中layout是可选参数,默认值为post。有哪些layout呢,请到 scaffolds 目录下查看post的layout默认是hexo\scaffolds\post.md
修改scaffolds\post.md的模板样式
title: {{ title }}
date: {{ date }}
tags:
categories:
正文支持markdown格式,建议你先学习一下它的语法。markdown不像html似的一大堆标签,很简单,只有几个符号。
新建、删除或修改文章
文章可以拥有如下属性:
Setting Description Default
layout Layout post或page
title 文章的标题
date 创建日期 文件的创建日期
updated 修改日期 文件的修改日期
comments 是否开启评论 true
tags 标签
categories 分类
八、自定义页面
执行new page命令
$hexo new page "about"
在 hexo\source\ 下会生成 about 目录,里面有个index.md,直接编辑就可以了
然后在themes\light_config.yml 配置
menu:
首页: /
归档: /archives
关于: /about
九、评论框
注册多说地址:
在多说进行注册,获得通用代码。
将通用代码粘贴到themes\light\layout_partial\comment.ejs里面,如下:
<% if ( page.comments){ %>
<section id="comment">
通用代码
</section>
<% } %>
十、RSS 阅读
安装插件
$npm install hexo-generator-feed
全局配置文件开启插件
plugins:
- hexo-generator-feed
主题配置文件添加入口
rss: /atom.xml
添加到首页
在themes/light/layout/_partial/header.ejs中,
<li> <a href="/atom.xml">RSS</a> </li>
十一、网站地图
网站地图,又称站点地图,它就是一个页面,上面放置了网站上需要搜索引擎抓取的所有页面的链接
安装插件
$npm install hexo-generator-sitemap
开启插件
plugins:
- hexo-generator-sitemap
浏览http://localhost:4000/sitemap.xml查看是否生效
十二、统计:
因Google Analytics偶尔被墙,故用百度统计,以 modernist 主题为例,介绍如何添加。
编辑文件 hexo\themes\modernist_config.yml ,增加配置选项:
baidu_tongji: true
新建文件 hexo\themes\modernist\layout_partial\baidu_tongji.ejs ,内容如下:
<% if (theme.baidu_tongji){ %><% } %>
注册并登录百度统计获取你的统计代码。
编辑文件 hexo\themes\modernist\layout_partial\head.ejs ,在 [/head] 之前增加:
<%- partial(‘baidu_tongji’) %>
重新生成并部署你的站点。
不出意外的话,在你的站点的每个页面的左上角都会看到一个恶心的百度LOGO。你只能在『百度统计首页->网站列表->获取代码->系统管理设置->统计图标设置->显示图标』,把那个勾去掉。
十三、域名
(1)、进入source文件夹,创建名为CNAME的文件,编辑:
chenlly.com
(2)、设置DNS解析
本人首先在阿里云上购买了一个域名,
登录域名控制台,添加域名解析,github.com两个ip地址分别是192.30.252.154,192.30.252.153
打开浏览器输入
chenlly.com
OK