猿创征文｜Hexo+Github搭建完全免费个人博客详细教程

已于 2022-08-29 18:52:56 修改
阅读量2.4k 收藏 18
点赞数 1
分类专栏： hexo框架 文章标签： github
于 2022-08-27 11:53:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43159315/article/details/126556350
版权

前言

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

  • 首先：

    • 要了解一下我们搭建博客要用到的框架：Hexo是高效的静态站点生成框架，它基于Node.js。通过Hexo，你可以直接使用Markdown语法来撰写博客。相信很多小伙伴写工程都写过README.md文件吧，对，就是这个格式的！写完后只需两三条命令即可将生成的网页上传到你的github上，然后别人就可以看到你的网页啦。是不是很简单？你无需关心网页源代码的具体细节，你只需要用心写好你的博客内容就行。

  • 其次：

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

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

  • 最后

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

    • 本来想将文章进行排版，但是因为懒就算了，希望观看本教程时，千万仔细点

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

环境准备

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

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

​ 软件失效的话记得联系我，补发！！！

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

​ 点击跳转

Node.js安装

  • 详细步骤参考一下文章

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

  • 工具安装：「node-v14.16.0-x64.msi」链接：https://pan.quark.cn/s/16c08ef590af 提取码：JFfP

Git安装

  • 工具下载：Git-2.35.3-64-bit.exe 链接：https://pan.quark.cn/s/d1f8086f2ac4 提取码：pGQm

  • 安装步骤参考以下步骤

    ​ https://www.cnblogs.com/xueweisuoyong/p/11914045.html

Vscode安装

  • 后面涉及到代码的修改，建议大家使用 Vscode 软件

    • 安装链接： 「VSCodeUserSetup-x64-1.65.0.exe」 https://pan.quark.cn/s/f64b7413660c 提取码：7eMQ

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

      • 打开终端，本文用到的命令都是在终端里面输入命令+回车的
      • ctrl + f 查找内容的快捷键，因为配置文件的代码太多了，需要用到这个快捷键，然后在搜索框输入要搜索的内容，就能实现快速查找

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

    • 收费版本

      • 出海工具新用户白嫖一个月版本：

        「Whale.exe」链接：https://pan.quark.cn/s/7e02afc6163f 提取码：NZnv

        ​ 如果失效了记得联系我删除，在发别的白嫖版本

      • 两年出海19元版本

​ 邀请码：点此跳转

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

​

  • 注册Github账号

​ 接下来就去注册一个github账号，用来存放我们的网站，注册、使用教程 CSDN自己搜，这里就不提供了

  • 搭建仓库

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

​ image-20220801225714747

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

快速搭建自己的静态博客

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

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

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

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

开源博客

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

  1. 韦阳的博客

  2. Tianlio的GitHub

  3. 自己的老版本博客，供大家学习交流使用[整理中，待更]

Hexo搭建与部署

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

安装Hexo

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

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

    • 还有路径全英文，不要出现特殊符号

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

  • 再安装hexo

    npm install hexo --save

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

  • 初始化根目录

    hexo init
npm install

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

  • 生成Hexo页面：

    hexo g

  • 启动服务：

    hexo s

    然后浏览器打开http://localhost:4000/，就可以看到我们的博客啦，按ctrl+c关闭本地服务器。

​ 这个端口是在配置文件url处配置的

生成ssh keys

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

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

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

​ 或者

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

​

  • 打开github，在头像下面点击settings，在新出的导航栏，找到 ssh，点击后，在新的页面点击 ssh keys 的新建钥匙，新建钥匙的 title（名称）随意起名，如：余白博客，将 id_rsa.pub 文件复制的公钥，粘贴到 key 里面，保存。
image-20220802152610379
  • 测试ssh是否绑定成功命令： ssh -T git@github.com
image-20220801231554912

部署博客到 github

  • 这一部分内容先看一下，建议先将网站美化了，美化教程看下一章节，最后在用此步骤发布到互联网上，当然你也可以小试试牛刀，先试试甜头

  • 修改-config.yml文件

img
  • 将改配置文件最后的 deploy 部分完善，type和 branch 是固定不变的，repository修改为你的 github 地址 ， 注意：注意网址前面，冒号后面有一个空格
