简介
用Hexo搭建个人博客网站的教程网上有很多。这些教程往往在“详细”和“完善”上做足了功夫，却欠缺了条理性和模块性。比如：这些步骤哪些是必须的？如果把这个步骤删去会发生什么？这里能不能修改？同时，过于详细和完善的教程会不可避免地带来细节上的个人化。比如某一个路径可能完全是出于作者个人喜好甚至个人尝试，和读者本身的使用场景并不符合，但是由于其他步骤中对该路径的依赖，读者修改不当又很容易报错。
Hexo的基本使用看官网文档很容易上手，但是将其部署到远端服务器这部分官网上写的却不太清晰。我尝试尽可能将部署过程抽丝剥茧，用一种层层递进的方式来描述一种技术方案。本文的博客网站将搭建自己的云服务器上。
本文不适合刚刚入门计算机的人，更适合对计算机有一定基础但是对建立个人网站过程不太了解的人。
前置知识和准备
Nginx：需要知道Nginx基本用法（作为静态网页服务器），知道其conf文件怎么写。这方面内容可以通过看文档和搜索相关资料完成。
云服务器：自己购买并了解如何连接和使用。
最简单的部署方法
在本地写完博客后，使用
hexo g
这条命令会在项目的public目录生成能让静态资源网络服务器运行所需要的所有资源。
我们把public目录整体压缩成zip，然后上传到服务器解压。假设我们在服务器上解压到的目录路径为/home/ubuntu/code/test/public。
我们在nginx的nginx.conf中增加
server {
listen 4001;
index index.html index.htm;
root /home/ubuntu/code/test/public;
}
其中listen指希望服务器用于博客网站访问的端口号。
然后使用nginx -s reload命令让nginx重新加载。在浏览器地址栏中输入111.111.111.111:4001，就看到自己的网站了。（111.111.111.111为服务器ip）
让文件传输自动化
对上一章中的简单部署方式的优化集中于“将本地public文件夹上传到服务器”这个过程自动化。
这种“将本地的文件自动同步到远程”的需求，我们最开始想到的就是ftp和sftp。在Hexo官网的部署章节也提供了对sftp方式的说明。
但是sftp的传输是整体传输而不是增量传输。linux显然应该有支持增量传输的同步软件，它叫Rsync。Hexo官网也提供了使用Rsync方式的说明。但是使用Rsync需要在自己本地的电脑上也装上客户端，如果是windows系统的话就是装windows版本的cwRsync。也很麻烦。
所以sftp和Rsync两种最直接的方式都有本质缺点。而且更令人头大的是，从网上找到的资料来看，Hexo对这两种方式的支持并不好，经常会报出难以理解的错误。
所以还是用稍微不那么直接但是Hexo比较推荐的git吧。
git远程仓库
我们平常用git远程仓库，基本都是用的github或者gitlab。但是github是一个代码托管平台。我们抽象一下我们使用github的方式——“我需要将自己写的代码放在一个平台（github）上面，别人可以查看、下载和更新，平台不需要运行我的代码”。
而我们现在的需求是——“我想将代码产生的资源同步到我的服务器的一个文件夹中，Nginx会直接从该文件夹中取资源运行，除了我之外不需要任何人查看下载我的代码”。
所以我们现在的目的和我们平时使用github开发的目的是不一样的。所以我们用git，但是不用github，而是自己做一个远端仓库。（跳出舒适圈！）
关于如何自己做一个git远端仓库，推荐先在不添加"hexo"关键词的情况下直接通过百度或者Google搜索教程，然后再结合"hexo部署git远程仓库"的搜索结果进行实践。这里限于篇幅只给出我的步骤，不做过多解释。
首先创建两个空目录，对应项目实际存储位置和git仓库。下面两行中第一行是我的项目位置，第二行是我的git仓库位置。我的linux用户名为ubuntu.
/home/ubuntu/code/testGit/project
/home/ubuntu/code/testGit/repo
进入repo目录（git仓库目录），执行
git init --bare demo.git
这条命令为我们创建了一个名为demo.git的裸git仓库。其中"demo"可以换成任意字符串。
接下来我们进入repo目录下生成的repo/demo.git/hooks/,在这里新建一个post-receive文件。
vim post-receive
将post-receive的内容写为
#!/bin/bash
git --work-tree=/home/ubuntu/code/testGit/project --git-dir=/home/ubuntu/code/testGit/repo/demo.git checkout -f
注意work-tree和git-dir设置为自己刚刚创建的路径。
这步操作的本质是把工作区和git仓库连接起来。我们回忆一下在我们平时的工作中，使用了git的项目往往会在根目录下有一个.git目录。如果打开，可以发现那些根目录下的.git目录中的内容和我们现在创建的demo.git目录下的内容是一样的。我们现在用demo.git目录做的工作和根目录下.git目录做的工作是一样的，只是我们没有把demo.git放在我们的项目目录下，而是放在了一个单独的地方。以后我们的project目录下也不会有.git。
那么我们能不能有更简单的方法，比如还用项目目录下放.git目录的方式完成我们的需求呢？我没有尝试，网上也没找到相关资料。读者可以试一试，我感觉现在的方法一点也不简单。
然后我们需要执行一些权限命令
sudo chmod -R 755 /home/ubuntu/code/testGit/project
sudo chmod +x /home/ubuntu/code/testGit/repo/demo.git
sudo chmod +x /home/ubuntu/code/testGit/repo/demo.git/hooks/post-receive
这个时候我们自己的远程git仓库就已经配置完成了。
在本地机器上运行
git clone ubuntu@111.111.111.111:/home/ubuntu/code/testGit/repo/demo.git
其中@前面的ubuntu指linux用户名，111.111.111.111指服务器的公网ip，冒号后面是远程仓库的路径。
这时本地机器的命令行应该会提示你输入ubuntu的密码，输入成功后可以看到本地已经clone下来了库，但是由于现在project路径是空的，所以命令行中还会提示warning: You appear to have cloned an empty repository.
（这一步的git clone只是验证我们的远端git仓库已经搭建好了。clone下来的仓库不会被使用，可以验证成功后直接从本地机器上删除）
这时我们按照Hexo官网上说明的方式，在本地机器Hexo项目的_config.yml中配置（注意repo项需根据自己的用户名、ip、路径进行修改）
deploy:
type: git
repo:ubuntu@111.111.111.111:/home/ubuntu/code/testGit/repo/demo.git
branch: master
再使用hexo deploy就可以一键部署了。把服务器上nginx的root项配置为/home/ubuntu/code/testGit/project目录。每次我们运行hexo deploy，都可以在浏览器中直接看到修改。
ssh免密登录
在完成上面的git远程仓库的部分后，我们在每次hexo generate后使用hexo deploy一个命令就可以在浏览器中看到最新的博客网站。几乎已经没法再简化了。
但是，现在我们每次运行hexo deploy,都会要求我们输入ubuntu用户的密码。（因为程序需要执行远程服务器的用户登录操作）。
我们可以采用ssh免密登录的方式，把输入密码这一步也给省掉。
首先我们在本地机器上运行以下命令
git config --global user.name "你要设置的名字"
git config --global user.email "你要设置的邮箱"
ssh-keygen -t rsa -C "你刚刚设置的邮箱"
上面三条命令会在本地机器上生成一组用RAS加密的公钥和私钥。如果本地机器是Windows系统，默认会保存在c:\\Users\{windows用户名}\.ssh目录下。我们进入该目录，可以看到有一个id_rsa文件和一个id_rsa.pub文件，分别对应私钥和公钥文件。
然后在该目录下执行命令（这里推荐使用git bash来执行）
ssh-copy-id -i ~/.ssh/id_rsa.pub ubuntu@111.111.111.111
其中ubuntu和111.111.111.111需要替换为自己服务器上的用户名和ip地址。
这条命令的意思是将刚刚生成的id_rsa.pub文件上传的服务器上的~/.ssh目录下。
我们查看我们服务器的对应目录，会发现其中出现了一个名为authorized_keys的文件，其内容含有我们刚刚生成的id_rsa.pub的内容。
如果一切顺利，此时我们在本机git bash中运行命令ssh ubuntu@111.111.111.111应该就可以直接登录到远程服务器，不需要输入密码。
此时再回到我们的Hexo项目中，运行hexo deploy,会发现已经可以不需密码直接推送。
总结
我将“部署网站到服务器”这件事情分成了三个彼此独立的阶段。每一个阶段完成后都能取得阶段性的可视成果，我们也可以在任何一个阶段停下来不进行后面的步骤。相比于网络上很多将三个阶段糅合在一起的博客，我想这样的叙述方式可以让整个过程更清晰，也更能解答一些初学者的疑惑。
杂谈
静态网站指内容写死的网站，而动态网站则由后台的服务器送来数据并在页面中进行填充。
我大二时第一次做Web项目，用的是Tomcat+JQuery+Bootstrap，后来由于逻辑需要又加入了Ajax。这些都是非常古老现在已经几乎没有人会谈论的技术，但是它们却是完整的前后端分离+动态网站的框架。
后来大三做课设，我用了SpringBoot+Vue。Vue的MVVM架构给我留下了深刻印象。我的项目也变为了服务器后台+nodejs中台+Vue前端的三层架构。但是我其实并不了解部署，一个npm run dev从启动一直用到了验收。
我接触到nginx时，是想用它做负载均衡。我知道他可以做服务器，但我一直以为是一个扩展功能，就像Word支持打开pdf那样。
现在，许多计算机学生的Web启蒙已经是从前后端分离和动态网页开始了。我们缺少了一个熟悉旧技术接触新技术的阶段，以至于我们在扭过头来看过去曾经风靡的旧技术和基础知识时竟会有不适应感。
随着时代的变化，技术栈越变越复杂，越来越全面。但是复杂也会带来问题。对于个人来说，复杂的技术栈会使个人想法实施起来的时间成本很高。
但是简单也会带来局限。这个博客网站就很局限，我只能写博客，没法设计我自己的展览墙，也没法加入我自己的小游戏。（当然就算采用动态技术，我可能也抽不出时间精力去写）
我本以为这次建站会是一个付出时间，收获成品的工作过程。没想到，它又成为了我的学习过程。在这次建站过程中，我学习到了前端框架（包括Vue）生成的静态资源用法，配置了nginx作为静态服务器，了解了自己搭建git远程仓库的使用场景和方法。
这也算是意料之外的收获，虽然相比之下付出的时间更令我心痛。
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
