从 0 开始搭建 hexo 博客
之前有好几个人问我怎么搭建和我的一样的博客。这次年终总结给同事安利写博客的好处后,也有不少同事来咨询。搭建博客虽然不难,但需要很多琐碎的小知识。我就简单整理一下整个流程和需要的知识点。
方案选择
可选方案
一般个人博客搭建主要有这两种方案选择。
- 选择商业博客方案,如国内的 简书 和国外平台 Medium 都是很优秀的博客平台。很适合只想简简单单写博客,不愿意折腾的人。
- 搭建独立博客,需要购买域名、购买VPS、搭建VPS环境等。需要折腾的东西比较多,但同时也能学到很多。
我个人喜欢第二种,独立博客能完完全全自己控制。没有限制,随便折腾,同时也能学到很多。
框架选择
当然搭建博客并不是说自己从 0 开始写每一个页面,实际上有很多现成的优秀的博客程序。只需要安装,配置并挑选主题就能直接拿来用了。常见博客平台有以下几个:
其中 Hexo 和 Ghost 可以使用 Markdown 写文章,很适合程序员。Wordpress 非常强大,有丰富的插件和主题。但是对于一个简单的博客来说过重,个人觉得不适合轻量级博客。
Hexo 采用本地保存源文件并渲染成静态页面部署的方式,Ghost 则采用数据库服务端查询渲染的方式。我个人比较喜欢 Hexo 。
部署方案
Hexo 产生的静态文件只要放到任何支持 html 的空间或者服务器均可访问。主要的选择方案有以下两种
- GitHub Pages
- 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 | cd blog |
安装完成后需要用一下命令
1 | hexo g # 渲染 Source 目录下文件问静态页面 |
然后可以在 http://localhost:4000/
查看运行效果。
发表文章、替换主题等功能,请参考文章 手把手教你使用Hexo + Github Pages搭建个人独立博客。
配置服务器环境
服务器环境我选择使用 CentOS + Nginx
环境。 VPS 可以选择以下俩服务商
选择一个注册帐号,填写付款信息然后创建一个实例。选择 $5 的最低配置就够用了。用我上面提供的链接注册还能拿到 $20 - $30 的优惠卷,相当于免费用半年。
安装 Nginx
Nginx 是一个高性能的 HTTP 和反向代理服务器,同时也是一个 IMAP/POP3/SMTP 代理服务器。
首选需要安装 CentOS 7 EPEL
源,然后安装 Nginx
1 | sudo yum install epel-release |
启动 Nginx
Nginx 安装完成后需要手动启动
1 | sudo systemctl start nginx |
如果开启了防火墙,记得添加 HTTP 和 HTTPS 端口到防火墙允许列表。
1 | sudo firewall-cmd --permanent --zone=public --add-service=http |
配置完成后,访问使用浏览器服务器 ip ,如果能看到以下界面,表示运行成功。
配置虚拟主机
虚拟主机(Virtual Host)可以在一台服务器上绑定多个域名,架设多个不同的网站,一般在开发机或者要部署多个小网站的服务器上需要配置虚拟主机。
创建新的网站目录
Nginx 默认把网页文件存在 /var/www/html
目录。为了方便期间,我们在 /var/www/
目录下为每个站点创建一个文件夹。
1 | sudo mkdir -p /var/www/blog/html |
在 /var/www/blog/html/
目录下创建 index.html
文件。写上以下内容,用于测试虚拟主机运行情况。
1 | <html> |
创建虚拟主机配置文件
在 /etc/nginx/conf.d/
创建虚拟主机配置文件 blog.conf
1 | server { |
重启 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 | cd ~ |
在 /root/blog.git/hooks/post-receive
以下脚本
1 |
|
赋予脚本的执行权限
1 | chmod +x post-receive |
配置本机环境
在博客目录下运行下面命令,安装 git 部署工具。
1 | npm install hexo-deployer-git --save |
修改博客的配置文件 _config.yml
,修改deploy选项:
1 | deploy: |
然后运行 hexo d
部署本地渲染网页到服务器上。