写点什么

Hexo 框架 +Github 搭建免费静态博客教程(一)

作者:程序员余白
  • 2022-11-10
    陕西
  • 本文字数:5047 字

    阅读完需:约 17 分钟

Hexo框架+Github 搭建免费静态博客教程(一)

前言

  • 完全免费的搭建个人博客,没有任何收费,零基础小白也能上手,不需要编程基础,跟着操作来即可。


  • 首先:

    要了解一下我们搭建博客要用到的框架:Hexo 是高效的静态站点生成框架,它基于 Node.js。通过 Hexo,你可以直接使用 Markdown 语法来撰写博客。

    相信很多小伙伴写工程都写过 README.md 文件吧,对,就是这个格式的!写完后只需两三条命令即可将生成的网页上传到你的 github 上,然后别人就可以看到你的网页啦。是不是很简单?你无需关心网页源代码的具体细节,你只需要用心写好你的博客内容就行。


  • 其次:

    本教程从框架的构建、部署、关键页面的生成、在到优化,一条龙服务

  • 本教程长期更,有什么问题下方留言,或者联系我,我及时修改


  • 最后

    在这里提供了别人的源码,看上眼了,如果有基础的兄弟,可以直接拉别人的源码然后安装依赖,然后改一改,这部分兄弟可以直接看快速搭建自己的静态博客章节

  • 温馨提示:拉别的代码的前提是环境配好!!!!


  • 本文符号说明:

  • == 内容 == ,这个内容部分是重点内容,== 没有特殊含义望周知,下篇也是!!!


  • 附上自己搭建完成后的博客:www.vipyubai.top,可以先看效果!!

环境准备

​ 为了防止官方下载软件速度过慢,我这里提供了软件下载的链接,仅供参考!

​ 不喜欢看文档的可以看看我推荐的 b 站视频,第二个更加全面些

​ 软件失效的话记得联系我,补发!!!

  • 【2021 版本】保姆级 Hexo+Github 搭建个人博客步骤

​ 点击跳转

Node.js 安装

  • 详细步骤参考一下文章

​ https://www.cnblogs.com/liuqiyun/p/8133904.html

Git 安装

Vscode 安装

  • 后面涉及到大量代码的修改,建议大家使用 Vscode 等编辑软件

    下载链接: 「VSCodeUserSetup-x64-1.65.0.exe」 https://pan.quark.cn/s/f64b7413660c 提取码:7eMQ

  • 本文 Vscode 软件需要用到的操作说明:

    打开终端,本文用到的命令都是在终端里面输入 ==命令+回车== 的

    == ctrl + f == 查找内容的快捷键,因为配置文件的代码太多了,需要用到这个快捷键,然后在搜索框输入要搜索的内容,就能实现快速查找

    == 双击 shift == 快速文件查找【这个我是自己配的快捷键,未配置用 vscode 默认的即可】

Typora

  • 安装了这个软件,你才可以打开 .md 结尾的文档,当然你不安装,用 Vscode 打开也可以的

  • 软件安装: 「typora_0.11.15_64bit_Setup.exe」 https://pan.quark.cn/s/d36eb5eadc4c 提取码:Ze6B

Github

  • github 访问加速

    免费版本 【失效不补,网速慢就凑合下】

    ​ 「fastgithub_win 版-x64.zip」 链接:https://pan.quark.cn/s/4c170f5763d2 提取码:sFNj

    ​ 其余版本建议访问: https://github.com/dotnetcore/FastGithub

  • 收费版本

    两年出海 19 元版本

    ​ 推荐理由:两年 19 元,应该挺划算的了,用户多不用担心跑路,点击下方链接跳转

​ 链接:点此跳转

​ 工具下载: 「Clash_for_Windows__x64.7z」 链接:https://pan.quark.cn/s/349d2121514d 提取码:DvwC

  • 注册 Github 账号

​ 挂上出海软件,接下来就可以去注册一个 github 账号,用来存放我们的静态网站,

​ 注册、使用教程 CSDN 自己搜下就可以了,这里就不提供了

  • 搭建仓库

​ 打开https://github.com/,新建一个项目,如下所示:



  • 然后如下图所示,输入自己的项目名字,后面一定要加.github.io后缀,README 初始化可选可不选。名称一定要和你的 github 名字完全一样,比如你 github 名字叫abc,那么仓库名字一定要是abc.github.io 最后选择 Create 创建,项目就建成功了



快速搭建自己的静态博客

  • 如果你不想从头定慢慢开始定义一个主题的话,可以直接下载别人修改好的主题,然后自己改改配置信息

  • 克隆别人的主题的前提是,该安装的环境安装了,需要安装的环境可以参考环境准备章节,下载别人的源码可以看本教程的 Git 版本控制章节

  • 在克隆别人的主题有什么不懂的部分可以加我联系方式,一起交流!

  • 有好的开源项目,也欢迎大家补充,持续收集中!

