这是这个博客的第二篇文章,写第一篇文章的时候,只是在本地跑起来,没有推到服务器上。折腾了几天,终于部署服务器成功。这篇文章,记录这个博客是如何搭建的。

概述

本博客基于Hexo,使用了maupassant主题,通过sftp部署在一台VPS上,使用nginx代理Hexo端口。

本地搭建Hexo

硬件:MacBook Pro 2017

系统:macOS 10.14

1. 安装Hexo

1
$ npm install hexo-cli -g

因为之前已经安装过npm,node环境,直接就可以安装,安装完成后本来应该可以直接运行hexo命令,但是我本地并不行,自己创建一个link吧

1
2
$ cd /usr/local/bin
$ ln -s ../Cellar/node/13.10.1/bin/hexo

2.创建Hexo工程

1
2
$ mkdir blog & cd blog
$ hexo init

这时候本地工程就创建好了,用hexo server测试,本地4000端口已经可以预览。

完成后git init初始化仓库,提交。

3.添加主题

hexo官网有很多主题可以选,我最终选中了maupassant

1
2
3
4
# 直接把主题库拉到themes目录下作为git子模块
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save

国内拉取这几个npm包的时候很慢,不得已配置了阿里的源,用了之后,真香!

1
$ npm config set registry https://registry.npm.taobao.org

随后在_config.yml中配置主题为maupassant

1
2
# theme: landscape
theme: maupassant

部署到服务器

hexo提供了多种一键部署方式,这里我选择了sftp方案。

  1. 首先安装sftp的包
1
$ npm install hexo-deployer-sftp --save
  1. _config.yml末尾配置deploy属性
1
2
3
4
5
6
7
deploy:
type: sftp
host: #ip
user: #ssh username
pass: #ssh password
remotePath: /opt/blog #要部署的服务器的路径
port: 22 # ssh的端口

这里的remotePath要先在服务器上创建好,否则推不上去。

  1. 使用hexo命令部署页面到服务器
1
$ hexo deploy

nginx代理hexo

使用hexo deploy部署之后,只是把生成的网页资源推送到服务器,要想让博客可以访问,还需要使用nginx/tomcat把hexo博客目录和服务器的ip端口联系起来。

  1. ssh登录服务器后,安装nginx(我的VPS服务器是Debian系统)
1
$ apt update && apt install nginx
  1. 配置nginx

nginx的配置位于/etc/nginx

1
2
3
4
5
[email protected]:/etc/nginx# ls
conf.d koi-win nginx.conf sites-enabled
fastcgi.conf mime.types proxy_params snippets
fastcgi_params modules-available scgi_params uwsgi_params
koi-utf modules-enabled sites-available win-utf

这里删除了sites-enabled/default 文件,在conf.d中创建一个blog.conf文件,写入以下配置

1
2
3
4
5
6
7
8
9
10
11
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name shingkit.me;
root /opt/blog;
index index.html;
location / {
index index.html;
include /etc/nginx/mime.types;
}
}

随后检测配置是否正确,重新加载配置

1
2
$ nginx -t
$ nginx -s reload

这时,就可以通过ip访问博客了。

记:
在进行如上配置后,有一个奇怪的现象,CSS没有加载,按路径在浏览器访问css文件是正常的,重新生成,部署,正常了!

1
2
3
$ hexo clean
$ hexo g
$ hexo d

后续维护

后续写新文章,需要进行的操作

  1. hexo new 文章名
  2. 编辑文章
  3. hexo g 生成静态文件
  4. hexo d 部署静态文件至服务器

更多扩展

hexo 常用命令

  1. 生成about页
1
$ hexo new page about

本质上是在source目录下生成 about/index.md,和生成post一致,编辑文件就可以了。

域名和ip

通过ip访问博客是可行的,但是没有个好记的域名怎么行?果断把之前申请的shingkit.me在GoDaddy后台绑定到ip上,完美!

博客评论系统

主题中使用Valine评论系统,注册个leanCloud,完全免费!

第三方自动构建补助

Netlify是一个自动构建部署平台,可用来自动化部署静态页面。
当前自动构建流程:

  1. 推送提交到远程仓库
  2. Netlify通过githook通知拉取博客代码生成并部署