deploy:
  type: git
  repository: 你的github地址
  branch: main
  • 你的github地址：在github找到你之前新建的仓库，然后找到仓库地址，复制仓库地址，将我的地址替换为你的即可。

​ image-20220802145731910

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

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

​ img

  • 生成页面： hexo g

​ image-20220802145929980

  • 然后输入下面命令，用户名和邮箱根据你注册github的信息自行修改。
git config --global user.name "heiyushaoye"
git config --global user.email "5824795@qq.com"
  • 本地文件上传到Github上面：hexo d
    • 如果出现这个界面关掉即可

​ image-20220802183045420

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

​ image-20220802183241566

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

​ image-20220802183347638

  • 设置令牌步骤：

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

​

image-20220802114624730

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

image-20220802114843927

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

image-20220802115012539

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

博客文件夹的介绍

image-20220802180850120

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

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

  • package.json：别问我，我也不知道干嘛的。

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

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

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

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

  • _config.yml 文件详解

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

    • title部分：

      ​ image-20220802204126485

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

      image-20220802204305728

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

      image-20220802204452588

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

      image-20220802204604046

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

      image-20220802204643225

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

      image-20220802204804934

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

​ image-20220802204853131

Git版本的控制

在有的时候代码可能会丢失，代码有些错误，这种时候我们可以通过版本控制，来回退我们的版本，从而保证我们的代码不会丢失。 如果没有git基础的有些地方不理解的，可以先去看下git 几十分钟搞定，当然按照我的步骤一步一步来，没有任何问题！！！

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

​ image-20220803100423813

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

  • 代码内容如下：

    .DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.vscode/
/.idea/
.deploy_git*/
.idea
themes/butterfly/.git

  • 终端输入，生成仓库命令 ： git init

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

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

    image-20220803101940561 
    echo "# blog" >> README.md
git init                     //初始化仓库  第一步
git add .					//第二步
git add README.md
git commit -m "first commit" // 第三步，格式看下面重要代码说明
git branch -M main   // 第四步 推送到仓库
git remote add origin https://github.com/heiyushaoye/blog.git  //第五步 按照后面步骤复制就好
git push -u origin main

  • 重要代码说明：

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

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

      image-20220820030410660

git add .										将代码提交到暂存区
git commit -m "feat：初始化仓库"						提交到本地

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

  • 克隆步骤

    git clone 仓库地址
切换到你下载好的文件目录，开始下面的步骤
npm install												这是安装依赖

网址的简单美化

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

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

  • butterfly官方主题配置教程

    https://butterfly.js.org/posts/21cfbf15/

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

    ​ 我这里选择的是butterfly主题，butterfly官方文档地址： https://butterfly.js.org/posts/21cfbf15，

  • 还有很多主题这里就不一一介绍了，不管你选择什么主题原理都是相通的

butterfly主题安装详细步骤

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

  • 使用 vscode 等编辑器软件进行文件的修改，直接将整个文件拖进该软件即可
  • 这后面的章节其实就是带大家看帮助文档，然后一些 bug 的处理，建议大家看不懂文档的结合我这篇文章理解一下

butterfly的安装

  • 使用npm 的方式，在vscode终端安装
image-20220802195116500

  • 修改配置文件

    image-20220802195512536

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

    image-20220802200625850

​ 解决办法：

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

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

    image-20220802201740296

​ image-20220802201848536

​

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

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

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

主题页面

说明：

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

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

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

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

主页基本信息修改

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

    image-20220803074857161

​

博客关键页面生成

博客有一些关键页面需要手动生成，你需要什么页面，就用此方法生成即可

标签页

进入 Hexo 博客的根目录，执行：

hexo new page tags

打开 source/tags/index.md 文件，修改如下：

---
title: 标签
date: 2022-08-03 12:53:45
type: "tags"
---
分类页

进入 Hexo 博客的根目录，执行：

hexo new page categories

打开 source/categories/index.md 文件，修改如下：

---
title: 分类
date: 2022-03-11 12:56:06
type: "categories"
---
友情链接
创建友情链接页面

进入 Hexo 博客的根目录，执行：

