0%

本博客的搭建过程

本博客的搭建过程

本博客使用的是Hexo框架,它的官网是这么介绍的:“A fast, simple & powerful blog framework, powered by Node.js”(基于“Nodejs”的一个快速、简单、强大的博客框架)。

我选择这个框架的原因主要有以下几点:

  • 简洁、轻量、美观

  • 部署、迁移方便

  • 静态网站有不少好处,也适合做个人博客,我个人觉得有以下几点好处:

    • 相对于动态网站来说,攻击面大大减少(至少在Web层面上)

    • 减少服务器性能消耗

    • 不容易出现问题,比较稳定,降低维护成本

本博客的技术架构

由“Hexo”生成网站的静态文件并部署到远程服务器(实际上就是用git push到远程服务器的私人Git仓库,然后远程服务器通过“Git Hook”对网站根目录进行自动部署/更新)。

没有特殊需求的话推荐使用“GitHub Pages”,它是免费的,也不需要维护服务器。
这里我只讲在个人服务器上的部署,个人服务器和“GitHub pages”的部署大致上是相同的,只是如果用个人服务器的话需要上服务器手动安装(配置)Web服务组件以及搭建Git服务器,也就是比“GitHub Pages”的部署步骤多了服务器上的操作。

开搞

客户端操作

我使用一个安装了“Arch Linux”系统的虚拟机来演示客户端上的操作,所以以下操作都是在此Linux发行版下完成,如果你使用的是Windows或者其他系统,可以在网上找到对应的安装教程,这里只演示Linux下的操作。

因为“Hexo”是基于“Nodejs”的,所以需要先安装“Nodejs”环境:

pacman -S nodejs

“npm”是“Nodejs”的“包管理工具”,我们需要用它来安装“Hexo”,所以先安装它:

Pacamn -S npm

“Nodejs”和“npm”都安装好后就可以开始安装“Hexo”了:

npm install hexo-cli -g

接下来可以使用“Hexo”来初始化一个博客了,创建一个目录用于存放站点文件,然后进入到该目录下输入命令:hexo init回车即可。
先用hexo g命令生成静态文件;
使用hexo s命令会在本地建立一个临时的Web服务,使我们可以在本地访问博客。
注意:“Hexo”的命令要在存放博客的目录下执行,也就是前面创建的那个目录

“Hexo”默认的本地Web服务端口是4000,应当在访问地址后面指明端口,就像这样:localhost:4000

不出意外的话你应该已经看到了博客的初始页面,这样客户端的操作就完成了。(预览完了博客,别忘了结束上面执行的Hexo server命令)

服务端操作

服务器使用的发Linux行版是“Ubuntu 18.04”,理论上来说,搭建的流程都是一样的,只是安装软件包的命令和软件包名称在不同的系统上可能有差别。如果有差别的话,只需要在网上查询一下自己系统使用的命令和对应的包名就行。

首先第一步自然是使用“SSH”连接到服务器上,我们使用“Nginx”来提供Web服务,为什么使用“Nginx”而不使用“Apache”?
因为我们的博客是一个静态站点,“静态处理”是“Nginx”的强项,可以在高性能的同时保持较低的资源(内存)占用。

安装“Nginx”:

apt install nginx

安装完成后,如果有需要可以对“Nginx”进行配置,“Nginx”主配置文件在/etc/nginx/nginx.conf(在不同的Linux发行版下可能不同),这里不对“Nginx”进行配置,使用默认配置即可。
启动并设置“Nginx”服务为开机启动:

systemctl enable --now nginx

验证一下“Nginx”能否正常工作:浏览器中访问服务器地址(“Nginx”默认工作端口就是标准的80端口),不出意外的话,应当能够看到“Nginx”的欢迎页面,表明“Nginx”正在工作。

现在我们要在个人服务器上搭建“Git”服务。
Git服务是通过“SSH”创建连接的,所以先安装“SSH”的服务端(在有些Linux发行版下,SSH的客户端和服务端是一体(在一个包里)的:

apt install openssh-server

然后安装“Git”:

apt install git

创建一个目录用来作为“Git仓库”(一般“Git仓库”的名字后缀会写成“.git”),我创建的目录名字是“blog.git”,并进入到该目录下执行命令git init --bare把目录初始化为一个“Git仓库”(Repository),现在这个目录就是“Hexo”用来部署站点的“远程仓库”了。
在该目录下会发现多出了许多目录,其中有一个“hooks”目录,这个目录就是用来设置“Git Hook”的,进入该“hooks”目录下新建一个“post-receive”文件(如果这个文件已经存在的话,就直接编辑这个文件),写入以下内容:

#!/bin/bash
git --work-tree=/var/www/html/ --git-dir=/home/john/blog.git checkout -f

注:“–work-tree=”这个参数指定的是网站根目录,我使用的是“Nginx”默认设置,默认的网站根目录是:“/var/www/html”,“–git-dir=”参数指定的是Git仓库的路径(之前创建的那个目录),我的仓库目录是“/home/john/blog.git”。

创建一个“git”用户专门用来操作“Git”仓库:

useradd git

使用passwd git命令来给git用户设置密码。
为了安全,限制“git”用户登录到Shell,让“git”用户只能进行Git操作:
编辑/etc/passwd文件,如果看不懂也没关系,只需要找到开头是“git”的那一行就行,大概长这样:

git:x:1001:1001:::/bin/bash

把最后的登录“Shell”改为“git-shell”,像这样:

git:x:1001:1001:::/usr/bin/git-shell

最后修改仓库目录的权限:

chown -R git:git /home/john/blog.git

服务器到这里就配置完毕了~可以回到客户端了。

回到客户端做最后的操作

安装“Hexo”的部署插件:npm install hexo-deployer-git
配置“Hexo”的部署插件:在博客目录中找到并打开“_config.yml”文件,查找关键词“deploy”,找到“deploy”这个字段的配置,大概长这样:

deploy:
type:
repo:
branch:

type字段填“git”;
repo字段填你远程服务器的“Git”仓库的地址;
branch如果你没有自己设置“Git”仓库的分支的话就填“master”,如果你改了“Git”仓库的分支,你应该知道填什么。

我的配置填完后是这样的:

deploy:
type: git
repo: git@x.x.x.x:/home/john/blog.git
branch: master

清除一下Hexo缓存:hexo clean
重新生成静态文件:hexo g
P.s:每次安装了新插件或更改了“Hexo”配置后,都应该执行一下以上两条指令,以保证新插件和新配置及时生效以及正常工作。
一键部署:hexo d,连接到服务器后会要求输入’git’用户的密码,输入正确密码后即可自动部署到服务器上,我们在服务器上设置的“Git Hook”在接受到客户端的推送后会自动更新网站根目录,实现自动部署。
如果你没有手动停止“Nginx”服务的话,那现在应该可以看到成果了,用浏览器访问服务器ip(或域名),应该就能看到部署的网站了。
以后更新文章只需要在客户端写好以后,用hexo g重新生成静态文件,再通过Hexo d来一键更新到网站(可以在推送到网站前先用hexo s在本地预览一下,没问题后再推送到网站).

结尾

这篇文章的重心在于网站的部署,所以没有涉及到博客的配置/主题的安装等工作。博客搭建好了,其他的这些配置之类的问题都是很简单、方便的,“Hexo”的官方文档也很全面,网上也有很多相关的文章、教程,对各位来说这应该不是问题~
Cheers~