重0到1用hexo搭建个人博客

hexo 可以理解为是基于node.js制作的一个博客工具,hexo 正常来说,不需要部署到我们的服务器上,我们的服务器上保存的,其实是基于在hexo通过markdown编写的文章,然后hexo帮我们生成静态的html页面,然后,将生成的html上传到我们的服务器。简而言之:hexo是个静态页面生成、上传的工具。

环境搭建

1、安装nodejs

1.1、在windows安装nodejs

下载window版的nodejs,然后按照正常的window程序安装即可,其他系统安装方式类似。

1.1.1、校验node安装是否成功

1
2
3
4
> node -v
v10.16.0
> npm -v
6.9.0

如果输出了版本号,安装完成。

1.1.2、安装cnpm

1
> npm install -g cnpm --registry=https://registry.npm.taobao.org

2、安装hexo

1
> cnpm install -g hexo-cli

通过该命令即可安装hexo脚手架工具。

2.1、hexo常用命令

2.1.1、init命令

1
> hexo init [folder]

新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。

2.1.2、new命令

1
hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。

1
> hexo new "post title with whitespace"

2.1.3、generate命令

1
> hexo generate

生成静态文件。

选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动
-b, --bail 生成过程中如果发生任何未处理的异常则抛出异常
-f, --force 强制重新生成文件 Hexo 引入了差分机制,如果 public 目录存在,那么 hexo g 只会重新生成改动的文件。 使用该参数的效果接近 hexo clean && hexo generate

该命令可以简写为

1
> hexo g

2.1.4、server命令

1
> hexo server

启动服务器。默认情况下,访问网址为: http://localhost:4000/

选项 描述
-p, --port 重设端口
-s, --static 只使用静态文件
-l, --log 启动日记记录,使用覆盖记录格式

该命令可以简写为

1
> hexo s

2.1.5、deploy命令

1
> hexo deploy
参数 描述
-g, --generate 部署之前预先生成静态文件

该命令可以简写为:

1
> hexo d

2.1.6、其他命令

其他命令请参考官方文档

2.2、生成站点

1
> hexo init hexo_blog

等待完成即可生成站点。

3、下载nexT主题

1
2
> cd your-hexo-site
> git clone https://github.com/iissnan/hexo-theme-next themes/next

下载完成后,在站点的theme下有会生成一个next目录,这个目录就是下载的主题。

4、修改站点配置文件

4.1、修改主题

修改站点配置文件__config.yml

1
2
3
//把站点的配置文件__config.yml中的theme:修改为theme: next

theme: next

4.2、修改站点菜单

修改主题配置文件__config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

...

根据个人的情况打开不同的站点菜单。

5、本地测试站点

1
2
3
4
5
6
7
8
9
10
> hexo s
INFO Start processing
WARN ===============================================================
WARN ========================= ATTENTION! ==========================
WARN ===============================================================
WARN NexT repository is moving here: https://github.com/theme-next
WARN ===============================================================
WARN It's rebase to v6.0.0 and future maintenance will resume there
WARN ===============================================================
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

默认监听4000端口,在浏览器打开http://localhost:4000即可访问站点。

博客地址

6、生成静态文件并发布到云服务器

博客发布有很多中方式,详情见文档

通过sftp方式发布到云服务器:

1.安装hexo-deployer-sftp

1
> npm install hexo-deployer-sftp --save

2.在站点配置文件__config.yml修改sftp信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...

deploy:
type: sftp
host: <host>
user: <user>
pass: <password>
remotePath: [remote path]
port: [port]
privateKey: [path/to/privateKey]
passphrase: [passphrase]
agent: [path/to/agent/socket]

...
参数 描述 默认值
host 远程主机的地址
user 使用者名称
pass 密码
remotePath 远程主机的根目录 /
port 端口 22
privateKey ssh私钥的目录地址
passphrase (可省略)ssh私钥的密码短语
agent ssh套接字的目录地址 $SSH_AUTH_SOCK

3.发布到云服务器

1
> hexo g -d

等待命令执行完成即可发布到服务器。发布到服务后,通过nginx配置域名和指定博客地址即可完成hexo博客搭建。

SOCKSTACK wechat
关注内容更精彩