hexo new page link

打开 source/link/index.md 文件，修改如下：

---
title: 友情链接
date: 2022-03-11 12:57:48
type: "link"
---
友情链接添加

在Hexo博客目录中的 source/friends/创建一个文件 lndex.md`，一个简单的友情链接就有了

image-20220804182129527

---
title: friends
date: 2022-08-03 08:18:23
type: "friends"
layout: "friends"
---

# 友链交换
想要交换友链的小伙伴，欢迎在留言板留言，留言格式：
* **名称：**你的博客名称
* **地址：**你的博客地址
* **简介：**一句话简介
* **头像：**你的头像地址

例如我的博客友链，大家可以加到自己博客里哦：
* **名称：**余白
* **地址：**https://heiyushaoye.github.io
* **简介：**无处不在
* **头像：**头像地址

  • 预览效果如下，就表示成功了，然后直接跳到帮助文档的404页面

    image-20220803090849053
关于我

进入 Hexo 博客的根目录，执行：

hexo new page about

打开 source/about-me/index.md 文件，修改如下：

---
title: 关于作者
date: 2022-03-11 13:01:21
type: "about"
---
  • 说明：

​ 重点：所有的文件都在source，这个文件夹下，按照官方文档提示，修改文件即可！

image-20220803075725093 image-20220803080209008
  • 修改完成后，通过路由本地预览一下好了没，要养成习惯，完成一步，预览一步，这一出现错误好纠正
    • 路由格式：http://localhost:4000/ tags

​ tags 其实就是对应的你要实现功能的名称，需要预览什么 功能，就修改成对应的功能名称

404 页面添加

  • 找到：node_modules------------>hexo-theme-butterfly------------>_config.yml

  • 【前面操作过的可以直接打开内容即可】 将文件里面的内容全部复制，执行图下面的操作，然后将所有代码粘贴到新建的文件里，这个文件就是我们主题配置的文件

  • 找到error 404 ，将帮助内容置换即可

主页背景更改

两种方式选择一个即可【 第一个使用了，没有成功的话在使用第二个，要想背景好看建议掌握第二种方式自己写，或者引入别人的css样式 】

方式一：

更改其图标、主页背景等部分内容，在主题的配置文件下

  • 更改背景的话建议使用占位图（就是将本地图片上传到图床）

    image-20220804164957434

  • 更改主页 主题背景的时候，如果要使用本地图片记得创建文件夹 img ，将图片放进此文文件，方便管理，复制其路径，粘贴到对应位置，然后在注意一下本地图片的格式即可， .表示当前路径

image-20220804144408584

  • 留意: 如果你的网站根目录不是/,使用本地图片时，需加上你的根目录。
    例如：网站是https://yoursite.com/blog,引用一张img/xx.png图片，则设置background为 url(/blog/img/xx.png)

    方式二（通过数据文件的方式）：

    ​ 在 source/_data/style.styl 文件中添加：（如果没有这个路径的话添加即可）

    // 背景
body {
  background-image:url(../images/bg.webp);
  height:100%;
  width:100%;
  background-repeat:repeat-x;
  background-attachment:fixed;
  background-size:cover;
}

//设置透明度
//侧边框的透明度设置
.sidebar-inner {
  background: rgba(255,255,255,0.8);
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.8);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.8;
}

    background-image 就是你的背景图啦。

主题配置（一）

前面章节带大家看了一下文档，当然官方文档还有很多，这里就不罗列了，希望大家掌握方法，仔细阅读文档，重要的我会在这强调

这里只强调几点：

  • 官方文档，可能格式没有设置，需要自己调整一下缩进

  • 每新增一个功能最好本地预览下，成功了在执行后面的

  • 为了以后大家配置方便，最好配置一下package.json，就可以通过编辑器运行这行代码，就不用傻傻的一个一个敲了！

    "server": "hexo clean && hexo generate && hexo server"
修改第九行，这行代码可以省去每次都要清理，然后生成静态页面，这个步骤，
然后每次运行的时候也可以不用去输入命令行，可以找到这行代码然后点击 server 运行即可

  • 都开始主题配置了，大多数修改的文件都是 _ config.butterfly.yml 这个主题配置文件

导航栏的说明：

  • 注意：

    • 圆圈是你要在 source 文件夹下建立的文件夹，名称相同，然后在新建的文件夹下，新建index.md 文件

    • 方框的内容是自己随意更改的

    • 注意一下文档的缩进

image-20220804151047939

  • 详解：

    • 分类 是指标签栏的名称
    • / 内容 / 是指路径，source文件夹下----->categories文件夹下----->i ndex.md 文件【自动去匹配】
    • fas fa-home 是图标

    ​

  • 导航栏的修改（注意二级的格式）

    menu:
  主页: / || fas fa-home
  时间线: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  链接||fas fa-list:
    友链: /link/ || fas fa-link
    关于: /about/ || fas fa-heart
字数统计
BASH
cnpm install hexo-wordcount --save

修改主题配置文件：

YMLwordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

如需调整右侧卡片网站信息内项目的数据，在文件/butterfly/layout/includes/widgets/card_webinfo.pug中操作。

目录折叠

由于我个人的目录比较大，完全展开三级目录的话，右边栏就完全被目录铺满了。butterfly主题提供了目录可折叠的选项，只需要在主题配置文件/butterfly/config.yml设置：

card_categories: 
  enable: true
  limit: 0 # if set 0 will show all
  expand: true # none/true/false
  sort_order: # Don't modify the setting unless you know how it works

主题配置（二）

重点看下我提的内容，其余想加的可以自己看下文档，然后添加上即可

  • 评论系统 （我目前使用来必力，但是我觉得没必要，为了给你们演示下，后期应该会关掉，毕竟也没多少人看我的文章）

​ 如有需要看后面章节自行添加即可

  • 搜索系统

    • 直接点 本地搜素 ------> hexo-algoliasearch 然后看帮助文档，按照文档步骤一步一步操作即可

      • 打开终端 使用命令：npm install hexo-algoliasearch --save，安装需要的插件

      • 项目的根目录 _config.yml 配置文件下，将如下我修改过的代码复制到文件末尾（官方给的那个有 坑 ）。

        search:
  path: search.xml
  field: post
  format: html
  limit: 10000

      • 看下 _config.butterfly.yml 文件的 local_search 有没有打开，打开了就预览一下效果,有搜索框了就欧克了！！

​ image-20220803160405455

​

  • 页面美化

    • 根据官方文档和我修改的beautifly，在结合你的喜好，修改一下就好了

      beautify:
  enable: true
  field: post # site/post
  title-prefix-icon: # '\f0c1'
  title-prefix-icon-color: # '#F47466'

  • 网站的副标题，根据自己的喜好调试即可，附上我的样式

    image-20220803164034567

  • 设置主页面高度，根据自己的喜好设置即可

    image-20220803165153927

  • 字数统计

    ​ 根据文档自己设置一下

  • prefetch (預加載)、pangu、pjax，将这些服务开启。（false改为true即可）

进阶文档

PS:

  • 这部分根据自己喜好，看官方文档配置即可
  • 魔改官方主题的尽头其实就是默认就好哈哈

gulp压缩

​ 根据下方推荐视频配置即可

随着网站的发展，你的文件会越来越多，安装这个插件，可以压缩代码，从而实现代码部分的优化,根据我的步骤一步一步操作即可

安装gulp的cli：
	npm install --global gulp-cli
	
安装gulp本身工具：
	npm install gulp -g

npm install gulp-htmlclean --save-dev

npm install --save gulp-html-minifier-terser

npm install gulp-clean-css --save-dev

npm install --save-dev gulp-uglify

npm install --save-dev gulp-babel @babel/core @babel/preset-env

npm install --save-de
v gulp-imagemin
  • 在根目录下，创建文件 gulpfile.js 文件

添加来必力评论系统

  • 我选择这个系统，是因为这个系统能过滤一些不友好的评论，评论能及时提醒、免费等，但是用了几天后发现，太简洁了于是换了Twikoo 评论系统，就不做过多的介绍了。

  • 来比力可以看我的教程，并附上一篇大佬的教程：Vercel + MongoDB 方案搭建 Twikoo 评论系统 包含全部评论系统

​ 当然也可以选择其它的，自己根据帮助文档配置下 喜欢折腾，美观的就不建议这个评论系统了，建议 Twikoo

​ 来比力评论系统

  • 在主题配置文件找到 comments

    image-20220803173343335

  • 注册来必力，然后登录，然后右上角管理页面，输入必要的信息，最后出现以下的界面，将对应的uid 输入配置文件即可

    image-20220803174708485

​

​ image-20220803174840722

​ 粘贴的时候注意格式，只粘贴引号里面的内容，还有冒号后面有一个空格

  • 在来必力系统进行一些必要的设置，比如：评论邮件提醒，选择登录方式等等

  • 最后本地运行，随便找一篇文章，看效果即可

    image-20220803175530564

插入代码自定义样式的说明

  • 自定义代码的拆入方法

    • 先找到 主题配置文件的 inject

      ​ 一般样式文件会放到 head 里面 ，js文件放在 bottom 里面

    • 新建文件夹，按照箭头位置创建即可，名称随意

      image-20220803180720134

    • 将新建的文件夹，引入到 inject 里面即可，然后运行项目即可

      image-20220803181203355

  • 底部的样式修改（掌握方法后，直接去网上找一些别人改好的样式，复制粘贴即可）

    方法：直接F12然后找到你要修改的标签id，然后返回刚才那个建好的css文件，在里面添加css代码，修改对应的样式即可

    比如修改底部样式为透明

    image-20220803181853683

image-20220803182602841

  • 底部添加多个内容信息，并且点击跳转的说明：（有需要的自行了解一下）

    image-20220803184455538

​ 具体效果如下：

​ image-20220803184107209

博客添加文章说明

  • 首先在博客根目录下右键打开git bash，安装一个扩展npm i hexo-deployer-git。

  • 然后输入 hexo new post “article title” ，新建一篇文章。article title 是你的文件名称，自行更改

  • 然后打开D:blog\source\_posts的目录，可以发现下面多了一个.md文件，在内容部分就可以添加你想加入的内容即可（ps：图片最好上传到图床）

  • 编写完markdown文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。

    hexo clean
hexo g
hexo s
hexo d

    ​

  • 博客文件的说明：

    • .md 文件的下面这部分是你的文章信息的配置，根据官方文档或者安装相应的插件，调整为对应的属性即可，这些属性什么含义，参考官方帮助文档即可

      image-20220808175748541

    • 在这个部分下面就是你文章的主题内容了，根据 markdown 的语法自行编辑即可

    • 安装了什么插件就加入对应的标签信息配置即可

博客的部署

通过前面的步骤，你的网址已经出具成果了，想必大家已经迫不及待的想看看成果了把，这个章节就和大家唠唠部署这件事，

首先需要明确：通过部署可以提高你博客的访问速度，请大家务必看完此章节内容

域名

推荐： .top 结尾的域名，首年新用户只需要1元，来年只需要25一年

购买方式：什么平台都可以

域名的备案授权

  • 用新用户的身份买一个轻量的服务器

    • 腾讯云、阿里云等，尽量域名在哪买的就在那买服务器

  • 某宝去买授权嘛，备案域名

  • 服务器到期后，可以不续费服务器，然后备案，具体的方式就不说了，下去自行了解

双线部署及全站 CDN 加速

以前 coding 部署是国内用的人最多的方式，乃何被某腾收购，需要域名并且备案

当然我这里提供两套方案：收费的和不收费的自行选择即可，（ps：会详细注明那套收费那套不收费）

准备

下面两个方案这个部分都需要先操作这个单元，当然这是有域名的情况下，没有域名的就可以直接看 vercel 免费部署

  • 部署到 GitHub

    这里就不bb了，看上面内容就行

  • 购买域名

    • 这里不再赘述，要会基本的解析操作。

    • 添加解析记录（ps：这个小节看下，后面 vercel 部署还会在讲）

      ​ image-20220808183452273

  • 绑定域名

    • 首先要获取博客当前默认域名的 ip ,打开 cmd 输入

      ping username.github.io
# username记得替换成你的用户名

      image-20220808184708869

  • 获取到的ip地址填入域名解析

    image-20220808184744745

  • 进入解析页面后需要添加两条记录。

    image-20220808184821197

    • 两条记录的说明：

      ​ 实质起作用的其实是第一条A记录，而第二条CNAME记录指向的其实是www的二级域名。

  • Github的 Pages 功能 自定义上你的域名

    • 步骤：打开 Github你的博客项目----> Settings 选项卡 ----> GiPages 选项：在 Custom domain 添加你的自定义域名

      ​ 刷新页面 如果能勾选 Enforce HTTPS 即完成。

      image-20220808183150209

问题汇总
  • 如果你将你的域名配置到 github 上了，以后修改了，重新部署的话，GitHub显示已经上传成功了，但是用你的域名访问，没有变话，这就需要你重新去 解析一下域名
部署到 coding

此方案为收费方案

部署到vercel

此方案为免费方案，但是还是部署在国外的懂的都懂

  • 注册账号

    进入Vercel官网，先去注册一个账号，使用GIthub账号来登录Vercel。

  • 部署网站

    进入 Dashboard，点击New project 创建项目

    image-20220808190639367

  • 这里可以从已有的 git repository 中导入，也可以选择一个模板。将你的博客项目导入即可

    image-20220808190831196

  • 接下来 点击Deploy，然后静等网站安装依赖以及部署

  • 等项目部署完成，到你的项目出现以下页面，将箭头所指网页，到浏览器就可以访问了

    image-20220808191215000

自定义域名

如果有自己的域名，还可以在 vercel 中进行设置。首先进入 blog 的控制台，在Settings -> Domains 添加域名。‘

image-20220808191420297

  • 接着域名需要 DNS 解析到 vercel 提供的记录值

    image-20220808191509767

  • 登录所在的域名服务商，根据 Vercel 提供的记录值，添加两条记录

    image-20220808191609850

  • 此时回到Vercel，可以看到记录值成功生效。

    image-20220808191706787

  • 此时访问自己的域名，同样也能访问到页面

说明

  • 当主分支有代码被推送，Vercel 将会重新拉取代码，并重新构建部署（构建速度可观）

  • 同时vercel还支持serverless，也就是说，不仅能部署静态站点，还能部署后端服务，不过肯定有一定的限制。

  • 默认状态下，Vercel 将会颁发并自动更新 SSL 证书。

  • 也可以用vercel的部署+又拍云cdn 对访问速度进行优化，感兴趣的可以操作下

自动部署

魔改记录

  • 到这个板块，希望你看完了官方文档里面的内容后，将已经添加的必要功能添加后，在看此章节后面的内容

  • 到这里了也希望大家记录一下自己的魔改记录，方便以后！！！

  • 这个板块的内容其实就是，就是在你网址美化的基础上进行魔改，当网页该有的轮子都造出来后，就是怎么让你的网页变的炫酷起来，那就是添加css、js等特效，具体的记录请参考这篇文章：butterfly美化记录

问题汇总

常见问题

  1. 安装Hexo时遇见的报错

    image-20220801193727750

​ 解决办法：

​ 重新配置了下npm安装的全局模块所在的路径，以及缓存cache的路径，又检查了一下环境变量是否正确

设置全局模块命令：

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

设置cache模块命令

npm config set cache "D:\node\node_cache"
  1. 上传到GitHub碰到 “ Deployer not found ” 问题

​ 解决办法：重新 deploy 即可。

npm install hexo-deployer-git --save

然后 hexo d 就能提交成功

问题解决思路

  • 我在安装hexo 的过程中也出现了很多问题，我谈谈是怎么解决的

    • 遇见问题不要慌，先找找报错信息，找到报错信息后，首先要弄懂什么意思，看是自己配置问题还是其它问题

    • 如果报错的是某个文件第几行的话，大概率是配置问题，就得去提示的文件检查语法

    • 若不是配置问题在百度，大多数情况下都会有解决教程，然后根据解决办法解决下

    • 若你将报错信息百度，未能百度到答案，这时就要求助大佬或者使用git进行版本回退

    • 最后终极大法，那就是删除干净文件重新安装即可

总结

  • 按照步骤本教程一个基本的网页就搭建出来了，后面就是对网页的美化和优化

  • 优化推荐阅读博客

  • 这个系统毕竟是白嫖的，我相信大家的初衷也是白嫖把哈哈，但是有些事情我还得说明下：

    • 虽然是白嫖的，但访问速度和系统稳定性，是网站的最重要的标准，如果你不想花钱的话，我建议有些炫酷的美化功能能省则省，把该有的页面完善下就可以了，毕竟简洁也是一种美

  • 在你美化博客的过程中，最好简单记录下你使用了什么功能，这样后面修改，更新相对容易些，比如：你觉得有更好的方案了，你就可以根据自己的记录，去删除掉之前的然后加上新的

  • 说明：有什么问题欢迎大家来星球大家共同探讨，或者给我留言

  • 最后：既然，你迈出了这一步就好好diy，维护好你的系统！！！！

程序员余白
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
【源码开放】Hexo+Github+Coding 博客butterfly 和 matery 主题 搭建完全教程【整理】
01-08
注意，本篇博客并不是从零手把手教你去搭博客，那样会很花费时间去写一篇文档，况且从零搭建的博客一搜也是一大把，太多重复的内容就没必要继续写了。因此，对于不知道怎么搭建的伙伴，我会提供我搭建时用到的学习...
使用 Hexo+GitHub 搭建个人免费博客教程
十九万里的博客
12-29 3039
文章是转载自知乎教程 看了挺多还是这个好用 前言近些年来很多用户都喜欢使用 GitHub Pages 来搭建 Hexo 静态博客网站，其最吸引人的莫过于完全免费使用，并且非常稳定。虽然搭建时比较麻烦，有点折腾，但是配置完成后，基本不需要操心维护的事，甚至放了几年都忘记了，打开来看文章依然还在。本文就详细介绍下如何使用 Hexo + GitHub 搭建免费个人博客网站的教程。为了照顾小白用户（第一次使用 GitHub 和 Hexo），尽可能详细，包括常见的坑和问题都有提示说明。下面目录中第 3~5 步为最.
使用hexo+github搭建个人博客
weixin_64797822的博客
07-26 732
本文讲述如何使用hexo+github搭建属于自己的个人博客，并且配置相应的主题使自己的博客更加美观
8种方式用搭建个人博客
不安分的猿人的专栏
03-15 1266
最后，我对八种方式搭建博客进行了简单的归类：1.前端同学可以搭建的博客三种方式：Github + hexo matery ，VuePress +Gitee，ThinkJS + MySQL 搭建博客需要掌握Node.js，前两种方式本地写好markdown文件，项目打包的时候会按照文章内容，生成对应的文章页面。第三种方式会将文章内容保存到数据库，系统后台有发布文章的功能。第一种方式有丰富的插件和主题，可自由切换。第二种方式是 Vue 的一款基于文档型的博客，主题较少，支持自定义修改。
使用 github 仓库搭建 Hexo教程，Hexo配置文件解读，Hexo安装next主题及主题配置，美化
sywdebug的博客
02-22 5691
这是之前写的文章了，重新补一补，把另外写的都和在一起了，出问题方便找。
2021——使用hexo+github搭建个人博客
qq_56591814的博客
12-31 1295
参考资料：《使用hexo+github免费搭建个人博客网站超详细教程》 视频资料《【2021最新版】保姆级Hexo+github搭建个人博客》 一、必备软件安装 首先安装Node.js、git，再安装hexo。 安装nodejs参考帖子《》 安装git工具，以及github注册创建仓库，参考我另一篇帖子《GitHub 详细教程》。 二、 hexo本地搭建博客 2.1 本地生成博客内容 新建blog文件夹，运行hexo init。输入hexo s静态生成本地网页。 2.2 博客发布到网上 2.2.1 配置主题
Hexo+Github博客搭建教程
热门推荐
分享思想，留下痕迹。
05-08 3万+
注意，这篇文章篇幅较长，主要针对新手，每一步很详细，所以可能会显得比较啰嗦，所以建议基础比较好小伙伴根据目录选择自己感兴趣的部分跳着看，不要文章没看，上来先喷一下！谢谢*[Math Processing Error]⊙o⊙*。 教程内容随意复制使用，引用的话请加一个参考链接，谢谢！去年在博客园注册了自己的第一个博客，当时初衷就是想拿来作为自己的在线笔记本，做做学习记录，分享一些学到的东西，使用第三方提供的博客服务其实也挺方便，现在市面上提供类似服务的博客网站也很多，如CSDN，博客园，简书等平台，可以直接在
Hexo+github搭建个人博客网站
黑马程序员官方博客
03-31 1446
Hexo 是一个静态网站生成器，GitHub Pages 可以免费帮我们托管静态网站，本文主要介绍如何结合两者搭建一个博客网站。
超详细Hexo+Github Page搭建技术博客教程
小眼哥的博客
11-21 2743
超详细Hexo+Github Page搭建技术博客教程
Hexo + GitHub史上最全搭建个人blog教程
耶多✌
08-19 1811
Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。大家可以进入hexo官网进行详细查看，因为Hexo的创建者是台湾人，所以对中文的支持很友好，可以选择中文进行查看。而且 hexo 作为一个快速简洁的博客框架，用它来搭建博客真的非常容易。在文件根目录下的，就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。我们博客的默认图标是N，不过Next支持修改图标。
如何使用Github搭建个人博客
bmseven的博客
06-14 3700
在本文中，我将介绍如何使用GitHub搭建个人博客~
手把手教你用Hexo+Github搭建属于自己的博客(详细图文)
10-19
越来越多的朋友选择自己架设自己的博客，以来方便个性样式二来也能带来不少收入，大部分朋友都会选择wordpress搭建个人博客，这里为大家分享使用Hexo+Github搭建开发者博客的方法,需要的朋友可以参考下
博客系列：Hexo+Github博客搭建教程
01-03
博客系列：Hexo+Github博客搭建教程
hexo+github搭建属于自己的博客(小白)
04-16
没有任何理解成本，一步一步教程，搭建过程中发生的错误很详细的介绍，搭建属于你自己的博客
hexo +GitHub个人搭建的博客
08-04
博主自己使用hexo+github搭建博客的源码
添加github SSH Key
m0_69594200的博客
04-22 221
使用 SSH 协议，您可以连接远程服务器和服务并对其进行身份验证。使用 SSH 密钥，您可以连接到 GitHub，而无需在每次访问时提供您的用户名和个人访问令牌。您还可以使用 SSH 密钥来签署提交。添加 SSH keys。
远程仓库.github/workflow的 yml如何配置
weixin_43719925的博客
04-24 1082
git 远程仓库.github/workflow的 yml如何配置。
什么是 GitHub Wiki 以及如何使用它？
晓风晓浪
04-20 1258
Wiki 的侧边栏、首页和页脚的自定义选项有限。但是你可以使用 HTML、CSS 和 Markdown 来扩展这些选项。我们已经讨论了首页，现在我们将讨论页脚和侧边栏。页脚和侧边栏显示或包含诸如联系信息、导航链接、社交媒体链接等有用的链接。页脚显示在站点的每个页面底部，侧边栏通常是网页左侧或右侧的垂直列。两者都在 wiki 的所有页面上可见。有两种方法可以在 GitHub wiki 中创建侧边栏。使用 GitHub UI在你的 IDE 中本地创建。
Github创建远程仓库（项目）
最新发布
mo_sss的博客
04-24 366
每个人都有惰性，但不断学习是好好生活的根本，共勉！
hexo+github搭建个人博客
12-08
以下是使用Hexo和GitHub Pages搭建个人博客的步骤： 1.安装Node.js和Git 2.安装Hexo ```shell npm install -g hexo-cli ``` 3.初始化Hexo shell hexo init blog cd blog npm install ``` 4.配置Hexo 打开根目录下的_config.yml文件，修改以下内容： ```yaml deploy: type: git repo: <your-github-username>.github.io branch: master ``` 5.安装部署插件 ```shell npm install hexo-deployer-git --save ``` 6.创建GitHub仓库 在GitHub上创建一个名为<your-github-username>.github.io的仓库。 7.部署博客 ```shell hexo clean hexo g hexo d ``` 现在你的个人博客已经部署到GitHub Pages上了。 --相关问题--:

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员余白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值