这个博客是怎么搭建的?
Comment这是这个博客的第二篇文章,写第一篇文章的时候,只是在本地跑起来,没有推到服务器上。折腾了几天,终于部署服务器成功。这篇文章,记录这个博客是如何搭建的。
概述
本博客基于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 | $ cd /usr/local/bin |
2.创建Hexo工程
1 | $ mkdir blog & cd blog |
这时候本地工程就创建好了,用hexo server
测试,本地4000端口已经可以预览。
完成后git init
初始化仓库,提交。
3.添加主题
在hexo官网有很多主题可以选,我最终选中了maupassant。
1 | # 直接把主题库拉到themes目录下作为git子模块 |
国内拉取这几个npm包的时候很慢,不得已配置了阿里的源,用了之后,真香!
1 | $ npm config set registry https://registry.npm.taobao.org |
随后在_config.yml
中配置主题为maupassant
1 | # theme: landscape |
部署到服务器
hexo提供了多种一键部署方式,这里我选择了sftp方案。
- 首先安装sftp的包
1 | $ npm install hexo-deployer-sftp --save |
- 在
_config.yml
末尾配置deploy
属性
1 | deploy: |
这里的remotePath要先在服务器上创建好,否则推不上去。
- 使用hexo命令部署页面到服务器
1 | $ hexo deploy |
nginx代理hexo
使用hexo deploy
部署之后,只是把生成的网页资源推送到服务器,要想让博客可以访问,还需要使用nginx/tomcat把hexo博客目录和服务器的ip端口联系起来。
- ssh登录服务器后,安装nginx(我的VPS服务器是Debian系统)
1 | $ apt update && apt install nginx |
- 配置nginx
nginx的配置位于/etc/nginx
下
1 | [email protected]:/etc/nginx# ls |
这里删除了sites-enabled/default
文件,在conf.d
中创建一个blog.conf文件,写入以下配置
1 | server { |
随后检测配置是否正确,重新加载配置
1 | $ nginx -t |
这时,就可以通过ip访问博客了。
记:
在进行如上配置后,有一个奇怪的现象,CSS没有加载,按路径在浏览器访问css文件是正常的,重新生成,部署,正常了!
1 | $ hexo clean |
后续维护
后续写新文章,需要进行的操作
hexo new 文章名
- 编辑文章
hexo g
生成静态文件hexo d
部署静态文件至服务器
更多扩展
hexo 常用命令
- 生成about页
1 | $ hexo new page about |
本质上是在source
目录下生成 about/index.md
,和生成post一致,编辑文件就可以了。
域名和ip
通过ip访问博客是可行的,但是没有个好记的域名怎么行?果断把之前申请的shingkit.me在GoDaddy后台绑定到ip上,完美!
博客评论系统
主题中使用Valine
评论系统,注册个leanCloud,完全免费!
第三方自动构建补助
Netlify是一个自动构建部署平台,可用来自动化部署静态页面。
当前自动构建流程:
- 推送提交到远程仓库
- Netlify通过githook通知拉取博客代码生成并部署