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 按钮,然后点击 GitHub 在 GIT 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 install 或 cnpm install 或yarn 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