开源博客

PS: 看博客样式,觉得可以了在克隆修改

  1. 韦阳的博客

  2. Tianlio的GitHub

Hexo 搭建与部署

一定要保证前面的环境搭建成功后,在执行该章节后面的步骤

安装 Hexo

  • 在你的电脑上任意位置,新建一个文件夹,用来存放自己的博客文件,比如我的博客存放位置D:\blog目录下。

    这里最好按照一级目录创建文件夹,然后将项目放里面,如果是二级目录注意后面配置路由的格式即可

    还有目录路径最好全英文,不要出现特殊符号和中文

  • 在该根目录下【根目录就是 blog 目录】,鼠标右击,选择Git Bash Here,打开 git 的控制台窗口 或者 vscode ,输入npm i hexo-cli -g安装 Hexo。会有几个报错,无视它就行。

  • 再安装 hexo

    CODE

  • 安装完成后,验证是否安装成功,该窗口输入hexo -v验证是否安装成功。

  • 初始化根目录

    CODE

​ 初始化的话最好出海,要不然容易失败

  • 生成 Hexo 页面:

    CODE

  • 启动服务:

    CODE

    浏览器打开http://localhost:4000/ 就可以看到我们的博客啦,

    在终端ctrl+c就可以关闭本地服务器

    ctrl + F5 刷新浏览器在本地的缓存

    这个端口号是在 hexo 的配置文件 url 处配置的,上面是默认的端口号

生成 ssh keys

  • 以下操作的所有秘钥务必自己保存好

  • 在任意文件夹位置,鼠标右击,选择Git Bash Here,输入 ssh 检查有没有安装 ssh

  • 生成 ssh 命令: ssh-keygen -t rsa -C “你注册时的邮件地址” ,总共需要敲四次回车。



  • 找到 id_rsa.pub 文件,并打开复制里面所有的代码,大致路径: c 盘——->用户———>管理员名称————>.ssh 文件夹下

​ 或者

  • git bash 中输入cat ~/.ssh/id_rsa.pub下命令,将输出的内容复制到框中,点击确定保存。

  • 打开 github,在头像下面点击settings,在新出的导航栏,找到 ssh,点击后,在新的页面点击 ssh keys 的新建钥匙,新建钥匙的 title(名称)随意起名,如:余白博客,将 id_rsa.pub 文件复制的公钥,粘贴到 key 里面,保存。



  • 测试 ssh 是否绑定成功命令: ssh -T git@github.com



部署博客到 github

  • 本章节内容建议先将后面章节看完了最后在用此步骤发布到互联网上,当然你也可以先试试

  • 修改-config.yml 文件



  • 将改配置文件最后的 deploy 部分完善,type 和 branch 是固定不变的,repository 修改为你的 github 地址

  • 注意:注意网址前面,冒号后面有一个空格


  • 你的 github 地址:在 github 找到你之前新建的仓库,然后找到仓库地址,复制仓库地址,将我的地址替换为你的即可。



  • 修改好配置文件后,在你的博客文件夹下 git bash,将本地文件上传到 github 里面,根据以下命令,一步一步的走即可:

​ 安装 hexo-deployer-git 自动部署发布工具: npm install hexo-deployer-git --save



  • 生成页面: hexo g



  • 然后输入下面命令,用户名和邮箱根据你注册 github 的信息自行修改。

BASH

  • 本地文件上传到 Github 上面:hexo d如果出现这个点击 Token 将秘钥粘贴进去即可(有这个界面的就可以忽略下面的登录步骤)



  • 然后会出现一个登录界面,输入 GitHub 账号,千万别输错了,要不然有得重来



  • 到下面输入密码这一步,先暂缓一下,先创建一个令牌,然后将创建的令牌复制粘贴进去就行【记住不要输入密码,需要将你的令牌输入进去,而不是密码】



  • 设置令牌步骤:

​ setting————->developer settings(开发者设置)————-> 后续步骤按照下方图片操作



  • 然后新建令牌,有效期 30 天,为令牌赋权限,建议把所有选项都选上,然后生成令牌



  • 将生成的令牌输入到密码那个对话框,一定要将这个令牌,拍照等方式保存好,后面在去找这个令牌它就不显示了



  • 上传到 github 后,就可以用仓库名称访问你部署的网址

