美文网首页工具& 方法收藏干货
使用GitHub和Hexo搭建免费静态Blog

使用GitHub和Hexo搭建免费静态Blog

作者: 王奥OX | 来源:发表于2014-12-20 01:27 被阅读4375次

    前言

    习惯自己写Blog的朋友一定不会陌生Wordpress,或许也曾在新浪博客和QQ空间留过脚印,但静心认真思考一下,似乎我们又总是向往更加简单自由的写作方式。GitHub给我们提供了一个无限的空间,我们需要珍惜使用,而Hexo的出现从某种意义上来说代替了Jekyll,让我们可以更专注于写作本身。本文主要介绍自己的实践心得并不断完善内容,衍生知识和原理推荐大家认真阅读官网的手册,其它推荐参考内容链接在文中也会标注出来。

    阮一峰 - 喜欢写Blog的人,会经历三个阶段

    第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。
    第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。
    第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。


    更新历史

    2015年03月22日 - 更新Windows下Hexo 3.0安装和升级,感谢@机智的阿卡林酱
    2015年03月10日 - 增加Hexo 3.0降级 2.8
    2014年12月19日 - 完善内容
    2014年12月09日 - 更新Hexo配置修改部分
    2014年06月19日 - 更新全部基础架构,待完善配置修改部分
    2014年06月17日 - 更新部分Hexo建站过程,待完善
    2014年05月29日 - 撰写初稿

    阅读原文 - http://wsgzao.github.io/post/hexo-guide/

    扩展阅读


    准备工作

    注意 本文主要针对Windows平台和Hexo 3.x

    了解Hexo

    A fast, simple & powerful blog framework

    Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
    hexo.io

    安装GIT

    GitHub Windows

    简单可依赖,安装完成后依据提示操作即可,So Easy

    安装Node.JS

    Node.JS

    注意 安装完成后添加Path环境变量,使npm命令生效

    ;C:\Program Files\nodejs\node_modules\npm
    

    安装Hexo

    配置好GitHub家目录后,双击桌面上的Git Shell,输入npm命令即可安装

    npm install -g hexo-cli
    npm install hexo --save
    

    http://hexo.io/zh-cn/docs/


    Hexo初始化配置

    创建Hexo文件夹

    安装完成后,根据自己喜好建立目录(如E:\kuaipan\GitHub\hexo),进入Git Shell切换到该路径下E:\kuaipan\GitHub\hexo执行以下指令

    hexo init
    

    安装Hexo插件

    npm install hexo-generator-index --save
    npm install hexo-generator-archive --save
    npm install hexo-generator-category --save
    npm install hexo-generator-tag --save
    npm install hexo-server --save
    npm install hexo-deployer-git --save
    npm install hexo-deployer-heroku --save
    npm install hexo-deployer-rsync --save
    npm install hexo-deployer-openshift --save
    npm install hexo-renderer-marked@0.2 --save
    npm install hexo-renderer-stylus@0.2 --save
    npm install hexo-generator-feed@1 --save
    npm install hexo-generator-sitemap@1 --save
    

    本地查看效果

    继续执行以下命令,成功后可登录localhost:4000查看效果

    hexo server
    

    Hexo简写命令

    hexo n #new
    hexo g #generate
    hexo s #server
    

    部署静态网页到GitHub

    注册设置GitHub

    1. 登录GitHub,注册自定义用户名如wsgzao
    2. 在主页右下角创建New repository,name必须和用户名一致如wsgzao.github.io
    3. 首次创建耐心等待10分钟左右审核,之后即可访问静态主页如http://wsgzao.github.io

    同步内容至GitHub

    1. 下载GitHub Windows
    2. 设置Local pathE:\快盘\GitHub\
    3. 运行Git Shell切换到如E:\快盘\GitHub\hexo路径下
    4. 执行hexo g命令生成public文件夹
    5. 把生成的内容全部拷贝到Local path或其子目录
    6. 运行GitHub确认修改信息后执行右上角的Sync同步
    7. 最后访问主页观察效果

    https://pages.github.com/


    域名和DNS

    域名推荐

    GoDaddy makes registering Domain Names fast, simple, and affordable.

    【推荐理由】两个字“靠谱”,支持支付宝,附优惠码链接

    http://www.godaddy.com/
    http://www.gdcodecoupon.com/

    DNS推荐

    致力于为您提供最稳定、最安全的域名解析服务
    【推荐理由】依然是两个字“靠谱”,感谢他们一直以来对于公益的坚持

    https://www.dnspod.cn/

    设置CNAME

    1. 在Github的网站目录下创建CNAME文件
    2. 填写自己的域名如hellodog.com,保存结束
    3. 登录DNSPod,先添加域名,然后添加记录,设置如下
    主机记录 记录类型 线路类型 记录值 MX优先级 TTL
    @ CNAME 默认 wsgzao.github.io. - 10
    www CNAME 默认 wsgzao.github.io. - 10

    Hexo配置修改

    告诉自己为什么要选择Hexo

    知识储备

    1.勤学勤练Markdown

    本地+云端备份数据是一种习惯

    2.使用性感的文本编辑器

    工欲善其事必先利其器

    • Notepad2
    • Sublime Text

    http://wsgzao.github.io/post/windows/#文本编辑器

    Hexo主题

    选择主题建议遵循KISS原则

    常见问题

    1.修改配置文件时注意YAML语法,参数冒号:后一定要留空格
    2.中文乱码请修改文件编码格式为UTF-8

    如何迁移至Hexo

    http://hexo.io/zh-cn/docs/migration.html

    Hexo 2.X 升级 3.0

    1.做好相关配置文件和文章的备份
    2.做任何修改前不要忘记第一件事备份

    https://github.com/hexojs/hexo/wiki/Migrating-from-2.x-to-3.0

    Hexo 3.0 降级 2.X

    http://sandylaw.tk/2015/03/07/hexo3to2/

    推荐阅读

    相关文章

      网友评论

      • Syaoran_:如果把配置和主题更改了public是不是要重新拷贝到clon的repo里面。
      • 林湾村龙猫:之前自己用hugo搭个静态博客,感觉各种慢,就打算用简书来当自己的博客,这也挺好的
      • 王奥OX:@装象 我这篇文章其实推荐了本地和在线的编辑器,不过当你熟练之后用最简单的记事本就够了,推荐NotePad2吧
      • ff702acbc63d:@wsgzao 你好,我又来打扰你啦!哈哈哈。我的博客已经建成。也欢迎访问inewos.com。最近想请教一下您用什么编辑器来写blog呢?哪个好用,推荐几个吧。 :smile:
      • ff702acbc63d:@wsgzao :+1: ,正在学习中。。。。3Q~
      • 王奥OX:@wsgzao 忘了回答问题2,GitHub的Blog内容是你通过Git命令Push到服务器端,本地全部消失也不用担心Blog数据
      • 王奥OX:@装象 我单位和公司都有笔记本电脑,用快盘作为最后的个人云灾备恢复方案,里面也包括其它资料,Git只是很小的一部分
      • ff702acbc63d:写的挺好!问一下:1.github不是代码管理仓库吗,相当于备份了呀,你本地机上为啥还要备份到快盘呀?2.是不是本地机重装系统后,博客里的东西也没有啦?
      • 王奥OX:@谢躜 国内运营商有的快,还有的根本打不开,还是和dns解析有关吧
      • 不适合推塔:为什么你的 http://wsgzao.github.io 打开这么快?
        我申请的怎么那么慢?是因为用了 Hexo 的原因吗?不过快慢最主要原因是网络问题吧。github 没道理那么快呀。

      本文标题:使用GitHub和Hexo搭建免费静态Blog

      本文链接:https://www.haomeiwen.com/subject/ygootttx.html