金算盘
金算盘
John Doe2024账务梳理
CMLiussss Blog
【Hexo博客系列】No.1 搭建Hexo博客,快速简洁高效,零成本搭建个人博客:Hexo + GitHub Pages + Cloudflare Pages 完整指南
教程TUTORIAL
全部文章 文章分类 标签 脚本汇总
推荐REC
机场测评 VPS测评
公益服务CSR
CloudFlare优选 DockerHub镜像 订阅转换 WebSSH.IPv6 WebSSH.Serv00 DNS over HTTPS Nezha面板 Uptime监控 MASQUE配置文件
问题汇总FAQ
关于CM
About Telegram交流群 Youtube频道 Github仓库
79
【Hexo博客系列】No.1 搭建Hexo博客,快速简洁高效,零成本搭建个人博客:Hexo + GitHub Pages + Cloudflare Pages 完整指南
数据线
发表于2024-06-29更新于2024-07-02
字数总计:2k阅读时长:7分钟阅读量:320 新加坡
Hexo博客PagesGitHubHexo博客博客搭建GitHub PagesCloudflare Pages静态网站个人网站免费托管Node.jsGitMarkdown
【Hexo博客系列】No.1 搭建Hexo博客,快速简洁高效,零成本搭建个人博客:Hexo + GitHub Pages + Cloudflare Pages 完整指南
杨幂的脚
2024-06-29
2024-07-02
数据线
搭建Hexo博客,快速简洁高效,零成本搭建个人博客:Hexo + GitHub Pages + Cloudflare Pages 完整指南
本文详细介绍了如何使用Hexo框架搭建一个个人博客,并将其部署到GitHub Pages和Cloudflare Pages上。主要内容包括:
环境准备:安装Node.js和Git
配置Git和GitHub:设置SSH密钥,创建GitHub仓库
初始化Hexo项目:安装Hexo,创建新博客
部署到GitHub Pages:配置部署设置,推送静态文件
部署到Cloudflare Pages:连接GitHub仓库,自动部署
基本使用方法:创建新文章,本地预览,发布更新
这个教程适合那些想要快速搭建个人博客,但又不想花费太多成本的人。通过使用Hexo、GitHub和Cloudflare的免费服务,您可以轻松创建一个高效、简洁的博客网站。
数据线
1.事前准备
域名(非必须,你也可以使用免费域名,或者GitHub.io或Pages.dev分配的域名也可以)
GitHub(必须,你需要注册一个GitHub帐号)
Cloudflare(非必须,你需要注册一个Cloudflare帐号,这样你就可以将博客部署在CF的CDN里加速,但是你也可以直接使用GitHub.io分配的域名)
2.软件支持
Node(必须)
Git(必须)
VSCode(非必须,这是一款轻量型的代码编辑器,可以帮助你养成一个很好的编程习惯)
2.1.安装 Node
打开Node官网,下载和自己系统相配的Node的安装程序,否则会出现安装问题。下载地址:https://nodejs.org/en
下载后安装,安装的目录可以使用默认目录C:/Program Files/nodejs/
安装完成后,检查是否安装成功。在键盘按下win + R键,输入CMD,然后回车,打开CMD窗口,执行node -v命令,看到版本信息,则说明安装成功。
2.1.3.安装 Node
修改npm源。npm下载各种模块,默认是从国处服务器下载,速度较慢,建议配置成华为云镜像源。打开CMD窗口,运行如下命令:
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
2.2.安装 Git
进入官网下载适合你当前系统的 Git:https://git-scm.com/downloads
2.2.1.安装 Git
下载后傻瓜式安装Git即可,安装的目录最好使用默认目录C:/Program Files/Git
点击电脑左下角开始即可看见Git CMD、Git Bash、Git GUI。
Git CMD 是windows 命令行的指令风格
Git Bash 是linux系统的指令风格(建议使用)
Git GUI是图形化界面(新手学习不建议使用)
3.配置 Git 密钥并连接至 Github
常用 Git 命令
git config -l //查看所有配置
git config –system –list //查看系统配置
git config –global –list //查看用户(全局)配置
启动Git
3.1. 配置用户名和邮箱
git config –global user.name “你的用户名”
git config –global user.email “你的邮箱”
通过git config -l 检查是否配置成功。
3.1. 配置用户名和邮箱
3.2. 配置公钥连接Github
执行以下命令生成ssh公钥,此公钥用于你的计算机连接Github
ssh-keygen -t rsa -C “你的邮箱”
提示Enter file in which to save the key直接一路回车即可,新手小白不推荐设置密钥
3.2.1.1
之后打开C盘下用户文件夹下的.ssh的文件夹,会看到以下文件
id_rsa私钥
id_rsa.pub公钥
3.2.1.2
用记事本打开上述图片中的公钥id_rsa.pub,复制里面的内容,然后开始在github中配置ssh密钥。
3.2.1.3
将 SSH KEY 配置到 GitHub
进入github,点击右上角头像 选择settings,进入设置页后选择 SSH and GPG keys,名字随便起,公钥填到Key那一栏。
3.2.2.1
3.2.2.2
3.2.2.3
3.2.2.4
测试连接,输入以下命令
ssh -T git@github.com
第一次连接会提示Are you sure you want to continue connecting (yes/no/[fingerprint])?,输入yes即可
3.2.3.1
出现连接到账户的信息,说明已经大功告成,至此完成了环境准备工作。
3.2.3.2
3.3. 创建GitHub.io仓库
点击右上角的+按钮,选择New repository,创建一个<用户名>.github.io的仓库。
仓库名字的格式必须为:<用户名>.github.io (注意:前缀必须为用户名,此为预览博客需要,后期可修改仓库名)
可见性必须选择 Public 方便第一次部署检查问题,点击 Creat repository 进行创建即可
3.3. 创建GitHub.io仓库
4.初始化 Hexo 博客
创建一个文件夹来保存博客源码(我这里选的路径为D:/Hexo-Blog),在文件夹内右键鼠标,选择Open Git Bash here
4.1
在Git BASH输入如下命令安装 Hexo
npm install -g hexo-cli && hexo -v
4.2
安装完后输入hexo -v验证是否安装成功。
4.3
初始化 Hexo 项目安装相关依赖。
hexo init blog-demo
cd blog-demo
npm i
4.4
初始化项目后,blog-demo有如下结构:
4.5
node_modules:依赖包
scaffolds:生成文章的一些模板
source:用来存放你的文章
themes:主题
.npmignore:发布时忽略的文件(可忽略)
_config.landscape.yml:主题的配置文件
config.yml:博客的配置文件
package.json:项目名称、描述、版本、运行和开发等信
输入hexo cl && hexo s启动项目
4.6
打开浏览器,输入地址:http://localhost:4000/ ,看到下面的效果,说明你的博客已经构建成功了。
4.7
5.将静态博客挂载到 GitHub Pages
安装 hexo-deployer-git
npm install hexo-deployer-git –save
修改 _config.yml 文件
在blog-demo目录下的_config.yml,就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
修改最后一行的配置,将repository修改为你自己的github项目地址即可,还有分支要改为main代表主分支(注意缩进)。
deploy:
type: git
repository: git@github.com:cmliussss2024/cmliussss2024.github.io.git
branch: main
修改好配置后,运行如下命令,将代码部署到 GitHub(Hexo三连)。
// Git BASH终端
hexo clean && hexo generate && hexo deploy
// 或者
// VSCODE终端
hexo cl; hexo g; hexo d
hexo clean:删除之前生成的文件,可以用hexo cl缩写。
hexo generate:生成静态文章,可以用hexo g缩写
hexo deploy:部署文章,可以用hexo d缩写
5.3.1
注意:deploy时可能要你输入 username 和 password。
如果出现Deploy done,则说明部署成功了。
5.3.2
稍等两分钟,打开浏览器访问:https://cmliussss2024.github.io ,这时候我们就可以看到博客内容了。
5.3.3
6.将静态博客挂载到 Cloudflare Pages
在 Workers 和 Pages 中选择 Pages 的 连接到 Git
6.1.1
6.1.2
然后登录你Blog仓库对应的GitHub帐号
6.2.1
6.2.2
点击保存并部署后等待部署完成即可。
6.3
提示成功!您的项目已部署到以下区域:全球后,浏览器访问:https://cmliussss2024-github-io.pages.dev ,这时候我们就可以看到博客内容了。
6.4
这时你也就可以将你的<用户名>.github.io的仓库设置为Private私库了
如果你有自己的域名,你可以在这里绑定你自己的自定义域,即可
6.5
如何使用
新建一篇博文
hexo new 这是一篇新的博文
然后用文本编辑器去编辑_posts/这是一篇新的博文.md里的内容即可,注意要使用Markdown格式书写。
详细使用方法可以查阅 https://hexo.io/zh-cn/docs/writing
编辑完文章保存后可以使用如下命令,生成本地页面 http://localhost:4000/ ,进行预览
// Git BASH终端
hexo cl && hexo s
// 或者
// VSCODE终端
hexo cl; hexo s
确认无误后使用以下命令,将本地文章推送至GitHub仓库即可
// Git BASH终端
hexo cl && hexo g && hexo d
// 或者
// VSCODE终端
hexo cl; hexo g; hexo d
下一期会讲讲进阶的使用方法,主题美化
VSCODE 终端首次执行报错
使用管理员身份打开 powershell ,输入以下命令
Set-ExecutionPolicy RemoteSigned
参考资料
https://hexo.io/zh-cn/
https://www.fomal.cc/posts/e593433d.html
https://docs.anheyu.com/
致谢项目
https://github.com/hexojs/hexo
头像头像
杨幂的脚
CM喂饭干货满满
【Hexo博客系列】No.1 搭建Hexo博客,快速简洁高效,零成本搭建个人博客:Hexo + GitHub Pages + Cloudflare Pages 完整指南
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 CMLiussss Blog!
Pages
6
GitHub
3
Hexo
2
博客
3
博客搭建
2
GitHub Pages
1
Cloudflare Pages
1
静态网站
2
个人网站
2
免费托管
1
Node.js
1
Git
1
Markdown
2
cover of previous post
上一篇
通过 iptable 转发 443 端口流量至 Cloudflare CDN,自建 ProxyIP
cover of next post
下一篇
【转载】Cloudflare更换边缘证书颁发机构
喜欢这篇文章的人也看了
cover
2024-07-03
【Hexo博客系列】No.2 美化Hexo博客,教你如何安装和美化Hexo博客 - 使用安知鱼主题进行个性化配置,涵盖安装、设置、标签页生成及本地搜索
cover
2024-09-13
CF VLESS 从入门到精通 cmliu/edgetunnel 必看内容 免费节点 优选订阅 Workers & Pages CM喂饭干货满满24
cover
2024-06-18
telegraph-Image:搭建你的专属开源图床
cover
2024-06-07
CF-Workers-Raw:轻松访问GitHub私有仓库中的原始文件。
cover
2024-08-08
加速你的项目!详解 Cloudflare Workers & Pages 优选域名设置
cover
2024-06-11
CF-Workers-docker.io:Docker仓库镜像代理工具。
评论
匿名评论隐私政策
必填
必填
选填
0/500
没有评论
查看更多
Powered by Twikoo v1.6.25
我是一位闲得蛋疼的正红旗少先队大队长。我的开源项目诞生于日常生活中遇到的各种小难题和需求。
感谢你的到访,希望你在这里能找到你需要的知识和教程。
杨幂的脚
CM喂饭干货满满
文章目录
搭建Hexo博客,快速简洁高效,零成本搭建个人博客:Hexo + GitHub Pages + Cloudflare Pages 完整指南
1.事前准备
2.软件支持
2.1.安装 Node
2.2.安装 Git
3.配置 Git 密钥并连接至 Github
3.1. 配置用户名和邮箱
3.2. 配置公钥连接Github
3.3. 创建GitHub.io仓库
4.初始化 Hexo 博客
5.将静态博客挂载到 GitHub Pages
6.将静态博客挂载到 Cloudflare Pages
如何使用
VSCODE 终端首次执行报错
参考资料
致谢项目
最近发布
红杏云:高速中转,支持全球28+国家,4K流媒体秒播,解锁奈飞GPT等流媒体。
红杏云:高速中转,支持全球28+国家,4K流媒体秒播,解锁奈飞GPT等流媒体。
CFNAT:Cloudflare优选新思路,专治泛播IP动态路由,提升网络体验!
CFNAT:Cloudflare优选新思路,专治泛播IP动态路由,提升网络体验!
Cloudflare WARP+:我又回来啦!新MASQUE协议,新体验!最强永久免费VPN,不限流量!防失联必备!
Cloudflare WARP+:我又回来啦!新MASQUE协议,新体验!最强永久免费VPN,不限流量!防失联必备!
Gcore Wrokers:提升速度与稳定的全新解决方案 Cloudflare Workers + Gcore CDN
Gcore Wrokers:提升速度与稳定的全新解决方案 Cloudflare Workers + Gcore CDN
CF VLESS 从入门到精通 cmliu/edgetunnel 必看内容 免费节点 优选订阅 Workers & Pages CM喂饭干货满满24
CF VLESS 从入门到精通 cmliu/edgetunnel 必看内容 免费节点 优选订阅 Workers & Pages CM喂饭干货满满24
📢杨幂只是xp~ 🤣CM才是id!!! 📈今日访问人数:1004 📊当前在线人数:0
资讯
小鸡监控平台
CPU性能天梯表
工具
常用脚本汇总
IPCheck
Dig
编码/解码
CDN
Cloudflare
Fastly
Gcore
VPS
AC
ColoCrossing
Wawo
VMShell
容器
Koyeb
Vercel
HuggingFace
机场
69云 中转
银河云 专线
YkkCloud 中转&白嫖奈飞
一分机场 直连
友链
更多
博客框架为Hexo_v5.4.0本站使用AnZhiYu主题本站使用Cloudflare为静态资源提供CDN加速本站使用Fastly为静态资源提供CDN加速本站使用Gcore为静态资源提供CDN加速本站使用Vercel为静态资源提供CDN加速本站项目由Cloudflare Pages托管本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
©2020 - 2024 By 杨幂的脚
主题
萌ICP备-19842015号
文章
35
标签
133
分类
5
功能
显示模式
网页
博客
博客
项目
图床
图床
教程TUTORIAL
全部文章
文章分类
标签
脚本汇总
推荐REC
机场测评
VPS测评
公益服务CSR
CloudFlare优选
DockerHub镜像
订阅转换
WebSSH.IPv6
WebSSH.Serv00
DNS over HTTPS
Nezha面板
Uptime监控
MASQUE配置文件
问题汇总FAQ
关于CM
About
Telegram交流群
Youtube频道
Github仓库
标签
BPB-Worker-Panel1
CDN5
CF反代7
CM喂饭 干货满满4
ChatGPT8
Cloudflare16
Docker1
Docker Hub1
GitHub3
IPv61
Pages6
Raw1
VMess1
Workers5
edgetunnel2
中转机场5
优选IP7
优选域名5
优选订阅1
信息泄露1
免费流量2
国内访问Docker1
安全研究1
弱口令1
性价比4
机场6
流媒体7
漏洞利用1
私库访问1
私有仓库1
端口回源1
签到白嫖1
网站加速4
网络优化8
网络安全1
视频教程2
解锁8
镜像代理1
镜像加速1
防火墙1
繁
播放音乐