博客文件夹的介绍



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

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

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

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

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

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

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

  • _config.yml 文件详解

    严格注意缩进,缩进不对也会报错,所以这里不推荐使用记事本,使用 Vscode 编辑器

  • title 部分:



  • url :只用配置第一行,其余的都不用动,更换为你的远程地址就可以了



  • 文件夹的设置,这些东西都不用管,默认即可



  • 首页的设置,用默认的就好了



  • 预设的分类,uncategorized 意思是未分类,先不用管用默认的就好



  • 日期的显示格式:用默认的就好了



  • 分页的设置:默认是一页 10 行数据,数据修改随意



Git 版本的控制

有的时候因为自己的操作代码出现误删除,你有关闭了软件,无法恢复等等

这种时候我们可以通过版本控制,来回退我们的版本,从而保证我们的代码可以恢复。

如果没有 git 基础的有些地方不理解的,可以先去看下 git 几十分钟搞定

本章节知识只是皮毛,让你快速上升,掌握以下命令也是可以的

  • 打开 github 新建一个仓库,新建完成后不要关掉这个界面



  • 新建文件 .gitignore,这个文件的作用就是帮我们过滤掉不需上传到仓库的文件,注意文件位置:根目录下

  • 代码内容如下:

    CODE

  • 终端输入,生成仓库命令 : git init

  • 建好仓库后,将仓库推送到远程上面去

    在建立 github 仓库时,有怎么推送到仓库的说明,建议将推送命令自己保存下,做好笔记!



  • CODE

  • 重要代码说明:

    第一步出现如下图信息,在进行后面步骤

    若出现的是其它的信息,请自行将信息百度后,然后修改



CODE

  • 当你仓库有内容时完成将代码推送到远程分支上面,后面就算你更换设备,都可以将代码从远程克隆下来,非常方便

  • 提供过程中有任何报错,可以将 error 后面报错信息复制,然后百度一下即可,没什么难度的

  • 克隆步骤

    CODE

网址的简单美化

  • 下面的这个个性化设置主要针对的是matery主题

​ 主题的原地址在这里:hexo-theme-matery,它的文档写得也非常的详细,还有中英文两个版本,按照文档教程安装一遍主题,然后是可以正常打开的,如果你是一般使用的话,基本没啥问题了。

  • butterfly 官方主题配置教程【 我使用的是这个主题 】

    butterfly主题

    Ps:根据帮助文档,一步一步来即可,两个主题选择一个配置安装即可,原理相同

  • 还有很多主题这里就不一一介绍了,不管你选择什么主题原理都是相通的,差异不是特别大,根据自己的喜好选择就好,但是建议选择长期维护的即可

butterfly 主题安装详细步骤

PS:建议先将 vscode 软件调教好,在进行后面的步骤

  • 使用 vscode 等编辑器软件进行文件的修改,直接将整个文件拖进该软件即可

  • 这后面的章节其实就是带大家看帮助文档,然后一些 bug 的处理,建议大家看不懂文档的结合我这篇文章理解一下

butterfly 的安装

  • 使用 npm 的方式,在 vscode 终端安装



  • 修改配置文件



  • 在终端 清理缓存 hexo clean,然后我这里报错了



​ 解决办法:

​ 在自己对应的”nodejs“文件夹下的“node_global” 下找到对应的“指令名.ps1”删除掉,然后再运行对应的指令即可

  • hexo s 运行,将网址在浏览器粘贴,最终效果如下





  • 其余的主题的安装方式和这一样,不管安装什么都要先看帮助文档。然后记得用 hexo clean 清理缓存后在运行

  • 建议将 hexo-theme-butterfly 这个文件夹剪切到 E:\Blog\themes 这个文件夹下,然后改名为 butterfly

  • 将 E:\Blog\themes\butterfly_config.yml 复制一份,然后粘贴到 blog 根目录下 ,起名为 _config.butterfly.yml

主题页面

说明:

  • 这一部分和上一部分没什么区别,就是看帮助文档,然后输入对应的命令,如果没有强调的话,就按照帮助文档的命令敲就行,重要的地方会阐明以下!!!

  • 后面的内容就是看帮助文档,一定要按照帮助文档划分的步骤来,就比如说主页配置,等这一项弄完了然后在弄下一项,后面章节我会挑重要的部分说一下

  • 鉴于每个人的根目录名称都不一样,本帖博客根目录一律以 [Blog] 指代。

  • 请优先掌握 Butterfly 主题官方文档 的内容后再来进行魔改。

主页基本信息修改

  1. 先将主页的基本信息进行完善,就是 包含 title 的部分,前面已经详细说过,这里就不详细讲述了



最后


发布于: 2022-11-10阅读数: 92
用户头像

Java全栈开发者,编程导航皮友余白~ 2022-09-01 加入

【个人网站】vipyubai.top 【联系方式】微信:joker_yubai 【软件技能】前端,Java

评论

发布
暂无评论
Hexo框架+Github 搭建免费静态博客教程(一)_Hexo_程序员余白_InfoQ写作社区