带你跳过各种坑,一次性把 Hexo 博客部署到自己的服务器

hexo-to-your-server

一、完成效果

点击查看个人网站

二、准备

基本上每一步都会给出链接,可以多多参考

本地配置node环境

  1. node下载 官网下载

参考链接:

  • 史上最详细的Hexo博客搭建图文教程

  • 通过Git将Hexo博客部署到服务器

可以使用官方的node安装包或者nvm管理 node 版本,但千万不要混用,不然会环境和管理上的麻烦

  1. 安装:基本都是下一步,但记得把目录改到其他盘,这里我具体是在 D:\programming\nodejs

打开cmd查看node安装情况,执行如下命令

node -v
npm -v
复制代码
  1. 配置全局环境

参考链接:

  • windows npm -g 全局安装的命令找不到

进入安装目录,创建文件夹node_globalnode_cache,执行如下命令

npm config set prefix "D:\programming\nodejs\node_global"
npm config set cache "D:\programming\nodejs\node_cache"
复制代码

环境配置:新增环境变量NODE_PATH和添加Path,两个值都为 D:\programming\nodejs\node_global

  1. 测试全局环境

打开cmd安装hexo-cli,分别执行如下命令

npm install hexo-cli -g
hexo
复制代码

如果出现下面情况,恭喜你成功全局模块调用

  1. 如果出现命令未找到,或不是可执行程序,别着急!先仔细重复 3-4 步,一般是能够给解决的

  2. 如果实在是不能解决,往后看,如果没错,直接跳过该步

随便找个地方初始化文件,执行如下命令

mkdir hexo-blog
cd hexo-blog && npm init
然后回车键一阵乱敲!
复制代码

现在有 3 种解决方法,任选其一

  • 法 1:检查D:\programming\nodejs\node_global目录是否有hexo模块,执行如下命令
D:\programming\nodejs\node_global\hexo // 每次使用全局模块带上前缀即可
复制代码

如果成功显示步骤 4 的情况,则调用成功。如果觉得每次加前缀麻烦,往后看

  • 法 2:使用link命令链接,执行如下命令
npm link hexo
复制代码

package.json 中新建脚本如下,执行如下命令

npm run hexo
复制代码

  • 法 3:你还可以直接在hexo-blog中下载,执行如下命令
npm install hexo-cli -S
npm run hexo (还是要在package.json中新建脚本)
复制代码

初始化hexo项目

  1. 如果是按照上一节步骤 6 过来的,则在hexo-blog文件下初始化,执行如下命令
hexo init myblog && cd myblog
npm install
复制代码
  1. 下载主题,执行如下命令

参考链接:

  • Hexo设置主题以及Next主题个性设置

  • 官网全部主题

git clone https://github.com/iissnan/hexo-theme-next themes/next
复制代码

本地配置文件中设置theme属性

  1. 本地执行hexo项目

统一添加start脚本,并执行如下命令

npm start
复制代码

快可以打开 http://localhost:4000/ 验证效果吧

git环境搭建

  1. git安装

参考资料:

  • 廖雪峰老师的 git 教程

  • git 官网下载

  1. 生成ssh认证,执行如下命令

参考资料:

  • Git 提交时报错warning: LF will be replaced by CRLF in
git config --global user.name "yourname"
git config --global user.email [email protected]
ssh-keygen -t rsa -C "[email protected]"
git config --global core.autocrlf false  // 禁用自动转换,这个不设置后面上传时会出现警告,如下
复制代码

最后获取到的ssh认证在C:\Users\yourname\.ssh


三、服务器配置

搭建远程Git私库

  1. 登录到远程服务器,建议使用Xshell 5

  2. 安装 git,执行如下命令

git --version // 如无,则安装
yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel
yum install -y git
复制代码
  1. 创建用户并配置其仓库,执行如下命令

参考资料:

  • 使用 Git Hook 自动部署 Hexo 到个人 VPS
