【2023最新版】Hexo+github搭建个人博客并绑定个人域名

这篇具有很好参考价值的文章主要介绍了【2023最新版】Hexo+github搭建个人博客并绑定个人域名。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Hexo+github搭建个人博客并绑定个人域名

本篇教程完整讲述了如何利用Hexo+github搭建个人博客并且绑定自己的域名,成为自己的网站!

我的博客网站:武师叔 - 做一个有趣而不甘平庸的人!---------------------------------(备用wushishu.github.io)

教程参考了很多互联上的内容,在美化教程上面可以根据自己的审美,不必全部照搬~

在搭建博客的路上有很多bug出现,一定请大家耐心的调试,最终胜利是属于我们的

本文作者:武师叔--------------------------------------------------------------最近更新时间2023/1/05

关注公众号武师叔--------------------------回复博客-------------------------即可获得博客PDF文件

第一部分视频学习

链接:https://www.bilibili.com/video/BV1mU4y1j72n?spm_id_from=333.337.search-card.all.click

视频中的网址失效了,在本文下面给你最新的博客教程

安装并配置Node.js

Node.js下载:【它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。】

教程:https://blog.csdn.net/weixin_52799373/article/details/123840137(过程详细,还覆盖win11,评论下面还有师叔的足迹)

注意一

全局安装最常用的 express 模块 进行测试命令如下:

npm install express -g

报错图片:

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

解决方法:

  • 【亲测有效】

  • 需要删除 npmrc 文件。

  • **强调:**不是nodejs安装目录npm模块下的那个npmrc文件

  • 而是在 C:\Users\(你的用户名)\下的.npmrc文件

  • 聪明的你,一定想到了直接用evering搜索,省的还要调用文件管理器在一点一点的找

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

注意二

在文章第四歩测试上查看安装结果

可能会出现下面照片结果,更改了目录为什么还是C盘目录下,这时候只需要以管理员身份运行命令即可。

在下面路径下找到cmd.exe并且管理员身份运行即可。

推测:出像这种现象的原因就是执行权限不够,推荐大家在桌面建立一个快捷方式(管理员命令的)cmd

C:\Windows\System32\cmd.exe

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

创建管理员权限的cmd桌面快捷方式

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

安装并配置Git

git是一个并源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理

Windows系统Git安装教程:https://www.cnblogs.com/xueweisuoyong/p/11914045.html

生成SSH Keys

生成ssh

 ssh-keygen -t rsa -C "你的邮箱地址"

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

找到秘钥位置并复制

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

测试ssh是否绑定成功

ssh -T git@github.com

如果问你(yes or no),直接 yes 就可以得到下面这段话

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

本地访问博客

1、创建一个名为 Blog 的文件,在里面启用 Git Bash Here

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

2、初始化hexo

hexo init

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

3、生成本地的hexo页面

hexo s

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

4、访问

打开本地服务区

http://localhost:4000/

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

长按 Ctrl + c 关闭服务器

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

上传到Github

修改-config.yml文件

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

把图片上位置更换成

deploy:
  type: git
  repository: 你的github地址
  branch: main

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

安装hexo-deployer-git 自动部署发布工具

npm install hexo-deployer-git --save

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

生成页面

hexo g

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

注意一

如果报错如下:(无报错,请忽略此条)

报错信息是提示hexo的yml配置文件 冒号后面少了空格解决方案:到提示行将对应的空格补上即可

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

本地文件上传到Github上面

hexo d

中间会出现一个登录界面,可以用令牌登录。(令牌及时保存,就看不到了)

结束以后就上传 Github 就成功了!!!

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

注意二

如果出现如图错误网络报错,再次尝试,多次尝试,直到更换WiFi~~~~

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

访问GitHub博客

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

访问博客,开始的页面是初始化页面,没有做美化和增加内容。

https://wushishu.github.io/

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

第二部分 文档学习

撰写博客

电脑要必须有Typora!电脑要必须有Typora!电脑要必须有Typora!(重要的事情说三遍)

文本教程:https://dhndzwxj.vercel.app/3276806131.html

hexo标签教程:http://haiyong.site/post/cda958f2.html(参考文档看需求加不加)

我们打开自己的博客根目录,跟着我一个个了解里面的这些文件(夹)都是干什么的:

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

  • _config.yml:俗称站点配置文件,很多与博客网站的格式、内容相关的设置都需要在里面改。

  • node_modules:存储Hexo插件的文件,可以实现各种扩展功能。一般不需要管。

  • package.json:别问我,我也不知道干嘛的。

  • scaffolds:模板文件夹,里面的post.md文件可以设置每一篇博客的模板。具体用起来就知道能干嘛了。

  • source:非常重要。所有的个人文件都在里面!

  • themes:主题文件夹,可以从Hexo主题官网或者网上大神的Github主页下载各种各样美观的主题,让自己的网站变得逼格高端的关键!

