2021年8月15日星期日

从 0 开始搭建 hexo 博客

 之前有好几个人问我怎么搭建和我的一样的博客。这次年终总结给同事安利写博客的好处后，也有不少同事来咨询。搭建博客虽然不难，但需要很多琐碎的小知识。我就简单整理一下整个流程和需要的知识点。

方案选择

可选方案

一般个人博客搭建主要有这两种方案选择。

  1. 选择商业博客方案，如国内的 简书 和国外平台 Medium 都是很优秀的博客平台。很适合只想简简单单写博客，不愿意折腾的人。
  2. 搭建独立博客，需要购买域名、购买VPS、搭建VPS环境等。需要折腾的东西比较多，但同时也能学到很多。

我个人喜欢第二种，独立博客能完完全全自己控制。没有限制，随便折腾，同时也能学到很多。

框架选择

当然搭建博客并不是说自己从 0 开始写每一个页面，实际上有很多现成的优秀的博客程序。只需要安装，配置并挑选主题就能直接拿来用了。常见博客平台有以下几个：

其中 Hexo 和 Ghost 可以使用 Markdown 写文章，很适合程序员。Wordpress 非常强大，有丰富的插件和主题。但是对于一个简单的博客来说过重，个人觉得不适合轻量级博客。

Hexo 采用本地保存源文件并渲染成静态页面部署的方式，Ghost 则采用数据库服务端查询渲染的方式。我个人比较喜欢 Hexo 。

部署方案

Hexo 产生的静态文件只要放到任何支持 html 的空间或者服务器均可访问。主要的选择方案有以下两种

  1. GitHub Pages
  2. VPS

GitHub Pages 本用于介绍托管在GitHub的项目，不过，由于他的空间免费稳定，用来做搭建一个博客再好不过了。
每个帐号只能有一个仓库来存放个人主页，而且仓库的名字必须是username/username.github.io，这是特殊的命名约定。你可以通过http://username.github.io 来访问你的个人主页。

Github Pages 好处是完全免费，搭建并部署到教程可以参考 手把手教你使用Hexo + Github Pages搭建个人独立博客。我个人的方案是第二种，部署到自己的服务器。

独立博客部署到自己服务器一年需要费用如下

  • VPS $5 / 月
  • 域名 ￥50-200 / 年

本地安装 Hexo

以下有些步骤可能需要翻墙，如果下载失败请参考 为Mac Terminal设置代理 配置代理。

安装依赖

Hexo 依赖于 Node.js 和 Git，需要先安装。
下载 Node.js
下载 Git

安装 Hexo

1
npm install hexo-cli -g

在 blog 目录下初始化 hexo 博客，也可以是任意你想要的名字

1
hexo init blog

进入博客根目录，并且安装相关插件依赖等

1
2
cd blog
npm install

安装完成后需要用一下命令

1
2
hexo g # 渲染 Source 目录下文件问静态页面
hexo s # 本地跑一个 server 来看博客效果。

然后可以在 http://localhost:4000/ 查看运行效果。

发表文章、替换主题等功能，请参考文章 手把手教你使用Hexo + Github Pages搭建个人独立博客。

配置服务器环境

服务器环境我选择使用 CentOS + Nginx 环境。 VPS 可以选择以下俩服务商

选择一个注册帐号，填写付款信息然后创建一个实例。选择 $5 的最低配置就够用了。用我上面提供的链接注册还能拿到 $20 - $30 的优惠卷，相当于免费用半年。

安装 Nginx

Nginx 是一个高性能的 HTTP 和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。

首选需要安装 CentOS 7 EPEL 源，然后安装 Nginx

1
2
sudo yum install epel-release
sudo yum install nginx

启动 Nginx

Nginx 安装完成后需要手动启动

1
sudo systemctl start nginx

如果开启了防火墙，记得添加 HTTP 和 HTTPS 端口到防火墙允许列表。

1
2
3
4
sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload
sudo systemctl restart firewalld.service

配置完成后，访问使用浏览器服务器 ip ，如果能看到以下界面，表示运行成功。

配置虚拟主机

虚拟主机（Virtual Host）可以在一台服务器上绑定多个域名，架设多个不同的网站，一般在开发机或者要部署多个小网站的服务器上需要配置虚拟主机。

创建新的网站目录

Nginx 默认把网页文件存在 /var/www/html 目录。为了方便期间，我们在 /var/www/ 目录下为每个站点创建一个文件夹。

1
2
3
sudo mkdir -p /var/www/blog/html
sudo chown -R $USER:$USER /var/www/blog/html
sudo chmod -R 755 /var/www

在 /var/www/blog/html/ 目录下创建 index.html 文件。写上以下内容，用于测试虚拟主机运行情况。

1
2
3
4
5
6
7
8
<html>
    <head>
        <title>Welcome to Blog!</title>
    </head>
    <body>
        <h1>Success! The Blog server block is working!</h1>
    </body>
</html>

创建虚拟主机配置文件

在 /etc/nginx/conf.d/ 创建虚拟主机配置文件 blog.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
        listen 80;
        listen [::]:80;

        root /var/www/blog/html;
        index index.html index.htm index.nginx-debian.html;

        server_name eliyar.biz www.eliyar.biz;

        location / {
                try_files $uri $uri/ =404;
        }
}

重启 Nginx 服务器，使服务器设定生效

1
sudo systemctl restart nginx

修改本地host，验证结果

在绑定域名到服务器之前，需要修改本地 host 文件来测试。本地电脑上修改 /etc/hosts 文件。

1
45.32.227.150 eliyar.biz

能看到一下结果就表示虚拟主机配置成功。

部署 Hexo 到服务器

Hexo 可以使用 git 方式部署。

配置服务器环境

首先在 VPS 上安装 git

1
yum install git

创建空白 git 仓库，并且设置 git hook

1
2
3
cd ~
mkdir blog.git && cd blog.git
git init --bare

在 /root/blog.git/hooks/post-receive 以下脚本

1
2
3
4
5
6
7
8
#!/bin/bash
GIT_REPO=/root/blog.git  #git仓库
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/var/www/blog/html #网站目录
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

赋予脚本的执行权限

1
2
chmod +x post-receive

配置本机环境

在博客目录下运行下面命令，安装 git 部署工具。

1
2
npm install hexo-deployer-git --save

修改博客的配置文件 _config.yml，修改deploy选项：

1
2
3
4
5
deploy:
  type: git
  message: update
  repo:
    s1: root@45.32.227.150:/root/blog.git/,master

然后运行 hexo d 部署本地渲染网页到服务器上。

参考

发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)