都2022年了，还没有自己的博客网站？

大家好，我是阿呆，一个不务正业的程序员，不愿躺平的年轻人。

今天来给大家分享一下我的个人博客网站搭建过程，准确的来说应该是迁移过程。之前我的博客是基于Hexo+GitHub Pages实现的，也就是说由GitHub来承载了静态代码和页面的展示，也就是通常看到的xxx.github.io的形式，当然了也可以自己更换域名。

但是前段时间，由于腾讯云服务器的促销活动，低价入手了一台三年的云主机，买完之后，寻思着干点啥呢，也没啥大用处啊，脑子一热，索性把博客搬到服务器上得了，以后这服务器我就续上了，没错，它归我了。

其实这个迁移的过程还是比较顺利的，因为我之前已经实现了完整的博客系统，只是把远端仓库从GitHub搬到我的主机上而已。

不过今天的文章将会从了解Hexo开始，甚至是从买服务器开始，来给大家打造一份保姆级的博客搭建教程。

先给大家看一下我的博客界面吧，是我个人非常喜欢的一个主题。

博客首页

文章推荐

关于页面

怎么样，酷不酷！页面比较多，这里就不占用太多篇幅了。大家根据今天的文章搭建成功就会拥有一个类似的博客网站了，是不是想想都迫不及待呢。【Coder阿呆】发送“博客”即可拿到我的博客源码~

好了，话不多说，我们直接开始。

0、准备工作

在搭建博客之前，我们要先来准备一些必要的内容。当然你也可以暂时跳过这一步，直接进入下文，等用到服务器的时候，再来查看准备服务器。

因为我们今天是要把博客搭建在云服务器上，所以你需要有一台云服务器，这是必须的。

博客搭建好之后，总不能让大家通过一个丑陋的IP去访问你的博客吧，所以最好准备一个体面的域名，当然这个暂时没有也可以。

0.1 云服务器准备（必需）

云服务器的概念应该不用多说了，提供商大家也应该比较了解，常见的比如说腾讯云、阿里云、华为云、金山云等等，各个厂商大同小异，大家自行选择一个，这里以腾讯云服务器为例，其他服务商也基本类似，购买完服务器之后的配置都是一样的。

首先进入腾讯云官网，查看产品，其他服务商类似：

可以看到这里有我们需要的服务器，那么云服务器和轻量应用服务器有什么区别呢？

轻量应用服务器更聚焦于中小企业、开发者、云计算入门者、学生等用户群体，适合搭建中小型网站、博客、小程序、云盘/图床、学习环境搭建等场景，这些场景的特点是：轻量级、低负载且访问量不大。

所以我们搭建博客来说，轻量应用服务器就够用了。

至于套餐，基本入门级别或者基础版本就够用，2核2G，或者2核4G都可以，自行选择就行。

购买完成之后，就可以在控制台看到自己的服务器了，然后远程登录，修改下密码，我们的服务器就准备好了。

0.2 域名准备（可选）

接下来我们给自己的博客选购一个体面的域名。域名提供商也很多，这里还是以腾讯云来实例。

首先进入腾讯云域名注册页面。

在这里可以根据你的喜好，自行选择一个体面的域名，选个便宜的就行，太贵的没有必要，买好之后就可以了，至于解析和备案，我们后面再说，这里先不着急。

1、了解Hexo及其工作原理

在正式开始之前，我们先来了解下Hexo是什么，以及它是怎么工作的。因为了解了这些之后，你就更容易理解后面的每一步是在干什么。

Hexo是目前主流的博客管理框架之一，提供了丰富的博客主题和文章一键发布流程的能力。通过Markdown解析文章，在短短几秒内，就可以把一堆苍白的md文档，根据你选择的主题，渲染成一些靓丽的静态网页。

这些静态网页就是用户将在浏览器上看到的页面，这些东西自然是要部署在一个远端服务的，一般我们会选择GitHub Pages，因为这个东西天生就支持静态页面的解析，所以通常的解决方案就是hexo+GitHub Pages实现博客系统。

本地通过hexo的一些命令，渲染成静态页面，然后通过git将这些静态页面推动到远端仓库，然后解析渲染到用户眼前。简单搞个原理图看一下。

我们在自己的本地计算机上，安装hexo，并初始化一个仓库作为我们的博客目录，会默认生成一些文件夹，我们先来简单认识一下：

