hexo博客(一):使用hexo+oschina搭建个人博客

hexo博客

Posted by LanMiao on 2017-01-01

最近想搭建一个个人站点,却意外发现了一个好东西,hexo+github pages可以搭建免费的博客!挺有意思,以前也没怎么写过技术博客,索性就趁着这个机会补上以前拉下的功课吧。 o(=·ω·=)m

什么是Hexo?

Hexo是一个简单地、轻量地、基于Node的一个静态博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。有丰富的主题可选,还可以自定义主题。生成的静态文件托管在github上。

什么是github pages?

GitHub Pages 可以被认为是用户编写的、托管在 github 上的静态网页。由于它的空间免费稳定, 可以用于介绍托管在github上的Project或者搭建网站。我平常使用的是码云(因为使用开源中国的很多产品,方便社会化协作),而不是github,都是一样的,国内还有一家代码托管平台coding

1.搭建环境

安装hexo的前提是要有Node.js以及Git,我是直接从NodeGit官网下载的安装包安装的,你可以参考Hexo官网教程进行搭建。

安装完Node以及Git后,通过下面的命令安装Hexo:

1
npm install -g hexo-cli

我们可以直接使用Git Bash这个命令行工具,GitBash

2.本地运行 Hexo

安装 Hexo 完成后,请依次执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

例如我们要把他放到c盘根目录的HexoBlog,那命令如下:

1
2
3
4
cd c:
hexo init hexoBlog
cd c:hexoBlog
npm install

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

下面依次介绍上面各个文件或者目录的用途:

  • _config.yml站点配置文件,很多全局配置都在这个文件中。
  • package.json 应用数据。从它可以看出hexo版本信息,以及它所默认或者说依赖的一些组件。
  • scaffolds 模版文件。当你创建一篇新的文章时,hexo会依据模版文件进行创建,主要用在你想在每篇文章都添加一些共性的内容的情况下。
  • scripts 放脚本的文件夹, 就是放js文件的地方
  • source 这个文件夹就是放文章的地方了,除了文章还有一些主要的资源,比如文章里的图片,文件等等东西。这个文件夹最好定期做一个备份,丢了它,整个站点就废了。
  • themes 主题文件夹。

详细信息可以查看官网介绍建站配置

到这里我们就可以现在本地运行查看效果了,走起。执行下面命令:

1
2
cd c:hexoBlog
hexo server

浏览器输入http://localhost:4000就可以看到效果。如下:
hexofirst.jpg

3.编写第一篇博客

这里有两种方式,第一种使用如下命令新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。:

1
2
$ hexo new [layout] <title>
`

举例:

1
2
cd c:hexoBlog
hexo new first

将会在HexoBlog项目的source 目录下的_posts 文件夹中看到有个first.md文件,这就是刚才新建的文章,你会发现普通的.md文件不同,文件开头有如下代码:

1
2
3
4
5
---
title: first(文章标题)
date: 2017-03-22 21:21:32(文章日期)
tags:(文章标签)
---

这些是前置申明,还有一些其他的申明以后会说到。
。此外还有一个默认的hello-world.md文件,这是默认安装时带的。
所以另一种方式就是将你写好的文件直接放_posts文件中,不过要有前置申明。

使用hexo server重新启动就能看到刚才新建的文章了。

4.生成静态文件

现在只能在本地启动项目然后通过本地地址访问博客网站,下面我们就可以利用Hexo生成静态Html,很简单,只需要在命令窗口执行下面代码:

1
$ hexo generate

项目根目录下会生成一个public文件夹,这是直接可以拷走用的,我们托管的就是这一部分代码。
public.jpg

5.发布静态Html文件到码云 Pages

首先需要注册一个码云账号,然后创建一个项目:
gitcreate1.jpg
gitcreate2.jpg
创建完项目后得到项目的Https的地址后面要用。地址获取如下图
gitcreate3.jpg

Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。

1
$ hexo deploy

但我们需要先安装一个插件,使用如下命令:

1
$ npm install hexo-deployer-git --save

接下来配置根目录_config.yml 文件,修改deploy 的值,如下图:
deploy.jpg

然后执行一键部署命令:

1
$ hexo deploy

举例:

1
2
cd c:hexoBlog
hexo deploy

之后会弹出输入码云账号密码的对话框。

部署成功之后,登录码云,查看之前创建的项目中出现了本地项目中public 文件夹中的文件,这时候代表之前的部署是成功的。
deploy2.jpg

然后开启码云的Pages功能:
pages1.jpg
pages2.jpg

访问链接:
pages3.jpg

哇塞,这就成了,感觉不是很难啊?但是怎么是这个样子,样式呢?
pagesshow.jpg

原因:
如果你想以根目录的形式访问自己的静态网站,只需要建立一个与自己个性地址同名的项目即可,如http://git.oschina.net/ipvb 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.oschina.io直接访问,那么他就可以创建一个名字为ipvb的项目http://git.oschina.net/ipvb/ipvb 部署完成后,就可以以http://ipvb.oschina.io 进行访问了。

举例:
这个博客交HexoBlog,那么你注册时候填写的账户也得是HexoBlog。我的不是,所以我的用子目录才能正确的访问到css,js,hexoBlog/images等路径,所以修改根目录_config.yml 文件,修改url 的值,如下图
url.jpg