基于Hexo+NexT的个人博客搭建

一直觉得作为一个程序员,应该要有一个独立的个人博客平台。至于为什么要写博客,你可以说是开源、分享精神在驱使着你,或者记录下日常工作、学习中遇到的问题及解决方案,方便后面查阅,或者其它什么的。于是开始搭建个人博客,初步准备使用第三方博客平台 Hexo + 博客主题 NexT 先来实现一个静态博客,先发到 Github 提供的 github.io 上,之后再部署到阿里云上,一步一步来实现吧。

github.io

如果没有自己的独立的域名和服务器,部署个人博客选择 github.io 将会是一个不错的选择,github.io 作为 Github 出品,品质是有保证的。我们就先来搭建 github.io 页面吧。

github 账户下创建一个名为 xiaxianbing.github.io 的仓库。https://xiaxianbing.github.io 将会是你主页网址。

仓库创建好了之后,clone 到本地就可以开始写第一个页面了。

1
2
3
4
5
6
$ git clone https://github.com/XiaXianBing/xiaxianbing.github.io.git

$ cd xiaxianbing.github.io
$ echo "hello github.io" > index.html
$ git add index.html
$ git commit -m "Init Commit"

好的,测试页面这就完成了。打开博客首页感受一下: https://xiaxianbing.github.io, 这当然不是我们想要的最终结果,还得继续努力。

Hexo

了解了下比较流行的静态博客框架 Hexo 和 Jekyll,个人感觉 Hexo 的主题比较好看,于是就选择了 Hexo。越来越多的人码字都用上了 Markdown,语法很少很简单,之前的很多备忘录也都是 Markdown 文档,而 Hexo 能直接将 Markdown 文档转化为静态 HTML,非常方便,另外 Hexo 本地预览功能也是相当的强大。当然其他的一些静态博客框架也能将 Markdown 文档转化为静态 HTML,也有本地预览,使用上也都是大同小异,就不用过多介绍了。 Hexo文档 足够详细,使用过程也是相当的简单,直接开始吧。

Hexo安装

Hexo 是基于 Node.js 的,在安装 Hexo 之前需要先安装 Node.js。

1
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

或者

1
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

也可以直接到 Node.js官网 下载安装文件直接安装。

安装完成后,重启终端并执行下列命令即可。

1
2
$ brew install nvm
$ nvm install stable

安装 git

1
$ brew install git

或者更新

1
$ brew upgrade git

安装 Hexo

1
$ sudo npm install -g hexo-cli

Hexo建站

Hexo 安装完成之后就可以开始建站了,具体操作 Hexo建站文档 也比较详细。

1
2
$ hexo init
$ npm install

建站完成之后先跳过配置,先来看看效果吧

1
$ hexo server

根据提示,打开页面: http://localhost:4000/
ok,能够看见像条博客的样子了。关于配置,可按照自己的喜好设置,详细可移步到 Hexo配置文档

部署

部署之前需要修改配置文件 _config.yml 里 deploy 的设置,如下:

1
2
3
4
deploy:
type: git
repository: https://github.com/XiaXianBing/xiaxianbing.github.io.git
branch: master

配置完成后,开始部署。

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

我们一般先使用 hexo clean 清除缓存,hexo generate 生成器重新生成一次,再执行 hexo deploy 部署。如果在执行 hexo deploy 的时候一直出现错误: ERROR Deployer not found: git 时,先执行:

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

即可。参见 Hexo部署文档

上面两个命令 hexo generatehexo deploy 可合并为:

1
$ hexo generate --deploy

或者

1
$ hexo deploy --generate

两个命令的作用是相同的。同时可以简写为

1
2
$ hexo g -d
$ hexo d -g

到这里, 博客就已经部成功署到 github.io 了,接下来就开始着手发布第一篇博客吧。

发布我的第一篇博客

1
$ hexo new BlogName

在文件目录/source/_posts/下,就会出新文件 BlogName.md 的文件,打开这个文件,那么直接将以上所写内容复制过去。然后执行:

1
2
$ hexo generate
$ hexo server

使用 Hexo 生成静态文件,启动 Hexo 服务。此时本地 http://localhost:4000/ 就能浏览到这篇博客,第一篇博客就此完成了。接下来再一次部署到 github.io,执行:

1
$ hexo deploy

部署成功后,打开 https://xiaxianbing.github.io ,此时你已经能够在线上浏览这篇博客了。

NexT主题

第一篇博客部署成功之后,作为完美主义者对默认主题自然不感冒,接下来需要做的就是换主题了。在网上找了一个比较好的博客主题 NexT,之后再做一些自定义。

