记录编程学习
0%

Hexo+Nginx+云服务器部署静态网页

发表于 更新于 分类于

服务器Nginx安装

这部分先省略，好久之前安装的，忘了过程了。不过我的服务器在这之前已经配置好了Nginx，并且可以正常通过http和https访问。域名也已经备案。

本地环境准备

我是使用的Windows 10 64位专业版。已经安装好了git。Node.js的安装是直接采用win的安装包安装的。记得选择Add to Path。安装过程基本一路默认。

吐槽：默认安装过程中，给我安装了一大堆，明明我安装了Python，它还给我安装了一个新版本。还安装了vs2017的套件。要是后面我的开发环境坏了我非得给他杀了。

然后是准备安装Hexo。

首先我们检查一下git和Node.js的安装情况。

1
2
git --version
node --version

在确认可以显示版本后。我们安装Hexo。

1
npm install -g hexo-cli

然后我们就可以切换到想要创建博客的目录，这里，我在H盘下的cc321目录存放文件，切换到H:\cc321目录后，执行：

1
2
3
hexo init <folder>
cd <folder>
npm install

\就是博客目录名称，我直接使用的blog。

然后我们可以尝试创建一个页面来确认Hexo能否在本地正常运行。

执行hexo new "title"命令可以创建新文章。

1
2
hexo new "hello hexo"
# 在H:\cc321\blog\source\_posts目录下会有相应的md文件。修改这个文件的内容为博客内容就可以了.

然后将md文件渲染并在本地显示。

1
2
hexo g  # 渲染.md为静态文件
hexo server  # 执行后可访问http://localhost:4000 查看效果

服务器环境配置

先配置git

首先确保服务器已经安装了git。之后，为了更好的维护，我们新建一个git用户，不妨为gituser来专门管理这个仓库的内容。

1
sudo adduser gituser

在设置好密码之后，我们切换到gituser用户，并建立一个裸仓库。

1
2
3
4
su gituser
cd /home/gituser
git init --bare hexo.git
chown -R gituser:gituser hexo.git

然后我们为gituser配置ssh登录。此时需要windows上的git用户有ssh密钥对。此时我的电脑上是没有的。所以我先构造一对。

1
2
ls -all ~/.ssh  #检查是否已经存在密钥对
ssh-keygen -t rsa -C "email@email.com"  #构造密钥对，会提示存放密钥的目录

然后为gituser配置ssh登录。

1
2
3
4
mkdir .ssh  #建立目录
cd .ssh
vi authorized_keys  #将之前构造的密钥对种的pub公钥内容复制进去
#然后可以在Windows的git bash窗口执行ssh -v gituser@serverIP判断能否登录

在成功为gituser配置ssh登录后，我们在服务器上建立一个文件夹来专门存放静态网页的数据，我建立在home目录下。在home目录下执行：

1
2
sudo mkdir webbolg
sudo chmon 777 webblog  #更改一下权限。我也不知道不更改能不能行

然后去修改Nginx的配置文件，我的在/etc/nginx目录下，转到该目录后。修改nginx.conf文件，将http里面的server中root目录更改为上面的webbolg目录。

不过我设置了ssl，在ssl的ssl.conf中，server配置下同样存在root属性目录，我将其修改为webblog，而不修改nginx.conf中属性。

实现自动部署

上面就配好了服务器和本地的基础环境。接下来我们要实现自动部署。首先是在服务器上，使用git-hooks来同步网站根目录。

1
2
3
4
5
6
7
8
9
10
11
su gituser #切换用户
cd /home/gituser
cd hexo.git
cd hooks
#建立post-receive钩子
vi post-receive
#写入下列内容
#!/bin/sh
git --work-tree=/home/webblog --git-dir=/home/gituser/hexo.git checkout -f
#然后添加执行权限
chmod +x post-receive

之后就配置本机Hexo。在之前的目录下，编辑_config.yml，修改deploy，

1
2
3
4
deploy:
  type: git
  repo: gituser@serverIP:/home/gituser/hexo.git
  branch: master

然后执行hexo g -d，之后就可以查看你的网页是否更新了。