加载中...

基于Hexo的matery主题搭建博客增强部署篇4


Hexo Docker 本地部署

在最前面的篇章介绍了Hexo Docker 环境的使用方法。具体使用方法见本文系列[Hexo Docker 环境篇]。

优点:本地使用可定制化成都更高

缺点:必须要有Docker 环境。异地使用麻烦,除非ssh,vpn等远程链接方法。

[将Hexo部署到vps,实现自动发布][]

搭建流程

  1. 服务器环境配置,安装Git、Nginx配置、创建git用户
  2. 本地hexo初始化
  3. 使用Git自动部署并发布博客

服务器环境搭建

  • 安装Git和NodeJS(Centos环境)
yum install git
# 安装NodeJS 
curl --silent --location https://rpm.nodesource.com/setup_5.x | bash -
  • 创建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
  • 保存退出并改回权限
chmod 400 /etc/sudoers
  • 设置git账号密码
sudo passwd git
  • 使用su git切换到git用户,再执行下列操作:
# 切换到git用户目录
cd /home/git
# 创建.ssh文件夹
mkdir ~/.ssh
# 创建authorized_keys文件并编辑
vim ~/.ssh/authorized_keys
# 如果你还没有生成公钥,那么首先在本地电脑中执行 cat ~/.ssh/id_rsa.pub | pbcopy生成公钥
# 再将公钥复制粘贴到authorized_keys
# 保存关闭authorized_keys后,修改相应权限
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh
  • 然后可以通过本地Git Bash执行ssh命令测试是否可以免密登录
ssh -v [email protected]服务器ip地址

这样git用户就添加好了。

Tips: 将公钥拷贝到服务器的~/.ssh/authorized_keys文件中方法有如下几种:

  1. 将公钥通过scp拷贝到服务器上,然后追加到~/.ssh/authorized_keys文件中,这种方式比较麻烦。scp -P 22 ~/.ssh/id_rsa.pub [email protected]:~/。
  2. 通过ssh-copy-id程序,就是我演示的方法,ssh-copyid [email protected]即可
  3. 可以通过cat ~/.ssh/id_rsa.pub | ssh -p 22 [email protected] ‘cat >> ~/.ssh/authorized_keys’,这个也是比较常用的方法,因为可以更改端口号。
  • 安装Nginx
  • 准备工作
    首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++、gcc、openssl-devel、pcre-devel和zlib-devel 所以执行如下命令安装
yum install gcc-c++
yum install pcre pcre-devel
yum install zlib zlib-devel
yum install openssl openssl--devel

Ubuntu系统安装命令如下:

sudo apt-get install libpcre3 libpcre3-dev
sudo apt-get install zlib1g-dev
sudo apt-get install openssl libssl-dev
  • 安装Nginx
    安装之前,最好检查一下是否已经安装有nginx
find -name nginx

如果系统已经安装了nginx,那么就先卸载

yum remove nginx

然后开始安装
首先进入/usr/local目录

cd /usr/local

从官网下载最新版的nginx

wget -c https://nginx.org/download/nginx-1.14.2.tar.gz 

(注:版本号可更改,去官网查看最新版本号修改即可)

解压nginx压缩包

tar -zxvf nginx-1.14.2.tar.gz

会产生一个nginx-1.14.2 目录,这时进入nginx-1.14.2 目录

cd  nginx-1.14.2

接下来安装,使用–prefix参数指定nginx安装的目录,make、make install安装

./configure

(默认安装在/usr/local/nginx,推荐使用默认设置)

make

make install

如果没有报错,顺利完成后,最好看一下nginx的安装目录

whereis nginx

(where和is要连这些,中间没有空格)

  • 启动和停止nginx
cd /usr/local/nginx/sbin/
./nginx 
./nginx -s stop
./nginx -s quit
./nginx -s reload
./nginx -s quit: 此方式停止步骤是待nginx进程处理任务完毕进行停止。
./nginx -s stop: 此方式相当于先查出nginx进程id再使用kill命令强制杀掉进程。

查询nginx进程:

ps aux | grep nginx

  • 重启 nginx
  1. 先停止再启动(推荐):
    对 nginx 进行重启相当于先停止再启动,即先执行停止命令再执行启动命令。如下:
./nginx -s quit
./nginx
  1. 重新加载配置文件:
    当 nginx 的配置文件 nginx.conf 修改后,要想让配置生效需要重启 nginx,使用 -s reload 不用先停止 nginx 再启动 nginx 即可将配置信息在 nginx 中生效,如下:
./nginx -s reload

启动成功后,在浏览器可以看到如下页面:

  • 开机自启动

即在rc.local增加启动代码就可以了。

vim /etc/rc.local

增加一行

/usr/local/nginx/sbin/nginx

到这里,nginx安装完毕,启动、停止、重启操作也都完成。

