hexo与github pages搭建博客

最新推荐文章于 2020-03-10 23:51:40 发布

YuNansen

最新推荐文章于 2020-03-10 23:51:40 发布

阅读量690

点赞数 2

分类专栏：编程人生

编程人生专栏收录该内容

24 篇文章 0 订阅

订阅专栏

谢谢原作者~

前言

暑假的时候在万网上申请了一个免费空间，于是购买了一个域名，自己搭建了一个基于wordpress的个人博客，中间经历了各种审批拍照备案，总共花了大概一个月才备案完成得以上线。前两天偶然看到室友同学的博客，用github page和hexo构建的，感觉很简洁吧，就打算自己也做一个。看了各种教程，配置了各种环境后终于成功了，也就是现在这个博客啦。

这篇文章是为了帮助电脑小白也能够快速的搭建属于自己的个人博客所写的教程，初次写教程，希望能够对大家有所帮助。

Hexo介绍

Hexo 是一个快速、简洁且高效的基于Node的静态博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo作者为台湾人，其官方网站hexo.io也是基于github构建的网站。

Hexo安装

系统环境

如果没有安装上述程序，请按照以下步骤安装：

Git安装

Windows：前往官网下载并安装Git.
Mac：没用过不解释…

由于本人只有Windows电脑，所以以下操作均针对Windows系统。

Node.js安装

可以通过nvm进行安装，但本人是采用应用程序安装，下载后一路next即可。

Hexo安装

当上述环境搭载好后，只需通过命令行工具（Git bash/powershell）执行以下操作即可完成Hexo的安装。

$ npm install -g hexo-cli

Hexo建站及使用

Hexo建站

在安装好Hexo后，仅需一下几步即可完成建站：

$ hexo init <folder>
$ cd <folder>
$ npm install

上述三步，第一步为在当前目录创建名为的文件夹，并且在该文件夹中初始化hexo文件，第二步和第三步进入该文件夹安装npm。

此时的网站其实已经创建完毕了，不过并没有经过自定义而是一个初始的页面，我们可以通过以下方法启动本地服务器查看网站。

$ hexo server

当用户看到以下信息时表示本地端口已经打开，这时就可以通过浏览器访问http://localhost:4000/ 来预览网站。

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

Hexo的使用

我们能够在初始化的目录中看到Hexo初始化创建的以下文件夹

.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中_config.yml为网站信息配置文件，第一次配置好后就可以了，具体参数示意可参见hexo配置。

source目录中的_posts目录则是存放博客文章的地方，Hexo采用markdown语法格式书写博客，每当新建的博客或者已经写好的博客都会储存在该文件夹中，文件为markdown格式。当然，如果某篇文章不想要了或者想要修改，只需直接在该文件夹中删除或修改即可。

创建新文章

创建新文章十分简单，可以直接将已写好的markdown格式文章放入_posts目录，也可通过new命令创建。

$ hexo new <title>

需要注意的是，在直接将文件放入目录中时，请在markdown文件内容前加上以下内容，以帮助解析。

title: XXXXX
date: XXXX-XX-XX
categories: XX
tags: [XX,XX,XX]
---

对于正文内容格式及语法这里就不进行赘述，如需帮助请查看markdown的官方文档。

生成静态页面

前面提到过Hexo是静态博客框架，所以在写完文章后需要对所有文章进行静态化处理，即生成相应的静态网页文件。

静态化页面生成只需一步：

$ hexo generate

当你执行后能看到一连串的Creat命令行后即表示创建成功了。

Hexo部署

当网站生成后，下一步需要的就是将网站部署到GitHub上了。

Github配置

首先，想要部署到Github上，当然需要一个Github账号，如果没有。。。GitHub.

如果没有使用过Github，个人推荐前往廖雪峰的Git教程学习。

拥有Github后，需要做的是创建一个名为 username.github.io 的repositories。username为你的账号ID，如下：

username.github.io也是你最终搭建好的博客的链接

在完成上述操作后，只需要前往Hexo主目录下的_config.yml文件，将最下方的deploy部分修改为

deploy
	type: git
	repo: git@github.com:username/username.github.io.git

注意：每个冒号后需有一个空格，repo后内容为之前创建的repositories连接，由于新创建的是空的repo,可在如下位置查看

到此，Github部分配置完毕。

Hexo部署

由于使用Git部署，在部署网站前须安装hexo-deployer-git，只需在hexo目录下执行：

$ npm install hexo-deployer-git --save

之后，只需一步即可完成hexo的部署

$ hexo deploy

部署成功后，便可登陆username.github.io查看你的网站了。

需要注意的是，在每次部署前都需要静态化生成一次网站，可通过$ hexo deploy --generate实现部署前自动静态化生成。
每当网站内容或信息变更时，都需要deploy一次，才能使服务器端和本地同步。

转自：http://d12mnit.github.io/2015/10/13/hexo%E4%B8%8Egithub_pages%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B/