前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo+github搭建个人博客-环境搭建篇

Hexo+github搭建个人博客-环境搭建篇

作者头像
好好学java
发布2018-08-01 16:50:07
4490
发布2018-08-01 16:50:07
举报

一、概述

前言:因为本人正在着手维护个人的博客,所以把自己的制作过程记录下来,分享过程中的方法与问题!

我们使用Hexo + Github搭建个人博客,我们自然不能错过,事不宜迟,我们现在立马来认识一下,他们究竟是何方神圣吧。

1.1 关于 GitHub

1.1.1 Github

接触编程一段时间后,相信大家都会开始了解到版本控制,如SVN、HG。是的,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

下载并且安装完成后,打开终端执行以下命令进行验证

代码语言:javascript
复制
 $ git --version

如果终端输出类似下面的内容,说明安装成功了

代码语言:javascript
复制
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框架的基本安装

代码语言:javascript
复制
$ npm install hexo-cli -g

2> 安装便于自动部署到Github上的插件

代码语言:javascript
复制
 $ npm install hexo-deployer-git --save

3> 安装atom生成插件,便于感兴趣的小伙伴们订阅

代码语言:javascript
复制
 $ npm install hexo-generator-feed --save

4> 安装博客首页生成插件

代码语言:javascript
复制
 $ npm install hexo-generator-index --save

5> 安装归档生成插件

代码语言:javascript
复制
 $ npm install hexo-generator-archive --save

6> 安装tag生成插件

代码语言:javascript
复制
$ npm install hexo-generator-tag --save

7> 安装category生成插件

代码语言:javascript
复制
 $ npm install hexo-generator-category --save

8> 安装Sitemap文件生成插件

代码语言:javascript
复制
 $ npm install hexo-generator-sitemap --save

9> 安装百度Sitemap文件生成插件,因为普通的Sitemap格式不符合百度的要求

代码语言:javascript
复制
 $ npm install hexo-generator-baidu-sitemap --save

. 三、结束语

至此,关于利用Hexo + Github 搭建个人博客所需要的基本环境已经准备完毕。

最后,如果大家想要查看通过Hexo + Github搭建的博客的最终效果的话,可以访问: http://blog.ouyangsihai.cn/

下篇文章将介绍博客的搭建。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-07-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 好好学java 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、概述
  • 1.1 关于 GitHub
    • 1.1.1 Github
      • 1.1.2 Github Pages
      • 1.2 关于 Hexo
      • 1.3 Hexo + Github
        • . 二、环境搭建
        • 2.1 环境搭建 - Git
        • 2.2 环境搭建 - NodeJS
        • 2.3 环境搭建 - Hexo
          • . 三、结束语
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档