useradd git
passwd git // 设置密码
su git // 这步很重要,不切换用户后面会很麻烦
cd /home/git/
mkdir -p projects/blog // 项目存在的真实目录
mkdir repos && cd repos
git init --bare blog.git // 创建一个裸露的仓库
cd blog.git/hooks
vi post-receive // 创建hook钩子函数,输入了内容如下(原理可以参考上面的链接)
复制代码
#!/bin/sh
git --work-tree=/home/git/projects/blog --git-dir=/home/git/repos/blog.git checkout -f
复制代码

添加完毕后修改权限,执行如下命令

chmod +x post-receive
exit // 退出到 root 登录
chown -R git:git /home/git/repos/blog.git // 添加权限
复制代码
  1. 测试git仓库是否可用,另找空白文件夹,执行如下命令
git clone git@server_ip:/home/git/repos/blog.git
复制代码

如果能把空仓库拉下来,就说明 git 仓库搭建成功了

  1. 建立ssh信任关系,在本地电脑,执行如下命令

参考资料:

  • ssh-copy-id 帮你建立信任
ssh-copy-id -i C:/Users/yourname/.ssh/id_rsa.pub git@server_ip
ssh git@server_ip // 测试能否登录
复制代码

:此时的 ssh 登录 git 用户不需要密码!否则就有错,请仔细重复步骤 3-4

  1. 如果第 5 步能成功,为了安全起见禁用git用户的 shell 登录权限,从而只能用git clone,git push等登录,执行如下命令

参考资料:

  • Git Server - 限制 Git 用户使用 SSH 登陆操作
cat /etc/shells // 查看`git-shell`是否在登录方式里面,有则跳过
which git-shell // 查看是否安装
vi /etc/shells
添加上2步显示出来的路劲,通常在 /usr/bin/git-shell
复制代码

修改/etc/passwd中的权限,将原来的

git:x:1000:1000::/home/git:/bin/bash
复制代码

修改为

git:x:1000:1000:,,,:/home/git:/usr/bin/git-shell
复制代码

搭建nginx服务器

  1. 下载并安装nginx,执行如下命令

参考资料:

  • Nginx 源码安装和简单的配置
  • Nginx 配置 HTTPS 服务器
cd /usr/local/src
wget http://nginx.org/download/nginx-1.15.2.tar.gz
tar xzvf nginx-1.15.2.tar.gz
cd nginx-1.15.2
./configure // 如果后面还想要配置 SSL 协议,就执行后面一句!
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-file-aio --with-http_realip_module
make && make install
alias nginx='/usr/local/nginx/sbin/nginx' // 为nginx取别名,后面可直接用
复制代码
  1. 配置nginx文件

参考资料:

  • Linux 中 nginx 基本操作命令

先启动是否安装成功,执行如下命令

nginx // 直接来!浏览器查看 server_ip,默认是80端口
复制代码

配置文件,执行如下命令

nginx -s stop // 先停止nginx
cd /usr/local/nginx/conf
vi nginx.conf
修改 root 解析路径,如下图
同时将 user 改为 root 如下图,不然nginx无法访问 /home/git/project/blog
nginx -s reload
复制代码


四、链接

至此我们就把本地和服务器的环境全部搭建完成,现在利用 hexo 配置文件进行链接

配置_config.yml文件

  1. 编辑_config.ymldeploy属性

  1. package.json中添加 npm 脚本
"scripts": {
  "deploy": "hexo clean && hexo g -d",
  "start": "hexo clean && hexo g && hexo s"
},
复制代码
  1. 链接!这下在本地调试就用npm start,调试好了就上传到服务器,美滋滋~快通过你的服务器ip访问吧
npm run deploy
复制代码

五、总结

本次教程介绍node环境配置,主要强调了全局模块的调用,然后是初始化 hexo 项目,建议多参考官方的配置。然后搭建本地和服务器的git环境,通过ssh通行证交互。接下来是通过nginx.conf文件来配置nginx。最后_config.ymldeploy参数来连接本地和服务器


六、最后说句

本人前端新手一枚,有错误的话欢迎指正

贴上 个人网站,建站初期,欢迎您的光临~

喜欢的话麻烦 Github 给个 ★ 哦

转载于:https://juejin.im/post/5b70d68ae51d45665d383281

你可能感兴趣的:(带你跳过各种坑,一次性把 Hexo 博客部署到自己的服务器)