Hexo + coding 博客的搭建和优化

最新推荐文章于 2024-09-09 13:49:07 发布

weixin_34037173

最新推荐文章于 2024-09-09 13:49:07 发布

阅读量141

点赞数

文章标签： git json 运维

原文链接：https://juejin.im/post/5a37da486fb9a0450407fc84

版权

~~以后会持续更新的~~~

博客在于内容而不在于形式，反反复复折腾体验了几个主题。以后或许便会稳定不在折腾。

前段时间用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，具体使用请另行百度。其他方式：

访客、工具箱以及其他效果

weixin_34037173

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Hexo + coding 博客的搭建和优化

以后会持续更新的~ 博客在于内容而不在于形式，反反复复折腾体验了几个主题。以后或许便会稳定不在折腾。前段时间用Github上Pages服务配合Hexo搭建了自己的博客，后来整理下记录下过程。后来将主题换为 next （最终是使用fexo），所以更新一下，方便后来人，也便于自己再用到来查看从写博客到在网页上展示的过程是这样的，用MarkDown写下自己的博客内容，通过Hexo生成静态的...
复制链接

扫一扫