hexo + vercel 构建你的静态页面博客系统（免费）

参考资料
注册vercel、安装hexo: https://blog.chitang.dev/posts/hexo-vercel-blog/
插入图片: https://blog.csdn.net/m0_43401436/article/details/107191688

Quick Start

如果一切都安装完毕了,命令行下进入 hexo 工作目录
新建博文的命令
hexo new bravo

你会在 source/_posts 下看到一个叫 bravo.md 的markdown 文件和一个叫 bravo 的文件夹
你在 bravo.md 里写自己想要的内容，并且把插图放在 bravo 文件夹里
在本地写完以后

清理 hexo 缓存
hexo clean

生成 hexo 静态页面
hexo generate

运行本地服务器
hexo server

你可以去 localhost:4000 查看，此时应该新出现了一个标题为 bravo 的文章

部署到远端
hexo deploy

提交修改到github

git add .
git commit
git push

此时去vercel对应的网页，就可以看到修改已经自动同步到网页上了。

hexo 的安装和使用

安装nodejs

对于 Windows，前往 https://nodejs.org/zh-cn/download/ 下载 64-bit 的 msi 安装包

安装hexo

先创建一个目录，叫 hexo_workspace
在该目录下
npm install hexo-cli -g

hexo init

下载很慢，这里要等大概20分钟
安装完成后，可以输入下面的命令

hexo clean
hexo server
hexo generate

然后访问 localhost:4000, 可以看到 hexo 默认生成的 hello world 页面

hexo 的文件结构

node_modules: 通过npm install 下载的插件
public: hexo generate 生成的html文件等
source: markdown 文件和图片
_config.yaml: 配置文件

注册 vercel

安装 GitHub CLI 和 Git

GitHub CLI: https://github.com/cli/cli#installation

在终端中执行
gh auth login

登录到自己的 GitHub 账号

然后，在当前工作目录hexo_workspace下执行

git init
git add .
git commit -m "Initial commit"
gh repo create

根据提示，创建一个新的 GitHub 仓库并将你的 Hexo 源文件上传到该仓库(可以选择 Private)

https://vercel.com/account/login-connections 连接你的 GitHub 账户

前往 https://vercel.com/new 导入你的 Hexo 仓库

问题

如何配置hexo?

这里只说几个重要的点

1. post_asset_folder: true
   这个是用来配置媒体资源目录的,true代表允许创建博客的同时创建同名的媒体资源文件夹

# 修改asset属性,支持图片文件夹
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

2. Deployment
   这个确定了 hexo deploy 上传部署的远端地址

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: "git"
  repo: "https://github.com/wangqqiyue/computerhistory.git"

3. 其他
   网站地址和子链接配置(不重要，自己随喜安排)

# Site
title: Computer History Chinese
subtitle: ""
description: "计算机历史（汉化版）"
keywords:
author: Computer History Team
language: zh-CN
timezone: "Asia/Shanghai"

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://computerhistory.vercel.app/
permalink: posts/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

如何插入图片？

参考：https://blog.csdn.net/m0_43401436/article/details/107191688
typora 首选项设置>插入图片时把图片复制到指定路径=> ./${filename} 且优先使用相对路径
主要需要安装一个插件：npm install https://github.com/CodeFalling/hexo-asset-image --save
该插件的作用就是把markdown里面的路径，转换到最后发布时的html路径

typora 破解版

下载地址 https://github.com/markyin0707/typora-activation
跟着上面网站的教程安装和激活，安装后选择不要更新，最新版的typora收费了