以后会持续更新的~
博客在于内容而不在于形式,反反复复折腾体验了几个主题。以后或许便会稳定不在折腾。
前段时间用Github上Pages服务配合Hexo搭建了自己的博客,后来整理下记录下过程。 后来将主题换为 next (最终是使用fexo),所以更新一下,方便后来人,也便于自己再用到来查看
从写博客到在网页上展示的过程是这样的,用MarkDown写下自己的博客内容,通过Hexo生成静态的HTML网页,然后push(git源代码管理工具提交)到 coding/Github 上你的代码仓库,再通过代码托管平台的Pages服务发布到网上。
博客搭建
博客搭建的准备工作
步骤:
- 申请 Github/coding 账号,然后新建一个
github_username.github.io
的仓库,比如我的Github用户名是sanyucz
,所以仓库名称就是sanyucz.github.io
,这个名字是要严格遵守的,搭建完成后也是在浏览器中直接通过 sanyucz.github.io 来访问自己的博客。同样的 coding 上直接新建一个用户名的仓库,比如我的就是sanyucz
,搭建完成之后可以通过 sanyucz.coding.me 来访问。 - 在Github/coding中加入自己电脑的 ssh。
- 安装 node.js
- 安装 homebrew
- 安装 Hexo,参考文档
开始搭建博客
当 Hexo 也安装好之后执行以下命令来搭建本地博客:
$ hexo init <folder> // <folder> 是博客的本地路径
$ cd <folder> // cd 切换目录到博客的本地路径
$ npm install
复制代码
当执行完之后,如果成功了的话,那么目录下的结构应该是这样的:
.
├── _config.yml // 博客的配置文件
├── package.json
├── scaffolds
├── scripts
├── source // 博客的内容
| ├── _drafts
| └── _posts
└── themes // 博客的主题
复制代码
继续在终端中输入 hexo s 会看到以下输出:
INFO Start processing
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
复制代码
这时候在浏览器中输入 http://0.0.0.0:4000/ 就能看到自己的博客了, 停止服务摁下 Ctrl + C
。
// Hexo 常用的命令
hexo s // hexo server 开启本地 Hexo 服务
hexo g // hexo generate 生成本地 html js
hexo d // hexo deploy 发布到远程仓库
hexo c // hexo clean 删除generate生成的文件和缓存
hexo n // hexo new,用于新建一篇文章 eg: hexo new "我的第一篇博客"
复制代码
配置 Hexo
Hexo 的配置文件有两个,其中一个是在博客目录下的 _config.yml
,另外一个在 blog/theme/your_theme/_config.yml
,从位置就可以看出来,在博客目录下的主要是配置博客站点信息,比如所博客的title,作者等。在主题目录下多是配置主题样式相关,关于主题,下面再讲。
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: 王修斌的技术博客 // 博客标题
subtitle: 与肝胆人共事,无字句处读书 // 博客子标题
description: 爱生活、爱编程,爱学习,爱折腾。 // 博客的描叙
author: sanyucz // 作者
language: zh-CN // 默认语言
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://sanyucz.github.io/ // 博客的地址
root: /
permalink: :year/:month/:day/:title/ // 时间格式
permalink_defaults:
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 // 博客列表每页显示博客的数量
pagination_dir: page
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
- hexo-generator-baidu-sitemap
# Extensions
## Plugins: https://hexo.io/plugins/
# theme: hexo-theme-next
# theme: hexo-theme-material
theme: jacman // 博客的主题
stylus:
compress: true
// 博客评论 一般是多说和disqus,disqus是世界主流,在国内大多用多说,原因你懂得,这里两个都用了
duoshuo_shortname: sanyucz
disqus_shortname: sanyucz
# Deployment
## Docs: https://hexo.io/docs/deployment.html
// 远程仓库配置 这里我是推送到 coding 和 github 两个平台的仓库,所以配置了两个
deploy:
type: git
repo:
github: git@github.com:sanyucz/sanyucz.github.io.git,master
coding: git@git.coding.net:sanyucz/sanyucz.git,master
# branch: master
# message: github
复制代码
为博客安装插件
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save
复制代码
插件的作用各不相同,有的是用来生成RSS订阅,有的是压缩 js/CSS。 各种插件的安装推荐查看我所使用的 Jacman 主题的作者写的文章:如何使用 Jacman 主题
切换主题
Hexo 自带的主题太过于简单,这里推荐使用 Next。简洁,但不简单。 下载下来重命名为 next
并放到 blog/theme 下面,修改 站点配置文件 blog/_config.yml
中的 theme
字段: theme: next
,注意冒号之后要有空格。
绑定域名
从万网(阿里域名)买了三年的top域名,三年也不过就一包烟钱而已,买过域名之后需要解析,解析是为了访问域名可以直接访问我们的博客。 在阿里域名注册并登陆之后,点击 控制台-域名-解析,解析如下: ![/images/aliyuming.png)
因为国内访问 Github 很慢,所以我默认访问的是coding上的博客。如果只在Github上面托管了博客,那么只需要解析一条默认的就好,需要注意的是域名后面有个 ‘ . ’。解析成功之后等待几分钟就可以通过域名来访问博客啦。
搭建中遇到的错误
DTraceProviderBindings
错误
{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
复制代码
试过官网建议 npm install hexo --no-optional
,不行。 网上说的删除插件~~~,什么鬼?
最后我直接把引起错误的代码给注释了,根据报错信息,定位到dtrace-provider.js
, 注释其中内容:
var builds = ['Release', 'default', 'Debug'];
for (var i in builds) {
try {
var binding = require('./build/' + builds[i] + '/DTraceProviderBindings');
DTraceProvider = binding.DTraceProvider;
break;
} catch (e) {
// if the platform looks like it _should_ have DTrace
// available, log a failure to load the bindings.
if (process.platform == 'darwin' ||
process.platform == 'sunos' ||
process.platform == 'freebsd') {
console.error(e);
}
}
}
复制代码
OK,继续搞起!
博客的优化
虽然博客已经搭建起来,并且有了一个好看的主题,但是很多时候还是显得过于千篇一律。
访问速度优化
尝试了多种的优化方式,我觉得最简单、效果最好的就是,只在Github上托管的博客,最好在coding上也托管一份,毕竟coding是国内的,访问速度上要快很多。 另外再推荐一个压缩页面的插件:gulp
,具体使用请另行百度。 其他方式: