【hexo搭建】教你如何在阿里云服务器上搭建部署hexo静态博客+shoka主题


博客6664 阅8 评

【hexo搭建】教你如何在阿里云服务器上搭建部署hexo静态博客+shoka主题

关于B站小伙伴问的很多问题,我觉得博客上面的教程应该整理一下,免得有些想要搭建hexo框架的小伙伴继续踩坑,这次的教程非常的详细,只要按照步骤一步步来,你的博客肯定能搭建起来,也是B站很多小伙伴和我一起测试过没问题以后才发出来的,教程分为三个部分 。

本地hexo博客搭建
阿里云服务器上hexo的搭建以及将本地部署上去。
主题shoka的安装。


(hexo搭建原理图)

本地hexo静态博客搭建

个人使用的环境, 需要一个本地环境:Windows10(64位)电脑一台, 云主机:阿里云ECS(CentOS 8 64位),这里不一定跟我系统一样也能搭建成功,KK用的基本最新的系统。

整个部署过程 ,本地环境搭建(Git,NodeJs,Hexo) 云主机环境搭建(Git,宝塔面板一键部署Nginx) 使用git自动化部署博客 。

本地Win10搭建环境

安装Git,百度git,然后下载安装包(打开后一直下一步到结束就行),同样 百度Node js 安装Node js(下载安装包,打开后一直下一步到结束就行) 。

接下来安装hexo

我部署在D:/blog 中,你根据自己的习惯定义部署位置,不建议C盘,避免系统损坏后导致文件丢失。打开D盘,新建blog文件夹,打开blog文件夹,右键git bush here”。执行如下命令.

npm install hexo-cli -g
hexo init 
npm install hexo server
npm install hexo-deployer-git --save

定义邮箱(更换为你的邮箱地址就行)

git config --global user.email "xiaomichennian@163.com"

定义名称(更换自定义一个名称就行)

git config --global user.name "mingKK"

测试本地部署

hexo g -d
hexo s

然后会出现一个本地地址localhost:4000博客地址打开看看是否搭建成功。

生成ssh 公钥

在Win10桌面右击,点击Git Bash Here打开命令行终端,执行如下命令(直接按三次回车生成密钥)

ssh-keygen -t rsa

生成的文件默认在~/.ssh目录中,看到有id_rsa,id_rsa.pub这些文件即可, Win10中就是 我的电脑/C盘/用户/你自己的用户名/.shh/ 就可以看到了,别问为啥,后期我们会用到。

配置_config.yml,完成自动化部署为服务器上搭建做本地准备

打开D盘,blog文件夹,打开blog文件夹,打开_config.yml, 找到deploy

deploy:
type:git
repo: git@server:/var/repo/hexoBlog.git
branch: master

#server改为你的服务IP地址或解析后的域名
#例如我改为repo: git@mkk.quefeixi.com:/var/repo/hexoBlog.git

(特别提醒:后期主题有个复制替换_config.yml的步骤记得把这里改过来。否则连接不了服务器。)
至此本地搭建已经结束了。

阿里云服务器上hexo的搭建及本地部署到服务器仓库

宝塔面板安装

为了适合小白安装部署和后期网站服务器的扩展性,选用宝塔面板来一键部署Nginx Linux面板6.0安装命令(暂时仅兼容Centos7.x,其它系统版本请安装5.9稳定版)

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

安装完成后我们顺便把配置文件也弄好,后期就不需要弄了,安装完成后会显示面板后台地址·账号·密码。打开面板后台地址登陆面板,选择Nginx的部署方案,静静等待部署。部署完成,点击网站-添加站点-输入域名(没有域名的输入自己的IP地址)-底部的PHP版本选择”纯静态”(其他不改 或者根据自己的习惯来改)-提交。网站创建完成后点击设置-配置文件。

