使用github和hexo创建免费的静态个人博客网站

之前刚学编程，接触PHP时，出于学习的目的，兴致勃勃地买了域名、主机、学了Wordpress，找了主题，折腾了好久建了个网站，也写了一些文章，然后就没有然后了，这是从入门到放弃系列的典型案例。前段时间收到主机要到期的通知，正好我也接触到了简书，支持markdown，感觉蛮好，平常也习惯使用markdown格式记录笔记。就觉得不再续费主机了，就主要使用简书，个人博客就使用github和hexo这种支持markdown生成静态网页形式就行了。

已经有很多小伙伴这样搭建自己的个人博客，并写了相关文章，这边我就做一个搭建过程中的简单记录。开始之前需要安装git和nodejs，有github账号，程序员小伙伴一般都会有了，我就不啰嗦了。

关于GitHub Pages

GitHub Pages原本是为托管在github上的项目提供介绍页面的一个功能，非常适合托管一些功能简单或者是静态页面的网站。考虑到访问速度，可以考虑国内的coding。 按照GitHub Pages步骤建立自己的GitHub Pages库。

hexo

hexo文档很详细，也有中文，很方便。

• 安装 hexo
  npm install hexo-cli -g

• 建站

  $ hexo init <folder>
  $ cd <folder>
  $ npm install
  

• 新生成的目录结构为：

    .
    ├── _config.yml
    ├── node_modules
    ├── package.json
    ├── scaffolds
    ├── source
    └── themes
  

  • _config.yml 是网站的站点配置文件
  • node_modules 是nodejs库文件目录，就是npm install命令安装的文件位置
  • package.json是程序信息
  • scaffolds 新建文章的模板
  • source 存放用户资源的地方，404、favicon、CNAME 等堵在此处，这是我们主要工作的地方。其中，_posts文件是写文章地方，除_posts文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹（之后生成），而其他文件会被拷贝过去。
  • themes 是主题存储地方。

• 配置网站信息
  _config.yml 文件提供了很多配置，详细可看官网配置信息。先配置两方面的，之后需要再配置。

  • 网站基本信息

  # Site
  title: 欣欣向戎
  subtitle: AndyRon's Blog
  description: Just for fun.
  author: AndyRon
  language: zh-Hans
  timezone: Asia/Shanghai
  

  • 部署，注意字段，repo就是个人GitHub Pages的地址库。

  # Deployment
  ## Docs: https://hexo.io/docs/deployment.html
  deploy:
  type: git 
  repo: https://github.com/andyRon/andyRon.github.io.git
  branch: master
  

• 新建文章
  hexo new [layout] <title> ： 也就是在source/_posts/下按照模板新建了一个markdown文件，layout就是指scaffolds文件夹中的模板，也可以直接在_posts中新建markdown文件。

• 在本地服务器测试
  hexo server ：在浏览器打开http://localhost:4000/ ，就可以查看

• 生成静态文件
  hexo generate（hexo g） ：这个命令会新建一个public文件夹，在其中生成静态文件，这个目录相当于网站的根目录。

• 发布到github
  hexo deploy（hexo d）：把public文件夹内的内容上传到github上。
  现在访问https://yourname.github.io (我的是https://andyron.github.io )就能访问刚建立的网站了。
  如果出现ERROR Deployer not found的问题，可通过npm install hexo-deployer-git --save解决。

• 其他hexo命令
  hexo clean ：删除public文件夹内容，和清理一些缓存。调试网站可以使用。

域名绑定（如有必要）

• 在source/下添加文件CNAME，内容只为如andyron.com（没有http和www）
• 部署到github上：hexo generate，hexo deploy
• 域名解析。不同的域名服务商大同小异，我的是阿里云，为了防止解析出问题，我把其他默认一些邮件解析等都删了，就添加两个：

可能需要等一短时间（10分钟以上），就可以用 http://andyron.com 访问了。

hexo主题

hexo有很多主题，很多网友为hexo贡献了很多主题，可到主题上寻找。我选择的是next主题，这个使用主题用的人比较多，文档很全，也比较简洁。
主题的使用非常简单：

• 将主题文件拷贝至站点目录的themes 目录下
• 修改站点配置文件： theme: 主题名

主题的一些设置：

• 设置RSS

  • 安装 hexo-generator-feed插件，在hexo init初始化的目录下执行npm install hexo-generator-feed --save
  • 在站点配置文件添加：

  feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  

  • hexo generate

• 设置搜索
  有很多搜索方式，这只是一种简单方式

  • 安装hexo-generator-searchdb，在hexo的根目录下：$ npm install hexo-generator-searchdb --save
  • 在站点配置文件添加：

  search:
    path: search.xml
    field: post
    format: html
    limit: 10000
  

  • 在主题配置文件（themes/next/_config.yml）修改：

   local_search:
       enable: true
  

• 添加标签页面

  • $hexo new page tags：结果生成新文件夹source/tags/，并在其中有一个index.md。
  • 在主题配置文件的menu中打开标签

• 添加分类页面

  • $hexo new page categories：结果生成新文件夹source/categories，并在其中有一个index.md。
  • 在主题配置文件的menu中打开分类。

• 添加关于我页面

  • $hexo new page about：结果生成新文件夹source/about，并在其中有一个index.md，在index.md中直接编写关于我的内容。
  • 在主题配置文件的menu中打开分类。

• 添加百度分析

  • 注册 百度统计，并添加自己的网站
    

    

  • 复制 hm.js? 后面那串统计脚本 id
    

    

  • 在主题配置文件中添加字段baidu_analytics`，职位上面的脚本id

参考
http://blog.csdn.net/zuoziji416/article/details/53204478