冠富商务通中文社区

 找回密码
 立即注册
查看: 16|回复: 0
打印 上一主题 下一主题
收起左侧

[建站策划] 建站教程:使用GitHub和Hexo搭建免费静态Blog

[复制链接]
跳转到指定楼层
楼主
发表于 2017-1-1 14:12:07 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式

前言
习惯自己写Blog的朋友一定不会陌生Wordpress,或许也曾在新浪博客和QQ空间留过脚印,但静心认真思考一下,似乎我们又总是向往更加简单自由的写作方式。GitHub给我们提供了一个无限的空间,我们需要珍惜使用,而Hexo的出现从某种意义上来说代替了Jekyll,让我们可以更专注于写作本身。本文主要介绍自己的实践心得并不断完善内容,衍生知识和原理推荐大家认真阅读官网的手册,其它推荐参考内容链接在文中也会标注出来。
喜欢写Blog的人,会经历三个阶段:
第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。
第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。
第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。
更新历史
2015年09月03日 - 完善Windows 10安装Hexo中的细节
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日 - 撰写初稿
扩展阅读
Hexo Docs - http://hexo.io/docs/
HelloDog Index - http://wsgzao.github.io/index/#Hexo
准备工作
注意 本文主要针对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命令生效。新版已经会自动配置Path

  • ;C:\Program Files\nodejs\node_modules\npm
安装Hexo
配置好GitHub家目录后,双击桌面上的Git Shell,输入npm命令即可安装

  • npm install hexo-cli -g
  • npm install hexo --save
  • #如果命令无法运行,可以尝试更换taobao的npm源
  • npm install -g cnpm --registry=https://registry.npm.taobao.org
Hexo初始化配置
创建Hexo文件夹
安装完成后,根据自己喜好建立目录(如E:\kuaipan\GitHub\hexo),进入Git Shell切换到该路径下E:\kuaipan\GitHub\hexo执行以下指令

  • hexo init
  • #安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
  • $ hexo init
  • $ cd
  • $ npm install
  • #新建完成后,指定文件夹的目录如下
  • .
  • ├── _config.yml
  • ├── package.json
  • ├── scaffolds
  • ├── scripts
  • ├── source
  • | ├── _drafts
  • | └── _posts
  • └── themes
安装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

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

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

  • 在Github的网站目录下创建CNAME文件
  • 填写自己的域名如hellodog.com,保存结束
  • 登录DNSPod,先添加域名,然后添加记录,设置如下

延伸阅读:


                                                                                注:相关网站建设技巧阅读请移步到建站教程频道。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|关于我们|申请友链|Archiver|手机版|拘留所|冠富商务通

GMT+8, 2026-1-27 10:33 , Processed in 0.807046 second(s), 18 queries , Wincache On.

Powered by HCMS Version 2.0

© 2008-05-14 guanfu.net.cn

快速回复 返回顶部 返回列表