建立git裸库

# 回到git目录
cd /home/git
# 使用git用户创建git裸仓库,以blog.git为例
git init --bare blog.git

检查用户组权限

我们的git裸仓库已经建立好了,离成功又近了一步。为了以防万一,我们要检查一下之前的blog.git、.ssh、blog目录的用户组权限是否都为git:git

# 还记得/var/www/吗?这是之前配置nginx时,我们自己选定的网站根目录,请依据你自己的设置更改,如果没有的话自己
ll -a /www/wwwroot/hexo
ll -a /home/git/

如果有哪个不是,执行下面相应的命令后再查看

sudo chown -R git:git /www/wwwroot/hexo
sudo chmod -R 755 /www/wwwroot/hexo
sudo chown git:git -R /home/git/blog.git

使用git-hooks同步网站根目录

简单来说,我们使用一个钩子文件:post-receive,每当git仓库接收到内容的时候,就会自动调用这个钩子,把内容同步到网站根目录。
在git用户下执行:

# 新建一个post-receive文件并编辑
vim ~/blog.git/hooks/post-receive

在里面输入以下内容,注意修改为自己的设置:

#!/bin/bash
set -e
GIT_REPO=/home/git/blog.git
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/www/wwwroot/hexo
rm -rf ${TMP_GIT_CLONE}
git clone -b main $GIT_REPO $TMP_GIT_CLONE
cd $TMP_GIT_CLONE
#for b in `git branch -r | grep -v -- '->'`; do git branch --track ${b##origin/} $b; done
#git checkout main
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}
echo "update web done!"
#ls -al ${PUBLIC_WWW}
rm -rf ${TMP_GIT_CLONE}

保存退出后,执行以下赋予这个文件可执行权限。

chown -R git:git ~/blog.git/hooks/post-receive
chmod +x ~/blog.git/hooks/post-receive

好了,以上就是服务器端需要配置的内容。我们还差最后一步就可以完成整个部署了!

修改配置文件nginx.conf

修改上面的配置文件:

vim /usr/local/nginx/conf/nginx_config

然后修改其中两个部分,如下所示:

然后重启nginx,方法见nginx安装部分。

配置本地Hexo的_config.yml

非常简单,只需要找到本地Hexo博客的站点配置文件_config.yml,找到以下内容并修改:

deploy: 
  type: git
  repo: [email protected]你的服务器IP:/home/git/blog.git
  branch: master

保存后,剩下的就是Hexo的日常操作了,这里就不赘述了,写完文章后,在你的本地博客根目录执行以下命令:

hexo c && hexo g -d

就可以实现线上博客的自动更新了!一切搞定!

Rsync同步部署静态文件方法

使用rsync同步

本地生成静态文件后rsync同步到vps网页目录,lnap使用宝塔配置,这里只需要一个nginx。

# rsync [options] from_dir to_dir
# 替换这里的ip为你的服务器ip
rsync -avzP  /home/17lai.blog  [email protected]:/www/wwwroot/hexo

Hexo Github Action 自动部署

准备

  1. Hexo 博客源码的仓库,在 GitHub 上。
  2. ssh 密钥,参考文章:Windows 下利用 Git 生成 SSH KEY 并配置到 GitHub

步骤

  1. 为需要部署的平台添加密钥
  2. 修改 _config.yml 中的 deploy 配置
  3. 在 GitHub 上设置 Secrets
  4. 创建 GitHub Action

为需要部署的平台添加密钥

按照之前的教程,只要你之前成功将 Hexo 的博客部署到 GitHub 上,那你电脑在 ~/.ssh 目录下一定有以下三个文件:

  • id_rsa:私钥
  • id_rsa.pub:公钥
  • known_hosts:记录对所有用户都可信赖的远程主机的公钥

id_rsa.pub(公钥)添加到不同平台中即可,参考文章:Windows 下利用 Git 生成 SSH KEY 并配置到 GitHub

下面是不同平台添加的地址:

修改 _config.yml 中的 deploy 配置

请使用 ssh (即以 [email protected] 开头的 clone 链接) 的连接方式,根据直接的实际地址填写。

deploy:
  - type: git
    repo:
      github: [email protected]:Sitoi/Sitoi.github.io.git
      coding: [email protected]:Sitoi/Sitoi.git
      gitee: [email protected]:sitoi/sitoi.git
      gitlab: [email protected]:Sitoi/sitoi.gitlab.io.git
    branch: master

在 GitHub 上设置 Secrets

  1. 进入到你在 GitHub 上面的源码仓库

  2. 点击右上角的 Settings

Settings

Settings

  1. 点击左侧的 Secrets

  2. 点击右上角的 New secret

New secret

New secret

  1. Name 中输入 HEXO_DEPLOY_PRI,在 Value 中填入 id_rsa(私钥)的全部内容

Add secret

