Hexo建站日志(一) Hexo的安装和部署

开坑之萌新小白的从零开始建站日志,作为本系列的第一篇,先讲讲思路和基础的安装。


0 开始之前

首先拦在我安装道路上的一个问题是:我该把东西装在哪儿

我在云服务站上买了台服务器,我的需求是在本地Windows写作并推送到云端。
那么很明显,我的hexo应该装在本地Windows上而不是服务器上。

应该装在本地Windows上!

应该装在本地Windows上!!

应该装在本地Windows上!!!


没搞清楚这一点的我真是个ばかばかばか,蠢到家了

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页

对,是

静态网页

这意味着它不像WordPress一样,将数据库放在服务器上,随时可以调用(也就是所谓的动态)。Hexo是请你写好东西决定好模板主题再帮你生成网页。
打个比方
WordPress这类利用数据库的就像是火锅,你可以不停地往里面丢食材(写作)并获得你想要的前端页面。
而Hexo更像是烤箱,你得先把食材(文章)准备好,再丢进烤箱告诉Hexo:
嘿!Hexo!帮我烤好这道菜!(生成网页)

所以当我想要写文章并更新到服务器上的时候,我要做的事情是

  1. 在本地写文章
  2. 在本地生成静态网页
  3. 把本地的静态网页推送到服务器上

明白了这一点之后,就可以开始愉快地安装了。

1 正式安装

1.0 准备工作

本文中的所有代码均对应Ubuntu系统并使用nginx作为web服务器
根据Hexo官方文档,我们需要在本地安装git和Node.js
安装过程建议从对应官网寻找,写的肯定比我这个半吊子强(其实是因为我懒)。

1.1 正式安装

然后在本地安装Hexo,也就是两行行代码的事情

1
npm install -g hexo-cli

安装之后找个文件夹建站

1
hexo init <folder>

1.2 服务器安装git

这个根据各自服务器的系统和版本安装就好,同样可以参考git官网。

1.3 服务器的准备

安装nginx、Apache等网页服务器
开放80端口和443端口(如果你有HTTPS加密)

1.4 在服务器创建git仓库

找个地方创建你的git仓库,这里我用linux命令演示下

1
2
3
4
mkdir /var/repo
chmod -R 755 /var/repo/
cd /var/repo
git init --bare <你的仓库名>.git

上面四个命令从上到下分别是
新建文件夹
给予权限
进入该文件夹
在该文件夹下创建空仓库

1.5 配置服务端的nginx或者Apache

主要目的是让外部访问服务器的时候访问到站点根目录
举个栗子
http://shikazonokue.com/
的作用和
C:/
是类似的,都是告诉浏览器(资源管理器)

嘿!浏览器!帮我从这里获取资源!

而服务器也是个带操作系统的电脑,如果没有nginx等的帮助,浏览器就会一头雾水

淦!我怎么知道要去找哪个资源!

于是nginx的配置文件就会告诉发出请求的浏览器

嘿!走这边!这里是你要的资源!

那么接下来,我们希望浏览器访问什么资源呢,自然是我们博客资源
那么只要修改对应的配置文件,把指向的路径修改一下就好啦

Tips!

git仓库的位置和实际资源存放的位置应该是两个地方
打个比方,git仓库就像是一个宿舍的宿管
而你的资源就是住在这件宿舍里的同学
宿管和人会住在同一件房里么?显然不会

实际上,我们还需要在git仓库的<你的仓库名>.git/hooks的位置创建一个钩子文件

1
vim <你的仓库位置>/<你的仓库名>.git/hooks/post-receive

并添加代码

1
2
#!/bin/bash
git --work-tree=/var/www/hexo --git-dir=/var/repo/ganahBlog.git checkout -f

告诉git
嘿!git!帮我把我的资源安排在这里!
这样服务端的配置就完成啦

1.6 配置本地git

首先我们需要从服务器把我们的仓库克隆下来

1
git clone <你的仓库位置>/<你的仓库名>.git

接着修改_config.yml中的信息
找到# Deployment(一般是文件最末尾)并修改成

1
2
3
4
5
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: root@<你的服务器ip>:<你的仓库位置>/<你的仓库名>.git

接着在本地执行

1
hexo clean && hexo g -d

(应该会需要输入root密码,正常输入就好了)
然后在服务端的位置(资源应该存放的位置)进行拉取操作

1
git pull

打开浏览器,输入服务器ip地址,如果配置正确,应该就能看见你的博客页面了




今后的课题

  • 主题
  • 代码块
  • 主页移动端

更新日志

1.0 初稿完成
1.1 修正了格式错误
1.2 修改了一些格式问题
1.3 修改了一些换行格式

0%