vercel免费部署个人博客,并利用GitHub自动更新

参考:使用Vercel+GitHub快速构建Hexo博客 - 知乎 (zhihu.com)

如何使用 vercel + hexo 搭建博客_慕课手记 (imooc.com)

1. 介绍

vercel: Vercel 提供了一个云平台,可以优化整个项目开发和部署体验,它有很强大的功能值得去探索,个人使用是免费的,提供了域名访问,使用方便快捷。
img

hexo: Hexo 是一个基于 nodejs 的静态博客网站生成器,通过使用脚手架安装后,命令操作简单,直接开箱使用,支持丰富的主题,支持高度的自定义化,主要使用 markdown 语法。你可以自行开发插件,优化你的博客。
1

2.Vercel 一键部署原生 Hexo

https://vercel.com/ 网站用 GitHub 注册一个账号后并登陆。

然后重新输入网址 https://vercel.com/ 并访问

img

这大概就是大家看到的页面,点击 New Project 按钮,然后点击 Browse All Templates → 按钮,在第 4 行的第 1 个就是 Hexo

img

点击进去,可以看到图片所示的内容。

img

选择灰框勾选的内容,也就是你的 GitHub,然后点击 Select 按钮,然后点击 GitHubGIT SCOPE 处选择你想要储存 Hexo 的用户,在 REPOSITORY NAME 处填上你想要储存 Hexo 的仓库,并勾选 Create private Git Repository 选项,这个选项是将该仓库设为私有仓库,对他人不可见。然后点击 Continue 按钮,然后什么都不需要修改,直接点击 Deploy,等待它自动完成构建,3 分钟之内完成,并分发一个免费的二级域名,可以暂时用于使用(不会回收,但不建议使用)

img

img

部署完成后,它就和你刚刚所填写的仓库绑定了,一旦你的仓库有什么变化,它就会自动同步部署,全过程大概 5 分钟可以完成部署。

3. 在本地构建hexo环境

上一步我们完成了对hexo的云端部署,vercel默认是从GitHub拉取数据,故若要对网站进行更改,则必须要对Github进行更改。而对Github更改最简单的方式就是链接云端与本地,在本地hexo环境下进行更改后推送至Github。

所以,我们首先要在本地构建一个hexo环境。

安装依赖:

  1. 安装git

    Git for Windows下载,一路默认安装即可,详细参见配置git文章

  2. 安装node.js
    Node.js (nodejs.org)下载,安装好 nodejs 后,也会相应的安装上 npm。

安装hexo:

在资源管理器右键菜单或开始菜单里,可以找到 Git Bash ,打开后是个命令行界面,输入:

1
npm install -g hexo

等待安装完毕

4. 链接Github

打开 Git Bash ,运行下面的命令 :

1
ssh-keygen -t rsa -C "{{你的电子邮箱地址}}"

连续 3 次回车,最终会在用户目录下生成个包含公钥私钥等数据的目录 ( 一般是 C:/Users/{{你的用户名}}/.ssh/ ) 。

img

打开这个目录,找到 id_rsa.pub 文件,用你喜欢的二进制文本编辑器 ( 记事本 ) 打开并复制里面的内容。前往 GitHub -> Settings -> SSH and GPG keys -> New SSH key ( 即 [该链接](Add new SSH keys (github.com)) ):

将刚复制的内容粘贴到 Key 中,Title 填你喜欢的,点击保存 ( Add SSH Key ) 。

img

Git Bash运行下方命令 :

1
2
git config --global user.name "{{你的 GitHub username}}"
git config --global user.email "{{你的 GitHub 注册邮箱地址}}"

打开 Git Bash ,运行下面的命令 :

1
ssh -T git@github.com # 此处邮箱地址不用改

如果提示 Are you sure you want to continue connecting (yes/no)? 请输入 yes 并回车。

1
Hi {{你的 GitHub username}}! You've successfully authenticated, but GitHub does not provide shell access.

看到这个信息则说明配置成功。

5. 拉取云端数据,进行修改

这里使用Github Desktop进行连接(git的命令行界面实在是太痛苦了)

从[官网](GitHub Desktop | Simple collaboration from your desktop)安装Github Desktop

打开,按下图clone repository选择hexo即可

image-20210824170947018

在项目文件夹下,打开Git Bash,首先需要安装项目依赖,通过npm installcnpm installyarn install皆可安装依赖。

依赖安装成功后,执行hexo server -p $PORT即可启动项目,其中$PORT 默认 4000,你也可以修改端口。hexo 也提供了简易方式启动命名:hexo s,启动后在浏览器访问:localhost:4000即可打开。

img

6. 在本地写文章,并推送到云端

进入 Hexo 所在的目录,Git Bash输入以下命令

1
hexo new'{{文章名称}}'

运行后 source\_posts\ 目录下就多了 {{文章名称}}.md 文件,单击文件,hexo 默认生成了头部信息。

文件内容结构如下 :

1
2
3
4
5
6
7
8
---
title: {{文章名称}}
date: {{文章时间}}
categories: {{文章分类}}
tags: {{文章标签 [tag1,tag2,tag3]}}
description: {{文章摘要}}
---
{{文章正文}}

文章内容支持 Markdown 语法,直接用编辑器修改即可,参考另外一篇文章进行写作。

写好后,仍然使用Github Desktop推送到云端,按下图所示操作:

image-20210824171333304

过几分钟会收到vercel给你发来的邮件,访问网页,你的博客已经自动更新完成了。

image-20210824171532218

typora自动上传图片

参考史上最强markdown编辑器typora终于支持图床功能了!!! - 知乎 (zhihu.com)

首先确保typora是最新版本:帮助–>检查更新

