搭建个人博客

作为程序员,是该有点地方来记录点什么,搭建一个个人博客,来记录一下。
太复杂的不想折腾,重在写作的体验和页面的美观,我选择了hexo

1、hexo安装

对比一下还是觉得hexo比较好用

1
npm install -g hexo

2、创建一个新的blog

1
2
3
mkdir xuxping.github.io
cd xuxping.github.io
hexo init

3、选择一个主题

选择maupassant

1
2
3
4
git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
npm install hexo-renderer-jade --save
npm install hexo-renderer-sass --save
npm install hexo-deployer-git --save (不安装会出现ERROR Deployer not found: git)

在_config.yml中,配置一下该主题

1
theme: maupassant

顺便也设置一下其它的配置

1
2
3
4
5
title: 许小平
subtitle: 一点一滴积累
description: blog of xuxiaoping
author: 许小平
language: zh-CN

4、部署准备

在github上建一个仓库,以用户名+github.io命令,不然会出现访问不了的情况
配置_config.yml文件

1
2
3
4
deploy:
type: git
repo: https://github.com/xuxping/xuxping.github.io.git
branch: master

5、上传文件

先生成静态文件、不能把整个项目都传上去

1
2
3
4
如果之前已经编译过,先清理一下
hexo clean
然后在
hexo g

最后直接发布,hexo会自动的把静态文件上传git中
过一会儿就可以打开网址查看

1
hexo d

6、体验一把

新建一个文章

1
hexo new blob.md

系统会自动的生成

1
2
3
4
5
---
title: blog.md
date: 2016-12-10 23:56:22
tags:
---

然后就开始用markdown写博客吧

写好之后,本地测试一下

1
hexo serve

然后可以浏览http://localhost:4000/查看.
hexo 支持热更新,可以随时的修改,然后会自动的读取最新的数据,所以不用每次修改之后,重启一下服务,只需刷新一下页面就行了。

7、解决图片存储问题

方法1:
在public文件夹中新建一个images的文件夹,然后把所有的图片存放在里面,
此方法存在一个问题,就是在执行

1
hexo clean

的时候,public文件夹会被清理掉,导致图片被清理掉。好好存放的图片就拜拜了、、

方法2:
在source文件夹下新建images文件夹,然后图片引用的时候只需写上地址就行了

这个方法也不错,只是图片多了,就有点头疼命名的问题。

方法3:
开启_config.yml中一个配置

1
post_asset_folder: true

然后安装一个图片的插件

1
npm install hexo-asset-image --save

之后在hexo new ''一个博客时,会自动的创建一个与博客名对应的文件夹,供存储资源,这样就很方便了。

方法四:
买一个图片托管的地方咯,如七牛的。

8、添加自己的域名

在goaddy上购买一个域名,然后设置成如下配置

添加CNAME,添加github的地址

在source文件下添加CNAME文件,里面填写好自己的域名地址,不带www
过一会就生效