用hexo免费搭建个人博客

2015-02-03

以前用wordpress搭建过自己的博客，非常简单易用，不过很不安全很容易受到攻击，需要经常升级补丁。

用wordpress搭建的博客需要购买LAMP服务器空间，期间我换过几次主机服务商，服务一家比一家差，经常宕机，速度不稳定。

在.CN域名1元注册的时候我注册了我的博客域名，后来续费就非常贵，再后来个人注册的.CN的域名全部被天朝和谐了，实名备案申请不一定都能通过，有种被坑的感觉，这就是天朝，我就这样痛失了我的域名，博客也就关闭了，这段不堪回首的往事……

扯的有点长…… 回到主题吧

hexo是一个台湾的开发者基于node.js开发的一套博客系统，这套系统和一般的网站系统有点区别：它是跑在本地客户端的程序，在服务器端静态展现。是为只支持静态HTML的服务器而开发的，比如github上的pages服务。你可以用markdown语法在任何代码编辑器里书写你的博客文章，适合码农的写作方式。

下面我再详细介绍怎样一步步安装和使用hexo，其实很简单

搭建过程你或许觉得有那么点小繁琐，但一旦搭建完成，写文章是极简单，极舒服的。

只需要几个简单命令，你就可以完成一切。

hexo init //初始化
hexo server //开启本地服务器
hexo n “文章名” //写文章 == hexo new
hexo g //生成 == hexo generate
hexo d //部署，== hexo deploy ,可与hexo g合并为 hexo d -g

##准备hexo的运行环境

###安装node.js

去node官网http://nodejs.org/点绿色的大INSTALL按钮下载安装，直接按提示点下一步，很简单

###安装GIT

下载GIT客户端软件，安装完成后你就可以用命令行来GIT了

GIT下载传送门

###安装代码编辑器

我个人比较喜欢用sublime text2 ，简单又好用

##注册和设置GitHub

GitHub账号和GitHub Pages 一般都应该有吧，已有的请自动无视这一部分。

首先注册一个『GitHub』帐号，已有的默认默认请忽略
建立与你用户名对应的仓库，仓库名必须为『your_user_name.github.com』
添加SSH公钥到『Account settings -> SSH Keys -> Add SSH Key』

前两步自己解决，现在说第三步

在命令行窗口中分别键入如下两条命令：

git config —global user.name “ooxx” //配置GIT用户名，请保持和GitHub的用户名一致
git config —global user.email “ooxx@qq.com” //配置GIT邮箱，请保持和GitHub注册的邮箱一致

生成创建SSH key，执行命令：

ssh-keygen

然后系统提示输入文件保存位置等信息，连续敲三次回车即可，生成的SSH key文件保存在中～/.ssh/id_rsa.pub

然后用文本编辑工具打开该文件，我的系统自带vim,所以命令是：

vim ~/.ssh/id_rsa.pub

如果你不方便使用vim拷贝，可以直接用编辑器打开id_rsa.pub文件，文件默认在你的C盘USERS或用户文件夹，里面有一个.ssh文件夹，打开就可以找到啦！
接着拷贝.ssh/id_rsa.pub文件内的所以内容，将它粘帖到github帐号管理中的添加SSH key界面中。
打开github帐号管理中的添加SSH key界面的步骤如下：

登录github
点击右上方的Accounting settings图标
选择 SSH key
点击 Add SSH key

在出现的界面中填写SSH key的名称，填一个你自己喜欢的名称即可，然后将上面拷贝的~/.ssh/id_rsa.pub文件内容粘帖到key一栏，在点击“add key”按钮就可以了。
添加过程github会提示你输入一次你的github账号和密码，输入密码的时候屏幕不会有任何字符的变化哦，不要以为没输入进去，输入完按回车键就可以了。

验证SSH配置是否生效，命令：

ssh -T git@github.com

##安装hexo
用node自带的npm包工具下载，进行全局安装，执行命令：

npm install -g hexo

如果提示你权限有问题，你一定是土豪，你用的是苹果电脑吧？请在命令前加个sudo，用来提升权限

sudo npm install -g hexo

##初始化hexo

然后，执行init命令初始化hexo到你指定的目录：

hexo init

可以cd到目标目录，执行hexo init。

hexo的安装已经完成了，很简单吧

安装完hexo之后，hexo需要依赖于npm，cd进入到安装后的文件夹，安装npm依赖：

npm install

##生成静态页面

cd 到你的init目录，执行如下命令，生成静态页面至hexo\public\目录。

hexo generate

这条命令也可以简写成：

hexo g

