使用Github+Hexo搭建个人博客系列(1)

使用Github+Hexo搭建个人博客系列(1)
使用GitHub + Hexo搭建个人博客的整个过程包括如下四大步:
1. 网络空间:存储网络内容得主机空间
2. 网络地址:访问网站得网络链接
3. 本地环境搭建:安装Git和Hexo及其以来软件
4. 配置部署:将Hexo博客框架部署到github作为自己github pages site 项目

1. 网络空间

每个网站都需要一定的存储空间来存储网站上的页面等内容,这也是网站服务器的作用之一。这里我们是搭建自己的个人博客,既不需要在上面运行动态页面,对存储空间大小要求也不大,而且现在还可以通过百度云盘、七牛云等来扩展自己的存储空间。这里采用GitHub免费提供的存储空间,所以你首先得注册github获得一个账号。github提供的免费存储空间原则上没有大小限制,但每个项目只有1G的空间,单个文件也不能超过100M,但这对于搭建个人博客来说完全没有压力。
注册github获得账号的过程不赘叙,跳过。

2. 网络地址

github允许创建一个用户名.github.io为repository名称的项目作为个人github主页项目GitHub Pages Site,也即个人博客,通过github提供的二级域名用户名.github.io可以从浏览器直接访问。所以早期个人博客搭建与起步阶段,用这个二级域名来访问就足够了,比如本人的是chuyishan.github.io。但随着你的不断耕耘,同时也需要更多人来浏览你的小站和你作交流,如果还用这个二级域名不仅地址太长不方便记忆,而且显得不正式太low。这时你就需要一个独立域名来绑定你的github主页项目,它的方式就是将你的独立域名解析成这个二级域名地址。
它的设置方式:
2.1 申请独立域名。在你申请独立域名的网站进行域名管理操作,设置域名解析。我购买的是百度云提供的域名服务。简单操作过程如下图:

2.2. 设置CNAME。是在主页项目的根目录下新建一个CNAME文件,文件内容就是你申请的独立域名。比如我的CNAME文件内容就是:xgate.top
这时你在浏览器访问自己的独立域名,就可以转到github的二级域名,从而访问你的个人博客。由于目前我还没创建自己的Git Pages Site,所以会出现如下提示。
使用Github+Hexo搭建个人博客系列(1)_第1张图片
2.3 创建Github Pages Site项目,并作相关配置。再次访问自己的独立域名xgate.top就会出现你的个人博客主页了,这里加了一个设置主题的操作,在实际中这在后面会被自己的博客样板覆盖。
使用Github+Hexo搭建个人博客系列(1)_第2张图片

3. 本地环境搭建

3.1 git安装
git是一种版本控制器,安装它是为了方便连接github,随时将本地博客文件部署到github pages site。github安装不赘述,跳过。
3.2 Node.js安装
Hexo基于Node.js的,搭建博客网站就需要安装Node.js环境。 Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,可以在非浏览器环境下,解释运行 JS 代码。
3.2 hexo安装
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。hexo安装指导文档传送门。主要命令如下:

#安装Hexo
npm install hexo-cli -g

#查看Hexo版本
hexo version
#初始化Hexo,在指定文件夹建立GitHub Pages Site 本地文件库
hexo init chuyishan.github.io
进入该目录
cd chuyishan.github.io
#创建博客依赖文件系统
npm install
#启动本地Hexo服务
hexo server

这时你可以登陆http://localhost:4000查看博客,但这只是表明本地的搭建好了,也只能你自己看到,并没有部署到网络上,其他人仍是看不到。

4. 配置和部署平台

完成以上操作后,我们就可以将本地的Hexo博客部署到github上了。但我们首先得安装一个扩展,否则会报错:deloyer not found:git,再git bash环境下的安装命令:npm install hexo-deployer-git --save。其他常见指令如下:

#清除缓存文件 db.json 和已生成的静态文件 public。
hexo clean
#生成静态文件
hexo generate (简写为hexo -g)
#部署到github
hexo deploy(简写为hexo d

5. 保留CNAME、README.md等文件

提交到github之后以前其它代码都没了,此时把一些非md文件把他们放到source文件夹下,这里的所有文件都会原样复制(除了md文件)到public目录的。
由于hexo默认会把所有md文件都转换成html,包括README.md,所有需要每次生成之后、上传之前,手动将README.md复制到public目录,并删除README.html。

参考
1. 手把手教你用Hexo+Github 搭建属于自己的博客
2. Hexo常见的命令行

你可能感兴趣的:(GitHub,Pages,Site,Hexo,Blog,GitHub)