基于Hexo从0到1搭建个人博客

发表于 分类于

看了网上好几个人的个人博客，里面有包括他们个人的简介，对某些技术深度的思考，对一些经历的复盘，我觉得这是一件很酷的事情，于是也开始搭建自己的个人博客。作为博客的第一篇文章，我就简单整理一下整个流程和需要的知识点。

方案选择

框架选择

常见博客平台有以下几个：

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

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

部署方案

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

  1. GitHub Pages
  2. 云厂商服务器

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

Github Pages 好处是完全免费。我个人的方案是第二种，部署到自己的服务器。

本地安装 Hexo

安装依赖

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

安装 Hexo

npm install hexo-cli -g

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

hexo init blog

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

cd blog
npm install

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

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

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

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

在服务器安装安装 Nginx

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

sudo yum install epel-release
sudo yum install nginx

启动 Nginx

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

sudo systemctl start nginx

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

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 ，如果能看Nginx的默认页面，表示运行成功。

创建新的网站目录

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

sudo mkdir -p /var/www/blog/html
sudo chown -R $USER:$USER /var/www/blog/html
/var/

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

<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

server {
        listen 80;
        listen [::]:80;

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

        server_name ybh-ybh.top www.ybh-ybh.top;

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

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

sudo systemctl restart nginx

部署 Hexo 到服务器

Hexo 可以使用 git 方式部署。

配置服务器环境

首先在 服务器上安装 git

yum install git

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

cd ~
mkdir blog.git && cd blog.git
git init --bare

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

#!/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}

赋予脚本的执行权限

chmod +x post-receive

配置本机环境

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

npm install hexo-deployer-git --save

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

deploy:
  type: git
  message: update
  repo:
    s1: root@xx.xx.xx.xx:/root/blog.git/,master

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

其他问题

参考