public目录（上图还没生成，执行hexo g后就可以看到了），主要存放我们博客页面的静态文件，包括html、图片、视频、logo等等。 scaffolds目录主要存放我们一些关键页面的模板，比如我们新建一篇文章时的通用模板。 source目录比较重要，里边存放的是我们页面上真正的数据，我们的文章就是写在这里。 themes目录顾名思义就是存放我们博客主题的文件夹，可以选择自己喜欢的主题放在这里，通过配置文件，动态的切换主题。 config.yml就是我们博客系统的核心配置文件，后面我会介绍它的配置内容。

hexo常用的几个命令，先来熟悉一下：

hexo new post “title” ，新建一篇文章，会默认建在source/_posts目录下。 hexo g，当我们在source/_posts目录下编辑好我们的文章后，使用该命令来生成静态文件。 hexo s，生成静态文件之后，我们想先来看看是什么样子，所以该命令就是启动本地服务器进行预览，默认使用4000端口， 也就是执行hexo s后就可以通过访问 http://localhost:4000 来访问我们的博客了。 Hexo d，在本地确认没有问题之后，使用该命令，将静态文件推送到我们的远端仓库。

既然是远端仓库，是GitHub，还是gitee，还是我的私有仓库，重要吗，不重要。只要是远端仓库就行嘛，那只要我在我的服务器上高搞一个我自己私有仓库不就可以了。

没错，就是这个原理。但是在建私有仓库之前，我们先来搞定本地的环境，培养一下成就感。不然容易直接放弃（手动狗头）。

2、本地计算机配置

2.1 安装Git和Node.js

因为hexo是依赖Git和Node.js工作的，所以我们第一步就来安装这些基础环境。

Git的安装，我相信这里就不用说太多了吧，大多数看到这的朋友电脑上也应该是有git的，贴个地址，有需要的朋友可以自行下载安装：git-scm.com/。

安装完成后可以通过git --version 来查看git版本，确认git是否安装成功。

Node.js的安装也很简单，在官网nodejs.org/en/ 下载你系统需要的安装包，按照提示安装即可。安装完成后通过node -v来查看node版本，确认node是否安装成功。

安装成功后我们把node的镜像源修改一下，提升我们后面包下载的速度：

npm config set registry http://registry.npm.taobao.org/

这些都准备好之后，我们就可以开始安装我们的hexo程序并配置博客目录了。

2.2 安装配置hexo

安装hexo非常的简单，只需要一个命令：

npm install -g hexo

等待安装完成就好了，通过hexo v命令查看版本，看到类似下面信息，就说明hexo已经安装成功了。

安装好hexo后我们开始正式创建我们的博客目录，在你的计算机的任何一个位置，新建一个文件夹，起一个酷酷的名字，但是最好是英文，比如xxxBlogDir，我这里以test为例。

进入我们刚才创建的目录，在这个目录下打开终端窗口，执行一个命令，来初始化我们的博客结构，也就是自动生成我们上面说到的那些文件夹和文件，这个命令就是：

hexo init

执行之后只需要静静地等待，之后你就可以看到一个类似我们上面说过的目录结构，你可以随便在这里先看一看。

当你看到这样的信息的时候，就证明你的博客目录已经初始化完成了，在source/_posts目录下，有一个默认的hello_world.md文件，也就是我们的博客文章，后续的所有文章都放在这里。我们先来看一下这个默认的文件内容：

就是很简单的一个markdown文件，它最终会被渲染成什么样子呢？是不是迫不及待想看看了，不要着急，我们继续往下看。

2.3 初窥博客页面

还是在当前目录下，执行一下hexo g，可以看到下面的信息，生成了一些静态文件，同时生成了public目录。

这就意味着我们的md文档已经成功渲染成了静态html页面，那怎么能看一看这些页面呢，在正式部署到仓库之前，希望在本地先进行一个预览，所以hexo也支持了这样的能力，可以通过hexo s命令来启动本地服务器，我们来看一下：

默认使用4000端口，我们赶紧来访问下看看：

哇哦，是不是很神奇，我们的markdown文档已经被渲染成一个炫酷的页面了！什么？你觉得有点丑？没关系，这只是一个主题的问题，后续可以通过更换主题来把我们的博客装修的漂漂亮亮！

现在这个页面我们在本地可以看到了，那怎样才能让其他人也能访问到我们的博客呢？这就需要把我们的静态资源，放在一个外网也可以访问到的地方，没错，远端仓库。

但是通过hexo将代码推送到远端，需要用到一个hexo的插件，叫做hexo-deployer-git，我们也把它下载一下，为了我们下面推送做准备。通过以下命令下载：