命令必须在init目录下执行，否则不成功，但是也不报错。当你修改文章Tag或内容，不能正确重新生成内容，可以删除hexo\db.json后重试，还不行就到public目录删除对应的文件，重新生成。

##启动本地服务器浏览和调试

执行如下命令，启动本地服务，进行文章预览调试：

hexo server

浏览器输入http://localhost:4000就可以看到效果。

请使用高级浏览器，否则可能…你懂的！

##写文章

执行new命令，生成指定名称的文章至hexo\source_posts\postName.md

hexo new [layout] “postName” //新建文章

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

比如我们按照以上方法生成了一个demo.md的文章，在代码里我们看到程序会自动帮你生成：

title: postName //文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2013-12-02 15:30:16 //文章生成时间，一般不改，当然也可以任意修改
categories: 分类名称 //文章分类目录，可以为空，注意:后面有个空格
tags:

标签名1 标签名2 标签名3 //文章标签，可空，多标签请用空格隔开
下面虚线后面的空白区域，开始使用markdown格式输入你的正文。

接下来，你就可以用喜爱的编辑器尽情书写你的文章。关于markdown语法，可以参考文章Markdown简明语法。

##文章摘要
在需要显示摘要的地方添加如下代码即可：

以上是摘要
<!–more–>
以下是余下全文

more以上内容即是文章摘要，在主页显示，more以下内容点击『> Read More』链接打开全文才显示。

##主题模板安装
萝卜白菜各有所爱，玩博客换主题是必不可少的，hexo的主题列表Hexo Themes

选择自己喜欢的主题，下载下来，放在博客项目文件夹下的themes文件夹里

##博客参数配置

在本地博客安装的根目录找到配置文件

我的个人博客配置如下，仅供参考：

title: 凯歌的博客 #站点名
subtitle: 出来打个酱油 #副标题
description: 前端开发工程师，专注XHTML、HTML5、CSS3、javascript、nodeJS、Jquery、zepto、angularJS、requireJS、EJS、LESS和SASS、web标准化、web前端工程化、前端架构、UED和UX用户体验，目前就职于平安金融科技，热爱网站前端开发事业，爱学习和分享，希望和同行朋友们一起学习成长 #给搜索引擎看的，对站点的描述，可以自定义
author: 凯歌 #在站点左下角可以看到
email: karsa@foxmail.com #你的联系邮箱
language: zh-CN #中国人嘛，用中文

url: http://blog.css6.com #你的博客网址，如果没有独立域名，可以用github.io的网址
root: / #文件位置，默认无需修改
permalink: :year/:month/:day/:title/
tag_dir: 标签
archive_dir: 归档
category_dir: categories
code_dir: downloads/code
permalink_defaults: friendlinks

source_dir: source
public_dir: public

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
highlight:
enable: true
line_number: true
tab_replace:

default_category: uncategorized
category_map:
tag_map:

archive: 2
category: 2
tag: 2

port: 4000 #本地预览服务器端口
server_ip: localhost #本地服务器名
logger: false
logger_format: dev

date_format: YYYY MM D  #日期格式
time_format: H:mm:ss  #时间格式

per_page: 10 #文章列表每页显示的文章列表数
pagination_dir: page


disqus_shortname:

theme: yilia #指定主题名称，就是themes文件下的主题文件夹名
exclude_generator:

deploy: #远程发布配置
type: github #发布的服务器厂商，这里就写github，名字不能随便写
repository: git@github.com:jsonxu/jsonxu.github.io.git  #注意，这个填SSH的远程仓库地址，别错写成HTTPS的资源地址了
branch: master  #这里填仓库的分支名称，注意不用写成gh-pages分支，直接用主干分支master

如果已完成了以上步骤，现在你可以在本地查看和部署到github服务器了，用以下命令：

hexo n “文章名” //写文章 == hexo new
hexo g //生成 == hexo generate
hexo d //部署，== hexo deploy ,可与hexo g合并为 hexo d -g

给博客绑定域名

如果你有网站域名，请去域名服务商网站设置你域名的CNAME指向，指向到你的github名，如：username.github.io

然后在博客本地文件夹中的source文件夹里建立一个CNAME的文件（注意没有后缀）,文件中写入你的域名（不需要HTTP前缀）,比如 blog.css6.com

然后再执行hexo g和hexo d 生成和发布，这时候你可以在你的Github项目文件中的Master分支上看到CNAME文件了，

稍等片刻你就可以用你的域名访问了，是不是很爽？分享给你的朋友吧。

前端笔记

给博客绑定域名