Add secret

创建 GitHub Action

  1. 点击项目上方的 Action 按钮

Action

Action

  1. 点击 set up a workflow yourself 创建 Workflow

Workflow

Workflow

  1. 修改 main.yaml 的内容

Create Workflow

Create Workflow

根据实际情况修改成你自己的内容

  • Git 推送使用的用户名:git config –global user.name ‘sitoi’:
  • Git 推送使用的邮箱:git config –global user.email ‘[email protected]
  • Hexo 的版本:npm i [email protected] -g
name: Hexo CI

on:
  push:
    branches:
      - butterfly

jobs:
  butterfly-build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x]

    steps:
      - uses: actions/[email protected]
      - name: Use Node.js 10.x
        uses: actions/setup-[email protected]
        with:
          node-version: '10.x'
      - name: env prepare
        env:
          HEXO_DEPLOY_PRI: ${{ secrets.HEXO_DEPLOY_PRI }}
        run: |
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          ssh-keyscan gitlab.com >> ~/.ssh/known_hosts
          ssh-keyscan e.coding.net >> ~/.ssh/known_hosts
          ssh-keyscan gitee.com >> ~/.ssh/known_hosts
          git config --global user.name 'sito'
          git config --global user.email '[email protected]'
          npm i
          npm i [email protected] -g
      - name: gen
        run: |
          hexo clean
          hexo generate
          hexo deploy
  1. 将你的源码推送到 GitHub 上,你的博客一会就会自动更新了。

vercel 部署

jsdelivr被封了,怎么办?vercel 部署可以加速访问

为什么使用 vercel

  • 国内 Github Pages 速度较慢。
  • vercel 速度快且能够自定义域名,能实现和 Github Pages 一样的效果

vercel 官方地址:vercel.com/

如何部署

  • 首先注册一个账号
  • 注册成功后进入页面,点击 News Project

img

  • 然后通过绑定的 github 或者 gitlab 导入需要部署的项目

img

  • 如果导入的项目是打包好的静态页,在 Build and Output Settingsoverride 都勾上,表示不执行它的默认命令。

img

  • 点击 deployed 进行部署,如果部署失败可以查看报错信息是不是上一步的某些选项没有覆盖。部署成功后会进入如图所示的界面

img

如何自定义域名

vercel 自定义域名

  • 下面演示如何自定义域名,默认情况下部署成功后 vercel 会给你生成一个默认的域名,如果想要修改成自己的域名可将域名名称修改成自己的。
  • 当选择修改成自己的域名名称后,vercel 会检查域名指向的 DNS 对不对,如果不对的话会提示你域名的 DNS 应该如何配置,按照 vercel 提示的 DNS 信息

在自己的域名的 DNS 配置中进行配置,如图

img

配置多个域名

对其他新增的域名选择重定向到自己的主域名即可

vercel 多域名配置

cloudflare Pages 部署

jsdelivr被封了,怎么办?cloudflare Pages 部署可以加速访问

强烈推荐!

全球CDN,静态加速,可以说是最佳部署方案!就是有每日100000次请求限制!可以使用dnspod多线路负载均衡来帮助分流。

官网 cloudflare 首先注册一个账号

cloudflare

cloudflare page 连接 github

cloudflare page 选择仓库

cloudflare page 自定义域名

以 token 方式部署到 Github

deploy:
  type: git
  repo:
    github:
      url: <repository url>
      branch: [branch]
      token: ''
  message: [message]
  name: [git user]
  email: [git email]
  extend_dirs: [extend directory]
  ignore_hidden: false # default is true
  ignore_pattern: regexp  # whatever file that matches the 

travis 自动部署配置

travis是第三方CICD服务,比action更加强大,下面只是参考,请查阅travis 文档,并结合自己的环境修改!

sudo: false
language: node_js
node_js:
- 10.16.3
cache: npm
branches:
  only:
  - master # build master branch only

env:
  global:
  - GIT_USER: appotry
  - HEXO_BACKUP_REPO: github.com/appotry/hexo-backup.git
  - HEXO_THEME_REPO: github.com/appotry/hexo-theme-matery.git
  - GITHUB_PAGES_REPO: github.com/appotry/hexo.github.io.git
  - APPOTRY_REPO: github.com/appotry/hexo.git

before_install:
- export TZ='Asia/Shanghai'
- npm install hexo -g
- npm install gulp-cli -g

install:
- npm install

script:
- git clone https://${HEXO_THEME_REPO} themes/next
- git clone https://${GIT_USER}:${GITHUB_TOKEN}@${HEXO_BACKUP_REPO} hexo-backup
- mv hexo-backup/source .
- rm -rf source/private
- npm run build

