霜巧
霜巧
文章目录
  1. 1. 安装 Git + NodeJS 环境
    1. 安装Git
    2. 安装NodeJS
  2. 2. 设置GitHub
    1. 注册github
    2. 创建github page
    3. 查看效果
  3. 3. Hexo安装
    1. 初始化博客
  4. 4. Hexo命令
    1. 启动Server
    2. 创建文章
    3. 生成静态网页
  5. 5. 部署到GitHub
    1. 安装自动部署到GitHub的插件
    2. 运行hexo deploy命令
  6. 6. 命令总结

Create my blog with Hexo && Github.pages

2016.07.11 霜巧 建站

alt text

虽然自己之前有在CSDN上写博客，但是没有坚持下去，平时更多的是写看书笔记。当我第一次看到github pages的时候，感觉终于找到了我要的东西了，因为我只是想简单的写写文章，记录下自己的学习心得、成长经历等，不需要配置使用数据库、不想购买服务器自己搭建站点。 静态博客就是为此而生的，不用配置服务器、不用数据库、访问速度相当快、没有不安全漏洞的说法，最重要的，对于一个经常使用 markdown来写文章的人来说，她完美支持！

Hexo是一个快速、简洁且高效的博客框架，而GitHub是一个免费的代码托管工具，利用Github Page可以免费创建一个静态网站。下面将介绍如何使用Hexo和Github，在win10环境下搭建一个静态的博客。

1. 安装 Git + NodeJS 环境

安装Git

下载地址： http://git-scm.com/downloads

附上Git Pro经典教程: Git Pro

廖雪峰的Git经典入门教程: Git入门教程

安装NodeJS

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

安装时保持默认配置就可以了

2. 设置GitHub

注册github

地址: https://github.com/

按照网站提示注册就可以了，注册成功后要去自己的邮箱验证，要验证后才能发布自己的github page。

创建github page

仓库的名字一定要和你的账号对应，如echo-linsq.github.io.填写站点的描述，然后选择Create repository

查看效果

为了展示此时的效果，可以在此仓库下新建一个index.html页面，至此，你的github page已经创建完成，你可以访问自己的站点了。如：http://echo-linsq.github.io

效果就是index.html页面中的内容，接下来就是根据自己的喜好选择主题，我选择的是fexo主题，也可以根据自己的风格定制主题。下面我会介绍主题的配置。

3. Hexo安装

打开Git命令行，执行如下命令

$ npm install -g hexo

初始化博客

在电脑上建立一个自己博客的文件夹（如E:\MyBlog，以下教程都以这个目录为博客根目录），然后在此目录下打开Git Bash，执行如下命令

$ hexo init

这时候会输出

INFO Copying data e:\MyBlog
INFO You are almost done! Don’t forget to run npm install before you start blogging with Hexo!

在E:\Hexo目录下会生成以下文件

source：用于存放我们用markdown编写的博文源文件和静态资源
themes：用于存放主题文件，每个主题也有自己的主题配置文件_config.yml文件
_config.yml：站点配置文件，用于配置博客信息，如作者，博客名称等

按照提示运行npm install命令，在E:\MyBlog目录下会增加一个node_modules文件夹

$ npm install

至此，博客的安装部署工作基本完成了，下面我们学习一下hexo的基本操作命令

4. Hexo命令

启动Server

运行以下命令

$ hexo server

Hexo server启动后，在浏览器中打开http://localhost:4000/ 即可访问自己的博客，按Ctrl+C停止

创建文章

运行以下命令，可生成一篇文章，刷新http://localhost:4000/ 即可看到新生成的文章。

$ hexo new "new-post"

同时在E:\Hexo\source\ _posts目录下会生成一个”new-post.md”的markdown文件，可以使用一个支持markdown语法的编辑器来编辑该文件，刷新http://localhost:4000/ 即可看到修改后的结果。

打开这个文件

title: new-post #文章标题
date: 2015-09-26 17:00:07 #发表日期
categories: blog #文章文类
tags: [博客，文章] #文章标签，多于一项时用这种格式
categories: "建站" #文章分类
 ---
# 正文，用markdown写

生成静态网页

运行以下命令，将markdown文件生成静态网页。

$ hexo generate

同时在E:\MyBlog目录下会生成一个public文件夹，里面是生成的静态文件。

5. 部署到GitHub

至此我们已经可以在本地访问自己的博客了，但是只有本地能够看到，要部署到GitHub上面别人才能看到。我们可以在本地调试编辑好文章后再推送到GitHub上面。下面是部署到GitHub的过程。

安装自动部署到GitHub的插件

在初始化博客的时候运行的npm install命令默认并没有安装这个插件，所以要手动安装。
运行以下命令

$ npm install hexo-deployer-git

修改位于E:\Hexo目录下的_config.yml文件
找到以下内容

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

修改为

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
    type: git
    repository: https://github.com/echo-linsq/echo-linsq.github.io.git
    branch: master

Repository是自己github page的项目地址

运行hexo deploy命令

$ hexo deploy

过程中会提示输入你的github账号和密码，等待命令运行完成即可。部署完成后，在浏览器中访问http://echo-linsq.github.io/ 能够看到你在本地调试好的博客，表示部署成功！

6. 命令总结