使用Github,Hexo搭建个人博客网站

效果展示:Mingdy的博客

  1. 准备工作
  2. 搭建博客(远程与本地)
  3. 发布博客
  4. 更换主题

准备工作

了解Hexo

Hexo是高效的静态站点生成框架,她基于Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的标签插件来快速的插入特定形式的内容,而且相对于其他框架,Hexo在速度上也有很大优势。

搭建Node.js环境

我们了解到Hexo基于Node.js的,那么我们搭建博客网站首先需要安装Node.js环境。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以在非浏览器环境下,解释运行 JS 代码。

下载地址:http://nodejs.cn/download

测试安装:命令行使用node -v 、npm -v,查看显示版本号即成功。

安装Hexo博客框架工具

Hexo是一个建站工具,可以帮助我们快速生成基本的博客文件,安装它需要在控制台下使用如下命令:

1
npm install hexo-cli -g

若报错,请尝试在命令前加上sudo

安装Git版本工具

Git是目前世界上最流行的分布式版本控制系统,是的,没有之一。使用Git可以帮助我们把本地的网页和文章等内容提交到Gihub上,实现同步。
下载地址:https://git-scm.com/downloads
Windows系统需下载,Mac系统因为自带Git无需操作。
测试安装:git - -version,查看显示版本号即成功。

注册Github账号

gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。这里用到Github,是因为我们需要通过Github得到自己的博客网站域名,而且需要使用gitHub同步我们个人博客的相关文件。
注册地址:https://github.com
注册流程:https://www.baidu.com,百度一下。

注意:注册Github的时候一定要选择一个合适的名字,因为后来博客网站的域名也会用到这个名字。虽然Github用户名支持后期修改,但是还是会带来很多不必要的麻烦。github的使用在网上有很多教程,这里也就不再累述了。

开始搭建博客

开启GitHub Pages服务

搭建我们的个人博客需要一个唯一的域名,当然我们可以申请购买一个域名来使用,但是在不是太必要的情况下,我们也可以通过Github Pages获得一个免费使用的域名,这需要我们在Github上新建一个仓库,如下:
Create a new repository

这个过程和建立普通的仓库没什么区别,关键在于新仓库的名字,一定要是UserName+“github.io”的形式。这也是之前强调的要起一个好的用户名的原因。这样之后我们最后的博客网站的链接就会是:https://UserName.github.io的形式。
注意:固定新仓库的名字格式并非必须,只是这样操作生成的博客域名比较短小简洁,另起他名生成博客域名会很冗长。

点击Create Repository之后,随后选择Setting进入设置,找到Github Pages如下:

Github Pages

这里我们需要点击Choose a theme任意选择一个选择主题,然后界面会跳转到仓库,我们看到有两个文件如下:

屏幕快照

此时若再查看setting,我们会看到开启GitHub Pages之后得到的域名如下:
屏幕快照

现在我们就可以使用https://UserName.github.io,访问自己的博客网站了,打开链接我们会看到默认主题的个人博客样式如下(虽然有点点丑,是吧):

屏幕快照

创建本地博客站点

上述的步骤相当于我们使用Github page,创建了一个默认的博客页,并且得到了一个可外部访问的域名。但是这个博客页很Low。我们的目的是创建自己个性化的博客网站,所以我们使用Hexo在本地先创建一个本地博客站点,优化后再把它部署到github上。接下来我们使用控制台命令在本地一个合适的位置创建博客站点文件夹如下:

1
hexo init  myHexoBlog       //myHexoBlog是项目名

屏幕快照

下面来测试本地博客站点,在本地博客根目录下使用控制台命令:

1
2
3
hexo g  //g是generetor的缩写,生成博客

hexo s //s是server的缩写,启动服务

此时打开浏览器,输入 http://localhost:4000/, 我们将会看到Hexo自带默认主题显示的博客样式如下(呃,是好看了那么一点点):

屏幕快照

同步Github,允许公共访问

在本地我们已经搭建了博客,但是还只能自己本地访问。若要别人也能看到,那就需要我们将其同步部署到GitHub上了。还记得我们之前准备的Github仓库吗,这里就要用到了。
首先找到我们的博客仓库,并拷贝仓库地址:

屏幕快照

然后修改本地博客目录的配置:
修改本地博客根目录下的_config.yml文件,修改deploy下的配置如下:

屏幕快照

最后执行控制台命令:

1
2
3
npm install hexo-deployer-git —save //安装部署插件

hexo d //部署到github

现在,我们再次访问链接:https://userName.github.io,就会发现这里的界面和本地的一样了。如此一来我们搭建的个人博客网站就基本完成了。

发布博客

激动人心的时候到了,终于可以发布自己的第一篇博客了。来尝试一下以下的步骤:
在本地博客文件夹根目录输入:

1
2
3
4
5
hexo new "我个人博客的第一篇博客,哈哈哈..."

hexo g //生成网页

hexo d //部署到远端(github)

查看我们本地的博客文件夹,将会看到我们创建一个条新的博客文章:

屏幕快照

现在打开我们的博客网站:http://UserName.github.io,会看到网页如下(显示可能会延时,不如先喝杯茶放松下吧):

屏幕快照

这就是我们发布博客的方法啦,当然这里是为了演示,真正做的时候我们要找到_posts里的博客原文,先编辑内容,然后再部署到github上。

更换主题

现在我们已经看见个人博客的雏形了,但是现在的博客网页一点也不高大上。为了让它看起来更美观一些,我们可以为其更换主题(当然也可以自己在默认主题下自己编写美化博客界面,可是我还不太会前端,以后再突破吧)。这里以使用github上的next主题为例:

创建next文件夹

切换到本地博客根目录下,在主题文件thems下创建一个新文件夹next存放即将下载的next主题

1
mkdir themes/next

下载主题Next

1
curl -s [https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest](https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest) | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

此步骤可参考:https://github.com/iissnan/hexo-theme-next

下载成之后我们会看到next的主题已经存在thems里了如下:

屏幕快照

修改博客配置文件,更换主题配置

修改博客根目录(不是next主题)下的_config.yml文件,搜索theme字段,并将其值修改为next

屏幕快照

然后在控制台下输入如下命令:

1
2
3
4
5
hexo clean  //清理缓存

hexo g //重新生成博客代码

hexo d //部署到远端

再次打开我们的博客网站:https://UserName.github.io,将会看到更换主题后的博客网页如下:

屏幕快照

总结

有一种美,叫做新生。记录下每一个成长的点滴!