Github+Hexo搭建博客
本文介绍了如何使用hexo在GitHub上搭建个人博客
1.环境准备
- git
- Node.js
- Github账号
- Hexo
1.1Git安装
从git for windows下载git安装.
安装完成后在控制台输入git --version验证是否安装成功
1.2Node.js
从Node.js下载对应的版本安装即可。
安装完成后在控制台输入node -v来验证是否安装成功,并且环境设置正确。
1.3Github账号
Github账号自行注册
1.4安装Hexo
Node.js安装成功后在控制台执行npm install -g hexo-cli,npm会自动帮我们完成hexo的安装。
安装结束后可以输入hexo version验证是否安装成功
2.创建本地博客目录
首先在本地目录创建一个自己的博客文件夹,例如我这里的本地目录是D:\My_Blogs,接下来开始初始化hexo目录。
然后打开控制台cd到博客目录下,执行hexo init命令(或者执行hexo init <folder>指定生成博客的目录,没有指定folder时,hexo会在当前目录下初始化),hexo会自动帮我们生成博客。因为我这里已经创建了D:\My_Blogs目录,所有后续的操作都在D:\test下执行。执行完init命令后会在博客文件夹下生成如下的文件。
scaffolds文件夹是hexo的模板文件夹。source文件夹顾名思义是存放博客资源的地方,当我们使用hexo命令创建博客时会在这个目录下生成相应的md文件和同名文件夹用来存放资源。themes是hexo的主题文件夹,hexo支持多种自定义博客主题,需要切换主题时可以从GitHub上clone主题资源到这个目录下。

到这里其实本地博客已经搭建完成了,接下来执行hexo g命令(hexo generate的简写形式,两者作用相同),会生成本地的静态页面。
可以看到hexo生成了28个文件,用时827ms。不知道为什么这里的Generated:打印都没有具体文件名
这里去看本地的博客目录会发现hexo创建了一个public文件夹,下面是hexo生成的博客静态文件
再执行hexo s命令(hexo server的简写形式)会启动hexo服务。
如图,表示服务启动成功了。
这时候可以在浏览器访问http://localhost:4000查看博客了,默认情况下本地访问都是这个地址。
如图,本地的hexo博客已经搭建完成。
3.Github创建博客仓库
打开GitHub主页,点击+号下的New repository创建一个新的仓库

然后在仓库界面填写相关仓库信息

踩坑提醒:这里一定要保证填写的repository name是你的GitHub名称+github.io的格式,不要写错。
(这里因为我已经创建了suifengczc.github.io的仓库所以提示仓库已存在)
否则写错了仓库名称会导致后面访问正式线上博客时出现找不到资源或者布局出错的问题。
填写完仓库名称和描述(可选)后直接Create repository就行了。
GitHub仓库创建完成后复制仓库的地址,如下
粘贴到博客目录下的_config.yml文件末尾,如下图所示
type 填gitrepository 值填复制来的仓库地址branch 默认填master就行
这里一定要注意,hexo的配置文件中所有的value值和:之间必须要有空格,否则会报错
然后点击仓库界面的Settings进入仓库的设置界面,拉到最下面有GitHub Pages
这里的Your site is published at xxxxxxxxxx就是可访问的线上博客地址。
把这里的url复制到刚刚打开的_config.yml的开头。如下图所示



这里配置好后可以准备把本地的博客push到GitHub了
4.push本地博客到GitHub
首先使用npm i hexo-deployer-git安装一个hexo的git扩展功能。
如图表示安装成功。
然后依次执行下面三条命令
hexo clean //清除缓存
hexo g //重新生成博客文件
hexo d //push到GitHub
执行hexo d的时候会要求输入GitHub账号和密码,输入完成后就push成功了。
接下来就可以打开我们的线上博客地址查看最新博客了。