文章目录
  1. 1. 闲扯由来
  2. 2. 切入正题
  3. 3. 安装搭建
  4. 4. 配置站点
  5. 5. 补充

闲扯由来

之前基于wordpress的blog在VPS到期后,就不想续费折腾了。在这里还是要感谢这个伟大的开源项目,你带给我了许多方便。

其实我觉得我是个很懒的完美主义者,话有点不顺口,细想也不通的,但是我就是这么认为的。每每总结留在硬盘上的一篇篇未写完的blog,理由就是排版这么烂,发上去也需要再排,而且还复杂,不好看。故因为不完美,所以放弃了。曾经有一段时间我就去折腾CSS,但很快发现也没那么容易折腾,花了时间还来不了效果。

一切都在我接触到markdown之后改变,简洁的语法,更多的时间可以focus到内容上。但是wordpress对于markdown支持的并不好,所以就一直寻找一个直接支持markdown语法的blog framework。

在经过多次的测试和咨询之后,答案就是 Github + Hexo。由来废话说完,就应该进入主题了—折腾不止,生命不息

切入正题

  • Github

    绝大部分程序猿肯定都知道Github,也应该拥有自己的账号。如果没有,你现在就应该去创建一个,而且后面也需要用到这个。通过Github,我们可以很方便地分享我们的项目,进行代码管理,重构,与他人协作完成一个项目(当然如果你需要创建私人项目,你需要付费)。

    但是在这里,需要用Github提供的Github Pages来做我新Blog的服务器。

    1. Github Pages完全免费,无流量和空间限制,无需翻墙,墙内墙外访问速度还不错。
    2. 支持Markdown语法来发布文章
    3. 可以很方便地用git来add, commit和push我的文章。
    4. 对blog拥有完全的控制权。
  • Hexo

    其实Hexo对于我也是蛮陌生的。那为啥选择Hexo,而不选择更成熟,更多人使用的Octopress呢?因为我学过一段时间的Node.js,更喜欢Node.js的速度,绝对比基于Ruby的Octopress快。

    Hexo is a fast, simple and powerful blog framework. It parses your posts with Markdown or other render engine and generates static files with the beautiful theme. All of these just take seconds.

安装搭建

  1. Git,下载安装git for mac,完成后查看版本信息

     git --version
    
  2. Node.js,可以去官网下载pkg文件安装,但是这里我选择通过nvm安装。

     // 安装nvm
     curl https://raw.github.com/creationix/nvm/master/install.sh | sh
    
     // 然后安装Node.js
     nvm install 0.10.18
    
  3. 通过npm安装Hexo(注意这里是npm,不是nvm)

     npm install -g hexo
    

    或者升级

     npm update hexo -g
    
  4. 安装完成后,就可以初始化hexo,

     // 在这里,你需要确保你的目录正确
     hexo init ~/Developments/Code4fun/Hexo
    

    在指定目录生成了如下结构的文件

      .
     ├── _config.yml   // 站点配置文件,包含很多站点配置选项,比如域名
     ├── package.json  // 应用程序数据,比如程序名字,版本号等
     ├── scaffolds     // 存储要发布的post的基本文件
     ├── scripts       // js文件,保存一个hexo的js扩展文件
     ├── source        // 保存文章内容
     |   ├── _drafts   // 草稿文件
     |   └── _posts    // 发布的文章
     └── themes        // 主题文件夹
    

配置站点

  1. 配置 config.yml

     # Site
     title: Code For Fun
     subtitle: I Share, therefore I am
     description: A iOS developer’s personal blog.
     author: Jerry li
     email: leezhm(at)126.com
     language: zh-CN
    
     # URL
     # If your site is put in a subdirectory, set url 
     # as 'http://yoursite.com/child' and root as '/child/'
     url: http://code4fun.cn
     root: /
     permalink: :year-:month-:day/:title/
    
  2. 本地测试

     // 生成文章
     hexo generate 
    
     // 运行默认的server
     hexo server
     //[info] Hexo is running at localhost:4000/. Press Ctrl+C to stop.
    

    然后在你的浏览器中输入网址localhost:4000,测试。看是否可以看到默认页面。

    测试成功后,我们就需要把它送到Github Pages服务器上。

  1. Github Pages
  • 如果没有Github账号,请创建一个账号,然后创建一个Repository。

    • 创建一个blog网站

      如果为一个blog创建网站,Github Pages有特殊的规定,这个repository的名字格式必须是

      你的Github账户名.github.com(比如我的就是 leezhm.github.com)

      否则Github无法提供解析。

    • 为一个Project创建Page

      在这里,需要特别注意的是,Github Pages规定这个repo的branch必须是gh-pages,否则不能正确解析页面。至于怎么在Github上创建branch,并设置default branch,请查询Github Help。

      BTW:创建和删除branchGithub - Create/Delete branch,以及Github - Set default branch网址。

  • 配置config.yml中的deploy(在这里我选择的是创建一个blog网站)

      # Deployment
      # Docs: http://zespia.tw/hexo/docs/deploy.html
      deploy:
            type: github
      repository: https://github.com/leezhm/leezhm.github.com.git
    

    在这里,需要注意不要写错地址,最好用https。另外branch应该是根据创建的类型不同,做更更改的。

  • 生成并发布你网站

       // 从Markdown生成静态html文件,然后上传至你的repo中
       hexo deploy --generate
    

    到此应该大功告成,等待大约10分钟之后,你就应该可以使用 http://你的github账号名.github.io 来访问你的网站。

补充

如果你需要配置自己域名,请参考Hexo Custom Domain以及Setting up a custom domain with Pages

文章目录
  1. 1. 闲扯由来
  2. 2. 切入正题
  3. 3. 安装搭建
  4. 4. 配置站点
  5. 5. 补充