前言
- Github Pages是面向用户、组织和项目开放的公共静态页面搭建托管服务,站点可以被免费托管在Github 上,你可以选择使用Github Pages默认提供的域名github.io或者自定义域名来发布站点;
- Hexo是一个快速、简洁且高效的博客框架。Hexo 使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页;
- 入门级文章,所有操作基于Windows系统;文中打开文件所用的软件是Notepad++(免费)或Sublime Text(需要user license)。
前期工作
软件安装:与普通软件安装方式一样;安装过程中,若有
Add to PATH
选项都要勾选。
- 下载安装Git;
- 下载安装Node.js;
Git配置:打开Git Bash:
开始菜单
—>Git
—>Git Bash
,并依次输入以下代码:$ git config --global user.name "Your Name" $ git config --global user.email "email@example.com"
配置Github
- 注册并登录Github
- 创建SSH Key:打开Git Bash或Windows CMD,输入:
ssh-keygen -t rsa -C "Github的注册邮箱地址"
,一路回车,完成后会在用户目录下生成id_rsa
(不能泄露)和id_rsa.pub
;
- 添加SSH Key到Github:复制
id_rsa.pub
文件内容进行以下操作(图片来自于浅茉);
- 创建仓库,repository name必须为:
your-Github-name.github.io
;
基于Hexo搭建博客
- 安装Hexo:Git bash或windows CMD上输入:
$ npm install -g hexo-cli
;nmp简介; - 建站/初始化:(生成文件简介):在本地合适盘新建文件夹(用来放blog资料的:例如我的
F:\1A--BIG.JUN\Blogs\Blogs
);打开这个空文件夹,右键选择Git Bash Here
。输入:$ hexo init
初始化文件夹;
- 生成静态文件:
$ hexo generate
或$ hexo g
,生成文件放在public
文件夹下;(初始化hexo 之后source目录下自带一篇hello world文章);
本地浏览:
1、启动本地服务器:输入
$ hexo server
或$ hexo s
;
2、在浏览器输入:http://localhost:4000
,即可显示生成的文章网页;
3、停止预览:键盘ctrl+c
。
Tip:页面不能加载或端口4000被占用情况解决方法更改主题
如果觉得默认主题不好看的,可以更改主题:官网主题、NexT主题等,以NexT主题为例;`1、下载主题:
git clone https://github.com/iissnan/hexo-theme-next themes/next
;
2、应用主题:打开站点配置文件
_config.yml
,找到theme
,更改为next
;之后在Git Bash中依次输入:$ hexo clean
(清理缓存数据)、$ hexo g
、$ hexo s
;
3、验证主题:浏览器输入
http://localhost:4000
;
部署到Github
- 网站仓库路径复制
- 修改站点配置文件
_config.yml
,repository设为你刚才复制的仓库路径;
- 安装Git插件:
$ npm install hexo-deployer-git --save
;
- 将新生成文件部署到Github:
$ hexo d
。
- 网站验证:浏览器输入:
http://bigjun777.github.io
(修改成你的,因为我绑定了域名,所以下图显示的是bigjun.me)。
新建文章与发布
至此,我们已经完成了个人博客的搭建,接下来讲一下新建文章与发布。
- 新建文章:Git Bash中输入:
$ hexo new "文章名"
,看提示在相应目录下能找到*文章名.md
文件;
- 编辑文章:使用Markdown编辑器来进行编写;
- 清理缓存、刷新静态文件:依次输入
$ hexo clean
与$ hexo g
;
- 本地服务器浏览、部署Github:一般情况下我们先在本地
$ hexo s
本地预览文章格式没问题后,再使用$ hexo d
上传到Github仓库,此时在浏览器输入:http://bigjun777.github.io
,会看到新文章已经上传。
总结
常用命令
$ hexo new "~~~" #新建文章 $ hexo g #生成静态文件 $ hexo s #本地浏览 $ hexo clean #清理缓存 $ hexo d #部署到Github
- 上述就是基于Hexo使用Github Pages来搭建个人博客的整个入门流程,至此你已经建好博客的大体框架,知道了如何更新文章。本文旨在记录分享,通过结合前人的教程经由自己实操总结出来,个别片段、图片如有错漏或出现侵权的敬请与我联系,我定当及时处理。下一篇博文更新:我的博客我做主——Hexo-NexT博客框架优化 。我的个人博客BigJun’s Blog
参考资料/拓展阅读
1、Hexo官方使用文档
2、NexT官方使用教程
3、Hexo+GitHub博客搭建实战–From wangwlj
4、Hexo搭建独立博客全纪录(三)使用Hexo搭建博客–From浅茉
5、修改npm下载模块安装位置