GitHub搭建免费博客

news/2024/10/6 22:22:50

一、GitHub仓库准备

​ 搭建博客需要准备两个仓库。一个存放博客图床的仓库,另一个存放博客网站的仓库。

1.1、图床创建

  • 新建仓库

    第一步:

sc_20240505154123

​ 第二步:

sc_20240505154819
  • 生成Token令牌

    点击右上角头像->Settings->下拉,直到左侧到底,选择Developer settings(开发人员设置)->Personal Access tokens(个人访问令牌) -> Tkens(classic) -> Generate New Token(classic, 一定要选择 classic 方式)-> 配置相关信息 -> Generate token

    第一步:

sc_20240505155610

​ 第二步:

sc_20240505160325

​ 第三步:

sc_20240505160632
  • 创建图片文件夹

    第一步:

    sc_20240505172745

    第二步:

    sc_20240505173043
  • 设置Typora实现自动上传

    Mac系统:Typora-->设置-->图像

    sc_20240505205640

1.2、博客网站

​ 第一步:新建GitHub仓库

sc_20240505154123

​ 第二步:设置仓库

  • 注意!:仓库名称必须是xxx.github.io,否则不能成功创建网站。
sc_20240505180831

二、图床使用

2.1、下载PicGo软件上传图片

官网下载

2.2、配置PicGo

选择图床设置-->GitHub-->编辑按钮

仓库名:GitHub用户名/GitHub仓库地址
分支名:GitHub的分支名称
Token:GitHub中设定的AccessToken
自定义域名:https://fastly.jsdelivr.net/gh/用户名/仓库名

sc_20240505164122 sc_20240505174853

2.3、使用PicGo

选择上传区-->切换图片上传为GitHub-->拖拽图片上传

sc_20240505165730

三、Hexo安装

3.1、安装Node.js

第一步:下载Node软件安装

​ 前往Node.js下载LTS稳定版,下载完成后双击下载文件,按步骤默认安装即可。

第二步:验证

npm -v

第三步:配置淘宝镜像源

npm config set registry https://registry.npm.taobao.org

验证是否设置成功

npm config get registry

3.2、安装Hexo

npm install hexo-cli -g

3.3、使用Hexo创建个人博客项目

初始化博客项目:hexo init 项目名

hexo init Blog

进入博客项目目录

cd Blog

安装依赖

npm install

新建文章:hexo new 文章名

hexo new first
sc_20240506222851

启动本地服务

hexo s
sc_20240506223521

3.4、自定义Hexo主题

​ 可以在 https://hexo.io/themes/index.html进行主题的挑选。将下好的主题放在themes文件夹内,同时在_config.yml中进行主题修改。一下以Aurora主题的配置为例.

sc_20240506224848

第一步:前往主题的GitHub仓库,选择Release版本下载主题

sc_20240506225223

第二步:将下载下来的主题包放在themes文件夹内

sc_20240506225613

第三步:复制themes-->aurora->_config.yml到Blog目录下,命名为_config.aurora.yml

sc_20240506230323

第四步:修改Blog目录下_confg.yml文件

sc_20240506231904

安装插件

npm install hexo-theme-aurora hexo-plugin-aurora --save

主题包安装依赖

cd themes/aurora
npm install

根据Aurora主题配置文档https://aurora.tridiamond.tech/en/guide/getting-started.html,完成其他配置。

第五步:生成网页

hexo g

第六步:部署

hexo d

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/28397.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

一键关闭 Win11 系统广告「GitHub 热点速览」

不知道读者中有多少人早已对 Windows 11 系统自带的广告感到厌烦,却又不知道如何关闭它们?虽然网上有详细的关闭教程,但是都需要逐一手动操作,不是很方便。所以,今天「GitHub 热点速览」给大家带来了一款能够轻松关闭 Windows 11 系统广告的工具「OFGB」,它开箱即用、界面…

OKR-Periods of Words(洛谷P3435 [POI2006] OKR-Periods of Words)

OKR-Periods of Words 题目描述输入格式输出格式样例 样例输入 8 babababa 样例输出 24 1. 题目到底要让我们求什么:(首先这是一道kmp的题)这是每个位置kmp的数值,代表它的border(真前缀和后缀)这是由题意得出的每个位置的最长周期(还没什么头绪)结合这张图来看:黑色字…

修改PHPExcel兼容php7.4

https://blog.csdn.net/u012931845/article/details/133899174 翻译 搜索 复制

高校运维赛WEB部分-gxngxngxn

高校运维赛WEB部分-gxngxngxn phpsql 利用万能密码登录 admin/""="a=a 登录进后台后得到flagpyssrf 访问/source可以得到源码 from flask import Flask,request from redis import Redis import hashlib import pickle import base64 import urllib app = Flask…

大营销抽奖系统,DDD开发要如何建模?

作者:小傅哥 博客:https://bugstack.cn沉淀、分享、成长,让自己和他人都能有所收获!😄大家好,我是技术UP主小傅哥。 👨🏻‍💻 经过5.1假期的一顿框框输出,终于完成了《大营销项目》第二阶段的开发和上线,体验地址:https://gaga.plus 有了这个项目的落地,也终于…

WPF 从键盘事件 KeyEventArgs 里获取 Scan Code 的方法

本文将告诉大家如何在 WPF 里面,从键盘事件 KeyEventArgs 参数里获取到 Scan Code 键盘按键的设备独立标识符的方法概念: 以下来自 bing 的答案 键盘的 Scan Code 是按键的设备独立标识符,对应于按键在硬件上的实际标识。每个按键都有一个唯一的扫描码,用于表示该按键。当用…

worldclim 当前时期的生物气候变量数据存在的问题

bio2,3,4,6,7,9,12,13,14, 15,16,17,18,19 在格陵兰岛存在显著问题如下: 有明显的分割线。

读天才与算法:人脑与AI的数学思维笔记20_数学图灵测试

读天才与算法:人脑与AI的数学思维笔记20_数学图灵测试1. 数学图灵测试 1.1. 能不能将这种计算机证明语言翻译成易于与人交流的方式呢? 1.1.1. 剑桥大学的两位数学家蒂莫西高尔斯(Timothy Gowers)和莫汉加内萨林加姆(Mohan Ganesalingam)开展了此项研究 1.1.1.1. 他们决定…