接下来重点介绍source文件夹。新建的博客中,source文件夹下默认只有一个子文件夹——_posts。我们写的博客都放在这个子文件夹里面。我们还可以在source里面新建各种子文件夹满足自己的个性化需求,对初学者而言,我们先把精力放在主线任务上,然后再来搞这些细节。

hexo官方文档:https://hexo.io/zh-cn/docs/commands.html

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

写好内容后,在命令行一键三连:

'hexo cl'命令用于清除缓存文件(db.json)和已生成的静态文件(public)。

例如:在更换主题后,如果发现站点更改不生效,可以运行该命令。

hexo cl
hexo g
hexo s

然后随便打开一个浏览器,在网址栏输入localhost:4000/,就能发现自己的网站更新了!不过这只是在本地进行了更新,要想部署到网上(Github上),输入如下代码:

hexo d

然后在浏览器地址栏输入https://yourname.github.io,或者yourname.github.io就能在网上浏览自己的博客了!

以上,我们的博客网站1.0版本就搭建完成了,如果没有更多的需求,做到这里基本上就可以了。如果有更多的要求,还需要进一步的精耕细作!

精耕细作

**海拥\Butterfly 主题美化:**http://haiyong.site/post/22e1d5da.html

Butterfly参考文档(小白慎入,但是他也是你走向DIY必须迈出的一歩):https://butterfly.js.org/posts/dc584b87/#Post-Front-matter

文章中要更改的文件(.yml .bug 等)可以要用viscode打开!!!

Butterfly 主题安装

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

这里面如果报错,如下图所示(长路漫漫,bug满满)

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

只需要在命令行中执行

git config --global --unset http.proxy 
git config --global --unset https.proxy

再次安装主题即可成功

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

应用主题

theme: butterfly

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

安装插件

如果你没有 pug 以及 stylus 的渲染器,请下载安装:

npm install hexo-renderer-pug hexo-renderer-stylus --save

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

Butterfly 主题美化

生成文章唯一链接

Hexo的默认文章链接格式是年,月,日,标题这种格式来生成的。如果你的标题是中文的话,那你的URL链接就会包含中文,

复制后的URL路径就是把中文变成了一大堆字符串编码,如果你在其他地方用这边文章的url链接,偶然你又修改了改文章的标题,那这个URL链接就会失效。为了给每一篇文章来上一个属于自己的链接,写下此教程,利用 hexo-abbrlink 插件,A Hexo plugin to generate static post link based on post titles ,来解决这个问题。 参考github官方: hexo-abbrlink 按照此教程配置完之后如下:

1、安装插件,在博客根目录 [Blogroot] 下打开终端,运行以下指令:

npm install hexo-abbrlink --save

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

2、插件安装成功后,在根目录 [Blogroot] 的配置文件 _config.yml 找到 permalink:

【2023最新版】Hexo+github搭建个人博客并绑定个人域名

发布博客

这次了解我上面只有一个HelloWord的时候,为什么不让右键新建,因为需要命令生成啊,铁汁!

npm i hexo-deployer-git
hexo new post "新建博客文章名"
hexo cl && hexo g  && hexo s

hexo更换背景图片

背景图片参考网址:

  • https://wallhaven.cc/

  • https://wall.alphacoders.com/

  • https://bz.zzzmh.cn/index

本方法解决的是多次同步到GitHub上背景图片未成功的情况

直接更改原文件

图片所在目录:hexo/themes/landscape/source/css/images/

图片名称:banner.jpg

第三部分 绑定自己的域名

博客地址:https://www.likecs.com/show-30474.html

绑定之后你就有有一个自己专属的博客了。

买一个域名,可以一块钱白嫖,但是续费贵的飞天!!!

注意请谨慎绑定,想我就会出现提交一次 (hexo d) ,需要重新绑定域名

声明:如果遇到什么不懂的可以先百度,在不懂可以微信我wushibo0820

更新目录

2023/1/05更新解决方案:

关于每次d都要重新绑定,只要在本地Blogroot/source/文件下创建一个CNAME文件就可以了,注意是根目录,不是主题目录!

 文章来源地址https://www.toymoban.com/news/detail-400301.html

