搭建个人博客

发表于 | 更新于 | 分类于 | 阅读次数：

作为程序员，是该有点地方来记录点什么，搭建一个个人博客，来记录一下。
太复杂的不想折腾，重在写作的体验和页面的美观，我选择了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
过一会就生效