首页 > 其他分享 >从零开始用Hexo+GithubPage搭建个人网站(保姆级)

从零开始用Hexo+GithubPage搭建个人网站(保姆级)

时间:2024-03-09 21:56:20浏览次数:25  
标签:npm Git Hexo hexo 从零开始 GithubPage config 输入

写在前面:猫世界-个人博客-GPT4订阅保姆级教程

1. 准备阶段

1.1 了解系统类型

按WIN+R,输入cmd,回车

输入以下内容并按下回车

systeminfo

我的电脑就是 x64 系统

1.2 Git下载

点此处下载Git

根据系统类型选择,因此我选 64-bit Git for Windows Setup

注:下载后安装,安装过程除了安装路径外全默认,路径不能有中文

1.3 Git检查

在文件管理任意位置右键(win11-显示更多选项),点击Open Git Bash here

输入

git -v

如果出现版本号即配置成功,如果没有,请搜索 Git 环境变量

1.4 NodeJS下载

点此处下载NodeJS

注:下载后安装,安装过程除了安装路径外全默认,路径不能有中文

默认情况下,我们利用 npm 包管理器用来安装依赖包时,包会默认存放在 C:\Users\用户名\AppData\Roaming\npm\node_modules 目录下

这样就存在一个问题,如果我们的依赖包很多的情况下,就会占用我们系统盘大量的空间,这时候我们如果不想让全局包放在这里,那么就可以自定义存放目录。修改的方式也很简单,只需要在控制台中执行如下两条命令即可:

npm config set prefix "D:\node\node_global"
npm config set cache "D:\node\node_cache"

代码内地址可修改

1.5 NodeJS检查

在刚刚打开的Git Bash或者cmd中,输入

node -v
npm -v

如果出现版本号即配置成功,如果没有,请搜索 NodeJS 环境变量