到了这里,关于【2023最新版】Hexo+github搭建个人博客并绑定个人域名的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何在本地(个人电脑上)安装Tomcat服务器并部署web项目?【2023最新版】

    服务器软件:apache-tomcat-8.5.27 操作系统:Windows 10 64位 家庭版 构成: 硬件 : 电脑 ,提供服务供其它客户电脑访问 软件 : 电脑上安装的服务器软件 ,安装后能提供服务给网络中的其他计算机, 将本地文件映射成一个虚拟的url地址供网络中的其他人访问。 作用: Web服务器

    2024年02月10日
    浏览(99)
  • 手把手教你使用Hexo+GitHub搭建个人博客并发布文章(附常见问题解决方法)

    本教程使用GitHub自带的GitHub pages来生成静态个人博客,而Hexo可以更换各种好看的主题,而且都是免费的,花一点时间就可以打造出自己独有的个人博客。 Hexo这个有力的工具可以让我们专注于写出一篇博客而不需要关心如何编写html和CSS,再如何形成一个网站,它可以根据ma

    2024年02月04日
    浏览(62)
  • 2023年最新版潮乎盲盒源码含搭建教程

    后台开发语言:后端 Laravel 框架开发 前端开发框架:uniapp+vue 环境配置: php7.4 + mysql5.6+ + nginx1.22+  + redis(建议宝塔面板或 lnmp) 源码获取请自行百度:一生相随博客 一生相随博客致力于分享全网优质资源,包括网站源码、游戏源码、主题模板、插件、电脑软件、手机软件、

    2024年02月06日
    浏览(50)
  • hexo + github 创建个人博客网站

    nodejs 和 npm git hexo 是一个静态博客生成网站,可以快速制作自己的博客网站并部署 安装hexo npm install hexo-cli -g 创建项目 hexo init 本地预览 hexo s 新建仓库 创建一个名为[用户名].github.io的仓库 下载自动部署插件 npm install hexo-deployer-git --save 修改hexo的配置文件 _config.yml 在deplay中添

    2024年02月05日
    浏览(72)
  • 如何在本地搭建Maven环境并整合进IDEA中以及创建web工程?【2023最新版】

    编译软件:IntelliJ IDEA 2019.2.4 x64 操作系统:win10 x64 位 家庭版 Maven版本:apache-maven-3.6.3 使用Maven之前 : 自行在网络中下载iar包,效率较低 。如在谷歌、百度中搜素相关 jar包资源 使用Maven之后 : 统一在一个地址下载jar包等资源 。如使用阿里云镜像服务器下载等.… 使用Mave

    2024年02月02日
    浏览(68)
  • IDEA搭建Java Web项目及添加Web框架支持和配置Tomcat服务器(2023最新版)

     File — New — Project Java — Project SDK中选择自己的版本(这里采用1.8) —点击Next 此项不选 直接点击Next 设置项目名称之后 点击 Finish 鼠标右键项目名 — Add Frameworks Support   勾选第一项 Web Application — 点击 OK 出现web目录后即为Web框架支持添加成功   点击Add Configruation 点击添加

    2024年02月13日
    浏览(81)
  • 使用腾讯云服务器+Nonebot2+go-cqhttp搭建QQ聊天机器人【保姆级教程 2023最新版】

    下载go-cqhttp 这里有不同版本的cqhttp,并且对每个版本都有介绍。但是大家可以看到有 arm与adm 不同的版本,这两个啥关系呢? 严格来说, AMD和ARM没有任何关系 。AMD是桌面级处理器和桌面级GPU的生产厂商,而ARM是移动级处理器的生产厂商。AMD是目前业内唯一一个可以提供高性能

    2023年04月18日
    浏览(49)
  • 构建个人博客_Obsidian_github.io_hexo

    很早就开始分享文档,以技术类的为主,一开始是 MSN,博客,随着平台的更替,后来又用了 CSDN,知乎,简书…… 再后来是 Obsidian,飞书,Notion,常常有以下困扰: 1.1 问题 各平台格式不同,审核规则不同,需要花很多时间上传多个平台,文档更新成本也高。 分类太简单,

    2024年02月11日
    浏览(41)
  • Hexo+GithubPages免费搭建个人博客网站

    一、前言 二、Github配置 新建同名仓库 配置Pages 三、安装Hexo 四、配置hexo-deployer-git 五、访问 六、发布文章 七、安装主题 我之前开了好几年的云服务器了,实际上使用场景并不是很多,感觉有点浪费。前两个月都给关掉了,现在呢琢磨着弄一个免费的云服务搭建个人博客。

    2024年02月13日
    浏览(55)
  • Hexo+Github搭建博客

    今天教大家搭建免费的个人博客,注意是 免费!免费!免费! 博客地址:https://1902756969.github.io/Hexo/ github地址:https://github.com/ 注册,注意是英文,因为是外链所以给大家推荐一款代理加速(不是翻墙)软件 FastGithub.UI:https://cloud.tsinghua.edu.cn/d/df482a15afb64dfeaff8/files/?p=%2Ffastgithu

    2024年02月01日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包