Github+HEXO搭建一个独立博客教程
知道Github Pages + Hexo的好,就很想把它分享给身边的朋友,所以我写了这篇博客,让大家在搭建的过程中少走弯路,下面就将这个安装的流程写了下来。
为什么选择GitHub Pages?
- 1、github pages有300M免费空间,资料自己管理,保存可靠;
- 2、学着用github,享受github的便利,上面有很多大牛,眼界会开阔很多;
- 3、顺便看看github工作原理,最好的团队协作流程;
- 4、github是趋势;
- 5、你不觉得一个文科生用github很geek吗?瞬间跻身技术界;
- 6、就算github被墙了,我可以搬到国内的gitcafe中去
GitHub Pages是什么?
GitHub Pages本用于介绍托管在GitHub的项目, 不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了
github Pages可以被认为是用户编写的、托管在github上的静态网页。
配置环境
1、Node.js 用来生成静态页面的
Node.js下载 下载最新版本,一路安装即可。Node.js 是否安装成功就不展开来说了,如果不是很清楚的可以网上搜索相关教程。
2、Git 把本地的hexo编译生成的public下面的内容提交到github上去.
Git下载 下载最新版本,如果对git命令不是很熟悉的话,建议在安装的时候选择“Run Git and included Unix tools from the Windows Command Prompt”,这样子就会通过客户端不需要操作命令就很方便的操作git,但是由于我个人比较喜欢直接使用命令,所以下面的内容我都会使用命令去讲解。推荐一个网上查到的一个关于git命令比较好的教程,给分享一下git教程
3、注册Github 用户名和邮箱十分重要。
注册过程比较简单
4、添加SSH Key到GitHub(这一步不是必须,如果你是希望以后每次都不需要重复的输入账号和密码就添加),详细教程不展开。
使用Github Pages建立博客
自己的GitHub用户名建立的username.github.io这样的用户&组织页(站),个人博客选择
形如username.github.io这样的可访问的站,每个用户名下面只能建立一个。
依附项目的pages
Github上建立仓库
登录后系统,在github首页,点击页面右下角「New Repository」
填写项目信息:
Repository name:lkun.github.io
Description (optional):关于该博客的一个描述,随便自己怎么写
注意:Github Pages的Repository名字是特定的,比如我Github账号是lkun,那么我Github Pages Repository名字就是lkun.github.io。
点击「Create Repository」 完成创建。
HEXO
HEXO介绍
Hexo是一个简单、快速、强大的博客发布工具,支持Markdown格式。
HEXO安装
打开git
$ npm install -g hexo
如果出现“npm ERR”,则可以考虑换成cnpm尝试。$ npm install -g cnpm
- 部署Hexo
在我的电脑中建立一个名字叫「Hexo」的文件夹,然后在此文件夹中右键打开Git Bash。
$ hexo init
Hexo随后会自动在目标文件夹建立网站所需要的所有文件。
最后执行:
$ hexo g
$ hexo s
然后浏览器输入:localhost:4000,如果部署成功的话,则会出现一个静态博客页面了。
更换主题
1、在Hexo的根目录下面执行
$ git clone https://github.com/wuchong/jacman.git themes/jacman
2、启用主题
修改Hexo目录下的config.yml配置文件中的theme属性,将其设置为jacman。
3、生效
$ hexo g #生成
$ hexo s #启动本地服务,进行文章预览调试
4、浏览器确认修改生效 localhost:4000
提交到GitHub
- 将Hexo根目录下public中的所有内容提交给上面几步在Github上面创建的Repository(lkun.github.io)上,上传成功后,在浏览器上面直接输入:https://lkun.github.io/ 即可立马看到效果了。
- 个人的一个博客到此就已经搭建完成了。
Hexo常用命令
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
简写
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
安装插件
############## 添加sitemap和feed插件
$ npm install hexo-generator-sitemap
$ npm install hexo-generator-feed
############## 修改_config.yml,增加以下内容
# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
#sitemap
sitemap:
path: sitemap.xml
生效
$ hexo clean #清除缓存
$ hexo g #生成
$ hexo s #启动本地服务,进行文章预览调试
执行完这3步,再把public下面的所有内容提交到Github上去,浏览器访问即可看到更改后的效果。