Hexo搭建静态博客网站

2016/03/24

安装环境

安装 Git

下载地址：https://git-scm.com/download/

安装 node.js

下载地址： http://nodejs.org/download/

配置 Github

建立 github 仓库

仓库命名规范：

【your_user_name.github.com】

访问域名：your_user_name.github.io

【your_user_name】

访问域名：username.github.com/your_user_name

注意：github账户必须已经邮箱验证过（github—setting—email）
注意：此处假设仓库名为hexo.github.com，此仓库存在两个分支，master作为自动发布的分支，gh-pages作为本地修改并发布的分支，首先将两个分支内容清空

设置全局

$ git config --global user.name "name" 配置username
$ git config --global user.email "邮箱" 配置邮箱

设置 ssh

设置rsa的数字指纹，一个是公钥，一个是私钥。公钥要提交到github上，私钥需要自己保存

1	ssh-keygen -t rsa -C "邮箱"

如何提交到 github？

找到 github—setting—SSH keys，添加本地rsa公钥（C:\Users\Administrator.ssh\id_rsa.pub）

验证 ssh key

用本地的私钥和github的公钥进行匹配

1	ssh -T git@github.com

生成 github 页面

找到仓库的 setting，到 GitHub Pages，点击 Launch automatic page generator，点击continue to layout生成基本页面。

hexo 配置

安装hexo

1	npm install -g hexo // OS 要加 sudo

说明地址：https://hexo.io/zh-cn/

再全局安装

1	npm install hexo-cli -g // OS 需要加 sudo

初始化设置

将 hexo.github.io 拉到本地

1	$ git clone 地址

创建并切换到 gh-pages 分支

1	$ git checkout -b gh-pages

删除该分支的所有数据并提交

1
2
3

$ git add .
$ git commit -m "删除数据"
$ git push origin gh-pages

配置博客

1	$ hexo init

当输出

1	hexo ERROR Deployer not found: github

或者

1 2	[info] Copying data [info] You are almost done! Don’t forget to run npm install before >you start blogging with Hexo!

需要安装 hexo-deployer-git（新版的 hexo 3.0 以上，博客默认不支持 github 上传方式）

1	npm install hexo-deployer-git --save-dev

注意，hexo-deployer-git 一定要手动单独安装，多装几次！！！多装几次！！！多装几次！！！。

安装 node_modules，运行

1	npm install

开启 hexo 服务

1 2	$ hexo server [info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

表明 Hexo Server 已经启动了，在浏览器中打开 localhost:4000/，这时可以看到 Hexo 已为你生成了一篇 blog。你可以按 Ctrl+C (OS 按 control + c) 停止 Server。本地修改后可刷新访问。

创建博文

运行命令创建文章，生成 My New Post.md 文件，编辑此文件发布内容。

1	$ hexo new "My New Post"

生成静态的网站文件

执行下面的命令，将markdown文件生成静态网页。

1	$ hexo generate

该命令执行完后，会在 D:\Hexo\public\ 目录下生成一系列 html，css 等文件

部署到 Github

部署到 Github 前需要配置根目录下的 _config.yml 文件，首先找到下面的内容

# Deployment

## Docs: http://hexo.io/docs/deployment.html
	
deploy:
    type:

然后将它们修改为

# Deployment	
	
## Docs: http://hexo.io/docs/deployment.html
	
deploy:
    type: git
    repository: git@github.com:githubname/githubname.github.io.git
    branch: master

注意: Repository：必须是 SSH 形式的 url（git@github.com:orzhtml/orzhtml.github.io.git），而不能是 HTTPS 形式（//github.com/orzhtml/orzhtml.github.io.git），否则会出现错误。

其他属性配置说明

# 站点基本信息
	title: 网站标题
	subtitle:  网站子标题（通常跟在作者下面）
	description: 网站描述（页面上看不到）
	author: 作者名称
	language: 语言（zh-CN）
	timezone:
	
# 链接
## 如果有自己的域名可做修改，否则不需要
	url: http://yoursite.com
	root: /
#permalink表示下一层的格式	
#permalink: :year/:month/:day/:title/
	permalink: :title/
	permalink_defaults:
	
# 目录描述
	source_dir: source
	public_dir: public
	tag_dir: tags
	archive_dir: archives
	category_dir: categories
	code_dir: downloads/code
	i18n_dir: :lang
	skip_render:
	
# Writing
	new_post_name: :title.md # File name of new posts
	default_layout: post
	titlecase: false # Transform title into titlecase
	external_link: true # Open external links in new tab
	filename_case: 0
	render_drafts: false
	post_asset_folder: false
	relative_link: false
	future: true
	highlight:
	  enable: true
	  line_number: true
	  auto_detect: false
	  tab_replace:
	
# 类型/标签
	default_category: uncategorized
	category_map:
	tag_map:
	
# 首页的日期格式
	date_format: YYYY/MM/DD
	time_format: HH:mm:ss
	
# 默认一页的文章数目
	per_page: 10
#是否分页	
	pagination_dir: page
	
#主题名称
	theme: yilia
	
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:yourname/yourname.github.com.git
  branch: master

测试部署到 github 的网站

当部署完成后，在浏览器中打开 http://githubname.github.io ，正常显示网页，表明部署成功。

后期部署步骤

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

1
2
3

$ hexo clean
$ hexo generate
$ hexo deploy

编辑文章

使用一个支持 markdown 语法的编辑器，推荐 MarkdownPad

下载地址：MarkdownPad下载地址

破解方式：MarkdownPad破解方式

安装主题

将 Git Shell 切到 themes 目录下，然后执行下面的命令，将 yilia 下载到 themes/yilia 目录下。

1	$ git clone https://github.com/litten/hexo-theme-yilia.git

修改博客根目录的 config.yml 配置文件中的 theme 属性，将其设置为 yilia。

配置主题

在 yilia 的 config.yml 中配置主题的属性

主题配置说明

# 菜单导航目录
menu:
  主页: /
  所有文章: /archives

# 展示自己的相关其他网站
subnav:
  github: "#"
  weibo: "#"
  zhihu: "#"
  douban: "#"
  mail: "#"

# 内容
    excerpt_link: more
    fancybox: true
    mathjax: true

# 是否开启动画效果
    animate: true

# 是否在新窗口打开链接
    open_in_new: false

# 谷歌分析
    google_analytics: ''
# 网站顶部小图标
    favicon: /img/header.jpg

#你的头像url
    avatar: /img/header.jpg
#是否开启分享
    share_jia: false
    share_addthis: false
#是否开启多说评论，填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论
    duoshuo: true
#是否开启云标签
    tagcloud: true

#是否开启友情链接
#不开启——
    friends: false
#开启——
    friends:
      web翎云阁: http://www.orzhtml.com/
       jQuery插件兜: http://www.orzhtml.com/demo/
       orz翎云阁: http://orzcss.com/

#是否开启“关于我”。
#不开启——
    aboutme: false
#开启——
    aboutme: 本想把日子过成诗，时而简单，时而精致。不料日子却过成了我的歌，时而不靠谱，时而不着调。

关注 web翎云阁，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！

本作品采用知识共享署名 3.0 中国大陆许可协议进行许可，分享、演绎需署名且使用相同方式共享。转载请务必保留本页网址和作者信息，否则即为侵权。