关于 NexT主题 可以在这里查看到相关文档。clone 主题到本地

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

执行完成之后,在 themes 文件夹下就能看到刚 clone 下来的主题。配置文件 _config.yml 修改主题为 theme: next 。完成后先清除静态资源,再重新生成静态资源,启动服务命令,查看预览。

1
2
3
$ hexo clean
$ hexo generate
$ hexo server

更换主题后,可以根据自己的喜好做一些自定义。

部署阿里云

安装 nginx

我的阿里云服务器系统是 CentOS 7.2,安装 nginx 前先关闭防火墙吧。firewall-cmd --state 查看默认防火墙状态。如果防火墙开启,则在安装 nginx 前先关闭 systemctl stop firewalld.service。systemctl 常用的一些命令如下:

1
2
3
4
5
6
7
8
启动一个服务:systemctl start firewalld.service
关闭一个服务:systemctl stop firewalld.service
重启一个服务:systemctl restart firewalld.service
显示一个服务的状态:systemctl status firewalld.service
在开机时启用一个服务:systemctl enable firewalld.service
在开机时禁用一个服务:systemctl disable firewalld.service
查看服务是否开机启动:systemctl is-enabled firewalld.service;echo $?
查看已启动的服务列表:systemctl list-unit-files|grep enabled

添加一个资源库:

1
$ vim /etc/yum.repos.d/nginx.repo

使用 vim 命令去打开 /etc/yum.repos.d/nginx.repo ,如果 nginx.repo 不存在,就会去创建一个这样的文件,

1
2
3
4
5
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=0
enabled=1

然后开始安装 nginx

1
$ yum install -y nginx

如果无法安装成功,则需要做一点处理。

1
$ vim  /etc/yum/pluginconf.d/fastestmirror.conf

设置 enabled=0,保存退出。

1
vim /etc/yum.conf

设置 plugins=0,保存退出。

1
yum clean dbcache

测试 nginx 配置文件, 执行 nginx -t,nginx 会去测试你的配置文件的语法,并告诉你配置文件是否写得正确,同时也告诉了你配置文件得路径:

1
2
$ nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
$ nginx: configuration file /etc/nginx/nginx.conf test is successful

说明配置文件正确,然后启动 nginx。关于停止、启动、重启、以及查看 nginx 状态如下:

1
2
3
4
5
6
$ service nginx stop
$ service nginx start
$ service nginx restart
$ service nginx status #检查服务状态
$ service nginx enable #使服务开机启动
$ service nginx disable #取消服务开机启动

开启安全组规则

阿里云升级以后增加了安全组规则设置,如果不设置,默认不开放80端口,这个着实把我给坑惨了。去阿里云管理端设置一组访问规则即可,就可以公网访问了,这里可以把443端口也设置开放,后面部署https用得上。

搭建 git 服务器

安装 git

1
$ yum install git-core

创建并设置 git 账户

创建 git 账户,设置密码,并设置 ssh。

1
2
3
4
$ su git
$ mkdir .ssh
$ touch authorized_keys
$ vim authorized_keys

将本地 ~/.ssh 文件夹下 id_rsa.pub 的内容复制到 authorized_keys。在 root 账户下,创建网站目录并执行:

1
$ chown git /usr/share/nginx/xiaxianbing

设置网站目录文件权限,完成之后执行 su git,到 git 账户下,创建 git 仓库, 并 clone 到网站目录下:

1
2
$ git init --bare ~/xiaxianbing.com.git
$ git clone /home/git/xiaxianbing.com.git /usr/share/nginx/xiaxianbing

配置 hooks

1
2
$ cd /home/git/xiaxianbing.com.git/hooks
$ vim post-receive

在 post-receive 中输入以下内容:

1
2
3
4
#!/bin/sh
unset GIT_DIR
cd /usr/share/nginx/xiaxianbing
git pull

然后保存退出。以上命令表示到网站目录,并 git pull 更新。随后还要把 post-receive 改成可执行:

1
$ chmod 775 post-receive

好的,git 服务器,以及网站目录就配置好了。

如果在部署是提示如下错误:remote: error: 无法打开 .git/FETCH_HEAD:????, 应该是你的服务器 git 账号没有权限打开 /usr/share/nginx/xiaxianbing。你可以验证一下,su git 切换到 git 账户下并执行 git pull,如果没有权限会报以下错误:
error: cannot open .git/FETCH_HEAD: Permission denied

解决: 切换到 root 账户下,执行以下命令为 git 账号配置文件权限。

1
chown -R git.git /usr/share/nginx/xiaxianbing

