hexo写文章 使用hexo+oschina搭建个人博客
最近想搭建一个个人站点,却意外发现了一个好东西,hexo+ pages可以搭建免费的博客!挺有意思,以前也没怎么写过技术博客,索性就趁着这个机会补上以前拉下的功课吧。 o(=·ω·=)m
什么是Hexo?
Hexo是一个简单地、轻量地、基于Node的一个静态博客框架。Hexo 使用 (或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。有丰富的主题可选,还可以自定义主题。生成的静态文件托管在上。
什么是 pages?
Pages 可以被认为是用户编写的、托管在 上的静态网页。由于它的空间免费稳定, 可以用于介绍托管在上的或者搭建网站。我平常使用的是码云(因为使用开源中国的很多产品,方便社会化协作),而不是,都是一样的,国内还有一家代码托管平台。
1.搭建环境
安装hexo的前提是要有Node.js以及Git,我是直接从Node和Git官网下载的安装包安装的,你可以参考Hexo官网教程进行搭建。
安装完Node以及Git后,通过下面的命令安装Hexo:
1
npm install -g hexo-cli
我们可以直接使用Git Bash这个命令行工具,
2.本地运行 Hexo
安装 Hexo 完成后,请依次执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
123
$ hexo init $ cd $ npm install
例如我们要把他放到c盘根目录的,那命令如下:
1234
cd c:hexo init hexoBlogcd c:hexoBlognpm install
新建完成后,指定文件夹的目录如下:
12345678
.├── _config.yml├── package.json├── scaffolds├── source| ├── _drafts| └── _posts└── themes
下面依次介绍上面各个文件或者目录的用途:
详细信息可以查看官网介绍建站、配置
到这里我们就可以现在本地运行查看效果了,走起。执行下面命令:
12
cd c:hexoBloghexo server
浏览器输入:4000就可以看到效果。如下:
3.编写第一篇博客
这里有两种方式,第一种使用如下命令新建一篇文章。如果没有设置 的话,默认使用 .yml 中的 参数代替。如果标题包含空格的话,请使用引号括起来。:
12
$ hexo new [layout]`
举例:
12
cd c:hexoBloghexo new first
将会在项目的 目录下的 文件夹中看到有个first.md文件,这就是刚才新建的文章,你会发现普通的.md文件不同,文件开头有如下代码:
12345
---title: first(文章标题)date: 2017-03-22 21:21:32(文章日期)tags:(文章标签)---
这些是前置申明,还有一些其他的申明以后会说到。
。此外还有一个默认的hello-world.md文件,这是默认安装时带的。
所以另一种方式就是将你写好的文件直接放文件中,不过要有前置申明。
使用hexo 重新启动就能看到刚才新建的文章了。
4.生成静态文件
现在只能在本地启动项目然后通过本地地址访问博客网站,下面我们就可以利用Hexo生成静态Html,很简单,只需要在命令窗口执行下面代码:
1
$ hexo generate
项目根目录下会生成一个文件夹,这是直接可以拷走用的,我们托管的就是这一部分代码。
5.发布静态Html文件到码云 Pages
首先需要注册一个码云账号,然后创建一个项目:
创建完项目后得到项目的Https的地址后面要用。地址获取如下图
Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。
1
$ hexo deploy
但我们需要先安装一个插件,使用如下命令:
1
$ npm install hexo-deployer-git --save
接下来配置根目录.yml 文件,修改 的值,如下图:
然后执行一键部署命令:
1
$ hexo deploy
举例:
12
cd c:hexoBloghexo deploy
之后会弹出输入码云账号密码的对话框。
部署成功之后,登录码云,查看之前创建的项目中出现了本地项目中 文件夹中的文件,这时候代表之前的部署是成功的。
然后开启码云的Pages功能:
访问链接:
哇塞,这就成了,感觉不是很难啊?但是怎么是这个样子,样式呢?
原因:
如果你想以根目录的形式访问自己的静态网站,只需要建立一个与自己个性地址同名的项目即可,如 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb..io直接访问,那么他就可以创建一个名字为ipvb的项目 部署完成后,就可以以 进行访问了。
举例:
这个博客交,那么你注册时候填写的账户也得是。我的不是,所以我的用子目录才能正确的访问到css,js,/等路径,所以修改根目录.yml 文件,修改url 的值,如下图