然后 文件–>偏好设置,按照下图进行选择

img

登录sm.ms(常用图床,大小限制5M,免费,有一点慢)https://sm.ms/home/apitoken

点击Generate Secret Token,获取密钥,保存好

回到你的typora,点击打开配置文件

img

将下面代码复制粘贴到你的配置文件中。

1
2
3
4
5
6
7
8
9
{
"picBed": {
"uploader": "smms",
"smms": {
"token": "这里面的token换成你上个页面的申请的token"
}
},
"picgoPlugins": {}
}

保存即可

点开验证图片上传。测试一下吧。

img

初识Markdown

1.Markdown介绍

一种可以用简单的代码实现排版、插入图片和链接等的纯文本语言

2.Markdown常用语法

参见Markdown 基本语法 | Markdown 指南中文版

  1. 标题:使用#表示一级标题,##表示二级标题,以此类推,输入相应代码,加空格激活即可

  2. 段落:使用空白行进行分隔

  3. 换行:一段文字结束后,输入两个空格再按回车

  4. 强调:粗体:**test** test,斜体:*test* test,又粗又斜体:***test*** test,划掉:~~test~~ test

  5. 引用:在段落前面加>,如

    This is a Blockquotes

    按两个回车退出引用

  6. 有序列表:依次输入1,.,空格即可,后面会按顺序自动添加

  7. 无序列表:输入*/-/+以及空格创建无序列表,缩进以使用不同样式

  8. 分割线:三个***,回车

  9. 代码:使用`包裹你的代码(位于键盘的左上角)

  10. 链接:格式如[这里放文本](这里放指向的URL),typora自动插入。

  11. 图片:格式如![图片失效时的替代文本](图片相对\hexo路径或URL),typora自动插入上传。

  12. 代码块

Markdown常用的编辑平台

  • 利用vscode直接编辑:安装Markdown All in One插件即可
  • 利用typora软件编辑:简洁,直接插入图片和链接

利用VPS实现离线下载至Onedrive

材料:一台VPS,带宽大流量多者优先,一个OneDrive账号
实验环境:centos7

1.安装Aria2

此处安装aria2使用P3TERX的一键安装脚本(自带上传功能)

在SSH运行下面的代码:

wget -N git.io/aria2.sh && chmod +x aria2.sh && ./aria2.sh

即可自动安装aira2
等待安装完成后,记下密钥,配置远程下载要用

此外,可以再次输入

./aria2.sh

打开脚本查看和修改aira2配置

2.利用AriaNG可视化

搭建宝塔面板,官网
在宝塔面板中新建网站,转到网站根目录,删除所有文件
访问AriaNG的发布地址,下载最新版本的AllinOne文件,并上传到网站根目录(或者直接用宝塔的远程下载)
此时访问网站绑定的域名应当能够看到AriaNG的界面,否则,检查服务器提供商处是否开启80端口

在宝塔面板和服务器商两处都开启6800端口(airaNG和aria2之间的通信端口)

ariaNG中按下图配置:

3.安装和配置Rclone

为了完成对rclone的配置,本地需要安装一个rclone,官网

下载对应文件,解压,进入文件夹,在资源管理器地址栏输入cmd,回车就会在当前路径打开命令提示符。输入以下命令:

rclone authorize "onedrive"

接下来会弹出浏览器,要求你登录账号进行授权。授权完后命令提示符窗口会出现以下信息:

If your browser doesn't open automatically go to the following link: http://127.0.0.1:53682/auth
Log in and authorize rclone for access
Waiting for code...
Got code
Paste the following into your remote machine --->
{"access_token":"xxxxxxxx"}  
<---End paste

此时复制{xxxxxxxx}整个内容,并保存好,后面需要用到

服务器端,使用官方的一键安装脚本

curl https://rclone.org/install.sh | sudo bash

安装完成之后,输入

rclone config

开始配置,全程都有引导,选择n新建,名字随便起,例如onedrive,网盘种类选择onedrive,之后一路回车,

Use auto config?
* Say Y if not sure
* Say N if you are working on a remote or headless machine
y) Yes
n) No
y/n> n

的时候选择n

然后会弹出

For this to work, you will need rclone available on a machine that has a web browser available.
Execute the following on your machine:
    rclone authorize "onedrive"
Then paste the result below:
result> {"XXXXXXXX"} 

将之前复制的结果贴到result后面
之后选1,按照实际情况选择编号,确认设置,按q退出

此时OneDrive已经设置好了,接下来是将其挂载到VPS上,安装fuse(依赖软件)

yum install -y fuse

然后新建一个文件夹作为你挂载的目标,例如

mkdir /home/onedrive

那么我的挂载命令就是:

rclone mount onedrive: /home/onedrive --allow-other --allow-non-empty --vfs-cache-mode writes

完成之后可以关闭会话

4.配置aria2下载后自动上传至OneDrive

注意此处是下载完成后自动上传,故一次性不能下大于硬盘容量的文件

输入

nano /root/.aria2c/aria2.conf

打开 Aria2 配置文件进行修改。找到“下载完成后执行的命令”,把clean.sh替换为upload.sh。

# 下载完成后执行的命令
on-download-complete=/root/.aria2c/upload.sh

nano 编辑器的操作方法参见《Linux 下适合新手的文本编辑器 nano 使用教程》

输入

nano /root/.aria2c/script.conf

打开附加功能脚本配置文件进行修改,有中文注释,按照自己的实际情况进行修改,第一次使用只建议修改网盘名称。

# 网盘名称(RCLONE 配置时填写的 name)
drive-name=onedrive

重启 Aria2 。脚本选项重启或者执行以下命令:

service aria2 restart