npm install hexo-deployer-git --save

至于远端仓库，可以是GitHub，也可以是服务器自建仓库，我们这篇文章就采用的就是在我们自己的服务器上建一个私有仓库来实现。

你可能料到了，没错，我们要上服务器了。所以如果你前面跳过了一节，现在请参照前面的内容，准备一台服务器，当然如果你不想准备，那么就搜索使用GitHub Pages搭建博客的教程，前面那些已经有了，远端仓库是什么真的不重要。

3、服务器端配置

我们远程SSH连接到我们的云服务器上，现在的服务器应该是非常纯净的，或许会有一些内置的应用程序。不重要，我们来安装一下。

3.1 安装配置Nginx

我们使用Nginx作为浏览器到服务器的一个代理。使用下面的命令来安装：

apt-get install nginx
# 或者
yum install nginx

下载完成后，我们测试一下是否安装成功。首先通过下面的命令把Nginx启动起来：

sudo systemctl start nginx.service

然后在浏览器输入你的主机IP，应该能看到这样的信息：

证明Nginx已经安装完成。但是这样我们每次输入IP，都会看到这样的一个页面，肯定是不行的，所以我们要把它换成我们的博客静态页。

但是现在服务器上并没有存放我们静态资源的文件夹，所以要先创建一个：

mkdir -p /www/blog/yangmingblog

这个目录创建好之后，我们来配置一下nginx的配置文件，让它的默认页指向我们的博客静态资源文件夹。找到你服务器上Nginx的配置文件，一般在/etc/nginx/nginx.conf，具体由你的服务器而定，反正先找到它，然后使用vim编辑器打开它。

在文件的最后，加入下面的代码：

server{  
    listen 80 default_server;  
    root /www/blog/yangmingblog;  #  这里就是我们刚才创建的目录
    server_name 101.43.32.xxx;  # 这个位置填写你的主机公网域名，有域名的也可以写域名
    index index.php index.html index.htm default.php default.htm default.html;
    location /{  
    }
}

完成后保存退出:wq

到这里我们的Nginx配置就结束了，这个时候重启Nginx再访问IP，会发现白页了，因为我们的静态资源目录里还没有文件，那么文件从哪里来呢，从git仓库来，所以来创建我们的git仓库。

3.2 初始化并配置远端仓库

进入到/var目录下，创建一个文件夹，例如就叫repo，作为我们的远程仓库。然后进入文件夹，使用git init命令，初始化一个git仓库。

mkdir /var/repo  # 新建仓库文件夹
cd /var/repo
git init --bare blog_static.git  # 仓库命名为blog_static，因为要存放博客静态资源

进入blog_static.git，这就是我们的远端仓库了！那怎么能让刚才的静态资源目录，保持和仓库同步呢？

在blog_static.git下，有一个hooks文件夹，我们进入这个文件夹，新建一个文件，叫做post-receive：

cd hooks
vim post-receive

填入下面的内容：

#!/bin/bash
# --work-tree 的内容就是刚才创建的静态资源目录
# --git-dir 的内容就是我们的git仓库
git --work-tree=/www/blog/yangmingblog --git-dir=/var/repo/blog_static.git checkout -f

到这里，我们在服务器端的配置就大功告成了！你离你的博客网站只差一步之遥！

3.3 配置本地hexo推送仓库

准备好远端仓库之后，我们还需要告诉本地的hexo，推送的时候，要往哪里推。

还记得刚才我们准备的本地博客目录吗，里边有一个_config.yml，就是它！打开！

这里面有很多的配置项，直接决定了我们博客的页面，这些配置我们后面再说，先拉到最底部，有一个叫做deploy的配置，只需要把这个配置设置成我们的远端仓库地址就好了：

# Deployment## Docs: https://hexo.io/docs/one-command-deploymentdeploy:  type: git  repo: root@101.43.32.xxx:/var/repo/blog_static # 你的用户名+ip+仓库地址  branch: master

随着你的一个ctrl+s，宣告着本次博客系统搭建的结束！还不赶紧来试试？

依次执行下面的命令：

hexo g
hexo d # 可能会让你输入服务器密码

当你看到类似下面的信息的时候，就意味着推送成功了：

恭喜你！拥有一个个人博客网站了！快去浏览器输入你的IP地址，看看吧~

关于博客的其他配置以及主题的更换，我们择日再说。

我是阿呆，感谢阅读