. 一概述
前言: 因为本人正在着手维护个人的博客, 所以把自己的制作过程记录下来, 分享过程中的方法与问题!
我们使用 Hexo + Github 搭建个人博客, 我们自然不能错过, 事不宜迟, 我们现在立马来认识一下, 他们究竟是何方神圣吧
1.1 关于 GitHub
1.1.1 Github
接触编程一段时间后, 相信大家都会开始了解到版本控制, 如 SVNHG 是的, Github 是一个知名的 分布式版本控制系统 以及 开源代码库
在本次博客搭建中, 也是需要大家能够具备一定的 Git 版本控制知识的大家放心, 后文会对必须用到的命令进行讲解, 但如果你想要对它有更详细的认知, 可以在空余的时候参考以下链接:
链接: https://github.com/
1.1.2 Github Pages
在 Github 里面, 每一个项目都拥有它的一个主页, 列出项目的源文件, 但是对于新手来说, 看到那么多的源代码, 只会让人感到头晕脑胀, 无从下手, 他更希望的是, 该项目有一个简明易懂的页面, 告诉他每一步要怎么去做
因此, Github 就设计了 Github Pages 这个功能, 允许用户自定义项目首页, 用来替代默认的源码列表所以, Github Pages 可以被认为是用户编写的托管在 github 上的静态网页
有的用户说, 我前端渣渣, 这个功能对我来说, 并没有什么卵用, 还不如用个记事本写好上传给大家看 Github 似乎早就考虑到了这一点, 设计了几个漂亮的模版供用户直接选择使用
链接: https://pages.github.com/
而我们也正是利用了 Github Pages 这一个特性, 去搭建属于我们的个人博客
1.2 关于 Hexo
按照官网的说法, Hexo 是一个快速简洁且高效的博客框架 Hexo 使用 Markdown(或其他渲染引擎) 解析文章, 在几秒内, 即可利用靓丽的主题生成静态网页
链接: https://hexo.io/zh-cn/
1.3 Hexo + Github
通过上面的介绍, 大家对 Hexo 和 Github 已经有了大概的了解
没错, 我们的方式就是, 利用 Markdown 进行博客的编写, 通过 Hexo 这个框架解析生成靓丽的静态页面, 然后部署到 Github 上供大家浏览
这种方法具备好处是:
免费, 无限流量
享受 git 的版本管理功能, 不用担心文章遗失
专注于我们自己的博客内容, 其他诸如服务器管理的事情交给 Github 即可
当然啦, 万事有利有弊这种方式也有它的弊端:
有一定技术门槛, 你必须要懂一点 git 和网页开发
生成的是静态网页, 添加动态功能必须使用外部服务, 比如评论功能我们使用多说
不适合大型网站, 因为没有用到数据库, 每运行一次都必须遍历全部的文本文件, 网站越大, 生成时间越长
但是, 这已经基本满足我们的基本需求了
. 二环境搭建
说了那么多, 终于到正文啦!
本文将以 windows 系统 和 Hexo 3.1.1 为例进行讲解
2.1 环境搭建 - Git
下载地址: http://git-scm.com/downloads
如图, 根据你的系统点击下载相应平台的 Git 进行安装, 这里我们以 windows 系统 为例, 自然选择的是 windows
sihai
下载并且安装完成后, 打开终端执行以下命令进行验证
$ git --version
如果终端输出类似下面的内容, 说明安装成功了
git version 2.3.2 (windows Git-55)
2.2 环境搭建 - NodeJS
下载地址: https://nodejs.org/download/
如图, 根据你的系统点击下载相应平台的 NodeJS 进行安装, 在 release 中选择相应的版本安装
sihai
windows 中安装比较简单, 会自动的设置好环境变量, 所以只要把下载下来的安装包解压, 运行. exe 文件安装即可!
2.3 环境搭建 - Hexo
1> 执行以下命令进行 Hexo 框架的基本安装
$ npm install hexo-cli -g
2> 安装便于自动部署到 Github 上的插件
$ npm install hexo-deployer-git --save
3> 安装 atom 生成插件, 便于感兴趣的小伙伴们订阅
$ npm install hexo-generator-feed --save
4> 安装博客首页生成插件
$ npm install hexo-generator-index --save
5> 安装归档生成插件
$ npm install hexo-generator-archive --save
6> 安装 tag 生成插件
$ npm install hexo-generator-tag --save
7> 安装 category 生成插件
$ npm install hexo-generator-category --save
8> 安装 Sitemap 文件生成插件
$ npm install hexo-generator-sitemap --save
9> 安装百度 Sitemap 文件生成插件, 因为普通的 Sitemap 格式不符合百度的要求
$ npm install hexo-generator-baidu-sitemap --save
. 三结束语
至此, 关于利用 Hexo + Github 搭建个人博客所需要的基本环境已经准备完毕
最后, 如果大家想要查看通过 Hexo + Github 搭建的博客的最终效果的话, 可以访问: http://ouyangsihai.cn/
来源: https://mp.weixin.qq.com/s?__biz=MzI2OTQ4OTQ1NQ==&mid=2247483836&idx=1&sn=37a1a46e843965339cd419c1957d5031&chksm=eadec5fcdda94cea010d960ce47618de1ae2f2ab904af84739240e491927f52ab72c572ee155#rd