一直以来都有搭建个人博客的想法,之前也使用过其他免费的在线博客,但是总感觉没有自己搭建的爽。用那些在线博客就好像是租房子,总是要受到房东的各种条条框框的限制,然后就是各种广告啥的,主题风格也有限。而如果是自己开发个博客网站应用的话,就比如建房子,自由度是最高的。不过维护成本较高,有点大材小用。所以最终选择了这种可以选择框架,自定义功能,维护博客内容,然后托管到第三方的平台上面的形式,就好比如买房子。总之,在参考了众多网友的意见后,博主选择了基于Hexo框架和NexT主题来搭博客。而具体要如何选择一个适合自己的博客,可以参考此链接。最后搭建完成的成果——请进传送门。
搭建过程
注册托管网站
首先,博客发布后要放到哪个平台上?这是一个问题,因为这个关系到博客的访问方式。很多人选择放到GitHub上,然后使用GitHub Pages来托管静态网页。But,由于GFW的存在,以及百度不能抓取GitHub上面的推送(其实也可以,不过需要一些插件),导致国内用户访问总是不那么友好;还有一点就是如果想要需要在多台电脑都能支持更新博客的,就需要把本地的Hexo相关的网站源码也放到远程仓库上,而GitHub只能存放公开的仓库,源码中可能有一些AccessKey,AccessId之类的东西最好还是放到私有仓库中来保证安全。So,博主最终选择了码云来托管博客静态网页以及存放源码。当然还有其他选择,比如GitLab、Coding等等。
安装相关包及工具
安装博客需要的工具及框架网上已经有很多教程了,这里就不再赘述。
基本的Hexo命令
hexo init [folder]
新建一个网站。如果没有设置 folder
,Hexo 默认在目前的文件夹建立网站。
hexo new "post_name"
缩写hexo n "post_name"
新建一篇文章,引号中的为文章名称。
hexo generate//生成静态文件
缩写 hexo g
hexo g -d//-d,--deploy 文件生成后立即部署网站
hexo server//启动本地服务器查看效果
缩写hexo s//-p,--port 重设端口
hexo s -g//启动服务器前先生成静态文件
默认url:http://localhost:4000/
hexo deploy//部署网站
hexo d -g//部署之前预先生成静态文件
hexo clean
清除缓存文件 (db.json) 和已生成的静态文件 (public)。
进行个性化设置
安装完需要的工具后,就可以开始进行个性化设置了。
首先,可以参考NexT官方文档进行基本的配置,设置语言、菜单、头像、网站名称、站点描述等等。按照文档中的的进行修改。需要注意的是配置文件主要有两个,一个是Hexo的站点配置文件_config.yml,一个是NexT的主题配置文件themes\next\_config.yml。
当然,只有以上这些基本的配置是远远不能满足我们的个性化需求的。还有一些功能比如文字统计、站点推送、添加评论、修改样式等,就需要使用各种插件了。具体可以参考hexo的next主题个性化教程:打造炫酷网站。
添加站内搜索功能
- 在本地的博客目录下安装搜索包
npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save
- 打开站点配置文件,增加以下内容
search:
path: search.xml
field: post
format: html
limit: 10000
- 打开主题配置文件,启用本地搜索功能
# Local search
local_search:
enable: true
使用七牛云做图床
注册七牛云平台账号
{% qnimg 七牛云.png title:七牛云 alt:七牛云 'class:' extend:?imageView2/2/w/450 %}
首先到七牛云网站上面注册一个账号(还需要进行身份认证),然后新建存储空间,具体操作可参看官方文档。需要注意的是七牛云提供的免费服务是有一定额度限制的,超过限制就需要收费了。免费额度为:
- 下载流量10G/月
- 文件存储空间10G
api请求次数GET请求100万次/月,put/delete/post请求总共10万次/月
安装hexo-qiniu-sync插件
npm install hexo-qiniu-sync --save
在站点配置文件添加:
qiniu:
offline: false
sync: true
bucket: blogwenbo
//这里将其注释掉,不注释,执行hexo g报错
# secret_file: sec/qn.json or C:
access_key: your access_key
secret_key: your secret_key
// 上传的资源子目录前缀.如设置,需与urlPrefix同步
dirPrefix: static
//外链前缀
urlPrefix: http://p2zukkwm9.bkt.clouddn.com/static
//使用默认配置即可
up_host: http://upload.qiniu.com
//本地目录
local_dir: static
// 是否更新已经上传过的文件(仅文件大小不同或在上次上传后进行更新的才会重新上传)
update_exist: true
image:
folder: images
extend:
js:
folder: js
css:
folder: css
然后在文章中使用以下格式添加图片:
{% qnimg 七牛云.png title:七牛云 alt:七牛云 'class:' extend:?imageView2/2/w/450 %}
具体的图片格式设置可以参考官方文档
最后,只有使用hexo s或hexo g命令,hexo-qiniu-sync就会自动上传图片到图床上。
结语
本来是想要把搭建博客过程中的遇到的一些坑给写出来,然而因为实在是太懒了,博客搭建好了快一个月才开始写这篇博客的。。很多安装细节都忘了?,而且文笔也不好。以后有想到的问题再慢慢补充吧。只能说写博客还是需要很大的耐心和精力的,希望能坚持下去!