首页 > 其他分享 >hexo + vercel 构建你的静态页面博客系统(免费)

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

时间:2024-05-28 22:55:22浏览次数:28  
标签:git hexo bravo https vercel true 页面

参考资料
注册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
  1. Deployment
    这个确定了 hexo deploy 上传部署的远端地址
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: "git"
  repo: "https://github.com/wangqqiyue/computerhistory.git"

  1. 其他
    网站地址和子链接配置(不重要,自己随喜安排)
# 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收费了

标签:git,hexo,bravo,https,vercel,true,页面
From: https://www.cnblogs.com/luckydoog/p/18219143

相关文章

  • Vue3 实现登录跳转页面
    点击登录按钮即跳转到新页面,而不是在当前页面加载组件App.Vue:<script>exportdefault{data(){return{}}}</script><template>//必须加上router-view,否则会显示空白页面<router-view></router-view></template><style></style>main......
  • electron27版本,使用loadURL页面,出现CORS policy错误解决方案。
    AccesstoXMLHttpRequestat'http://localhost:8008/paths...'fromorigin'http://www.exmaple.com'hasbeenblockedbyCORSpolicy:Therequestclientisnotasecurecontextandtheresourceisinmore-privateaddressspace`local`.g......
  • 在自己页面中嵌入Grafana
    在自己页面中嵌入grafana:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>EmbedGrafana</title></head><body><iframesrc="http://192.168.30.242:3000/d/......
  • Hexo最新实战:(一)Hexo7.0+GitHub Pages博客搭建
    前言很多平台都能写博客还有创作激励,为什么我又要搭一个?为什么这次要选择用Hexo框架?对应的原因是流量自由和省钱,第一个,很多平台能写但不是都有收益,而且平台有自身的规则,比如会屏蔽一些推广类信息。如果我哪天做了一产品,是没办法直接用平台博客的方式硬推的,至少放码和链接不行。......
  • 【SCAU操作系统】实验二页面置换算法的模拟实现及命中率对比python源代码及实验报告参
    一、课程设计目的通过请求页式管理方式中页面置换算法的模拟设计,了解虚拟存储技术的特点,掌握请求页式存储管理中的页面置换算法。二、课程设计内容模拟实现OPT(最佳置换)、FIFO和LRU算法,并计算缺页率。三、要求及提示1、首先用随机数生成函数......
  • HTTP的系统登录页面,如何避免明文传输用户密码?
    系统登录页面,作为开发人员,应该没有陌生的吧。就像下面这样子。 点击登录,调用/login接口。来看下面截图中的载荷(payload)数据,其中,密码password的值是明文。 如果你的站点使用的是HTTPS协议,配置了有效的SSL证书,那将很好。HTTPS通过SSL/TLS协议建立安全的加密通信通道,确保......
  • 仿猫眼电影购票页面
    实现效果首先是最上面流程线的布局,用到了bootstrap,使用前先引入bootstrap<!--流程线--><divclass="container"id="app"> <divclass="order-progress-bar"> <divclass="stepfirstdone"> <spanclass="step-n......
  • 动态渲染之vue页面向组件间传值
    ==Vue页面文件==//vue文件引入组件importceliangjulifrom"@/components/Map/celiangjuli.vue";//使用组件key:celiangMethod(任意名)<celiangjuli:celiangMethod="celiangMethod"></celiangjuli>////定义初始化valueletceliangMethod=ref();//......
  • React后台管理(十二)-- 页面常用hook封装 --- useSearch搜索封装
    文章目录前言一、useSearch自定义hook封装1.核心代码(1)hook文件代码+详细注释(2)使用到的store说明(3)使用到的config文件代码(4)使用到的白名单pageWhite文件代码2.使用方式(1)layout布局组件->监听并记录路由(2)搜索按钮组件->记录列表搜索的动作类型:搜索|重置(3)分页组件->记......
  • ios系统上h5页面播放audio标签声音有延迟问题处理
    原文链接https://www.cnblogs.com/yalong/p/18214816背景app内嵌了一个H5页面,页面有个需求是点击某些按钮就触发声音,于是就使用了audio标签,但是有个问题就是在ios上,点击声音会有短时间的延迟,然后才播放声音找了好几种方案总算解决了方案一click事件改为mouseup事件因为移动......