after_success:
- git config --global user.name "appotry"
- git config --global user.email "[email protected]"
- git clone https://${GIT_USER}:${GITHUB_TOKEN}@${GITHUB_PAGES_REPO} voidking
- unalias cp
- cp -rf public/. 17lai.blog
- cd 17lai.blog
- git add .
- git commit -m "Travis CI Auto Builder"
- git push --force --quiet "https://${GIT_USER}:${GITHUB_TOKEN}@${GITHUB_PAGES_REPO}" master:master

利用 GitLab 实现 Hexo 博客的 CI/CD

Portainer 提供了对服务在线更新的 WebHook,所以基于 GitLab 自带的 CI/CD 功能实现 Hexo 博客的持续部署,就非常轻松了。

CI/CD 其实本质上是一套流程,流程规则可以自行定义。在本文研究的主题下,流程分为三步:第一步是编译 Hexo 博客并生成静态文件;第二步是将静态文件打包成可提供 Web 服务的镜像;第三步则是通过 Portainer 的钩子触发服务更新。

.gitlab-ci.yml

stages:
  - compile
  - build
  - deploy

# CONTAINER_RELEASE_IMAGE 根据自己的仓库名修改
variables:
  DOCKER_HOST: tcp://docker:2375
  DOCKER_DRIVER: overlay2
  CONTAINER_RELEASE_IMAGE: registry.gitlab.com/xxx/xxx:latest

compile:
  stage: compile
  image: node:lts-alpine
  script:
    - npm install
    - ./node_modules/hexo/bin/hexo generate
  artifacts:
    paths:
      - public/
    expire_in: 20 minutes

build:
  stage: build
  image: docker:stable
  services:
    - docker:dind
  script:
    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN registry.gitlab.com
    - docker info
    - docker build -f ./Dockerfile -t $CONTAINER_RELEASE_IMAGE public
    - docker push $CONTAINER_RELEASE_IMAGE

# 根据自己的钩子修改下方的 URL
deploy:
  stage: deploy
  script:
    - curl https://xxx.xxx.xxx/api/webhooks/xxx -X POST

为了保证服务更新的成功率,可以在 deploy 环节加个错误判断和重试次数,具体的看 GitLab 官方文档即可。

下面给出我的 Dockerfile 文件,供参考。

FROM nginx:alpine

COPY . /usr/share/nginx/html

RUN chmod 777 /usr/share/nginx/html -R \
    && sed -i 's/#error_page  404/error_page  404/' /etc/nginx/conf.d/default.conf

DNSPOD 多线路负载均衡

DNSPOD官网 console.dnspod.cn

dnspod

dnspod 多线路负载均衡

dnspod对cname数目有限制。

这里使用权重来分配各条线路访问比例!

系列教程

全部文章RSS订阅

Hexo系列 HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

  • markdown 各种其它语法插件
  • latex公式支持
  • mermaid图表
  • plant uml图表
  • URL卡片
  • bilibili卡片
  • github卡片
  • 豆瓣卡片
  • 插入音乐和视频
  • 插入脑图

笔记系列 Note分类RSS订阅

经历了很长时间,使用了各种各样的方案,最终选择了一种相对完美的方式。docker私有部署运行的joplin,使用markdown语法,github作为图床,picgo作为图像自动上传后端,pypora作为MD编辑器,Snipaste作为截图工具。后备gitlab ee selfhost备份,自建图床VPS多线负载均衡。cloudflare partner cdn加速,jsdelivr加速。

  • pigo图床搭建与配置
  • Joplin教程
  • Snipaste截图工具
  • Typora 作为Markdown编辑器最强
  • Joplin和使用
  • Joplin同步与备份
  • Joplin导入与导出
  • Joplin安装使用,调用外部编辑器,网盘同步等等
  • Joplin简明教程
  • markdown语法简明教程
  • 教你用各种插件打造一个强大的笔记工具。
  • 如何部署自己私有的为知笔记。
  • 其实博主更推荐私有部署joplin

Gitbook使用系列 Gitbook分类RSS订阅

Gitlab 使用系列 Gitlab RSS 分类订阅


文章作者: 夜法之书
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 夜法之书 !
评论
 上一篇

阅读全文

基于Hexo的matery主题搭建博客个性定制篇5
基于Hexo的matery主题搭建博客个性定制篇5 基于Hexo的matery主题搭建博客个性定制篇5
我想对我的博客进行各种个性定制,增加各种额外功能,评论邮件提醒,个人相册,图片懒加载,看板娘,黑暗模式等等,在这里啥都有
2022-03-27
下一篇 

阅读全文

基于Hexo的matery主题搭建博客网络优化篇3
基于Hexo的matery主题搭建博客网络优化篇3 基于Hexo的matery主题搭建博客网络优化篇3
有了一个独立博客后,访问速度很忙怎么办?这时候你需要上各种各样的优化手段了,比喻CDN,service worker,页面压缩技术,SEO优化等等。
2022-03-27
  目录