接下来为了加快下载速度,切换镜像,继续输入(淘宝镜像站 2022.06.30 已停用 https://registry.npm.taobao.org )

npm config set registry https://registry.npmmirror.com

1.6 注册Github账号

点此处前往Github

2. 本地Hexo部署

2.1 安装Hexo

在你的电脑任意位置新建一个文件夹”Hexo“,然后右键(win11-显示更多选项),点击Open Git Bash here,依次输入

npm i hexo-cli -g
hexo init
npm install

初始化后,目录结构为

 .
 ├── _config.yml # 网站配置信息
 ├── package.json # 应用程序信息
 ├── scaffolds # 模板文件夹
 ├── source # 存放用户资源
 |   ├── _drafts
 |   └── _posts #你的博客文档
 └── themes # 主题文件夹

2.2 测试页面

输入以下代码,然后打开浏览器输入 http://localhost:4000查看你的博客

hexo g # 生成静态页面
hexo s # 打开本地服务器

查看后,输入CTRL+C 关闭本地服务器,继续命令输入

2.3 设置主题(可跳过)

以我使用的Stellar 主题为例,输入

点此处查看主题说明

npm i hexo-theme-stellar

blog/_config.yml 文件中找到并修改:

theme: stellar

然后输入以下内容查看本地效果

hexo clean # 切换主题后需要清理缓存
hexo g # 生成静态文件
hexo s # 打开本地服务器

查看后,输入CTRL+C 关闭本地服务器,继续命令输入

3.发布到GithubPage

3.1 本地SSH密钥

在刚刚的Git Bash中输入以下命令并回车

 # 配置用户名和邮箱,注意填你自己的 Github用户名和邮箱
 git config --global user.name "你的github 用户名"
 git config --global user.email "你的github 注册邮箱"

然后继续输入以下代码,连续键入三次回车(即不设置密码)

# 生成 ssh 密钥,注意填你自己的 Github邮箱
 ssh-keygen -t rsa -C "github 注册邮箱"

然后在本地C:\Users\用户\ .ssh目录下,找到 id_rsa.pub (公钥)并以记事本打开并复制内容

注意:.xxx目录为隐藏目录,如果查看不到按以下图片步骤操作

3.2 新建GithubPage

点此处登录Github

登录Github后,新建一个仓库,名称必须为以下格式

#注意名称别填错了!!!
#例如abc.github.io
你的Github用户名.http://github.io

3.3 配置远程SSH

打开 GitHub-Settings-SSH Keys页面,创建一个新的 SSH key,填写 Title 和 Key,

Title可以随意,而 Key的内容则是我们刚才复制的 id_rsa.pub 中的内容,最后点击 Add SSH key 即可;

3.4 设置配置文件

在创建的Hexo文件夹下有一个_config.yml文件,用记事本打开,在最后几行有如下内容

注意:在配置所有的_config.yml文件时(包括theme中的),在所有的冒号:后边都要加一个空格,否则执行hexo命令会报错。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: ''

将其更改为

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  #这里填入你之前在GitHub上创建仓库的完整路径
  repo: [email protected]:xxx/xxx.github.io.git
  branch: master

3.5 发布

输入以下代码,安装一个依赖包

npm install hexo-deployer-git --save   

然后输入

hexo d -g #生成静态页面,并发布至远程仓库
#等同于下面这两行代码
#hexo g
#hexo d

然后就可以在浏览器输入你的xxx.github.io 查看你的网页了!

4. 发布文章

输入以下代码

hexo n "文章名,中文也行"

然后在Hexo/source/_post 目录下就有你的文章,采用markdown格式

推荐使用Typora,由于最新版需要付费使用,因此请在搜索引擎搜索 Typora破解

文章内容写好后,输入以下代码发布至你的网页

hexo d -g #生成静态页面,并发布至远程仓库
#等同于下面这两行代码
#hexo g
#hexo d

如果你需要修改文章或删除文章,请在本地完成后发布到远程仓库即可

5. 图片问题

5.1 较少图片

使用相对路径保存到Hexo下即可,请使用主题的懒加载功能加快加载速度,例如,在使用Typora时,点击文件-偏好设置-图像

设置插入图片时复制到指定路径,并勾选下面的所有框

../assets/${filename}

这样你的剪贴板的图片和网络粘贴的图片复制到文章时会自动下载到Hexo/source/assets/文章名目录下,随着你的文章一起发布到网页

5.2 较多图片

图片过多会减慢静态网页速度,因此使用图床功能

例如使用Picgo,可以添加好你的图床token(例如SM.MS图床),然后在typora的偏好设置中设置PicGo.exe路径

验证图片上传通过后,将上面的 插入图片时 改为 上传图片 ,这样你的剪贴板的图片和网络粘贴的图片复制到文章时会自动上传到图床

访问网页时相当于在线访问你的图片,可以加快静态网页的访问速度

标签:npm,Git,Hexo,hexo,从零开始,GithubPage,config,输入
From: https://www.cnblogs.com/surprisedcat/p/18063423

相关文章

  • 从零开始发明 AC 自动机
    AC自动机是一种多模字符串匹配算法。[LuoguP5357]【模板】AC自动机给你一个文本串$S$和$n$个模式串$T_{1\simn}$,请你分别求出每个模式串$T_i$在$S$中出现的次数。$1\len\le2\times{10}^5$,$T_{1\simn}$的长度总和不超过$2\times{10}^5$,$S$的长度不......
  • 从零开始的文化课生活
    「一」2023/11/16写这个的时候突然想起NOIP前有一场模拟赛,题目背景是:你总说退役遥遥无期。转眼就各分东西。前几年联赛后,很多学长或是同年级的同学,突然变得不再常常在机房里出现。然后渐渐地淡出了视线,同年级的到了文化课班里,最后只能在教学楼里上下楼梯的时候遇见了。......
  • Hexo、VitePress、Docusaurus,哪个最适合你的静态网站生成器?
    在选择合适的静态网站生成器时,Hexo、VitePress、Docusaurus是三个备受关注的选项,那么到底哪一个框架更适合你呢?本文将从使用场景、社区生态、功能、性能、扩展性这五个方面,帮你全方位分析各个框架的优缺点,以便为你的技术选型提供参考。1、应用场景Hexo,官方定位自己是"快速......
  • 从零开始搭建Springboot开发环境(Java8+Git+Maven+MySQL+Idea)之一步到位
    说明所谓万事开头难,对于初学Java和Springboot框架的小伙伴往往会花不少时间在开发环境搭建上面。究其原因其实还是不熟悉,作为在IT界摸爬滚打数年的老司机,对于各种开发环境搭建已经了然于胸,自己当年也是这么过来的。今天我就毕其功于一役,解放大家的时间,让凡人的环境配置见鬼去吧......
  • Hexo全记录
    安装HexoClinpmi-ghexo-cli验证安装hexo-v指定目录(空目录)hexoinit得到下面的目录配置主题 gitsubmoduleaddtheme地址themes/地址名称修改_config.yml文件修改theme选项为自己的主题名称hexo指令hexoclhexoghexos启动成功......
  • 小白从零开始学习编程 day1
    1.什么是编程语言编程语言是用于计算机与人沟通的介质2.什么是编程使用编程语言编写出一系列文件3.为什么进行编程通过奴役计算机,解放劳动力4.计算机的五大组成部分1.CPU(1)控制器:用于控制硬件(2)运算器:进行逻辑运算和算数运算2.内存(1)运行速度快(2)断电即......
  • 从零开始写 Docker(四)---使用 pivotRoot 切换 rootfs 实现文件系统隔离
    change-rootfs-by-pivot-root.png本文为从零开始写Docker系列第四篇,在mydockerrun基础上使用pivotRoot系统调用切换rootfs实现容器和宿主机之间的文件系统隔离。完整代码见:https://github.com/lixd/mydocker欢迎Star推荐阅读以下文章对docker基本实现有一个大......
  • 从零开始做一个软渲染器——视锥剔除、齐次裁剪和背面剔除
    从零开始做一个软渲染器——视锥剔除、齐次裁剪和背面剔除项目地址:https://github.com/DogWealth/PIRenderer1.视锥剔除最简单的视锥剔除只需要在齐次空间(也就是透视投影变换之后,透视除法之前)中对三角形的顶点判断是否满足如下条件\[-w\lex\lew\\-w\ley\lew\\-w\le......
  • 服务端工程师进化史-从零开始的APP开发(1)
    引题笔者开发了个漫画小说阅读APP,前前后后花了三个月,从服务端到前端,再到客户端,一路艰辛不言而喻。附上github的提交记录:起因2023年年末,笔者正为“高级系统架构师”的考试准备中,因资料太过于无聊,期间走神无数、三天打鱼两天晒网,到了临考期,已经是预计考不过的;也不知道为啥,在某......
  • 从零开始学Spring Boot系列-集成MySQL
    在SpringBoot中集成MySQL是为了让开发者能够轻松地与MySQL数据库进行交互。本篇文章将指导你如何在SpringBoot3.2.3项目中使用Gradle来集成MySQL。在此之前,我们需要在Ubuntu22.04上安装MySQL8作为我们的数据库服务器。安装MySQL8本文是在wsl2上的Ubuntu22.04上安装MySQL8.......