server
{


listen 80;

\# server_name 填写自己的域名


server_name mkk.quefeixi.com;
index index.php index.html index.htm default.php default.htm default.html;


\# 这里root填写自己的网站根目录,修改为/var/www/hexo


root /var/www/hexo;

保存

点击设置-网站目录,修改为/var/www/hexo ,保存.

阿里云服务器部署仓库

安装git

yum install git

创建Git账户

adduser git

添加账户权限

chmod 740 /etc/sudoers
vim /etc/sudoers

找到
Allow root to run any commands anywhere
root ALL=(ALL) ALL

添加以下内容、

git ALL=(ALL) ALL

保存退出(按 Esc 键退出编辑模式,输入”:wq” 保存退出)并改回权限。

chmod 400 /etc/sudoers

设置git账户密码

sudo passwd git

切换至git用户,创建 ~/.ssh 文件夹和 ~/.ssh/authorized_keys 文件,并赋予相应的权限

su git
mkdir ~/.ssh
vim ~/.ssh/authorized_keys

然后将前面win10中生成的id_rsa.pub文件中的公钥复制到authorized_keys

chmod 600 /home/git/.ssh/authorzied_keys
chmod 700 /home/git/.ssh

在本地Git终端中测试是否能免密登录git,其中下面SERVER为填写自己的云主机IP一定替换过来,执行输入yes后不用密码就说明好了(KK这里没有免密成功但是不影响使用,你如果也没有可以放弃直接下一步步骤,反正我这边暂时找不到原因放弃了只是后期需要输入密码,不过还行也就1秒钟的事情,嫌麻烦的可以自己想办法解决一下)。

ssh -v git@SERVER

创建目录

repo作为为Git仓库目录

mkdir /var/repo
chown -R git:git /var/repo
chmod -R 755 /var/repo

hexo作为网站根目录

mkdir /var/www
mkdir /var/www/hexo
chown -R git:git /var/www/hexo
chmod -R 755 /var/www/hexo

然后创建一个裸的 Git 仓库,返回root目录创建。

su root
cd /var/repo
git init --bare hexoBlog.git

创建一个新的 Git 钩子,用于自动部署 在 /var/repo/hexoBlog.git 下,有一个自动生成的 hooks 文件夹。我们需要在里边新建一个新的钩子文件 post-receive。

vim /var/repo/hexoBlog.git/hooks/post-receive

按 i 键进入文件的编辑模式,在该文件中添加两行代码(将下边的代码粘贴进去),指定 Git 的工作树(源代码)和 Git 目录(配置文件等)

# !/bin/bash

git --work-tree=/var/www/hexo --git-dir=/var/repo/hexoBlog.git checkout -f

然后,按 Esc 键退出编辑模式,输入”:wq” 保存退出。

修改文件权限,使得其可执行。

chown -R git:git /var/repo/hexoBlog.git/hooks/post-receive
chmod +x /var/repo/hexoBlog.git/hooks/post-receive

到这里,我们的 Git 仓库算是完全搭建好了

重启宝塔面板服务

service bt restart

不出错显绿说明完成,
然后到本地

hexo clean
hexo g -d

打开浏览器输入你的域名或ip地址就可以看到你部署的Hexo博客了。至此,我们已经成功完成,并且访问自己的服务器端比访问github快多了.

常见问题

我在部署过程中,执行 hexo d发现部署老是出错,什么权限不允许之类的,这里我们需要检查我们在上述的git操作部署是否使用了git用户操作,若是没有,需要给相应的目录更改用户组 使用.

比如:


我们需要给权限输入下方命令

chown -R git:git /var/repo/

这条命令递归的将repo目录及其子目录用户组设置为git。同时使用

chown -R git:git /var/www/hexo

这样即可解决此类问题。

主题shoka的安装和美化

1.安装

git clone https://gitee.com/mingkaikai/hexo-theme-shoka.git ./themes/shoka

这里我没有用作者的镜像因为github是国外的太慢了。

打开主题目录,内有 example 文件夹,将里面的_config.yml 复制替换根目录_config.yml这样少了一步配置搭建为了节省时间.

然后_config.yml 修改好你的仓库地址和服务器别忘了 具体在前面搭建时候已经弄过并且提醒了复制过来保存就行。
在应用主题之前,必须至少安装 hexo-renderer-multi-markdown-it 渲染插件 和 hexo-autoprefixer。

2.multi-markdown-it 安装与配置

安装前,记得务必卸载掉默认的 hexo-renderer-marked ,以及别的 markdown 文件渲染器。

npm un hexo-renderer-marked --save

安装

npm i hexo-renderer-multi-markdown-it --save

如果安装缓慢,或者失败如报错,请使用下面这条命令。

npm i hexo-renderer-multi-markdown-it --save --ignore-scripts

现在可以部署到网站了

hexo clean
hexo g-d

最后出现报错

npm uninstall js-yaml
npm install js-yaml@3.14.1

输入上面命令修改一下版本即可

hexo g-d

至此我们整个搭建过程就结束,感谢大家的支持

最后更新 2021-12-03
评论 ( 8 )
OωO
隐私评论
  1. 亲笔信

    宝塔设置/var/www/hexo目录显示请不要将网站根目录设置到以下关键目录中,怎么搞

    3个月前回复
  2. i1548708011

    老哥 hexo d的时候
    To 120.25.84.254:/var/repo/hexoBlog.git

    [new branch] HEAD -> main

    Branch 'master' set up to track remote branch 'main' from 'root@120.25.84.254:/v
    ar/repo/hexoBlog.git'.
    把master换成main 网页也没有 咋整

    10个月前回复
    1. Swift
      @i1548708011

      老哥,你好,我部署时也遇到和你同样的情况,请问你解决了吗?已经困恼很久了。

      6个月前回复
    2. @i1548708011

      最近没搭建过 可能又改了

      10个月前回复
  3. Sun

    hexo d 的时候 报错
    remote: error: cannot run hooks/post-receive: No such file or directry
    To 120.46.188.164:/www/wwwroot/hexo/hexo.git
    94f3eab..4bbd16f HEAD -> master
    branch 'master' set up to track 'git@120.46.188.164:/www/wwwroot/hex/hexo.git/master'.

    1年前回复
    1. @Sun

      master换成main应该就可以了

      1年前回复
  4. 顾北松

    不错不错

    1年前回复
    1. @顾北松

      谢谢!

      1年前回复