设置 nginx 启动目录

/etc/nginx/conf.d 文件夹下,修改 default.conf 中,location 下 root 为 网站目录,如下图所示。创建 nginx.conf 并将 default.conf 文件内容复制到 nginx.conf (完成后删除 default.conf)。

1
2
3
4
5
6
7
8
server {
listen 443;
server_name xiaxianbing.com;
location / {
root /usr/share/nginx/xiaxianbing;
index index.html index.htm;
}
}

至此,阿里云及 nginx 就配置完成了。 在 hexo 配置文件 _config.yml 里修改 deploy 的设置为阿里云 git 服务器。

1
2
3
4
deploy:
type: git
repository: git@xxx.xxx.xxx.xxx:/home/git/xiaxianbing.com.git
branch: master

完成之后保存,然后部署成功,就可以访问你的博客网站了,目前只能http访问,于是接下来打算将博客全站部署到https。

配置https

阿里云申请免费证书,登录阿里云–>安全(云盾)–> CA证书服务 -> 购买证书 -> 在基本配置中的选择品牌先选择 Symantec,保护类型选择 1个域名,在证书类型下才会出现 免费型DV SSL 选项,选中它,好了,可以看到右边购买金额为0,点击立即购买,购买成功。

此时在我的订单里就有一条待完成的订单,点击该订单行的补全,输入要配置https的域名,点击下一步,填好下面这个表单,其中域名验证类型需要注意的是,如果使用的是阿里云的服务器的话,选择DNS,再勾选上下面证书绑定的域名在【阿里云的云解析】产品中,系统会根据DNS配置要求,在域名解析服务商处添加相应的配置记录,否则需要自己去配置。然后点击下一步到完成,此时该订单就进入了审核状态,此处审核不是人工审核的,差不多半个小时左右就好了。

blog_hexo_next_0

将证书下载到本地,执行以下命令将证书上传到阿里云服务器,这里 scp -r xxx xxx 命令可将文件上传到 阿里云服务器,将两个参数对调也可以将阿里云服务器下的文件下载到本地,记录一下。(scp -r A B 将文件A存到路径B)

1
2
$ scp -r /Users/xxb/Desktop/cert/xiaxianbing.key root@xx.xx.xx.xx:/etc/nginx/cert/
$ scp -r /Users/xxb/Desktop/cert/xiaxianbing.pem root@xx.xx.xx.xx:/etc/nginx/cert/

scp -r /Users/xxb/Desktop/junyucanyin.conf root@106.14.162.124:/etc/nginx/vhosts/

配置https并重定向 httphttps,打开 nginx 安装目录下 /etc/nginx/vhosts/nginx.conf 文件,修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
server {
listen 80;
server_name xiaxianbing.com;
return 301 https://$server_name$request_uri;
}

server {
listen 443 ssl;
server_name www.xiaxianbing.com;
ssl on;
root html;
index index.html index.htm;
ssl_certificate cert/xiaxianbing.pem;
ssl_certificate_key cert/xiaxianbing.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root /usr/share/nginx/xiaxianbing;
index index.html index.htm;
}
return 301 https://xiaxianbing.com$request_uri;
}

server {
listen 443 ssl;
server_name xiaxianbing.com;
ssl on;
root html;
index index.html index.htm;
ssl_certificate cert/xiaxianbing.pem;
ssl_certificate_key cert/xiaxianbing.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root /usr/share/nginx/xiaxianbing;
index index.html index.htm;
}
}

至此,阿里云服务器上部署https博客已经完成了,访问一下试试吧。

访问作者博客首页

Nginx 配置多站点

nginx 配置多站点,只需要在/etc/nginx/conf.d/路径下将 nginx.conf 文件拷贝一个备份,并修改文件里相应的域名即可。为方便管理,我将在/etc/nginx/路径下新建文件夹统一管理各站点。具体操作如下:

  1. /etc/nginx/路径下新建文件夹命名为:vhosts。
  2. 将/etc/nginx/conf.d/路径下nginx.conf拷贝多个备份到 vhosts 文件夹下(有多少个域名就拷贝多少个备份),并分别命名为 相应域名.conf,分别将 相应域名.conf 里的域名修改为当前域名。
  3. 删除 /etc/nginx/conf.d/及路径下的文件。
  4. 将 /etc/nginx/nginx.conf 里 http的配置 include /etc/nginx/conf.d/*.conf; 修改为 include /etc/nginx/vhosts/*.conf;

参考


坚持原创技术分享,您的支持将鼓励我继续创作!
----------- 本文结束, 感谢您的阅读 -----------