Hexo+NexT(v7.0+) 搭建博客:基础安装

Hexo

关于如何搭建Hexo博客的文章已经有很多人写过了,并且有很多人已经写的很深刻很到位了,为什么还要重复写一遍呢?直到我看到了这位同学的博客 yearito ( ps:本站的建站优化大都参考自这里) ,我有了说服自己的理由:

  • 你可以参考别人的技术方案,集众所长,亲自实践,然后融入自己的思考写出一篇新文章
  • 即使并没有做出创新性的贡献,自己重新归纳一遍也有助于梳理流程,深化理解

现在百度 Google 很方便,动动手指就可以搜索到想要的答案,但是太多人都是『顺手拈来、过目就忘』,下次遇到同样的问题再搜索一遍。
为什么会这样呢?不善于总结,不情愿动手思考,时而久之就会变成所谓的 “代码搬运工” !

闲话不多说了,我们开始吧!

安装node.js

官方下载网站 下载源代码,选择最后一项 Source Code
解压到某一目录, 然后进入此目录,依次执行以下 3 条命令

1
2
3
$ ./configure
$ make
$ sudo make install

安装完后查看node.js版本,检验是否安装成功

1
$ node -v

安装hexo

在命令行中通过 npm 来安装 hexo:

1
$ npm install -g hexo-cli

本地启动hexo

创建一个博客目录(例如 /my-blog),在此目录下,执行初始化命令

1
2
3
$ mkdir -p my-blog
$ cd my-blog
$ hexo init

执行完毕后,将会生成以下文件结构:

1
2
3
4
5
6
7
8
9
10
11
12
.
|-- node_modules //依赖安装目录
|-- scaffolds //模板文件夹,新建的文章将会从此目录下的文件中继承格式
|-- source //资源文件夹,用于放置图片、数据、文章等资源
| |-- _posts //文章目录
|-- themes //主题文件夹
| |-- landscape //默认主题
|-- .gitignore //指定不纳入git版本控制的文件
|-- _config.yml //站点配置文件
|-- db.json
|-- package.json
`-- package-lock.json

在根目录下执行如下命令启动hexo内置的web容器

1
2
$ hexo generate     # 生成静态文件
$ hexo server # 在本地服务器运行

在浏览器输入IP地址 http://localhost:4000 就可以看到我们熟悉的 Hello Word 了。

Hello Word

常用命令简化和组合

1
2
3
4
$ hexo g    # 等同于hexo generate
$ hexo s # 等同于hexo server
$ hexo p # 等同于hexo port
$ hexo d # 等同于hexo deploy

当本地不想使用默认的4000端口时(比如在服务器上,默认使用80端口),可以使用 port 命令更改启动端口
另外,hexo支持命令合并,比方说 生成静态文件 → 本地启动80端口,我们可以执行

1
$ hexo s -g -p 80

安装NexT主题

hexo 安装主题的方式非常简单, 只需几个简单的命令即可。
将NexT主题文件拷贝至themes目录下,然后修改 站点配置文件 _config.yml 中的 theme字段为next即可。

cd 到博客的根目录下执行以下命令下载主题文件:

1
2
3
4
5
$ cd my-blog
$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next

$ vim _config.yml
theme: next

清除 hexo缓存,重启服务

1
2
$ hexo clean
$ hexo s -g

大部分的设定都能在 NexT官方文档 里找到, 如主题设定、侧栏、头像、友情链接、打赏等等,在此就不多讲了,照着文档走就行了。

0%